From e6297916709ad4126269ac12fecb31b6daaa7a34 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 15 Feb 2022 12:30:51 -0330 Subject: [PATCH 1/2] theme: Fixes to regressions in app grid --- .../gnome-shell-sass/widgets/_app-grid.scss | 12 ++++------ .../theme/gnome-shell-sass/widgets/_dash.scss | 8 +++++-- .../widgets/_message-list.scss | 2 +- .../widgets/_search-results.scss | 24 ++++++++++--------- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 05a717519e..25e29ef648 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -6,12 +6,12 @@ $app_icon_size: 96px; .icon-grid { row-spacing: $base_padding * 2; column-spacing: $base_padding * 2; - max-row-spacing: $base_padding * 12; - max-column-spacing: $base_padding * 12; + max-row-spacing: $base_padding * 7; + max-column-spacing: $base_padding * 7; page-padding-top: $base_padding * 4; page-padding-bottom: $base_padding * 4; - page-padding-left: $base_padding * 2; - page-padding-right: $base_padding * 2; + page-padding-left: $base_padding * 3; + page-padding-right: $base_padding * 3; } /* App Icons */ @@ -20,9 +20,7 @@ $app_icon_size: 96px; .app-well-app { @include overview_icon($osd_fg_color); - .overview-icon { - padding: $base_padding*2; - } + .overview-icon {padding: $base_padding*2;} .overview-icon.overview-icon-with-label { > StBoxLayout { spacing: $base_padding; diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 462e663271..25755e73d7 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -8,7 +8,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // container for the dash #dash { @extend %caption; - margin: 2em; + margin: $base_margin * 3; .placeholder { // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); @@ -38,9 +38,12 @@ $dash_border_radius: $modal_radius + $dash_padding; // 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 { - margin: 0 4px; padding: $base_padding; } @@ -51,6 +54,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // separator between favourites and running apps .dash-separator { width: 1px; + margin: 0 $base_margin; background-color: $borders_color; } diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index ac2e8efe2f..83268cbb3a 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -3,7 +3,7 @@ // main list .message-list { - width: 32em; + width: 29em; border: solid $borders_color; // padding and margins to account for scrollbar diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index 4ad3f08217..644c53db58 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -1,15 +1,18 @@ /* Search */ // search overview container +#searchResults { + margin: 0 $base_margin; +} + #searchResultsContent { - max-width: 1024px; - spacing: $base_margin * 2; + max-width: 1072px; } // search results sections "the boxes" .search-section { // This should be equal to #searchResultsContent spacing - spacing: $base_margin * 2; + spacing: $base_padding*3; // separator (unstyled) .search-section-separator { @@ -23,27 +26,24 @@ background-color: lighten($system_bg_color, 5%); border-radius: $modal_radius*1.5; border: 1px solid $osd_outer_borders_color; - box-shadow: none; - text-shadow: none; color: $osd_fg_color; padding: $base_padding*2; - margin: $base_margin; - // This is the space between the provider icon and the results container + margin:0 $base_margin*3; } %search_section_content_item { @include tile_button($osd_fg_color); - margin: $base_margin; - border-radius: $base_border_radius !important; + border-radius: $base_border_radius+3px; } // "no results" text .search-statustext { - @extend %large_title; + @extend %title_1; } .grid-search-results { - spacing: $base_padding * 6; + spacing: $base_padding*5; + margin:0 $base_margin*3; } // Search results with icons @@ -54,6 +54,8 @@ // search result provider .search-provider-icon { @extend %search_section_content_item; + &:ltr {margin-right: $base_margin;} + &:rtl {margin-left: $base_margin;} // content .list-search-provider-content { -- GitLab From 8a2d33ea4306d35e39d8eb49c276343618ee1d5d Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 15 Feb 2022 12:30:51 -0330 Subject: [PATCH 2/2] theme: Fixes to regressions in app grid --- data/theme/gnome-shell-sass/_common.scss | 1 + data/theme/gnome-shell-sass/_drawing.scss | 17 ++++++++++------- .../gnome-shell-sass/widgets/_app-grid.scss | 17 ++++++----------- data/theme/gnome-shell-sass/widgets/_dash.scss | 10 ++++++++-- .../widgets/_switcher-popup.scss | 1 - 5 files changed, 25 insertions(+), 21 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index f86de2053c..af6a05f2bb 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -84,6 +84,7 @@ stage { %tile { border-radius: $base_border_radius * 2; // 16px padding: $base_padding; + spacing: $base_padding; border: 2px solid transparent; transition-duration: 100ms; text-align: center; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 10c1c3f3fc..1cd7e9a8f5 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -239,10 +239,12 @@ $button_bg_color: mix($tc, $c, 5%); background-color: transparentize($color, .84); } &: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);} + &:selected, + &:focus { + background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%); + border-color: transparentize($selected_bg_color, 0.5); + &:hover { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .84), 50%);} + &:active { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%);} } &:active { background-color: transparentize($color, .84);} &:outlined, &:checked { @@ -268,9 +270,10 @@ $button_bg_color: mix($tc, $c, 5%); &: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);} + background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%); + border-color: transparentize($selected_bg_color, 0.5); + &:hover .overview-icon { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .84), 50%);} + &:active .overview-icon { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%);} } &:active .overview-icon { background-color: transparentize($color, .84);} &:outlined .overview-icon, diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 25e29ef648..c936e4b6d4 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -20,7 +20,7 @@ $app_icon_size: 96px; .app-well-app { @include overview_icon($osd_fg_color); - .overview-icon {padding: $base_padding*2;} + .overview-icon { padding: $base_padding*2;} .overview-icon.overview-icon-with-label { > StBoxLayout { spacing: $base_padding; @@ -37,7 +37,6 @@ $app_icon_size: 96px; .app-folder-dialog { border-radius: $modal_radius*2; background-color: $dash_background_color; - padding: 12px 0px 12px 0px; & .folder-name-container { padding: 24px 36px 0; @@ -54,15 +53,11 @@ $app_icon_size: 96px; & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .edit-folder-button { - @include button(undecorated); + @extend %button; + padding: 0; width: 36px; height: 36px; - border-radius: 18px; - - &:focus {@include button(focus);} - &:hover {@include button(hover);} - &:active {@include button(active);} - + border-radius: 99px; & > StIcon { icon-size: $base_icon_size } } } @@ -83,8 +78,8 @@ $app_icon_size: 96px; .app-folder-dialog-container { padding: $base_padding*2; - width: 620px; - height: 620px; + width: 640px; + height: 640px; } // Running app indicator (also shown in dash) diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 25755e73d7..8f5d5f939b 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -8,7 +8,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // container for the dash #dash { @extend %caption; - margin: $base_margin * 3; + margin-top: $dash_padding; .placeholder { // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); @@ -24,7 +24,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // Running app indicator (also shown in app grid) .app-well-app-running-dot { - margin-bottom: 15px; // hardcoded + margin-bottom: 14px; // hardcoded } } @@ -34,6 +34,7 @@ $dash_border_radius: $modal_radius + $dash_padding; border-radius: $dash_border_radius; padding: $dash_padding; spacing: $base_padding; + margin-bottom: $dash_padding; } // items on the dash @@ -49,6 +50,10 @@ $dash_border_radius: $modal_radius + $dash_padding; // show apps button .show-apps { @include overview_icon($osd_fg_color);} + + .show-apps, .app-well-app { + padding-bottom: $dash_padding; + } } // separator between favourites and running apps @@ -56,6 +61,7 @@ $dash_border_radius: $modal_radius + $dash_padding; width: 1px; margin: 0 $base_margin; background-color: $borders_color; + margin-bottom: $dash_padding; } // OSD Tooltip diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index 892d3351d5..1b03c9d050 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -25,7 +25,6 @@ $switcher_border_radius: $modal_radius + 8px; // each item in the list .item-box { - @include tile_button($osd_fg_color); } -- GitLab