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

panel: Stylesheet updates and minor improvements for panel buttons

Browse Source 
- spin out all the panel button styling into a drawing mixin
- clean up the styles generally
- make special cases for the clock and non-flat buttons
- contrast fixes for non-flat buttons, fixes #6768
- new stop icon for the screen recording/cast indicators

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2804>
This commit is contained in:
Sam Hewitt 2023-06-19 17:22:29 -02:30 committed by Marge Bot
parent aa11d90693
commit eacabbf443
7 changed files with 117 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/gnome-shell-icons.gresource.xml
View File

@ -14,6 +14,7 @@
<file>scalable/actions/preview-close-symbolic.svg</file>
<file>scalable/actions/record-screen-symbolic.svg</file>
<file>scalable/actions/screencast-recorded-symbolic.svg</file>
<file>scalable/actions/screencast-stop-symbolic.svg</file>
<file>scalable/actions/screenshooter-symbolic.svg</file>
<file>scalable/actions/screenshot-ui-area-symbolic.svg</file>
<file>scalable/actions/screenshot-ui-display-symbolic.svg</file>
@ -31,7 +32,6 @@
<file>scalable/status/no-notifications-symbolic.svg</file>
<file>scalable/status/screen-privacy-disabled-symbolic.svg</file>
<file>scalable/status/screen-privacy-symbolic.svg</file>
<file>scalable/status/stop-symbolic.svg</file>
</gresource>
</gresources>

1
data/icons/scalable/actions/screencast-stop-symbolic.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#2e3436" d="M4.5 3h7A1.5 1.5 0 0 1 13 4.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5v-7A1.5 1.5 0 0 1 4.5 3Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

2
data/icons/scalable/status/stop-symbolic.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4 4 h 8 v 8 h -8 z m 0 0" fill="#2e3436"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 186 B

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

@ -22,8 +22,8 @@ $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
$error_color: if($variant == 'light', $red_3, $red_4);
$warning_color: if($variant == 'light', $yellow_4, $yellow_3);
$error_color: if($variant == 'light', $red_4, $red_3);
$success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color;

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

@ -357,3 +357,87 @@
&:active {@include button(active, $c:$bg);}
&:checked {@include button(checked, $c:$bg);}
}
//
// Panel menu/button drawing function
//
// $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color
//
// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details
//
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
font-weight: bold;
background-color: transparent;
color: $fg;
@if $flat {
box-shadow: none;
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
}
} @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
}
}
// some overrides to style a child element
@if $highlighted_child {
box-shadow: none !important;
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
}
&:active, &:overview, &:focus, &:checked {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
}
&:hover {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
}
}
}
&:hover {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
}
}
}
}

169
data/theme/gnome-shell-sass/widgets/_panel.scss
View File

@ -23,103 +23,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&:overview {
background-color: transparent;
box-shadow: none;
.panel-button {
color: $panel_system_fg_color !important;
@include panel_button($panel_system_fg_color);
}
}
// panel menus
.panel-button {
font-weight: bold;
color: $panel_fg_color;
@include panel_button($panel_fg_color);
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding;
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
&.clock-display {
.clock {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px $warning_color;
StBoxLayout { margin: 0 $base_padding; }
}
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
StIcon {
icon-size: $base_icon_size;
}
}
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
// status area icons
.system-status-icon {
@ -142,63 +56,36 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&#panelActivities {
-natural-hpadding: $base_padding * 3;
}
}
&.unlock-screen,
&.login-screen,
&:overview {
.panel-button {
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
// screen activity indicators
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
StIcon {
icon-size: $base_icon_size;
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
}
}
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $flat: false);
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
&.screen-sharing-indicator {
@include panel_button($warning_color, transparentize(black, 0.2), $flat: false);
}
// clock
&.clock-display {
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class:".clock");
.clock {
// the highlighted child
}
}
}
@ -231,10 +118,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// Clock
.clock-display-box {
spacing: 2px;
.clock {
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;

4
js/ui/status/remoteAccess.js
View File

@ -83,7 +83,7 @@ var ScreenRecordingIndicator = GObject.registerClass({
});
this._box.add_child(this._label);
this._icon = new St.Icon({ icon_name: 'stop-symbolic' });
this._icon = new St.Icon({icon_name: 'screencast-stop-symbolic'});
this._box.add_child(this._icon);
this.hide();
@ -150,7 +150,7 @@ var ScreenSharingIndicator = GObject.registerClass({
let icon = new St.Icon({icon_name: 'screen-shared-symbolic'});
this._box.add_child(icon);
icon = new St.Icon({icon_name: 'window-close-symbolic'});
icon = new St.Icon({icon_name: 'screencast-stop-symbolic'});
this._box.add_child(icon);
this._controller = global.backend.get_remote_access_controller();