messageTray: Add notification close button inside notification

And remove the old close button outside it.
This commit is contained in:
Jasper St. Pierre 2014-06-03 14:55:57 -04:00
parent 826a7fa02a
commit 50421ede37
2 changed files with 27 additions and 37 deletions

View File

@ -1540,6 +1540,11 @@ StScrollBar StButton#vhandle:active {
spacing: 8px;
}
.notification-close-button {
padding: 8px;
border-radius: 4px;
}
.notification-action-area {
padding: 8px;
}
@ -1555,7 +1560,8 @@ StScrollBar StButton#vhandle:active {
}
.notification-main-button:hover,
.notification-button:hover {
.notification-button:hover,
.notification-close-button:hover {
background: rgba(100,100,100,0.9);
}

View File

@ -494,12 +494,12 @@ const Notification = new Lang.Class({
// ,. this._iconBin ,. this._titleLabel
// | ,-- this._second|ryIconBin
// .----|--------|---------------|-----------.
// | .----. | .----.-----------------------. |
// | | | | | | |--- this._titleBox
// | '....' | '....'.......................' |
// | | |- this._hbox
// | | this._bodyBin |-.
// |________|________________________________| |- this.actor
// | .----. | .----.-------------------. | X |
// | | | | | | |-|----- this._titleBox
// | '....' | '....'...................' | |
// | | | |- this._hbox
// | | this._bodyBin | |-.
// |________|____________________________|___| |- this.actor
// | this._actionArea |-'
// |_________________________________________|
// | this._buttonBox |
@ -517,7 +517,7 @@ const Notification = new Lang.Class({
this._mainButton.connect('clicked', Lang.bind(this, this._onClicked));
this.actor.add_child(this._mainButton);
// Separates the icon and title/body
// Separates the icon, title/body and close button
this._hbox = new St.BoxLayout({ style_class: 'notification-main-content' });
this._mainButton.child = this._hbox;
@ -526,8 +526,17 @@ const Notification = new Lang.Class({
this._titleBodyBox = new St.BoxLayout({ style_class: 'notification-title-body-box',
vertical: true });
this._titleBodyBox.set_x_expand(true);
this._hbox.add_child(this._titleBodyBox);
this._closeButton = new St.Button({ style_class: 'notification-close-button',
can_focus: true });
this._closeButton.set_y_align(Clutter.ActorAlign.START);
this._closeButton.set_y_expand(true);
this._closeButton.child = new St.Icon({ icon_name: 'window-close-symbolic', icon_size: 16 });
this._closeButton.connect('clicked', Lang.bind(this, this._onCloseClicked));
this._hbox.add_child(this._closeButton);
this._titleBox = new St.BoxLayout({ style_class: 'notification-title-box',
x_expand: true, x_align: Clutter.ActorAlign.START });
this._secondaryIconBin = new St.Bin();
@ -804,7 +813,6 @@ const Notification = new Lang.Class({
expand: function(animate) {
this.expanded = true;
this._sync();
this.emit('expanded');
},
collapseCompleted: function() {
@ -821,6 +829,10 @@ const Notification = new Lang.Class({
this.destroy();
},
_onCloseClicked: function() {
this.destroy();
},
_onDestroy: function() {
if (this._destroyed)
return;
@ -1523,11 +1535,6 @@ const MessageTray = new Lang.Class({
this._clickedSummaryItemMouseButton = -1;
this._clickedSummaryItemAllocationChangedId = 0;
this._closeButton = Util.makeCloseButton();
this._closeButton.hide();
this._closeButton.connect('clicked', Lang.bind(this, this._closeNotification));
this._notificationWidget.add_actor(this._closeButton);
this._userActiveWhileNotificationShown = false;
this.idleMonitor = Meta.IdleMonitor.get_core();
@ -1558,7 +1565,6 @@ const MessageTray = new Lang.Class({
this._keyboardVisible = false;
this._notificationState = State.HIDDEN;
this._notificationTimeoutId = 0;
this._notificationExpandedId = 0;
this._summaryBoxPointerState = State.HIDDEN;
this._summaryBoxPointerTimeoutId = 0;
this._desktopCloneState = State.HIDDEN;
@ -1582,7 +1588,6 @@ const MessageTray = new Lang.Class({
Main.layoutManager.trayBox.add_actor(this._notificationWidget);
Main.layoutManager.trackChrome(this.actor);
Main.layoutManager.trackChrome(this._notificationWidget);
Main.layoutManager.trackChrome(this._closeButton);
global.screen.connect('in-fullscreen-changed', Lang.bind(this, this._updateState));
Main.layoutManager.connect('hot-corners-changed', Lang.bind(this, this._hotCornersChanged));
@ -1734,14 +1739,6 @@ const MessageTray = new Lang.Class({
this._updateState();
},
_closeNotification: function() {
if (this._notificationState == State.SHOWN) {
this._closeButton.hide();
this._notification.emit('done-displaying');
this._notification.destroy();
}
},
contains: function(source) {
return this._sources.has(source);
},
@ -2398,10 +2395,6 @@ const MessageTray = new Lang.Class({
_hideNotification: function(animate) {
this._notificationFocusGrabber.ungrabFocus();
if (this._notificationExpandedId) {
this._notification.disconnect(this._notificationExpandedId);
this._notificationExpandedId = 0;
}
if (this._notificationClickedId) {
this._notification.disconnect(this._notificationClickedId);
this._notificationClickedId = 0;
@ -2437,7 +2430,6 @@ const MessageTray = new Lang.Class({
if (notification.isTransient)
notification.destroy(NotificationDestroyedReason.EXPIRED);
this._closeButton.hide();
this._pointerInNotification = false;
this._notificationRemoved = false;
this._notificationBin.child = null;
@ -2452,10 +2444,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);
@ -2464,10 +2452,6 @@ const MessageTray = new Lang.Class({
this._ensureNotificationFocused();
},
_onNotificationExpanded: function() {
this._closeButton.show();
},
_ensureNotificationFocused: function() {
this._notificationFocusGrabber.grabFocus();
},