workspaceSwitcherPopup: Implement new OSD design

Move the popup to the bottom and represent workspaces as small dots
instead of as scaled down representations of the work area.

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>
This commit is contained in:
Florian Müllner 2022-01-26 01:33:21 +01:00 committed by Marge Bot
parent 00ccea48a6
commit f88222edd6
2 changed files with 31 additions and 156 deletions

View file

@ -1,38 +1,24 @@
/* Workspace Switcher */
$ws_padding: $base_padding*2;
$ws_border_radius: $modal_radius + 8px;
.workspace-switcher-group {
padding: $base_padding * 2;
}
.workspace-switcher-container {
@extend %osd_panel;
padding: $ws_padding;
border-radius: $ws_border_radius;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
}
$ws_indicator_height: $base_icon_size * 2;
$ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6;
.workspace-switcher {
background: transparent;
border: none;
border-radius: 0;
@extend %osd_panel;
margin: 4em;
spacing: $base_spacing * 2;
}
.ws-switcher-indicator {
background: transparent;
height: 50px;
background-size: 32px;
border: 1px solid transparentize($osd_fg_color,0.9);
border-radius: $base_border_radius + 3px;
background-color: transparentize($osd_fg_color,0.5);
padding: $ws_dot_inactive / 2;
margin: ($ws_indicator_height - $ws_dot_inactive) / 2;
border-radius: $ws_indicator_height;
&:active {
height: 52px;
background-color: $selected_bg_color;
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
border-radius: $base_border_radius + 3px;
color: $selected_fg_color;
background-color: $osd_fg_color;
padding: $ws_dot_active / 2;
margin: ($ws_indicator_height - $ws_dot_active) / 2;
}
}