edu4rdshl/gnome-shell
1
0
Fork 0
mirror of https://github.com/edu4rdshl/gnome-shell.git synced 2026-07-18 07:34:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

quickSettings: Split menu toggle

Browse source 
Menu toggles are currently regular toggles with an additional
arrow button. This allows for a simpler implementation, but
has downsides with regards to keyboard navigation and hover
feedback.

To make it more obvious that the two parts of the menu toggle
perform different actions, change the overall structure of the
toggle to *contain* a regular toggle and the menu button.

That way each element uses its own hover effect, and shows up
in the keynav focus chain.

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2632>
This commit is contained in:
Florian Müllner 2022-08-23 01:29:10 +02:00 • committed by Marge Bot
parent 3fba10efa6
commit cf89a6d01e
3 changed files with 71 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View file

@ -12,13 +12,15 @@
spacing-columns: $base_padding*2;
}
.quick-toggle {
.quick-toggle, .quick-menu-toggle {
border-radius: 99px;
min-width: 12em;
max-width: 12em;
min-height: 48px;
border:none;
}
.quick-toggle {
&:checked { @include button(default, $c:$selected_bg_color); }
& > StBoxLayout { spacing: $base_padding*1.5; }
@ -37,16 +39,26 @@
font-size: 12px;
}
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
.quick-toggle-icon { icon-size: $base_icon_size; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle {
min-width: auto;
max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; }
&:rtl { border-radius: 0 99px 99px 0; }
&:ltr:last-child { border-radius: 99px; }
&:rtl:last-child { border-radius: 99px; }
}
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75;
border: none;
&:checked { @include button(default, $c:$selected_bg_color); }
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }