From 745667a82504351d01724602f8f18987458ef6ec Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 14 Nov 2023 10:30:45 -0330 Subject: [PATCH] style: Rewrote app grid tile drawing functions - updated mixin for tile_button - dropped the overview_button mixin - minor changes to dash, appDisplay and switcherPopup JS to accommodate new stylesheet - new focus style for all tile buttons - improved high contrast style support for app grid and dash - renamed some style-classes - tidied up dash stylesheet Part-of: --- data/theme/gnome-shell-high-contrast.scss | 2 + data/theme/gnome-shell-sass/_common.scss | 4 +- data/theme/gnome-shell-sass/_drawing.scss | 94 ++++++++------- .../_high-contrast-colors.scss | 2 +- .../gnome-shell-sass/widgets/_app-grid.scss | 48 +++++--- .../theme/gnome-shell-sass/widgets/_dash.scss | 114 +++++++++--------- .../widgets/_search-results.scss | 15 ++- .../widgets/_switcher-popup.scss | 6 +- .../widgets/_window-picker.scss | 2 +- js/ui/appDisplay.js | 7 +- js/ui/dash.js | 2 +- js/ui/switcherPopup.js | 6 +- 12 files changed, 165 insertions(+), 137 deletions(-) diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss index 67378203e..20ce590c4 100644 --- a/data/theme/gnome-shell-high-contrast.scss +++ b/data/theme/gnome-shell-high-contrast.scss @@ -29,4 +29,6 @@ $variant: 'dark'; background-color: $osd_bg_color; padding: $base_padding * 2; border-radius: $modal_radius; + border: 2px solid $hc_inset_color; + margin: $base_padding * 3; } diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 965f35075..ea835a3eb 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -72,7 +72,9 @@ stage { border-radius: $base_border_radius * 2; padding: $base_padding; spacing: $base_padding; - border: 2px solid transparent; + border-width: 2px; + border-style: solid; + border-color:transparent; transition-duration: 200ms; text-align: center; color: inherit; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 23e996ac2..ff404b047 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -273,63 +273,71 @@ } } -// tile +// Helper mixin for button-like elements with an icon @mixin tile_button($color, $flat: true) { @extend %tile; + + // focus-color + $fc: mix($selected_bg_color, $color, 90%); + @if $flat { background-color: transparent; + &:hover { background-color: transparentize($color, .88);} + &:highlighted, &:focus { + background-color: transparentize($fc, .84); + &:hover { + background-color: transparentize($fc, .68); + } + } } @else { background-color: transparentize($color, .84); - @if $is_highcontrast { - box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack + &:hover { background-color: transparentize($color, .72);} + &:highlighted, &:focus { + background-color: transparentize(mix($fc, $color, 20%), .84); + &:hover { + background-color: transparentize(mix($fc, $color, 20%), .68); + } } } - &:hover { background-color: transparentize($color, .9);} - &:selected, &:focus { - background-color: transparentize($color, .87); - &:hover { background-color: transparentize($color, .84);} - &:active { background-color: transparentize($color, .87);} + + // bit of a hack to have nice high contrast + @if $is_highcontrast { + @if $flat { + &:hover { + box-shadow: inset 999px 0 0 0 transparentize($color, .92); + } + &:highlighted, &:focus { + box-shadow: inset 999px 0 0 0 transparentize($fc, .8); + } + } @else { + box-shadow: inset 999px 0 0 0 transparentize($color, .92); + border-color: transparentize($color, .44); + &:highlighted, &:focus { + box-shadow: inset 999px 0 0 0 transparentize($fc, .8); + } + } } - &:active { background-color: transparentize($color, .84);} - &:outlined, &:checked { + + &:highlighted, &:focus { + border-color: transparentize($fc, .3); + } + + &:active { + background-color: transparentize($color, .76); + &:focus { + background-color: transparentize($fc, .68); + } + } + + &:selected, + &:checked { background-color: transparentize($color, .81); &:active { background-color: transparentize($color, .78);} &:hover { background-color: transparentize($color, .75);} } + &:drop { - border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping - background-color: transparentize($selected_bg_color, .8); - } -} - -// overview icon, dash, app grid -@mixin overview_icon($color, $flat: true) { - transition-duration: 400ms; - .overview-icon { - @extend %tile; - } - @if $flat { - .overview-icon { background-color: transparent;} - } @else { - .overview-icon { background-color: transparentize($color, .93); } - } - &:hover .overview-icon { background-color: transparentize($color, .87);} - - &:selected .overview-icon, - &:focus .overview-icon { - background-color: transparentize($color, .87); - &:hover .overview-icon { background-color: transparentize($color, .84);} - &:active .overview-icon { background-color: transparentize($color, .87);} - } - &:active .overview-icon { background-color: transparentize($color, .84);} - &:outlined .overview-icon, - &:checked .overview-icon { - background-color: transparentize($color, .81); - &:active .overview-icon { background-color: transparentize($color, .78);} - &:hover .overview-icon { background-color: transparentize($color, .75);} - } - &:drop .overview-icon { - border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping + border-color: transparentize($selected_bg_color, .2); background-color: transparentize($selected_bg_color, .8); } } diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index dc74a7e88..ed087f7d8 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -71,4 +71,4 @@ $active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_colo $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%)); // inset colour for high contrast -$hc_inset_color: transparentize($fg_color, 0.7); +$hc_inset_color: transparentize($fg_color, 0.6); diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index c0d1631da..0ce848dcb 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -16,25 +16,40 @@ $app_icon_size: 96px; /* App Icons */ -// Icon tiles in the app grid -.app-well-app { - @include overview_icon($system_fg_color); +// items in the app grid and dash +.overview-tile { + @include tile_button($system_fg_color); + // override the %tile style + border-radius: $base_border_radius*3; + padding: $base_padding * 2; + + // the icon itself .overview-icon { - padding: $base_padding * 2; - border-radius: $base_border_radius * 3; - color: $system_fg_color; - } - .overview-icon.overview-icon-with-label { - > StBoxLayout { - spacing: $base_padding; + // item with a label + &.overview-icon-with-label { + > StBoxLayout { + spacing: $base_padding; + } } } } // app folders -.app-well-app.app-folder { - @include overview_icon($system_fg_color, $flat: false); +.app-folder { + @include tile_button($system_fg_color, $flat: false); +} + +// Running app indicator (also shown in dash) +.app-grid-running-dot { + height: 5px; + width: 5px; + border-radius:5px; + background-color: $system_fg_color; + margin-bottom: 2px; + @if $is_highcontrast { + margin-bottom: 4px; + } } // expanded folder @@ -88,14 +103,6 @@ $app_icon_size: 96px; height: 720px; } -// Running app indicator (also shown in dash) -.app-well-app-running-dot { - height: 5px; - width: 5px; - border-radius:5px; - margin-bottom: 8px; - background-color: $system_fg_color; -} // Rename popup for app folders .rename-folder-popup { @@ -135,6 +142,7 @@ $page_indicator_size: 10px; } } +// page navigation .page-navigation-hint { &.dnd { background: rgba(255, 255, 255, 0.1); diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 169d1e245..90a520bcc 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -4,75 +4,75 @@ $dash_background_color: $system_overlay_bg_color; $dash_placeholder_size: 32px; -$dash_padding: $base_padding * 2; // 12px +$dash_padding: $base_padding * 1.5; +$dash_edge_offset: $base_margin * 3; $dash_border_radius: $modal_radius + $dash_padding; // container for the dash #dash { - @extend %caption; - margin-top: $dash_padding; + margin-top: $dash_edge_offset; - .placeholder { - // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); - background-image:none; - background-size: contain; - height: $dash_placeholder_size; + // background behind item container + .dash-background { + background-color: $dash_background_color; + border-radius: $dash_border_radius; + border: 2px solid transparent; + padding: $dash_padding * 2 $dash_padding; // padding is uneven + + @if $is_highcontrast { + border-color: $hc_inset_color; + } } - .empty-dash-drop-target { - width: $dash_placeholder_size; - height: $dash_placeholder_size; + // items on the dash + .dash-item-container { + + .placeholder { + // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); + background-image: none; + background-size: contain; + height: $dash_placeholder_size; + } + + .empty-dash-drop-target { + width: $dash_placeholder_size; + height: $dash_placeholder_size; + } + + // app icons + .overview-tile { + // inherits styles from _app-grid.css + } + + // button to show app grid + .show-apps { + @include tile_button($system_fg_color); + } + + .show-apps, .overview-tile { + margin: $base_margin * 0.5; + padding: $base_padding; + border-radius: $base_border_radius * 2;} } - // Running app indicator (also shown in app grid) - .app-well-app-running-dot { - margin-bottom: 14px; // hardcoded - } -} + // separator between pinned and running apps + .dash-separator { + width: 1px; + margin-left:$base_margin; + margin-right:$base_margin; + background-color: $system_borders_color; -// background of the dash behind app icons -.dash-background { - background-color: $dash_background_color; - border-radius: $dash_border_radius; - padding: $dash_padding; - spacing: $base_padding; - margin-bottom: $dash_padding; - - @if $is_highcontrast { - border: 2px solid $hc_inset_color; - box-shadow:none; - } -} - -// items on the dash -.dash-item-container { - > * {margin: 0 2px;} - &:ltr{&:first-child {margin-left: 0;}} - &:rtl{&:first-child {margin-right: 0;}} - - // each app item on the dash - .app-well-app .overview-icon { - padding: $base_padding; - border-radius: $base_border_radius * 2; + @if $is_highcontrast { + width: 2px; + background-color: $hc_inset_color; + } } - // show apps button - .show-apps { @include overview_icon($system_fg_color);} - - .show-apps, .app-well-app { - padding-bottom: $dash_padding; - color: $system_fg_color; - } -} - -// separator between favourites and running apps -.dash-separator { - width: 1px; - margin: 0 $base_margin; - background-color: $system_borders_color; - margin-bottom: $dash_padding; - @if $is_highcontrast { - width: 2px; + // make sure all dash components have same margin from screen edge + .dash-separator, + .dash-background, + .dash-item-container { + margin-bottom: $dash_edge_offset; } } diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index 9fdfd104b..e7b11ed8d 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -28,6 +28,10 @@ border-radius: $modal_radius * 1.5; padding: $base_padding * 2; margin:0 $base_margin * 3; + border: 2px solid transparent; + @if $is_highcontrast { + border-color: $hc_inset_color; + } } %search_section_content_item { @@ -48,7 +52,7 @@ // Search results with icons .grid-search-result { - @extend .app-well-app; + @extend .overview-tile; } // search result provider @@ -86,11 +90,18 @@ // list item title (with leading icon) .list-search-result-title { spacing: $base_padding * 2; - // font-weight: bold; + + @if $is_highcontrast { + font-weight: bold; + } } // list item description .list-search-result-description { color: $system_insensitive_fg_color; + + @if $is_highcontrast { + color: $system_fg_color; + } } } diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index 9168ed911..9b8305fda 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -4,7 +4,6 @@ $switcher_padding: $base_padding * 2; $switcher_radius: $modal_radius + $switcher_padding; - // the full screen container of the switcher .switcher-popup { padding: 0; @@ -26,11 +25,8 @@ $switcher_radius: $modal_radius + $switcher_padding; // each item in the list .item-box { @include tile_button($osd_fg_color); - // override over style so mouse doesn't steal focus + // override %tile style so mouse doesn't steal focus &:hover {background: none;} - @if $is_highcontrast { - box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2); - } } .separator { diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss index 613a9d65a..eb0da331f 100644 --- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss +++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss @@ -34,7 +34,7 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); } @if $is_highcontrast { - border:2px solid $outer_borders_color; + border:2px solid $hc_inset_color; } } diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 82ce48b09..506bf1827 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -2324,7 +2324,7 @@ export const FolderIcon = GObject.registerClass({ }, class FolderIcon extends AppViewItem { _init(id, path, parentView) { super._init({ - style_class: 'app-well-app app-folder', + style_class: 'overview-tile app-folder', button_mask: St.ButtonMask.ONE, toggle_mode: true, can_focus: true, @@ -2992,7 +2992,7 @@ export const AppIcon = GObject.registerClass({ const expandTitleOnHover = appIconParams['expandTitleOnHover']; delete iconParams['expandTitleOnHover']; - super._init({style_class: 'app-well-app'}, isDraggable, expandTitleOnHover); + super._init({style_class: 'overview-tile'}, isDraggable, expandTitleOnHover); this.app = app; this._id = app.get_id(); @@ -3014,13 +3014,14 @@ export const AppIcon = GObject.registerClass({ this._iconContainer.add_child(this.icon); this._dot = new St.Widget({ - style_class: 'app-well-app-running-dot', + style_class: 'app-grid-running-dot', layout_manager: new Clutter.BinLayout(), x_expand: true, y_expand: true, x_align: Clutter.ActorAlign.CENTER, y_align: Clutter.ActorAlign.END, }); + this._dot.translationY = 8; this._iconContainer.add_child(this._dot); this.label_actor = this.icon.label; diff --git a/js/ui/dash.js b/js/ui/dash.js index dac2a99a7..dc1bd70fa 100644 --- a/js/ui/dash.js +++ b/js/ui/dash.js @@ -153,7 +153,7 @@ class DashItemContainer extends St.Widget { this.destroy_all_children(); this.child = actor; - this.child.y_expand = true; + this.child.y_expand = false; this.add_child(this.child); } diff --git a/js/ui/switcherPopup.js b/js/ui/switcherPopup.js index 9b956e8d4..fd99b8374 100644 --- a/js/ui/switcherPopup.js +++ b/js/ui/switcherPopup.js @@ -488,15 +488,15 @@ export const SwitcherList = GObject.registerClass({ highlight(index, justOutline) { if (this._items[this._highlighted]) { - this._items[this._highlighted].remove_style_pseudo_class('outlined'); this._items[this._highlighted].remove_style_pseudo_class('selected'); + this._items[this._highlighted].remove_style_pseudo_class('highlighted'); } if (this._items[index]) { if (justOutline) - this._items[index].add_style_pseudo_class('outlined'); - else this._items[index].add_style_pseudo_class('selected'); + else + this._items[index].add_style_pseudo_class('highlighted'); } this._highlighted = index;