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

style: Fix panel and dash to account for mouse travel

Browse Source 
- rework overview-icon styles for the dash so they extend to the edge of the screen once again
- revert changes to panel_button mixin
- rework panel_button mixin to be more flexible
- fixes #7318

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3112>
This commit is contained in:
Sam Hewitt 2024-01-11 19:42:08 -03:30 committed by Marge Bot
parent 3f4f74689e
commit b3d3fb79ae
4 changed files with 98 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,14 @@ stage {
} }
/* Common Stylings */ /* Common Stylings */
%reset {
background: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
// icon tiles // icon tiles
%tile { %tile {

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

@ -55,6 +55,13 @@
// font-size: round($size) + pt; // font-size: round($size) + pt;
} }
// Function to fill the background of a panel button
@mixin panel_button_fill($bg) {
// use a box-shadow to fill the background
// this is done because panel buttons use a transparent border to fake padding
box-shadow: inset 0 0 0 100px $bg;
}
// Text entries drawing function // Text entries drawing function
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) { @mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
// //
@ -216,8 +223,8 @@
@else if $type == 'checked' { @else if $type == 'checked' {
color: $tc; color: $tc;
background-color: $checked_button_bg_color; background-color: $checked_button_bg_color;
&:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));} &:hover {background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));}
&:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));} &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));}
} }
// insensitive button // insensitive button
@ -276,7 +283,6 @@
// $system: uses system styles, true or false // $system: uses system styles, true or false
// //
@extend %tile; @extend %tile;
@if $raised { @if $raised {
@ -336,99 +342,80 @@
} }
// Panel menu/button drawing function // Panel menu/button drawing function
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") { @mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
// //
// $bg: background color, derived from $panel_fg_color // $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color // $fg: foreground color, also derived from $panel_fg_color
// $style: can be set to 'filled' if button uses a colored background
// //
// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a // $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details // child element, see _panel.scss for details
// $child_class: class name of the child element // $child_class: class name of the child element
// //
// common styles
transition-duration: 150ms; transition-duration: 150ms;
margin: 3px; border: 3px solid transparent;
border: 1px solid transparent; background-color: transparent;
border-radius: $forced_circular_radius; border-radius: $forced_circular_radius;
font-weight: bold; font-weight: bold;
background-color: transparent;
color: $fg; color: $fg;
@if $style == 'flat' { // background fill defines
box-shadow: none; $fill: transparent;
$hover_fill: transparentize($fg, .83);
$active_fill: transparentize($fg, .72);
$active_hover_fill: transparentize($fg, .68);
&:active, &:focus, &:checked { @if $style == 'filled' {
background-color: transparentize($fg, 0.75); $fill: $bg;
&:hover { $hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
background-color: transparentize($fg, 0.65); $active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
$active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
} }
@include panel_button_fill($fill);
&:focus, &:hover {
@include panel_button_fill($hover_fill);
} }
&:active, &:checked {
@include panel_button_fill($active_fill);
&:hover{ &:hover{
background-color: transparentize($fg, 0.8); @include panel_button_fill($active_hover_fill);
}
} @else {
background-color: transparentize($bg, 0.2);
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
&:active, &:focus, &:checked {
background-color: $bg;
&:hover {
background-color: transparentize($bg, 0.05);
}
}
&:hover {
background-color: transparentize($bg, 0.1);
}
}
@if $contrast == 'high' {
&:hover, &:active, &:focus, &:checked {
border-color: $hc_inset_color;
} }
} }
// some overrides to style a child element // some overrides to style a child element
@if $highlighted_child { @if $highlighted_child {
// remove the common styles from the parent
background: none !important; background: none !important;
box-shadow: none !important;
border: none !important; border: none !important;
// add them to the child
#{$child_class} { #{$child_class} {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent;
border-radius: $forced_circular_radius; border-radius: $forced_circular_radius;
// use box-shadow instead of border
@if $contrast == 'high' {
@include draw_hc_inset();
}
} }
&:active, &:focus { &:focus, &:hover {
background: none;
box-shadow: none !important;
#{$child_class} { #{$child_class} {
background-color: transparentize($fg, 0.75); @include panel_button_fill($hover_fill);
}
}
&:active, &:checked {
#{$child_class} {
@include panel_button_fill($active_fill);
&:hover { &:hover {
background-color: transparentize($fg, 0.65) !important; @include panel_button_fill($active_hover_fill);
} }
}
}
&:hover {
box-shadow: none !important;
#{$child_class} {
background-color: transparentize($fg, 0.8);
} }
} }
} }

