From ff4b9fdb083d5b30fef80bd0fe118be280e38610 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 18 Jun 2024 15:03:19 -0230 Subject: [PATCH] style: Use unlinked rounded buttons for notifications Part-of: --- data/theme/gnome-shell-sass/_common.scss | 40 ++++++++++++----- data/theme/gnome-shell-sass/_drawing.scss | 11 ++++- .../gnome-shell-sass/widgets/_dialogs.scss | 2 +- .../widgets/_message-list.scss | 44 ++++++++++++------- .../widgets/_notifications.scss | 2 +- js/ui/messageList.js | 1 + 6 files changed, 70 insertions(+), 30 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 2124a3a2f..1a6e687c0 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -189,18 +189,31 @@ stage { } } -// buttons in dialogs/notifications -// lighter in color and have a greater radius -%bubble_button { +// buttons in notifications +// use a rounded style and have a lighter background +%notification_button { + font-weight: bold; + padding: $base_padding $base_padding * 2; + border-radius: $base_border_radius; + + @include button(normal, $style: notification); + &:focus { @include button(focus, $style: notification);} + &:hover { @include button(hover, $style: notification);} + &:active { @include button(active, $style: notification);} + &:checked { @include button(checked, $style: notification);} + &:insensitive { @include button(insensitive, $style: notification);} +} + + +// buttons in dialogs +// use a linked style +%dialog_button { padding: $base_padding * 2; - font-weight: bold !important; + font-weight: bold; &:ltr {margin-right: 1px;} &:rtl {margin-left: 1px;} - // needs a 1px adjustment to fit exactly into the outer radius - $bubble_button_radius: $modal_radius - 1px; - @include button(normal, $style: bubble); &:focus { @include button(focus, $style: bubble);} &:hover { @include button(hover, $style: bubble);} @@ -208,26 +221,29 @@ stage { &:checked { @include button(checked, $style: bubble);} &:insensitive { @include button(insensitive, $style: bubble);} + // needs a 1px adjustment to fit exactly into the outer radius + $dialog_button_radius: $modal_radius - 1px; + &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $dialog_button_radius; } &:last-child:ltr { - border-radius: 0 0 $bubble_button_radius; + border-radius: 0 0 $dialog_button_radius; margin-right: 0 !important; } &:first-child:rtl { - border-radius: 0 0 $bubble_button_radius; + border-radius: 0 0 $dialog_button_radius; } &:last-child:rtl { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $dialog_button_radius; margin-left: 0 !important; } &:first-child:last-child { - border-radius: 0 0 $bubble_button_radius $bubble_button_radius; + border-radius: 0 0 $dialog_button_radius $dialog_button_radius; margin-left: 0 !important; margin-right: 0 !important; } diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 447feb6a4..4007e56c1 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -210,7 +210,7 @@ } // background color override for buttons that use transparency - // styles: notification bubbles, lockscreen + // styles: dialogs bubbles, lockscreen @if $style == 'bubble' or $style == 'lockscreen' { $button_bg_color: transparentize($tc, .9); $hover_button_bg_color: transparentize($tc, .87); @@ -218,6 +218,15 @@ $active_hover_button_bg_color: transparentize($tc, .81); } + // background color overrides for notification style + @if $style == 'notification' { + $button_bg_color: transparentize($tc, .85); + $hover_button_bg_color: transparentize($tc, .7); + $insensitive_button_bg_color: transparentize($tc, .9); + $active_button_bg_color: transparentize($tc, .8); + $active_hover_button_bg_color: transparentize($tc, .8); + } + // flat style overrides @if $style == 'flat' { $insensitive_button_bg_color: $button_bg_color; diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index 2f21f9447..d3adbcb1d 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -16,7 +16,7 @@ } .modal-dialog-linked-button { - @extend %bubble_button; + @extend %dialog_button; } } diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 0fb1c8d2a..60cb5bde7 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -64,21 +64,19 @@ // message bubbles .message { @extend %card; - padding: 0; + padding: $base_padding; margin: 0; border-radius: $modal_radius; - // subtract side padding to accommodate the close button's border - &:ltr { padding-right:-2px; }; - &:rtl { padding-left:-2px; }; - // message header .message-header { - padding: 0 $scaled_padding; - margin: $base_padding; - margin-bottom: 0; spacing: $base_padding; color: $insensitive_fg_color; + padding:0 $base_padding; + + // side padding to accommodate the close button + &:ltr { padding-right:$base_padding - 2px; }; + &:rtl { padding-left:$base_padding - 2px; }; // header source icon .message-source-icon { @@ -113,17 +111,14 @@ .message-expand-button, .message-close-button { @extend .icon-button; + @extend %notification_button; + border-radius: $forced_circular_radius; // make circular color: $fg_color; - background-color: transparentize($fg_color, .9); padding: 4px; - &:hover { background-color: transparentize($fg_color, .81);} - &:active, - &:active:hover { background-color: transparentize($fg_color, .76);} - &:insensitive { background-color: transparentize($fg_color, .93);} } .message-expand-button { - padding: 6px; + padding: $base_padding; &:ltr { margin-right: $base_padding; } &:rtl { margin-left: $base_padding; } } @@ -132,7 +127,6 @@ // container for message contents .message-box { padding: $base_padding; - margin: $base_padding; margin-top: 0; spacing: $base_padding; @@ -169,6 +163,26 @@ } } } + + // container for message buttons + .message-action-bin { + padding: $base_margin; + spacing: $base_padding; + + // set margin on children + * { + margin: 0 $base_margin; + // remove margins + &:first-child { + &:ltr { margin-left:0;} + &:rtl { margin-right:0;} + } + &:last-child { + &:ltr { margin-right:0;} + &:rtl { margin-left:0;} + } + } + } } // URLs in messages diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss index 0601425ba..d80cb6273 100644 --- a/data/theme/gnome-shell-sass/widgets/_notifications.scss +++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss @@ -21,5 +21,5 @@ $notification_banner_width: 34em; } .notification-button { - @extend %bubble_button; + @extend %notification_button; } diff --git a/js/ui/messageList.js b/js/ui/messageList.js index ddd5abb17..18b53d569 100644 --- a/js/ui/messageList.js +++ b/js/ui/messageList.js @@ -439,6 +439,7 @@ export const Message = GObject.registerClass({ vbox.add_child(hbox); this._actionBin = new St.Bin({ + style_class: 'message-action-bin', layout_manager: new ScaleLayout(), visible: false, });