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/3383>
This commit is contained in:
Sam Hewitt 2024-06-18 15:03:19 -02:30 committed by Sam Hewitt
parent 2e2c5e1cec
commit ff4b9fdb08
6 changed files with 70 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

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

@ -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;

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

@ -16,7 +16,7 @@
}
.modal-dialog-linked-button {
@extend %bubble_button;
@extend %dialog_button;
}
}

44
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -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

2
data/theme/gnome-shell-sass/widgets/_notifications.scss
View File

@ -21,5 +21,5 @@ $notification_banner_width: 34em;
}
.notification-button {
@extend %bubble_button;
@extend %notification_button;
}

1
js/ui/messageList.js
View File

@ -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,
});