brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Rewrote app grid tile drawing functions

Browse Source 
- 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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3017>
This commit is contained in:
Sam Hewitt 2023-11-14 10:30:45 -03:30 committed by Marge Bot
parent 76dfff1012
commit 745667a825
12 changed files with 165 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-high-contrast.scss
View File

@ -29,4 +29,6 @@ $variant: 'dark';
background-color: $osd_bg_color; background-color: $osd_bg_color;
padding: $base_padding * 2; padding: $base_padding * 2;
border-radius: $modal_radius; border-radius: $modal_radius;
border: 2px solid $hc_inset_color;
margin: $base_padding * 3;
} }

4
data/theme/gnome-shell-sass/_common.scss
View File

@ -72,7 +72,9 @@ stage {
border-radius: $base_border_radius * 2; border-radius: $base_border_radius * 2;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
border: 2px solid transparent; border-width: 2px;
border-style: solid;
border-color:transparent;
transition-duration: 200ms; transition-duration: 200ms;
text-align: center; text-align: center;
color: inherit; color: inherit;

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

@ -273,63 +273,71 @@
} }
} }
// tile // Helper mixin for button-like elements with an icon
@mixin tile_button($color, $flat: true) { @mixin tile_button($color, $flat: true) {
@extend %tile; @extend %tile;
// focus-color
$fc: mix($selected_bg_color, $color, 90%);
@if $flat { @if $flat {
background-color: transparent; background-color: transparent;
&:hover { background-color: transparentize($color, .88);}
&:highlighted, &:focus {
background-color: transparentize($fc, .84);
&:hover {
background-color: transparentize($fc, .68);
}
}
} @else { } @else {
background-color: transparentize($color, .84); background-color: transparentize($color, .84);
&: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);
}
}
}
// bit of a hack to have nice high contrast
@if $is_highcontrast { @if $is_highcontrast {
box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack @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);
} }
} }
&: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);}
} }
&: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); background-color: transparentize($color, .81);
&:active { background-color: transparentize($color, .78);} &:active { background-color: transparentize($color, .78);}
&:hover { background-color: transparentize($color, .75);} &:hover { background-color: transparentize($color, .75);}
} }
&:drop { &:drop {
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);
}
}
// 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
background-color: transparentize($selected_bg_color, .8); background-color: transparentize($selected_bg_color, .8);
} }
} }

2
data/theme/gnome-shell-sass/_high-contrast-colors.scss
View File

@ -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%)); $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
// inset colour for high contrast // inset colour for high contrast
$hc_inset_color: transparentize($fg_color, 0.7); $hc_inset_color: transparentize($fg_color, 0.6);

44
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -16,25 +16,40 @@ $app_icon_size: 96px;
/* App Icons */ /* App Icons */
// Icon tiles in the app grid // items in the app grid and dash
.app-well-app { .overview-tile {
@include overview_icon($system_fg_color); @include tile_button($system_fg_color);
.overview-icon { // override the %tile style
padding: $base_padding * 2;
border-radius: $base_border_radius*3; border-radius: $base_border_radius*3;
color: $system_fg_color; padding: $base_padding * 2;
}
.overview-icon.overview-icon-with-label { // the icon itself
.overview-icon {
// item with a label
&.overview-icon-with-label {
> StBoxLayout { > StBoxLayout {
spacing: $base_padding; spacing: $base_padding;
} }
} }
} }
}
// app folders // app folders
.app-well-app.app-folder { .app-folder {
@include overview_icon($system_fg_color, $flat: false); @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 // expanded folder
@ -88,14 +103,6 @@ $app_icon_size: 96px;
height: 720px; 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 popup for app folders
.rename-folder-popup { .rename-folder-popup {
@ -135,6 +142,7 @@ $page_indicator_size: 10px;
} }
} }
// page navigation
.page-navigation-hint { .page-navigation-hint {
&.dnd { &.dnd {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);

80
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -4,13 +4,28 @@
$dash_background_color: $system_overlay_bg_color; $dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px; $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; $dash_border_radius: $modal_radius + $dash_padding;
// container for the dash // container for the dash
#dash { #dash {
@extend %caption; margin-top: $dash_edge_offset;
margin-top: $dash_padding;
// 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;
}
}
// items on the dash
.dash-item-container {
.placeholder { .placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@ -24,55 +39,40 @@ $dash_border_radius: $modal_radius + $dash_padding;
height: $dash_placeholder_size; height: $dash_placeholder_size;
} }
// Running app indicator (also shown in app grid) // app icons
.app-well-app-running-dot { .overview-tile {
margin-bottom: 14px; // hardcoded // inherits styles from _app-grid.css
}
} }
// background of the dash behind app icons // button to show app grid
.dash-background { .show-apps {
background-color: $dash_background_color; @include tile_button($system_fg_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 .show-apps, .overview-tile {
.dash-item-container { margin: $base_margin * 0.5;
> * {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; padding: $base_padding;
border-radius: $base_border_radius * 2; border-radius: $base_border_radius * 2;}
} }
// show apps button // separator between pinned and running apps
.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 { .dash-separator {
width: 1px; width: 1px;
margin: 0 $base_margin; margin-left:$base_margin;
margin-right:$base_margin;
background-color: $system_borders_color; background-color: $system_borders_color;
margin-bottom: $dash_padding;
@if $is_highcontrast { @if $is_highcontrast {
width: 2px; width: 2px;
background-color: $hc_inset_color;
}
}
// make sure all dash components have same margin from screen edge
.dash-separator,
.dash-background,
.dash-item-container {
margin-bottom: $dash_edge_offset;
} }
} }

15
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -28,6 +28,10 @@
border-radius: $modal_radius * 1.5; border-radius: $modal_radius * 1.5;
padding: $base_padding * 2; padding: $base_padding * 2;
margin:0 $base_margin * 3; margin:0 $base_margin * 3;
border: 2px solid transparent;
@if $is_highcontrast {
border-color: $hc_inset_color;
}
} }
%search_section_content_item { %search_section_content_item {
@ -48,7 +52,7 @@
// Search results with icons // Search results with icons
.grid-search-result { .grid-search-result {
@extend .app-well-app; @extend .overview-tile;
} }
// search result provider // search result provider
@ -86,11 +90,18 @@
// list item title (with leading icon) // list item title (with leading icon)
.list-search-result-title { .list-search-result-title {
spacing: $base_padding * 2; spacing: $base_padding * 2;
// font-weight: bold;
@if $is_highcontrast {
font-weight: bold;
}
} }
// list item description // list item description
.list-search-result-description { .list-search-result-description {
color: $system_insensitive_fg_color; color: $system_insensitive_fg_color;
@if $is_highcontrast {
color: $system_fg_color;
}
} }
} }

