[gnome-shell/wip/snwh/notification-layout-rework] 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] notifications: Rework notification layout to not rely on css hacks
- Date: Tue, 31 May 2022 18:31:37 +0000 (UTC)
commit 45a7d4528b2af51da94ce096b7505038a8ef546d
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
.../gnome-shell-sass/widgets/_message-list.scss | 149 ++++++++++++---------
.../gnome-shell-sass/widgets/_notifications.scss | 4 +-
js/ui/messageList.js | 39 ++++--
js/ui/mpris.js | 2 +
4 files changed, 121 insertions(+), 73 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..38de735acf 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;
-
- // 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 {
+ padding-top: $base_padding;
- &:active {
- background-color: lighten($active_bg_color, 5%);
- color: $fg_color;
+ // content overrides
+ .message-content {
+ padding-top: $base_padding*2;
+ spacing: $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; }
+ // icon overrides
+ .message-icon-bin {
+ padding:$base_padding;
- & StIcon { icon-size: $base_icon_size; }
-}
+ &:ltr { padding-left:$base_padding*2;}
+ &:rtl { padding-right:$base_padding*2;}
+ }
-// album-art
-.media-message-cover-icon {
- icon-size: $base_icon_size*3 !important; // 48px
- border-radius: $base_border_radius;
+ // controls
+ .message-media-controls {
+ margin-bottom: $base_margin*3;
+
+ .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;
+ }
+
+ &:insensitive { color: lighten($insensitive_fg_color, 5%); }
+
+ > 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: 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 f4e43f7aed..fc91d8be92 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' });
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]