[gnome-shell/wip/message-tray: 3/24] messageTray: restyle the message tray

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

commit 393edcd30c802143a1cd86ef92462c0a64cad009
Author: Ana Risteska <a risteska gmail com>
Date:   Sun Aug 12 12:35:41 2012 +0200

    messageTray: restyle the message tray
    
    The patch implements the new visual style for the message tray,
    that is now larger and has textured background. The icons are
    also larger.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=677213

 data/Makefile.am                       |    1 +
 data/theme/gnome-shell.css             |    9 ++++-----
 data/theme/message-tray-background.png |  Bin 0 -> 25454 bytes
 js/ui/messageTray.js                   |   13 +++++++------
 js/ui/notificationDaemon.js            |    6 +++---
 js/ui/telepathyClient.js               |    2 +-
 6 files changed, 16 insertions(+), 15 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 84bc393..a3f5814 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -36,6 +36,7 @@ dist_theme_DATA =				\
 	theme/filter-selected-rtl.svg		\
 	theme/gnome-shell.css			\
 	theme/logged-in-indicator.svg		\
+	theme/message-tray-background.png	\
 	theme/noise-texture.png			\
 	theme/panel-button-border.svg		\
 	theme/panel-button-highlight-narrow.svg	\
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 602edf4..e938b64 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1172,10 +1172,9 @@ StButton.popup-menu-item:insensitive {
 
 /* Message Tray */
 #message-tray {
-    background-gradient-direction: vertical;
-    background-gradient-start: rgba(0,0,0,0.01);
-    background-gradient-end: rgba(0,0,0,0.82);
-    height: 36px;
+    background: #2e3436 url(message-tray-background.png);
+    background-repeat: repeat;
+    height: 72px;
 }
 
 .notification {
@@ -1387,7 +1386,7 @@ StButton.popup-menu-item:insensitive {
 
 #summary-mode {
     padding: 2px 0px 0px 4px;
-    height: 36px;
+    height: 72px;
 }
 
 #summary-mode:rtl {
diff --git a/data/theme/message-tray-background.png b/data/theme/message-tray-background.png
new file mode 100644
index 0000000..357dae0
Binary files /dev/null and b/data/theme/message-tray-background.png differ
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 7d49f1d..e941131 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -31,6 +31,7 @@ const LONGER_SUMMARY_TIMEOUT = 4;
 const HIDE_TIMEOUT = 0.2;
 const LONGER_HIDE_TIMEOUT = 0.6;
 
+const NOTIFICATION_ICON_SIZE = 24;
 
 // We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
 // range from the point where it left the tray.
@@ -542,7 +543,7 @@ const Notification = new Lang.Class({
             this._table.remove_style_class_name('multi-line-notification');
 
         if (!this._icon) {
-            this._icon = params.icon || this.source.createIcon(this.source.ICON_SIZE);
+            this._icon = params.icon || this.source.createIcon(NOTIFICATION_ICON_SIZE);
             this._table.add(this._icon, { row: 0,
                                           col: 0,
                                           x_expand: false,
@@ -1119,7 +1120,7 @@ const SourceActor = new Lang.Class({
 const Source = new Lang.Class({
     Name: 'MessageTraySource',
 
-    ICON_SIZE: 24,
+    SOURCE_ICON_SIZE: 48,
 
     _init: function(title, iconName, iconType) {
         this.title = title;
@@ -1132,8 +1133,8 @@ const Source = new Lang.Class({
 
         this.notifications = [];
 
-        this.mainIcon = new SourceActor(this, this.ICON_SIZE);
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+        this.mainIcon = new SourceActor(this, this.SOURCE_ICON_SIZE);
+        this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
     },
 
     get count() {
@@ -2188,7 +2189,7 @@ const MessageTray = new Lang.Class({
         // notifications that might have been in the process of hiding get full opacity.
         //
         // We tween any notification showing in the banner mode to banner height
-        // (this._notificationBin.y = -this.actor.height).
+        // (this._notificationBin.y = -this._notificationBin.height).
         // This ensures that both new notifications and notifications in the banner mode that might
         // have been in the process of hiding are shown with the banner height.
         //
@@ -2205,7 +2206,7 @@ const MessageTray = new Lang.Class({
                             onCompleteScope: this
                           };
         if (!this._notification.expanded)
-            tweenParams.y = - this.actor.height;
+            tweenParams.y = -this._notificationBin.height;
 
         this._tween(this._notificationBin, '_notificationState', State.SHOWN, tweenParams);
    },
diff --git a/js/ui/notificationDaemon.js b/js/ui/notificationDaemon.js
index 0eee59b..47b3bce 100644
--- a/js/ui/notificationDaemon.js
+++ b/js/ui/notificationDaemon.js
@@ -357,7 +357,7 @@ const NotificationDaemon = new Lang.Class({
         let gicon = this._iconForNotificationData(icon, hints);
         let iconActor = new St.Icon({ gicon: gicon,
                                       icon_type: St.IconType.FULLCOLOR,
-                                      icon_size: source.ICON_SIZE });
+                                      icon_size: MessageTray.NOTIFICATION_ICON_SIZE });
 
         if (notification == null) {
             notification = new MessageTray.Notification(source, summary, body,
@@ -557,7 +557,7 @@ const Source = new Lang.Class({
     processNotification: function(notification, gicon) {
         if (gicon)
             this._gicon = gicon;
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+        this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
 
         let tracker = Shell.WindowTracker.get_default();
         if (notification.resident && this.app && tracker.focus_app == this.app)
@@ -625,7 +625,7 @@ const Source = new Lang.Class({
         // notification-based icons (ie, not a trayicon) or if it was unset before
         if (!this.trayIcon) {
             this.useNotificationIcon = false;
-            this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+            this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
         }
     },
 
diff --git a/js/ui/telepathyClient.js b/js/ui/telepathyClient.js
index fb9575b..c2c4b19 100644
--- a/js/ui/telepathyClient.js
+++ b/js/ui/telepathyClient.js
@@ -532,7 +532,7 @@ const ChatSource = new Lang.Class({
     },
 
     _updateAvatarIcon: function() {
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+        this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
         this._notification.update(this._notification.title, null, { customContent: true });
     },