brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

messageTray: Move notification banners to the top

Browse Source 
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
This commit is contained in:
Florian Müllner 2015-02-19 11:08:39 +01:00
parent aedc2428be
commit e189a34fc0
4 changed files with 32 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass

@ -1 +1 @@
Subproject commit db26fd93596855ea5ca9966e71b10041ee427996
Subproject commit 860102c31bda598df340f2d68ea5be18e52da176

14
data/theme/gnome-shell.css
View File

@ -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 {

10
js/ui/layout.js
View File

@ -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() {

63
js/ui/messageTray.js
View File

@ -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();
}