From a32f735ec09bc3bb0309818cfb15f313338f4c8c 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 | 50 ++++--------------- data/theme/gnome-shell-sass/_drawing.scss | 4 +- .../gnome-shell-sass/widgets/_dialogs.scss | 8 +-- js/ui/dialog.js | 5 +- 4 files changed, 22 insertions(+), 45 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 1a6e687c0..846427e8e 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -39,6 +39,9 @@ $forced_circular_radius: 999px; // radii of things that display over other things, e.g. popovers $modal_radius: $base_border_radius * 2; +// radii of dialogs +$alert_radius: 18px; + // Chroma key to flag when a background-color is always occluded, not visible. // This allows any box-shadow behind it to be rendered more efficiently by // omitting the middle rectangle. @@ -204,49 +207,18 @@ stage { &:insensitive { @include button(insensitive, $style: notification);} } - // buttons in dialogs -// use a linked style %dialog_button { - padding: $base_padding * 2; font-weight: bold; + padding: $base_padding * 2; + border-radius: $base_border_radius * 1.5; - &:ltr {margin-right: 1px;} - &:rtl {margin-left: 1px;} - - @include button(normal, $style: bubble); - &:focus { @include button(focus, $style: bubble);} - &:hover { @include button(hover, $style: bubble);} - &:active { @include button(active, $style: bubble);} - &: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 $dialog_button_radius; - } - - &:last-child:ltr { - border-radius: 0 0 $dialog_button_radius; - margin-right: 0 !important; - } - - &:first-child:rtl { - border-radius: 0 0 $dialog_button_radius; - } - - &:last-child:rtl { - border-radius: 0 0 0 $dialog_button_radius; - margin-left: 0 !important; - } - - &:first-child:last-child { - border-radius: 0 0 $dialog_button_radius $dialog_button_radius; - margin-left: 0 !important; - margin-right: 0 !important; - } + @include button(normal, $style: dialog); + &:focus { @include button(focus, $style: dialog);} + &:hover { @include button(hover, $style: dialog);} + &:active { @include button(active, $style: dialog);} + &:checked { @include button(checked, $style: dialog);} + &:insensitive { @include button(insensitive, $style: dialog);} } // tooltip diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 4007e56c1..a2fa5f2b2 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -160,7 +160,7 @@ // - normal, focus, hover, active, checked, insensitive, default, undecorated // $c: button bg color, derived from bg_color // $tc: button text color, derived from fg_color - // $style: button style, possible values: card, bubble, flat, default + // $style: button style, possible values: card, notification, dialog, flat, default // $always_dark: override the light theme check to use dark colors, true or false // @@ -211,7 +211,7 @@ // background color override for buttons that use transparency // styles: dialogs bubbles, lockscreen - @if $style == 'bubble' or $style == 'lockscreen' { + @if $style == 'dialog' or $style == 'lockscreen' { $button_bg_color: transparentize($tc, .9); $hover_button_bg_color: transparentize($tc, .87); $active_button_bg_color: transparentize($tc, .84); diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index d3adbcb1d..c08eb91ba 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -6,12 +6,14 @@ .modal-dialog { background-color: $bg_color; - border-radius: $modal_radius; + border-radius: $alert_radius; box-shadow: inset 0 0 0 1px $outer_borders_color; + padding: $base_padding * 4; .modal-dialog-content-box { - margin: $base_margin * 8 $base_margin * 10; spacing: $base_margin * 8; + margin-top: $base_margin * 2; + margin-bottom: $base_margin * 4; max-width: 28em; } @@ -22,7 +24,7 @@ /* End Session Dialog */ .end-session-dialog { - width: 30em; + width: 24em; .end-session-dialog-battery-warning, .dialog-list-title { diff --git a/js/ui/dialog.js b/js/ui/dialog.js index b99caa8ef..7337407e6 100644 --- a/js/ui/dialog.js +++ b/js/ui/dialog.js @@ -56,7 +56,10 @@ class Dialog extends St.Widget { this._dialog.add_child(this.contentLayout); this.buttonLayout = new St.Widget({ - layout_manager: new Clutter.BoxLayout({homogeneous: true}), + layout_manager: new Clutter.BoxLayout({ + spacing: 12, + homogeneous: true, + }), }); this._dialog.add_child(this.buttonLayout); }