[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 3ea1148df7090979b291e78eb7c865c7774b1285
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
    - clean up notifications css

 .../gnome-shell-sass/widgets/_message-list.scss    | 181 ++++++++++-----------
 .../gnome-shell-sass/widgets/_notifications.scss   |  20 +--
 js/ui/messageList.js                               |  43 +++--
 js/ui/mpris.js                                     |   2 +
 4 files changed, 122 insertions(+), 124 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..32a6dcec4f 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -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;}
 }
 
@@ -60,75 +60,74 @@
   }
 }
 
+
 // message bubbles
 .message {
   @include card;
 
-  // icon container
-  .message-icon-bin {
-    padding: ($base_padding * 3);
-
-    &:ltr {padding-right:$base_padding;}
-    &:rtl {padding-left:$base_padding;}
-
-    // icon size and color
-    > StIcon {
-      icon-size: $large_icon_size; // 32px
-      -st-icon-style: symbolic;
+  // container of the message
+  .message-box {
+    padding:$base_padding*2;
+    spacing: $base_padding*2;
+
+    // icon container
+    .message-icon-bin {
+      // icon size and color
+      > StIcon {
+        icon-size: $large_icon_size; // 32px
+        -st-icon-style: symbolic;
+      }
+
+      // fallback
+      > .fallback-app-icon {
+        width: $base_icon_size;
+        height: $base_icon_size;
+      }
     }
 
-    // fallback
-    > .fallback-app-icon {
-      width: $base_icon_size;
-      height: $base_icon_size;
+    // content
+    .message-content {
+      spacing: 2px;
+
+      // title container
+      .message-titlebox {
+        spacing: $base_padding;
+
+        // title
+        .message-title {
+          @extend %heading;
+        }
+
+        // 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-top: 0.13em;
+          &:ltr { text-align: right; }
+          &:rtl { text-align: left; }
+        }
+      }
+
+      // body
+      .message-body {
+        color: transparentize($fg_color, 0.2);
+      }
     }
-  }
-
-  // content
-  .message-content {
-    spacing: 4px;
-    padding: ($base_padding*1.5);
-    margin-bottom: $base_margin*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;
-  }
 
-  // secondary container in title box
-  .message-secondary-bin {
-    padding: 0 $base_margin * 2;
+    // close button
+    .message-close-button {
+      color: $fg_color;
+      background-color: transparentize($fg_color, 0.9);
+      border-radius: 99px;
+      padding: $base_padding - 1px;
 
-    // notification time stamp
-    > .event-time {
-      color: transparentize($fg_color, 0.5);
-      @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;
+      &:hover { background-color: transparentize($fg_color, 0.8); }
+      &:active { background-color: transparentize($fg_color, 0.9); }
 
-      &:ltr { text-align: right };
-      &:rtl { text-align: left };
+      > StIcon { icon-size: $base_icon_size; }
     }
   }
-
-  // close button
-  .message-close-button {
-    color: $fg_color;
-    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; }
-  }
-
-  // body
-  .message-body {color: darken($fg_color, 10%);}
 }
 
 // URLs in messages
@@ -136,45 +135,41 @@
   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;
-
-  // colors are lightened since the media controls are in a card
-  &:hover {
-    background-color: lighten($hover_bg_color, 5%);
-    color: $fg_color;
-  }
+/* Media Player */
+.media-message-player {
 
-  &:active { 
-    background-color: lighten($active_bg_color, 5%);
-    color: $fg_color;
-  }
+  // controls
+  .message-media-controls {
+    margin-bottom: $base_padding*2;
+    spacing: $base_margin*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; }
+    .message-media-control {
+      padding: $base_padding*3;
+      border-radius: 999px;
+      color: $fg_color;
 
-  & StIcon { icon-size: $base_icon_size; }
-}
+      // colors are lightened since the media controls are in a card
+      &:hover { background-color: lighten($hover_bg_color, 10%);}
+      &:active { background-color: lighten($active_bg_color, 10%);}
+      &:insensitive { color: transparentize($insensitive_fg_color, 0.2);}
 
-// album-art
-.media-message-cover-icon {
-  icon-size: $base_icon_size*3 !important; // 48px
-  border-radius: $base_border_radius;
+      > StIcon { icon-size: $base_icon_size; }
+    }
+  }
 
-  // when there is no artwork
-  &.fallback {
-    color: darken($fg_color, 17%);
-    background-color: $bg_color;
-    border: 1px solid transparent;
+  // 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: transparentize($fg_color, 0.2);
+      background-color: transparentize($fg_color, 0.9);
+      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..da25c2cfba 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -1,19 +1,16 @@
 /* Notifications & Message Tray */
 
-$notification_banner_height: 64px;
+$notification_banner_height: 48px;
 $notification_banner_width: 34em;
 $notification_banner_radius: $base_border_radius*1.5;
 
 // Banner notifications
 .notification-banner {
-  min-height: $notification_banner_height;
   width: $notification_banner_width;
   box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
   border-radius: $notification_banner_radius;
-  margin: $base_margin;
 
   .notification-actions {
-    spacing: 0;
   }
 
   .notification-button {
@@ -21,21 +18,6 @@ $notification_banner_radius: $base_border_radius*1.5;
   }
 }
 
-// counter
-.summary-source-counter {
-  font-size: $base_font_size - 1pt;
-  font-weight: bold;
-  height: 1.6em;
-  width: 1.6em;
-  -shell-counter-overlap-x: 3px;
-  -shell-counter-overlap-y: 3px;
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
-  border: 2px solid $fg_color;
-  box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-  border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
-}
-
 // chat bubbles
 .chat-body { spacing: 5px; }
 .chat-response { margin: 5px; }
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 29e76752b8..f3b207505a 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -318,11 +318,14 @@ var Message = GObject.registerClass({
 
         let vbox = new St.BoxLayout({
             vertical: true,
-            x_expand: true,
         });
         this.set_child(vbox);
 
-        let hbox = new St.BoxLayout();
+        let hbox = new St.BoxLayout({
+            style_class: 'message-box',
+            y_align: Clutter.ActorAlign.START,
+            x_expand: true,
+        });
         vbox.add_actor(hbox);
 
         this._actionBin = new St.Widget({
@@ -333,44 +336,60 @@ 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);
 
         const contentBox = new St.BoxLayout({
             style_class: 'message-content',
-            vertical: true,
+            y_align: Clutter.ActorAlign.CENTER,
             x_expand: true,
+            vertical: true,
         });
         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);
+        hbox.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' });