diff options
author | Sam Hewitt <sam@snwh.org> | 2022-05-31 15:59:32 -0230 |
---|---|---|
committer | Sam Hewitt <665-snwh@users.noreply.gitlab.gnome.org> | 2022-06-14 13:48:35 +0000 |
commit | aed6140d9ee55150d1c3a141fbcdb96f2635ea96 (patch) | |
tree | 6e18298441340aa5793f016bb02f60cca3de5f24 | |
parent | 3bd5319ec5e6f55afa299f273b5e922ac7c122c1 (diff) | |
download | gnome-shell-wip/snwh/notification-layout-rework.tar.gz |
notifications: Rework notification layout to not rely on css hackswip/snwh/notification-layout-rework
- 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
-rw-r--r-- | data/theme/gnome-shell-sass/widgets/_message-list.scss | 226 | ||||
-rw-r--r-- | data/theme/gnome-shell-sass/widgets/_notifications.scss | 32 | ||||
-rw-r--r-- | js/ui/messageList.js | 32 | ||||
-rw-r--r-- | 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 5196661c1..e1c9b9283 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 86480a874..f6315ac8c 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 29e76752b..3779da95d 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 171424769..5ae7a96fc 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' }); |