From e189a34fc0973c7f1f61e06a98fd4e22ab01e683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Thu, 19 Feb 2015 11:08:39 +0100 Subject: [PATCH] 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/gnome-shell-sass | 2 +- data/theme/gnome-shell.css | 14 ++++----- js/ui/layout.js | 10 +++--- js/ui/messageTray.js | 63 ++++++++++++------------------------- 4 files changed, 32 insertions(+), 57 deletions(-) diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass index db26fd935..860102c31 160000 --- a/data/theme/gnome-shell-sass +++ b/data/theme/gnome-shell-sass @@ -1 +1 @@ -Subproject commit db26fd93596855ea5ca9966e71b10041ee427996 +Subproject commit 860102c31bda598df340f2d68ea5be18e52da176 diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 37691fe83..f9e2086b7 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 8842a7519..3f9a05c31 100644 --- a/js/ui/layout.js +++ b/js/ui/layout.js @@ -238,8 +238,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() }); @@ -284,6 +285,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(); }, @@ -453,10 +457,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 2e400dc82..2d1bf9f83 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(); }