[gnome-shell/wip/new-notifications: 10/13] messageTray: Restyle notifications

[Jasper St. Pierre <jstpierre src gnome org>]

commit 5ff5e5bb22910686240bce197b4617291628b0b0
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Thu Dec 5 01:21:02 2013 -0500

    messageTray: Restyle notifications

 data/theme/gnome-shell.css  |   94 ++++++++++++++++++-------------------------
 js/ui/messageTray.js        |   35 ++++++++++------
 js/ui/notificationDaemon.js |    2 +-
 3 files changed, 61 insertions(+), 70 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6ce315b..dd568a0 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -324,8 +324,6 @@ StScrollBar StButton#vhandle:active {
 /* Buttons */
 
 .candidate-page-button,
-.notification-button,
-.notification-icon-button,
 .hotplug-notification-item,
 .modal-dialog-button,
 .app-view-control {
@@ -340,16 +338,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 {
@@ -363,8 +357,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,
@@ -374,8 +366,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;
@@ -387,7 +377,6 @@ StScrollBar StButton#vhandle:active {
 
 #searchEntry,
 .modal-dialog-button,
-.notification-button,
 .hotplug-notification-item,
 .app-view-controls,
 #screenShieldNotifications {
@@ -1471,23 +1460,55 @@ StScrollBar StButton#vhandle:active {
     background-gradient-direction: vertical;
 }
 
-.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: 2px 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 {
@@ -1529,43 +1550,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;
 }
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 7fbaaea..e807e5e 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -470,7 +470,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;
@@ -514,18 +514,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);
 
@@ -551,14 +550,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);
@@ -580,10 +578,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:
@@ -725,8 +733,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);
     },
diff --git a/js/ui/notificationDaemon.js b/js/ui/notificationDaemon.js
index 37c59de..4ad4f02 100644
--- a/js/ui/notificationDaemon.js
+++ b/js/ui/notificationDaemon.js
@@ -333,7 +333,7 @@ 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 });
         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');