[gnome-shell: 10/14] messageList: Keep secondary actor when showing close button

[Florian Müllner <fmuellner src gnome org>]

commit c4f2bb5fe01fb273f0d83621e2054fbced44215b
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Feb 26 03:33:26 2017 +0100

    messageList: Keep secondary actor when showing close button
    
    Currently the secondary actor (if set) and the close button are
    exclusive, that is the latter replaces the former on hover. As
    the swapping feels rather busy and there's no real reason both
    cannot be shown at the same time, keep the secondary actor always
    visible.
    A welcome side effect is that it no longer needs to be placed at
    the end, so we can move the notification timestamp right next to
    the corresponding title.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=775763

 js/ui/calendar.js    |    2 +-
 js/ui/messageList.js |   15 +++++++--------
 js/ui/messageTray.js |    3 ++-
 3 files changed, 10 insertions(+), 10 deletions(-)
---
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 68e560e..b34f0ef 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -959,7 +959,7 @@ const NotificationSection = new Lang.Class({
     _createTimeLabel: function(datetime) {
         let label = Util.createTimeLabel(datetime);
         label.style_class = 'event-time',
-        label.x_align = Clutter.ActorAlign.END;
+        label.x_align = Clutter.ActorAlign.START;
         return label;
     },
 
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 1038789..66d911d 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -331,18 +331,18 @@ const Message = new Lang.Class({
         let titleBox = new St.BoxLayout();
         contentBox.add_actor(titleBox);
 
-        this.titleLabel = new St.Label({ style_class: 'message-title',
-                                         x_expand: true,
-                                         x_align: Clutter.ActorAlign.START });
+        this.titleLabel = new St.Label({ style_class: 'message-title' });
         this.setTitle(title);
         titleBox.add_actor(this.titleLabel);
 
-        this._secondaryBin = new St.Bin({ style_class: 'message-secondary-bin' });
+        this._secondaryBin = new St.Bin({ style_class: 'message-secondary-bin',
+                                          x_expand: true, y_expand: true,
+                                          x_fill: true, y_fill: true });
         titleBox.add_actor(this._secondaryBin);
 
         let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                       icon_size: 16 });
-        this._closeButton = new St.Button({ child: closeIcon, visible: false });
+        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
         titleBox.add_actor(this._closeButton);
 
         this._bodyStack = new St.Widget({ x_expand: true });
@@ -493,9 +493,8 @@ const Message = new Lang.Class({
     },
 
     _sync: function() {
-        let hovered = this.actor.hover;
-        this._closeButton.visible = hovered && this.canClose();
-        this._secondaryBin.visible = !hovered;
+        let visible = this.actor.hover && this.canClose();
+        this._closeButton.opacity = visible ? 255 : 0;
     },
 
     _onClicked: function() {
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index fe1b4d8..32e3c4c 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -541,7 +541,8 @@ const NotificationBanner = new Lang.Class({
 
     _addSecondaryIcon: function() {
         if (this.notification.secondaryGIcon) {
-            let icon = new St.Icon({ gicon: this.notification.secondaryGIcon });
+            let icon = new St.Icon({ gicon: this.notification.secondaryGIcon,
+                                     x_align: Clutter.ActorAlign.END });
             this.setSecondaryActor(icon);
         }
     },