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

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/notification-layout-rework: 2/2] notifications: Rework notification layout to not rely on css hacks
Date: Wed, 8 Jun 2022 14:45:07 +0000 (UTC)

commit 1fe5fd7cd36d74a5477243032a6f35ee2dcff8b7
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    | 230 +++++++++++----------
 .../gnome-shell-sass/widgets/_notifications.scss   |  32 +--
 js/ui/messageList.js                               |  33 ++-
 js/ui/mpris.js                                     |   2 +
 4 files changed, 151 insertions(+), 146 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..c56eaff2e0 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -1,41 +1,44 @@
 /* Message List */
-// a.k.a. notifications in the menu
+// a.k.a. notifications in the date menu
 
 // main list
 .message-list {
   width: 29em;
   border: solid $borders_color;
 
-  // padding and margins to account for scrollbar
-  &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
-  &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
+  // padding to account for scrollbar and border width for fake separator
+  &:ltr {padding-right: $base_padding; border-right-width: 1px;}
+  &:rtl {padding-left: $base_padding; border-left-width: 1px;}
 
-  .message-list-placeholder { 
+  // "No Notifications" label and icon
+  .message-list-placeholder {
     @extend %title_2;
     color: transparentize($insensitive_fg_color, .5);
+    spacing: $base_padding*3;
 
-    // icon size and color
     > StIcon {
       icon-size: $base_icon_size*3; // 48px
-      margin-bottom: $base_margin*3;
       -st-icon-style: symbolic;
     }
   }
-}
-
-.message-list-sections {
-  spacing: $base_padding;
-  margin: 0; 
-  padding-bottom: $base_padding;
-
-  // to account for scrollbar
-  &:ltr {margin-right: $base_margin * 3; }
-  &:rtl {margin-left: $base_margin * 3;}
-}
 
-.message-list-section,
-.message-list-section-list {
-  spacing: $base_padding;
+  // list of sections in the main list
+  .message-list-sections {
+    // to account for scrollbar
+    &:ltr {margin-right: $base_margin * 3;}
+    &:rtl {margin-left: $base_margin * 3;}
+
+    // section in the list of sections in the main list
+    .message-list-section {
+
+      // list within the section in the list of sections in the main list :)
+      .message-list-section-list {
+        // spacing between list items (i.e. notification bubbles)
+        spacing: $base_padding;
+        padding-bottom: $base_padding;
+      }
+    }
+  }
 }
 
 // do-not-disturb + clear button
@@ -58,77 +61,79 @@
       border-color: transparentize($selected_bg_color, 0.4);
     }
   }
+
+  .message-list-clear-button {
+    border-radius: 16px; // round the clear button
+  }
 }
 
 // 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 icon
+      > .fallback-app-icon {
+        width: $large_icon_size;
+        height: $large_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);
+
+          // though it is aligned to the bottom
+          // this is needed for visual alignment
+          padding-bottom: 1px;
+        }
+      }
+
+      // 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 +141,48 @@
   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;
+  // overrides
+  .message-content {
+    // this is needed to visually align it with the album art
+    margin-top: $base_margin;
+    padding-top: $base_padding;
   }
 
-  &: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_padding*2;
+    spacing: $base_margin*3;
 
-  & StIcon { icon-size: $base_icon_size; }
-}
+    .message-media-control {
+      padding: $base_padding*3;
+      border-radius: 999px;
+      color: $fg_color;
 
-// album-art
-.media-message-cover-icon {
-  icon-size: $base_icon_size*3 !important; // 48px
-  border-radius: $base_border_radius;
+      // 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);}
 
-  // 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: 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 86480a8741..f6315ac8cb 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -1,41 +1,23 @@
 /* Notifications & Message Tray */
 
-$notification_banner_height: 64px;
-$notification_banner_width: 34em;
-$notification_banner_radius: $base_border_radius*1.5;
+// container for popup notifications
+#notification-container {
+  width: 34em;
+  padding: $base_margin;
+}
 
 // Banner notifications
 .notification-banner {
-  min-height: $notification_banner_height;
-  width: $notification_banner_width;
   box-shadow: 0 2px 4px 2px $shadow_color;
-  border-radius: $notification_banner_radius;
-  margin: $base_margin;
+  border-radius: $base_border_radius*1.5;
 
-  .notification-actions {
-    spacing: 0;
-  }
+  .notification-actions {}
 
   .notification-button {
     @extend %bubble_button;
   }
 }
 
-// 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..7a66a59980 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -322,7 +322,9 @@ var Message = GObject.registerClass({
         });
         this.set_child(vbox);
 
-        let hbox = new St.BoxLayout();
+        let hbox = new St.BoxLayout({
+            style_class: 'message-box',
+        });
         vbox.add_actor(hbox);
 
         this._actionBin = new St.Widget({
@@ -333,42 +335,53 @@ var Message = GObject.registerClass({
 
         this._iconBin = new St.Bin({
             style_class: 'message-icon-bin',
+            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,
             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.END,
+        });
         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.END,
         });
         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.layout_manager = new LabelExpanderLayout();
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' });
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]