brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Use unlinked rounded buttons for notifications

Browse Source 
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3427>
This commit is contained in:
Sam Hewitt 2024-06-18 15:03:19 -02:30
parent ff4b9fdb08
commit a32f735ec0
4 changed files with 22 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
data/theme/gnome-shell-sass/_common.scss
View File

@ -39,6 +39,9 @@ $forced_circular_radius: 999px;
// radii of things that display over other things, e.g. popovers // radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius * 2; $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. // 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 // This allows any box-shadow behind it to be rendered more efficiently by
// omitting the middle rectangle. // omitting the middle rectangle.
@ -204,49 +207,18 @@ stage {
&:insensitive { @include button(insensitive, $style: notification);} &:insensitive { @include button(insensitive, $style: notification);}
} }
// buttons in dialogs // buttons in dialogs
// use a linked style
%dialog_button { %dialog_button {
padding: $base_padding * 2;
font-weight: bold; font-weight: bold;
padding: $base_padding * 2;
border-radius: $base_border_radius * 1.5;
&:ltr {margin-right: 1px;} @include button(normal, $style: dialog);
&:rtl {margin-left: 1px;} &:focus { @include button(focus, $style: dialog);}
&:hover { @include button(hover, $style: dialog);}
@include button(normal, $style: bubble); &:active { @include button(active, $style: dialog);}
&:focus { @include button(focus, $style: bubble);} &:checked { @include button(checked, $style: dialog);}
&:hover { @include button(hover, $style: bubble);} &:insensitive { @include button(insensitive, $style: dialog);}
&: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;
}
} }
// tooltip // tooltip

4
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -160,7 +160,7 @@
// - normal, focus, hover, active, checked, insensitive, default, undecorated // - normal, focus, hover, active, checked, insensitive, default, undecorated
// $c: button bg color, derived from bg_color // $c: button bg color, derived from bg_color
// $tc: button text color, derived from fg_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 // $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 // background color override for buttons that use transparency
// styles: dialogs bubbles, lockscreen // styles: dialogs bubbles, lockscreen
@if $style == 'bubble' or $style == 'lockscreen' { @if $style == 'dialog' or $style == 'lockscreen' {
$button_bg_color: transparentize($tc, .9); $button_bg_color: transparentize($tc, .9);
$hover_button_bg_color: transparentize($tc, .87); $hover_button_bg_color: transparentize($tc, .87);
$active_button_bg_color: transparentize($tc, .84); $active_button_bg_color: transparentize($tc, .84);

8
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -6,12 +6,14 @@
.modal-dialog { .modal-dialog {
background-color: $bg_color; background-color: $bg_color;
border-radius: $modal_radius; border-radius: $alert_radius;
box-shadow: inset 0 0 0 1px $outer_borders_color; box-shadow: inset 0 0 0 1px $outer_borders_color;
padding: $base_padding * 4;
.modal-dialog-content-box { .modal-dialog-content-box {
margin: $base_margin * 8 $base_margin * 10;
spacing: $base_margin * 8; spacing: $base_margin * 8;
margin-top: $base_margin * 2;
margin-bottom: $base_margin * 4;
max-width: 28em; max-width: 28em;
} }
@ -22,7 +24,7 @@
/* End Session Dialog */ /* End Session Dialog */
.end-session-dialog { .end-session-dialog {
width: 30em; width: 24em;
.end-session-dialog-battery-warning, .end-session-dialog-battery-warning,
.dialog-list-title { .dialog-list-title {

5
js/ui/dialog.js
View File

@ -56,7 +56,10 @@ class Dialog extends St.Widget {
this._dialog.add_child(this.contentLayout); this._dialog.add_child(this.contentLayout);
this.buttonLayout = new St.Widget({ 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); this._dialog.add_child(this.buttonLayout);
} }