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;
padding: $base_padding * 2;
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;
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;

94
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) {
@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);
}
}

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%));
// inset colour for high contrast
$hc_inset_color: transparentize($fg_color, 0.7);
$hc_inset_color: transparentize($fg_color, 0.6);

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

@ -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);

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

@ -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;
}
}

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

@ -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;
}
}
}

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

@ -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 {

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 {
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 {
_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;

2
js/ui/dash.js
View File

@ -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);
}

6
js/ui/switcherPopup.js
View File

@ -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;