From c4f2bb5fe01fb273f0d83621e2054fbced44215b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sun, 26 Feb 2017 03:33:26 +0100
Subject: [PATCH] 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 68e560e97..b34f0ef9c 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 103878988..66d911dc5 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 fe1b4d8e7..32e3c4c76 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);
         }
     },