[gnome-shell/wip/snwh/notification-layout-rework: 11/11] notifications: Rework notification layout to not rely on css hacks

[Sam Hewitt <snwh src gnome org>]

commit 23b4c9633c9a509caf55f53b51d40f73d28d3b28
Author: Sam Hewitt <sam snwh org>
Date:   Tue May 31 15:59:32 2022 -0230

    notifications: Rework notification layout to not rely on css hacks
    
    - rework message bubbles to have elements laid out in a sensible way
    - remove some of the css hacks that assisted the layout
    - rework the media player widget to not be as constrained by the notification layout
    - media player buttons are now on the bottom of the widget

 .../gnome-shell-sass/widgets/_message-list.scss    | 145 ++++++++++++---------
 .../gnome-shell-sass/widgets/_notifications.scss   |   4 +-
 js/ui/messageList.js                               |  39 ++++--
 js/ui/mpris.js                                     |   2 +
 4 files changed, 119 insertions(+), 71 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 5196661c14..074b703708 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -3,7 +3,7 @@
 
 // main list
 .message-list {
-  width: 29em;
+  width: 25em;
   border: solid $borders_color;
 
   // padding and margins to account for scrollbar
@@ -25,11 +25,11 @@
 
 .message-list-sections {
   spacing: $base_padding;
-  margin: 0; 
+  margin: 0;
   padding-bottom: $base_padding;
 
   // to account for scrollbar
-  &:ltr {margin-right: $base_margin * 3; }
+  &:ltr {margin-right: $base_margin * 3;}
   &:rtl {margin-left: $base_margin * 3;}
 }
 
@@ -66,10 +66,14 @@
 
   // icon container
   .message-icon-bin {
-    padding: ($base_padding * 3);
+    padding:$base_padding;
 
-    &:ltr {padding-right:$base_padding;}
-    &:rtl {padding-left:$base_padding;}
+    &:ltr {
+      padding-left:$base_padding*3;
+    }
+    &:rtl {
+      padding-right:$base_padding*3;
+    }
 
     // icon size and color
     > StIcon {
@@ -86,31 +90,34 @@
 
   // content
   .message-content {
-    spacing: 4px;
-    padding: ($base_padding*1.5);
-    margin-bottom: $base_margin*2;
+    padding: $base_padding*2 0;
+    &:ltr {
+      padding-left:$base_padding;
+      padding-right:$base_padding*2;
+    }
+    &:rtl {
+      padding-right:$base_padding;
+      padding-left:$base_padding*2;
+    }
   }
 
-  // title
-  .message-title {
-    font-weight: bold;
-    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-    padding-top: 0.57em;
-  }
+  // title container
+  .message-titlebox {
+    spacing: $base_padding;
 
-  // secondary container in title box
-  .message-secondary-bin {
-    padding: 0 $base_margin * 2;
+    // title
+    .message-title {
+      @extend %heading;
+    }
 
-    // notification time stamp
-    > .event-time {
-      color: transparentize($fg_color, 0.5);
+    // secondary container in title box
+    .message-secondary-bin {
+      color: $insensitive_fg_color;
       @include fontsize($base_font_size - 2);
       /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-      padding-bottom: 0.13em;
-
-      &:ltr { text-align: right };
-      &:rtl { text-align: left };
+      padding-top: 0.13em;
+      &:ltr { text-align: right; }
+      &:rtl { text-align: left; }
     }
   }
 
@@ -120,15 +127,16 @@
     background-color: transparentize($fg_color, 0.9);
     border-radius: 99px;
     padding: $base_padding - 1px;
-    margin: 1px;
     &:hover {background-color: transparentize($fg_color, 0.8);}
     &:active {background-color: transparentize($fg_color, 0.9);}
 
-    & StIcon { icon-size: $base_icon_size; }
+    > StIcon { icon-size: $base_icon_size; }
   }
 
   // body
-  .message-body {color: darken($fg_color, 10%);}
+  .message-body {
+    color: $insensitive_fg_color;
+  }
 }
 
 // URLs in messages
@@ -136,45 +144,64 @@
   link-color: $link_color;
 }
 
-/* Media Controls */
-.message-media-control {
-  padding: 0 $base_padding*3;
-  margin: $base_padding*2 0;
-  border-radius: $base_border_radius;
-  color: $fg_color;
+/* Media Player */
+.media-message-player {
+  padding-top: $base_padding;
 
-  // colors are lightened since the media controls are in a card
-  &:hover {
-    background-color: lighten($hover_bg_color, 5%);
-    color: $fg_color;
+  // content overrides
+  .message-content {
+    padding-top: $base_padding*2;
+    spacing: $base_padding;
   }
 
-  &:active { 
-    background-color: lighten($active_bg_color, 5%);
-    color: $fg_color;
+  // icon overrides
+  .message-icon-bin {
+    padding:$base_padding;
+
+    &:ltr { padding-left:$base_padding*2;}
+    &:rtl { padding-right:$base_padding*2;}
   }
 
-  &:insensitive { color: lighten($insensitive_fg_color, 5%); }
-  
-  // fix margin for last button
-  &:last-child:ltr { margin-right: $base_margin*3; }
-  &:last-child:rtl { margin-left: $base_margin*3; }
+  // controls
+  .message-media-controls {
+    margin-bottom: $base_margin*3;
 
-  & StIcon { icon-size: $base_icon_size; }
-}
+    .message-media-control {
+      padding: $base_padding*3;
+      margin: 0 $base_margin;
+      border-radius: 999px;
+      color: $fg_color;
+
+      // colors are lightened since the media controls are in a card
+      &:hover {
+        background-color: lighten($hover_bg_color, 5%);
+        color: $fg_color;
+      }
+
+      &:active {
+        background-color: lighten($active_bg_color, 5%);
+        color: $fg_color;
+      }
 
-// album-art
-.media-message-cover-icon {
-  icon-size: $base_icon_size*3 !important; // 48px
-  border-radius: $base_border_radius;
+      &:insensitive { color: lighten($insensitive_fg_color, 5%); }
 
-  // when there is no artwork
-  &.fallback {
-    color: darken($fg_color, 17%);
-    background-color: $bg_color;
-    border: 1px solid transparent;
+      > StIcon { icon-size: $base_icon_size; }
+    }
+  }
+
+  // album-art
+  .media-message-cover-icon {
+    icon-size: $base_icon_size*4 !important; // 64px
     border-radius: $base_border_radius;
-    icon-size: $large_icon_size !important; // 32px
-    padding: ($base_padding*2 + 2); // 16px
+
+    // when there is no artwork
+    &.fallback {
+      color: darken($fg_color, 17%);
+      background-color: $bg_color;
+      border: 1px solid transparent;
+      border-radius: $base_border_radius;
+      icon-size: $large_icon_size !important; // 32px
+      padding: ($base_padding*2 + 2); // 16px
+    }
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss 
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 7866767ea6..f82ff61c23 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -1,6 +1,6 @@
 /* Notifications & Message Tray */
 
-$notification_banner_height: 64px;
+$notification_banner_height: 48px;
 $notification_banner_width: 34em;
 $notification_banner_radius: $base_border_radius*1.5;
 
@@ -13,7 +13,7 @@ $notification_banner_radius: $base_border_radius*1.5;
   margin: $base_margin;
 
   .notification-actions {
-    spacing: 0;
+    padding-top: $base_margin*2;
   }
 
   .notification-button {
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 29e76752b8..18c10cdef1 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -317,12 +317,16 @@ var Message = GObject.registerClass({
         this._useBodyMarkup = false;
 
         let vbox = new St.BoxLayout({
+            style_class: 'message-box',
             vertical: true,
-            x_expand: true,
         });
         this.set_child(vbox);
 
-        let hbox = new St.BoxLayout();
+        let hbox = new St.BoxLayout({
+            y_align: Clutter.ActorAlign.CENTER,
+            y_expand: true,
+            x_expand: true,
+        });
         vbox.add_actor(hbox);
 
         this._actionBin = new St.Widget({
@@ -333,8 +337,9 @@ var Message = GObject.registerClass({
 
         this._iconBin = new St.Bin({
             style_class: 'message-icon-bin',
+            x_align: Clutter.ActorAlign.START,
+            y_align: Clutter.ActorAlign.CENTER,
             y_expand: true,
-            y_align: Clutter.ActorAlign.START,
             visible: false,
         });
         hbox.add_actor(this._iconBin);
@@ -346,31 +351,45 @@ var Message = GObject.registerClass({
         });
         hbox.add_actor(contentBox);
 
-        this._mediaControls = new St.BoxLayout();
-        hbox.add_actor(this._mediaControls);
+        this._mediaControls = new St.BoxLayout({
+            style_class: 'message-media-controls',
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        vbox.add_actor(this._mediaControls);
 
-        let titleBox = new St.BoxLayout();
+        let titleBox = new St.BoxLayout({
+            style_class: 'message-titlebox',
+            x_expand: true,
+        });
         contentBox.add_actor(titleBox);
 
-        this.titleLabel = new St.Label({ style_class: 'message-title' });
+        this.titleLabel = new St.Label({
+            style_class: 'message-title',
+            y_align: Clutter.ActorAlign.START,
+        });
         this.setTitle(title);
         titleBox.add_actor(this.titleLabel);
 
         this._secondaryBin = new St.Bin({
             style_class: 'message-secondary-bin',
-            x_expand: true, y_expand: true,
+            x_expand: true,
+            y_align: Clutter.ActorAlign.START,
         });
         titleBox.add_actor(this._secondaryBin);
 
         this._closeButton = new St.Button({
             style_class: 'message-close-button',
             icon_name: 'window-close-symbolic',
-            y_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.START,
+            x_align: Clutter.ActorAlign.END,
             opacity: 0,
         });
         titleBox.add_actor(this._closeButton);
 
-        this._bodyStack = new St.Widget({ x_expand: true });
+        this._bodyStack = new St.Widget({
+            y_align: Clutter.ActorAlign.START,
+            x_expand: true,
+        });
         this._bodyStack.layout_manager = new LabelExpanderLayout();
         contentBox.add_actor(this._bodyStack);
 
diff --git a/js/ui/mpris.js b/js/ui/mpris.js
index 1714247698..5ae7a96fc2 100644
--- a/js/ui/mpris.js
+++ b/js/ui/mpris.js
@@ -23,6 +23,8 @@ class MediaMessage extends MessageList.Message {
     _init(player) {
         super._init('', '');
 
+        this.add_style_class_name('media-message-player');
+
         this._player = player;
 
         this._icon = new St.Icon({ style_class: 'media-message-cover-icon' });