messageTray: Restyle notifications

data/theme/gnome-shell.css

@@ -414,8 +414,6 @@ StScrollBar StButton#vhandle:active {
 /* Buttons */
 
 .candidate-page-button,
-.notification-button,
-.notification-icon-button,
 .hotplug-notification-item,
 .modal-dialog-button,
 .app-view-control {
@@ -430,16 +428,12 @@ StScrollBar StButton#vhandle:active {
 }
 
 .candidate-page-button:hover,
-.notification-button:hover,
-.notification-icon-button:hover,
 .hotplug-notification-item:hover,
 .modal-dialog-button:hover {
     background-gradient-start: rgba(255, 255, 255, 0.3);
     background-gradient-end: rgba(255, 255, 255, 0.1);
 }
 
-.notification-button:focus,
-.notification-icon-button:focus,
 .hotplug-notification-item:focus,
 .modal-dialog-button:focus,
 .app-view-control:focus {
@@ -453,8 +447,6 @@ StScrollBar StButton#vhandle:active {
 
 .candidate-page-button:active,
 .candidate-page-button:pressed,
-.notification-button:active,
-.notification-icon-button:active,
 .hotplug-notification-item:active,
 .modal-dialog-button:active,
 .modal-dialog-button:pressed,
@@ -464,8 +456,6 @@ StScrollBar StButton#vhandle:active {
 }
 
 .candidate-page-button:insensitive,
-.notification-button:insensitive,
-.notification-icon-button:insensitive,
 .modal-dialog-button:insensitive {
     border-color: #666666;
     color: #9f9f9f;
@@ -477,7 +467,6 @@ StScrollBar StButton#vhandle:active {
 
 #searchEntry,
 .modal-dialog-button,
-.notification-button,
 .hotplug-notification-item,
 .app-view-controls,
 #screenShieldNotifications {
@@ -1532,23 +1521,55 @@ StScrollBar StButton#vhandle:active {
     color: #999999;
 }
 
-.notification {
+.notification, #notification-container {
+    font-size: 11pt;
+    width: 34em;
+}
+
+.notification-main-content {
+    padding: 8px;
+    spacing: 8px;
     border-radius: 10px 10px 0px 0px;
-    background: rgba(0,0,0,0.9);
+    background: rgba(0,0,0,0.8);
+}
+
+.notification-action-area {
     padding: 8px;
 }
 
-.notification-hbox {
-    spacing: 8px;
+.notification-action-area,
+.notification-button {
+    background: rgba(0,0,0,0.8);
+    border-top: 1px solid #666;
+}
+
+.notification-button {
+    padding: 8px 0px;
+    border-right: 1px solid #666;
+}
+
+.notification-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.notification-button:active {
+    background: rgba(255,255,255,0.1);
+}
+
+.notification-button:last-child {
+    border-right-width: 0px;
 }
 
 .notification-title-box {
     spacing: 8px;
 }
 
-.notification, #notification-container {
-    font-size: 11pt;
-    width: 34em;
+.notification-scrollview:ltr > StScrollBar {
+    padding-left: 6px;
+}
+
+.notification-scrollview:rtl > StScrollBar {
+    padding-right: 6px;
 }
 
 .summary-boxpointer {
@@ -1590,43 +1611,6 @@ StScrollBar StButton#vhandle:active {
     -st-vfade-offset: 24px;
 }
 
-.notification-scrollview:ltr > StScrollBar {
-    padding-left: 6px;
-}
-
-.notification-scrollview:rtl > StScrollBar {
-    padding-right: 6px;
-}
-
-.notification-actions {
-    padding-top: 18px;
-    spacing: 10px;
-}
-
-.notification-button {
-    -st-natural-width: 140px;
-    padding: 4px 4px 5px;
-}
-
-.notification-button:focus {
-    -st-natural-width: 138px;
-    padding: 3px 4px 4px;
-}
-
-.notification-icon-button {
-    border-radius: 5px;
-    padding: 5px;
-}
-
-.notification-icon-button:focus {
-    padding: 4px;
-}
-
-.notification-icon-button > StIcon {
-    icon-size: 16px;
-    padding: 8px;
-}
-
 .secondary-icon {
     icon-size: 1.09em;
 }
@@ -2611,8 +2595,7 @@ StScrollBar StButton#vhandle:active {
     padding-bottom: 0px;
 }
 
-#screenShieldNotifications .notification-button,
-#screenShieldNotifications .notification-icon-button {
+#screenShieldNotifications .notification-button {
     border: 1px rgba(255,255,255,0.5);
 }
 

js/ui/messageTray.js