6
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -4,7 +4,6 @@
$switcher_padding: $base_padding * 2; $switcher_padding: $base_padding * 2;
$switcher_radius: $modal_radius + $switcher_padding; $switcher_radius: $modal_radius + $switcher_padding;
// the full screen container of the switcher // the full screen container of the switcher
.switcher-popup { .switcher-popup {
padding: 0; padding: 0;
@ -26,11 +25,8 @@ $switcher_radius: $modal_radius + $switcher_padding;
// each item in the list // each item in the list
.item-box { .item-box {
@include tile_button($osd_fg_color); @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;} &:hover {background: none;}
@if $is_highcontrast {
box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2);
}
} }
.separator { .separator {

2
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -34,7 +34,7 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
} }
@if $is_highcontrast { @if $is_highcontrast {
border:2px solid $outer_borders_color; border:2px solid $hc_inset_color;
} }
} }

7
js/ui/appDisplay.js
View File

@ -2324,7 +2324,7 @@ export const FolderIcon = GObject.registerClass({
}, class FolderIcon extends AppViewItem { }, class FolderIcon extends AppViewItem {
_init(id, path, parentView) { _init(id, path, parentView) {
super._init({ super._init({
style_class: 'app-well-app app-folder', style_class: 'overview-tile app-folder',
button_mask: St.ButtonMask.ONE, button_mask: St.ButtonMask.ONE,
toggle_mode: true, toggle_mode: true,
can_focus: true, can_focus: true,
@ -2992,7 +2992,7 @@ export const AppIcon = GObject.registerClass({
const expandTitleOnHover = appIconParams['expandTitleOnHover']; const expandTitleOnHover = appIconParams['expandTitleOnHover'];
delete iconParams['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.app = app;
this._id = app.get_id(); this._id = app.get_id();
@ -3014,13 +3014,14 @@ export const AppIcon = GObject.registerClass({
this._iconContainer.add_child(this.icon); this._iconContainer.add_child(this.icon);
this._dot = new St.Widget({ this._dot = new St.Widget({
style_class: 'app-well-app-running-dot', style_class: 'app-grid-running-dot',
layout_manager: new Clutter.BinLayout(), layout_manager: new Clutter.BinLayout(),
x_expand: true, x_expand: true,
y_expand: true, y_expand: true,
x_align: Clutter.ActorAlign.CENTER, x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.END, y_align: Clutter.ActorAlign.END,
}); });
this._dot.translationY = 8;
this._iconContainer.add_child(this._dot); this._iconContainer.add_child(this._dot);
this.label_actor = this.icon.label; this.label_actor = this.icon.label;

2
js/ui/dash.js
View File

@ -153,7 +153,7 @@ class DashItemContainer extends St.Widget {
this.destroy_all_children(); this.destroy_all_children();
this.child = actor; this.child = actor;
this.child.y_expand = true; this.child.y_expand = false;
this.add_child(this.child); this.add_child(this.child);
} }

6
js/ui/switcherPopup.js
View File

@ -488,15 +488,15 @@ export const SwitcherList = GObject.registerClass({
highlight(index, justOutline) { highlight(index, justOutline) {
if (this._items[this._highlighted]) { 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('selected');
this._items[this._highlighted].remove_style_pseudo_class('highlighted');
} }
if (this._items[index]) { if (this._items[index]) {
if (justOutline) if (justOutline)
this._items[index].add_style_pseudo_class('outlined');
else
this._items[index].add_style_pseudo_class('selected'); this._items[index].add_style_pseudo_class('selected');
else
this._items[index].add_style_pseudo_class('highlighted');
} }
this._highlighted = index; this._highlighted = index;