[gnome-shell/wip/fmuellner/notification-redux+sass: 127/141] messageTray: Move notification banners to the top

[Florian Müllner <fmuellner src gnome org>]

commit 73dbe101b5caff8bf1ad8ec632701e43a63690b3
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Feb 19 11:08:39 2015 +0100

    messageTray: Move notification banners to the top
    
    The new design has banners appear from underneath the panel, so move
    them to the top and clip them to the work area.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=744850

 data/theme/_common.scss    |   13 ++++-----
 data/theme/gnome-shell.css |   14 ++++-----
 js/ui/layout.js            |   10 +++---
 js/ui/messageTray.js       |   63 ++++++++++++++------------------------------
 4 files changed, 37 insertions(+), 63 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 31db0be..4faa547 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -1324,22 +1324,21 @@ StScrollBar {
   .notification { 
     font-size: 11pt;
     width: 34em;
-    border-radius: 6px 6px 0 0;
+    margin: 5px;
+    border-radius: 6px;
     color: $_bubble_fg_color;
     background-color: $_bubble_bg_color;
     border: 1px solid $borders_color;
-    border-bottom-width: 0;
     //box-shadow: 0 1px 4px black;
     spacing-rows: 4px;
-    padding: 8px 8px 4px 8px;
+    padding: 8px;
     spacing-columns: 10px;
-    &.multi-line-notification { padding-bottom: 8px; }
   }
   .notification-unexpanded {
     // We want to force the actor at a specific size, irrespective
     // of its minimum and preferred size, so we override both
-    min-height: 36px;
-    height: 36px;
+    min-height: 48px;
+    height: 48px;
   }
   // We use row-span = 2 for the image cell, which prevents its height preferences to be
   // taken into account during allocation, so its height ends up being limited by the height
@@ -1350,7 +1349,7 @@ StScrollBar {
   }
   .notification-body { spacing: 5px; }
   .notification-actions {
-    paddinf-top: 18px;
+    padding-top: 18px;
     spacing: 6px;
   }
   .summary-source-counter {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 27d9218..f712ca0 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1149,20 +1149,18 @@ StScrollBar {
 .notification {
   font-size: 11pt;
   width: 34em;
-  border-radius: 6px 6px 0 0;
+  margin: 5px;
+  border-radius: 6px;
   color: #eeeeec;
   background-color: #2e3436;
   border: 1px solid #1c1f1f;
-  border-bottom-width: 0;
   spacing-rows: 4px;
-  padding: 8px 8px 4px 8px;
+  padding: 8px;
   spacing-columns: 10px; }
-  .notification.multi-line-notification {
-    padding-bottom: 8px; }
 
 .notification-unexpanded {
-  min-height: 36px;
-  height: 36px; }
+  min-height: 48px;
+  height: 48px; }
 
 .notification-with-image {
   min-height: 159px; }
@@ -1171,7 +1169,7 @@ StScrollBar {
   spacing: 5px; }
 
 .notification-actions {
-  paddinf-top: 18px;
+  padding-top: 18px;
   spacing: 6px; }
 
 .summary-source-counter {
diff --git a/js/ui/layout.js b/js/ui/layout.js
index 7c0b703..cd6d64e 100644
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -243,8 +243,9 @@ const LayoutManager = new Lang.Class({
                               Lang.bind(this, this._panelBoxChanged));
 
         this.trayBox = new St.Widget({ name: 'trayBox',
+                                       clip_to_allocation: true,
                                        layout_manager: new Clutter.BinLayout() }); 
-        this.addChrome(this.trayBox);
+        this.addChrome(this.trayBox, { affectsInputRegion: false });
 
         this.modalDialogGroup = new St.Widget({ name: 'modalDialogGroup',
                                                 layout_manager: new Clutter.BinLayout() });
@@ -289,6 +290,9 @@ const LayoutManager = new Lang.Class({
     init: function() {
         Main.sessionMode.connect('updated', Lang.bind(this, this._sessionUpdated));
 
+        let trayConstraint = new MonitorConstraint({ primary: true, work_area: true });
+        this.trayBox.add_constraint(trayConstraint);
+
         this._loadBackground();
     },
 
@@ -458,10 +462,6 @@ const LayoutManager = new Lang.Class({
         this.panelBox.set_size(this.primaryMonitor.width, -1);
 
         this.keyboardIndex = this.primaryIndex;
-
-        this.trayBox.set_position(this.bottomMonitor.x,
-                                  this.bottomMonitor.y + this.bottomMonitor.height);
-        this.trayBox.set_size(this.bottomMonitor.width, -1);
     },
 
     _panelBoxChanged: function() {
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 2e400dc..2d1bf9f 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1428,7 +1428,7 @@ const MessageTray = new Lang.Class({
         this.clearableCount = 0;
 
         Main.layoutManager.trayBox.add_actor(this.actor);
-        Main.layoutManager.trackChrome(this.actor);
+        Main.layoutManager.trackChrome(this.actor, { affectsInputRegion: true });
         Main.layoutManager.trackChrome(this._closeButton);
 
         global.screen.connect('in-fullscreen-changed', Lang.bind(this, this._updateState));
@@ -1656,10 +1656,9 @@ const MessageTray = new Lang.Class({
 
     _onNotificationLeftTimeout: function() {
         let [x, y, mods] = global.get_pointer();
-        // We extend the timeout once if the mouse moved no further than MOUSE_LEFT_ACTOR_THRESHOLD to 
either side or up.
-        // We don't check how far down the mouse moved because any point above the tray, but below the exit 
coordinate,
-        // is close to the tray.
+        // We extend the timeout once if the mouse moved no further than MOUSE_LEFT_ACTOR_THRESHOLD to 
either side.
         if (this._notificationLeftMouseX > -1 &&
+            y < this._notificationLeftMouseY + MOUSE_LEFT_ACTOR_THRESHOLD &&
             y > this._notificationLeftMouseY - MOUSE_LEFT_ACTOR_THRESHOLD &&
             x < this._notificationLeftMouseX + MOUSE_LEFT_ACTOR_THRESHOLD &&
             x > this._notificationLeftMouseX - MOUSE_LEFT_ACTOR_THRESHOLD) {
@@ -1760,6 +1759,10 @@ const MessageTray = new Lang.Class({
         this._updateState();
     },
 
+    _clampOpacity: function() {
+        this.actor.opacity = Math.max(0, Math.min(this.actor._opacity, 255));
+    },
+
     _onIdleMonitorBecameActive: function() {
         this._userActiveWhileNotificationShown = true;
         this._updateNotificationTimeout(2000);
@@ -1784,7 +1787,7 @@ const MessageTray = new Lang.Class({
         this.actor.add_actor(this._notification.actor);
 
         this.actor.opacity = 0;
-        this.actor.y = 0;
+        this.actor.y = -this._notification.actor.height;
         this.actor.show();
 
         this._updateShowingNotification();
@@ -1827,10 +1830,12 @@ const MessageTray = new Lang.Class({
         // We use this._showNotificationCompleted() onComplete callback to extend the time the updated
         // notification is being shown.
 
-        let tweenParams = { opacity: 255,
-                            y: -this.actor.height,
+        let tweenParams = { y: 0,
+                            _opacity: 255,
                             time: ANIMATION_TIME,
-                            transition: 'easeOutQuad',
+                            transition: 'easeOutBack',
+                            onUpdate: this._clampOpacity,
+                            onUpdateScope: this,
                             onComplete: this._showNotificationCompleted,
                             onCompleteScope: this
                           };
@@ -1858,7 +1863,7 @@ const MessageTray = new Lang.Class({
 
     _notificationTimeout: function() {
         let [x, y, mods] = global.get_pointer();
-        if (y > this._lastSeenMouseY + 10 && !this._notificationHovered) {
+        if (y < this._lastSeenMouseY - 10 && !this._notificationHovered) {
             // The mouse is moving towards the notification, so don't
             // hide it yet. (We just create a new timeout (and destroy
             // the old one) each time because the bookkeeping is
@@ -1900,16 +1905,18 @@ const MessageTray = new Lang.Class({
 
         if (animate) {
             this._tween(this.actor, '_notificationState', State.HIDDEN,
-                        { y: this.actor.height,
-                          opacity: 0,
+                        { y: -this.actor.height,
+                          _opacity: 0,
                           time: ANIMATION_TIME,
-                          transition: 'easeOutQuad',
+                          transition: 'easeOutBack',
+                          onUpdate: this._clampOpacity,
+                          onUpdateScope: this,
                           onComplete: this._hideNotificationCompleted,
                           onCompleteScope: this
                         });
         } else {
             Tweener.removeTweens(this.actor);
-            this.actor.y = this.actor.height;
+            this.actor.y = -this.actor.height;
             this.actor.opacity = 0;
             this._notificationState = State.HIDDEN;
             this._hideNotificationCompleted();
@@ -1939,10 +1946,6 @@ const MessageTray = new Lang.Class({
     },
 
     _expandNotification: function(autoExpanding) {
-        if (!this._notificationExpandedId)
-            this._notificationExpandedId =
-                this._notification.connect('expanded',
-                                           Lang.bind(this, this._onNotificationExpanded));
         // Don't animate changes in notifications that are auto-expanding.
         this._notification.expand(!autoExpanding);
 
@@ -1951,32 +1954,6 @@ const MessageTray = new Lang.Class({
             this._ensureNotificationFocused();
     },
 
-    _onNotificationExpanded: function() {
-        let expandedY = - this.actor.height;
-        this.actor.set_child_above_sibling(this._closeButton, null);
-        this._closeButton.show();
-
-        // Don't animate the notification to its new position if it has shrunk:
-        // there will be a very visible "gap" that breaks the illusion.
-        if (this.actor.y < expandedY) {
-            this.actor.y = expandedY;
-        } else if (this._notification.y != expandedY) {
-            // Tween also opacity here, to override a possible tween that's
-            // currently hiding the notification.
-            Tweener.addTween(this.actor,
-                             { y: expandedY,
-                               opacity: 255,
-                               time: ANIMATION_TIME,
-                               transition: 'easeOutQuad',
-                               // HACK: Drive the state machine here better,
-                               // instead of overwriting tweens
-                               onComplete: Lang.bind(this, function() {
-                                   this._notificationState = State.SHOWN;
-                               }),
-                             });
-        }
-    },
-
     _ensureNotificationFocused: function() {
         this._notificationFocusGrabber.grabFocus();
     }