42
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -4,7 +4,7 @@
$dash_background_color: $system_overlay_bg_color; $dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding * 1.5; $dash_padding: $base_padding * 2;
$dash_edge_offset: $base_margin * 3; $dash_edge_offset: $base_margin * 3;
$dash_border_radius: $modal_radius + $dash_padding; $dash_border_radius: $modal_radius + $dash_padding;
@ -16,10 +16,10 @@ $dash_border_radius: $modal_radius + $dash_padding;
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: $dash_background_color;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;
padding-top: $dash_padding * 2; padding-top: $dash_padding;
padding-bottom: $dash_padding * 2; padding-bottom: $dash_padding;
padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values padding-left: $dash_padding - $base_margin; // subtract the margins added to .overview-tile below as padding
padding-right: $dash_padding + 2px; padding-right: $dash_padding - $base_margin;
@if $contrast == 'high' { @if $contrast == 'high' {
@include draw_hc_inset($width: 2px); @include draw_hc_inset($width: 2px);
@ -41,12 +41,33 @@ $dash_border_radius: $modal_radius + $dash_padding;
height: $dash_placeholder_size; height: $dash_placeholder_size;
} }
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
.show-apps, .show-apps,
.overview-tile { .overview-tile {
@include tile_button($bg:$dash_background_color); // remove styles
margin: $base_margin * 0.5; @extend %reset;
padding: $base_padding;
border-radius: $base_border_radius * 2;} padding: $dash_padding $base_margin;
padding-bottom: $dash_padding + $dash_edge_offset;
$fg:$system_fg_color;
$bg:$dash_background_color;
.overview-icon {
@extend %tile;
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);
@if $contrast == 'high' {
@include draw_hc_inset();
}
}
&:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
}
} }
// separator between pinned and running apps // separator between pinned and running apps
@ -64,8 +85,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
// make sure all dash components have same margin from screen edge // make sure all dash components have same margin from screen edge
.dash-separator, .dash-separator,
.dash-background, .dash-background {
.dash-item-container {
margin-bottom: $dash_edge_offset; margin-bottom: $dash_edge_offset;
} }
} }

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

@ -2,6 +2,7 @@
// a.k.a. the panel // a.k.a. the panel
$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); $privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
$recording_indicator_color: $red_4;
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens $transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
@ -18,7 +19,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// panel menus // panel menus
.panel-button { .panel-button {
@include panel_button($panel_fg_color); @include panel_button();
-natural-hpadding: $base_padding * 2; -natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding; -minimum-hpadding: $base_padding;
@ -72,11 +73,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
} }
&.screen-recording-indicator { &.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
} }
&.screen-sharing-indicator { &.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
} }
// clock // clock
@ -84,7 +85,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// The clock display needs to have the background on .clock because // The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background // we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details // see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class:".clock"); @include panel_button($highlighted_child: true, $child_class: '.clock');
.clock { .clock {
// the highlighted child // the highlighted child
@ -101,16 +102,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.unlock-screen, &.unlock-screen,
&.login-screen { &.login-screen {
background-color: transparent; background-color: transparent;
box-shadow: none;
// unfortunate duplication to keep indicator style in these states // unfortunate duplication to keep indicator style in these states
.panel-button { .panel-button {
&.screen-recording-indicator { &.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
} }
&.screen-sharing-indicator { &.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
} }
} }
} }
@ -119,11 +119,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.unlock-screen, &.unlock-screen,
&.login-screen { &.login-screen {
.panel-button { .panel-button {
@include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color); @include panel_button($fg:$transparent_panel_fg_color);
// clock // clock
&.clock-display { &.clock-display {
@include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock"); @include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
} }
} }
} }
@ -131,7 +131,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// use system text styles for overview panel // use system text styles for overview panel
&:overview { &:overview {
.panel-button { .panel-button {
@include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color); @include panel_button($fg:$system_panel_fg_color);
&#panelActivities .workspace-dot { &#panelActivities .workspace-dot {
background-color: $system_panel_fg_color; background-color: $system_panel_fg_color;
@ -139,7 +139,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// clock // clock
&.clock-display { &.clock-display {
@include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock"); @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
} }
} }
} }