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 */
%reset {
background: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
// icon tiles
%tile {

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

@ -55,6 +55,13 @@
// 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
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
//
@ -216,8 +223,8 @@
@else if $type == 'checked' {
color: $tc;
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));}
&:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_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($checked_button_bg_color, $active_factor));}
}
// insensitive button
@ -276,7 +283,6 @@
// $system: uses system styles, true or false
//
@extend %tile;
@if $raised {
@ -336,100 +342,81 @@
}
// 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
// $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
// child element, see _panel.scss for details
// $child_class: class name of the child element
//
// common styles
transition-duration: 150ms;
margin: 3px;
border: 1px solid transparent;
border: 3px solid transparent;
background-color: transparent;
border-radius: $forced_circular_radius;
font-weight: bold;
background-color: transparent;
color: $fg;
@if $style == 'flat' {
box-shadow: none;
// background fill defines
$fill: transparent;
$hover_fill: transparentize($fg, .83);
$active_fill: transparentize($fg, .72);
$active_hover_fill: transparentize($fg, .68);
&:active, &:focus, &:checked {
background-color: transparentize($fg, 0.75);
&:hover {
background-color: transparentize($fg, 0.65);
}
@if $style == 'filled' {
$fill: $bg;
$hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
$active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
$active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
}
&:hover {
background-color: transparentize($fg, 0.8);
@include panel_button_fill($fill);
&:focus, &:hover {
@include panel_button_fill($hover_fill);
}
} @else {
background-color: transparentize($bg, 0.2);
&:active, &:checked {
@include panel_button_fill($active_fill);
@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;
&:hover{
@include panel_button_fill($active_hover_fill);
}
}
// some overrides to style a child element
@if $highlighted_child {
// remove the common styles from the parent
background: none !important;
box-shadow: none !important;
border: none !important;
// add them to the child
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: $forced_circular_radius;
// use box-shadow instead of border
@if $contrast == 'high' {
@include draw_hc_inset();
}
}
&:active, &:focus {
background: none;
box-shadow: none !important;
&:focus, &:hover {
#{$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 {
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_placeholder_size: 32px;
$dash_padding: $base_padding * 1.5;
$dash_padding: $base_padding * 2;
$dash_edge_offset: $base_margin * 3;
$dash_border_radius: $modal_radius + $dash_padding;
@ -16,10 +16,10 @@ $dash_border_radius: $modal_radius + $dash_padding;
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
padding-top: $dash_padding * 2;
padding-bottom: $dash_padding * 2;
padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values
padding-right: $dash_padding + 2px;
padding-top: $dash_padding;
padding-bottom: $dash_padding;
padding-left: $dash_padding - $base_margin; // subtract the margins added to .overview-tile below as padding
padding-right: $dash_padding - $base_margin;
@if $contrast == 'high' {
@include draw_hc_inset($width: 2px);
@ -41,12 +41,33 @@ $dash_border_radius: $modal_radius + $dash_padding;
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,
.overview-tile {
@include tile_button($bg:$dash_background_color);
margin: $base_margin * 0.5;
padding: $base_padding;
border-radius: $base_border_radius * 2;}
// remove styles
@extend %reset;
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
@ -64,8 +85,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
// make sure all dash components have same margin from screen edge
.dash-separator,
.dash-background,
.dash-item-container {
.dash-background {
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
$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
$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-button {
@include panel_button($panel_fg_color);
@include panel_button();
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding;
@ -72,11 +73,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&.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 {
@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
@ -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
// 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");
@include panel_button($highlighted_child: true, $child_class: '.clock');
.clock {
// the highlighted child
@ -101,16 +102,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.unlock-screen,
&.login-screen {
background-color: transparent;
box-shadow: none;
// unfortunate duplication to keep indicator style in these states
.panel-button {
&.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 {
@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,
&.login-screen {
.panel-button {
@include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color);
@include panel_button($fg:$transparent_panel_fg_color);
// clock
&.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
&:overview {
.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 {
background-color: $system_panel_fg_color;
@ -139,7 +139,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// clock
&.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');
}
}
}