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

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

commit 67a5824d9555d633dc64f7c0fa3fde4aafa89d7d
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.

 data/theme/_common.scss    |    4 +-
 data/theme/gnome-shell.css |    4 +-
 js/ui/layout.js            |   10 +++---
 js/ui/messageTray.js       |   84 ++++++++++++++------------------------------
 4 files changed, 36 insertions(+), 66 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 31db0be..255914f 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -1324,11 +1324,11 @@ 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;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 27d9218..f34b02e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1149,11 +1149,11 @@ 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;
   spacing-columns: 10px; }
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 73bb239..27ae6f4 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1382,20 +1382,15 @@ const MessageTray = new Lang.Class({
             }));
 
         this.actor = new St.Widget({ name: 'notification-container',
-                                     reactive: true,
-                                     track_hover: true,
-                                     y_align: Clutter.ActorAlign.START,
-                                     x_align: Clutter.ActorAlign.CENTER,
-                                     y_expand: true,
-                                     x_expand: true,
+                                     x_expand: true, y_expand: true,
                                      layout_manager: new Clutter.BinLayout() });
         this.actor.connect('key-release-event', Lang.bind(this, this._onNotificationKeyRelease));
-        this.actor.connect('notify::hover', Lang.bind(this, this._onNotificationHoverChanged));
 
-        this._notificationBin = new St.Bin({ y_expand: true });
+        this._notificationBin = new St.Bin({ reactive: true, track_hover: true, x_expand: true, y_expand: 
true });
+        this._notificationBin.connect('notify::hover', Lang.bind(this, this._onNotificationHoverChanged));
+        this._notificationBin.set_x_align(Clutter.ActorAlign.CENTER);
         this._notificationBin.set_y_align(Clutter.ActorAlign.START);
         this.actor.add_actor(this._notificationBin);
-        this.actor.hide();
         this._notificationFocusGrabber = new FocusGrabber(this.actor);
         this._notificationQueue = [];
         this._notification = null;
@@ -1433,6 +1428,7 @@ const MessageTray = new Lang.Class({
         Main.layoutManager.trayBox.add_actor(this.actor);
         Main.layoutManager.trackChrome(this.actor);
         Main.layoutManager.trackChrome(this._closeButton);
+        Main.layoutManager.trackChrome(this._notificationBin, { affectsInputRegion: true });
 
         global.screen.connect('in-fullscreen-changed', Lang.bind(this, this._updateState));
 
@@ -1599,10 +1595,10 @@ const MessageTray = new Lang.Class({
     },
 
     _onNotificationHoverChanged: function() {
-        if (this.actor.hover == this._notificationHovered)
+        if (this._notificationBin.hover == this._notificationHovered)
             return;
 
-        this._notificationHovered = this.actor.hover;
+        this._notificationHovered = this._notificationBin.hover;
         if (this._notificationHovered) {
             this._resetNotificationLeftTimeout();
 
@@ -1659,11 +1655,11 @@ 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 extend the timeout once if the mouse moved no further than MOUSE_LEFT_ACTOR_THRESHOLD to 
either side or down.
         // 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.
         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) {
             this._notificationLeftMouseX = -1;
@@ -1786,9 +1782,7 @@ const MessageTray = new Lang.Class({
         }));
         this._notificationBin.child = this._notification.actor;
 
-        this.actor.opacity = 0;
-        this.actor.y = 0;
-        this.actor.show();
+        this._notificationBin.y = -this._notification.actor.height;
 
         this._updateShowingNotification();
 
@@ -1830,15 +1824,19 @@ 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,
+        Tweener.addTween(this._notificationBin,
+                         { opacity: 255,
+                           time: ANIMATION_TIME,
+                           transition: 'easeOutQuad' });
+
+        let tweenParams = { y: 0,
                             time: ANIMATION_TIME,
-                            transition: 'easeOutQuad',
+                            transition: 'easeOutBack',
                             onComplete: this._showNotificationCompleted,
                             onCompleteScope: this
                           };
 
-        this._tween(this.actor, '_notificationState', State.SHOWN, tweenParams);
+        this._tween(this._notificationBin, '_notificationState', State.SHOWN, tweenParams);
    },
 
     _showNotificationCompleted: function() {
@@ -1902,18 +1900,20 @@ const MessageTray = new Lang.Class({
         this._resetNotificationLeftTimeout();
 
         if (animate) {
-            this._tween(this.actor, '_notificationState', State.HIDDEN,
-                        { y: this.actor.height,
-                          opacity: 0,
+            Tweener.addTween(this._notificationBin,
+                             { opacity: 0,
+                               time: ANIMATION_TIME,
+                               transition: 'easeOutQuad' });
+            this._tween(this._notificationBin, '_notificationState', State.HIDDEN,
+                        { y: -this._notificationBin.height,
                           time: ANIMATION_TIME,
-                          transition: 'easeOutQuad',
+                          transition: 'easeOutBack',
                           onComplete: this._hideNotificationCompleted,
                           onCompleteScope: this
                         });
         } else {
-            Tweener.removeTweens(this.actor);
-            this.actor.y = this.actor.height;
-            this.actor.opacity = 0;
+            Tweener.removeTweens(this._notificationBin);
+            this._notificationBin.y = -this._notificationBin.height;
             this._notificationState = State.HIDDEN;
             this._hideNotificationCompleted();
         }
@@ -1931,7 +1931,6 @@ const MessageTray = new Lang.Class({
         this._pointerInNotification = false;
         this._notificationRemoved = false;
         this._notificationBin.child = null;
-        this.actor.hide();
     },
 
     _expandActiveNotification: function() {
@@ -1942,10 +1941,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);
 
@@ -1954,31 +1949,6 @@ const MessageTray = new Lang.Class({
             this._ensureNotificationFocused();
     },
 
-    _onNotificationExpanded: function() {
-        let expandedY = - this.actor.height;
-        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();
     }