@@ -463,7 +463,7 @@ const NotificationApplicationPolicy = new Lang.Class({
 const Notification = new Lang.Class({
     Name: 'Notification',
 
-    ICON_SIZE: 24,
+    ICON_SIZE: 32,
 
     _init: function(source, title, banner, params) {
         this.source = source;
@@ -507,18 +507,17 @@ const Notification = new Lang.Class({
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
 
         // Separates the notification content, action area and button box
-        this._vbox = new St.BoxLayout({ style_class: 'notification-vbox', vertical: true });
+        this._vbox = new St.BoxLayout({ vertical: true });
         this.actor.child = this._vbox;
 
         // Separates the icon and title/body
-        this._hbox = new St.BoxLayout({ style_class: 'notification-hbox' });
+        this._hbox = new St.BoxLayout({ style_class: 'notification-main-content' });
         this._vbox.add_child(this._hbox);
 
         this._iconBin = new St.Bin();
-        this._iconBin.set_y_align(Clutter.ActorAlign.START);
         this._hbox.add_child(this._iconBin);
 
-        this._titleBodyBox = new St.BoxLayout({ style_class: 'notification-vbox',
+        this._titleBodyBox = new St.BoxLayout({ style_class: 'notification-title-body-box',
                                                 vertical: true });
         this._hbox.add_child(this._titleBodyBox);
 
@@ -544,14 +543,13 @@ const Notification = new Lang.Class({
         // By default, this._bodyBin contains a URL highlighter. Subclasses
         // can override this to provide custom content if they want to.
         this._bodyUrlHighlighter = new URLHighlighter();
-        this._bodyUrlHighlighter.actor.clutter_text.line_wrap = true;
-        this._bodyUrlHighlighter.actor.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._bodyBin.child = this._bodyUrlHighlighter.actor;
 
-        this._actionAreaBin = new St.Bin({ x_expand: true, y_expand: true });
+        this._actionAreaBin = new St.Bin({ style_class: 'notification-action-area',
+                                           x_expand: true, y_expand: true });
         this._vbox.add_child(this._actionAreaBin);
 
-        this._buttonBox = new St.BoxLayout({ style_class: 'notification-actions',
+        this._buttonBox = new St.BoxLayout({ style_class: 'notification-button-box',
                                              x_expand: true, y_expand: true });
         global.focus_manager.add_group(this._buttonBox);
         this._vbox.add_child(this._buttonBox);
@@ -573,10 +571,20 @@ const Notification = new Lang.Class({
         this._iconBin.visible = (this._icon != null && this._icon.visible);
         this._secondaryIconBin.visible = (this._secondaryIcon != null);
 
-        this._titleLabel.clutter_text.line_wrap = this.expanded;
-        this._bodyUrlHighlighter.actor.visible = this.expanded && this._bodyUrlHighlighter.hasText();
+        if (this.expanded) {
+            this._titleLabel.clutter_text.line_wrap = true;
+            this._titleLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+            this._bodyUrlHighlighter.actor.clutter_text.line_wrap = true;
+            this._bodyUrlHighlighter.actor.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        } else {
+            this._titleLabel.clutter_text.line_wrap = false;
+            this._titleLabel.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+            this._bodyUrlHighlighter.actor.clutter_text.line_wrap = false;
+            this._bodyUrlHighlighter.actor.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+        }
+        this.enableScrolling(this.expanded);
 
-        this._bodyScrollArea.visible = this.expanded && (this._bodyBin.child != null && this._bodyBin.child.visible);
+        this._bodyUrlHighlighter.actor.visible = this._bodyUrlHighlighter.hasText();
     },
 
     // update:
@@ -718,8 +726,7 @@ const Notification = new Lang.Class({
     // the notification.
     addAction: function(label, callback) {
         let button = new St.Button({ style_class: 'notification-button',
-                                     label: label,
-                                     can_focus: true });
+                                     x_expand: true, label: label, can_focus: true });
 
         return this.addButton(button, callback);
     },

js/ui/notificationDaemon.js

@@ -319,13 +319,14 @@ const FdoNotificationDaemon = new Lang.Class({
     },
 
     _makeButton: function(id, label, useActionIcons) {
-        let button = new St.Button({ can_focus: true });
+        let button = new St.Button({ can_focus: true,
+                                     x_expand: true,
+                                     style_class: 'notification-button' });
         let iconName = id.endsWith('-symbolic') ? id : id + '-symbolic';
+
         if (useActionIcons && Gtk.IconTheme.get_default().has_icon(iconName)) {
-            button.add_style_class_name('notification-icon-button');
-            button.child = new St.Icon({ icon_name: iconName });
+            button.child = new St.Icon({ icon_name: iconName, icon_size: 16 });
         } else {
-            button.add_style_class_name('notification-button');
             button.label = label;
         }
         return button;