[gnome-shell/wip/snwh/notification-layout-rework: 4/4] 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: 4/4] notifications: Rework notification layout to not rely on css hacks
- Date: Tue, 14 Jun 2022 13:48:35 +0000 (UTC)
commit aed6140d9ee55150d1c3a141fbcdb96f2635ea96
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
- clean up notifications css
.../gnome-shell-sass/widgets/_message-list.scss | 226 +++++++++++----------
.../gnome-shell-sass/widgets/_notifications.scss | 32 +--
js/ui/messageList.js | 32 ++-
js/ui/mpris.js | 2 +
4 files changed, 147 insertions(+), 145 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..e1c9b92839 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,44 @@
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 {
- & 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);}
+
+ > 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
+ background-color: transparentize($fg_color, 0.9);
+
+ // when there is no artwork
+ &.fallback {
+ color: transparentize($fg_color, 0.2);
+ 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..3779da95d3 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,54 @@ 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();
+ this._mediaControls = new St.BoxLayout({
+ style_class: 'message-media-controls',
+ y_align: Clutter.ActorAlign.CENTER,
+ x_align: Clutter.ActorAlign.CENTER,
+ });
hbox.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]
