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

appDisplay: Set running indicator dot offset via CSS

Browse Source 
The offset was given as a hardcoded (physical) pixel value and did not
take scaling into account. This lead to it being shifted closer towards
the icon as the scale increased.

This now replaces the hardcoded value with a CSS property which
automatically includes the scale factor.

Further this allows simplifying some calculations that previously were
trying to counteract the hardcoded offset using margins by using the
intended offset directly.

With this the dot in the dash is also now placed at exactly the bottom
of the hover highlight, while previously there was an unintentional 1px
space.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7488
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3245>
This commit is contained in:
Sebastian Keller
2024-03-17 12:43:03 +01:00
committed by Florian Müllner
parent 0d3c298c70
commit 31997fa2f9
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,9 +49,9 @@ $app_folder_size: 720px;
background-color: $system_fg_color;
@if $contrast == 'high' {
margin-bottom: 4px;
offset-y: 4px;
} @else {
margin-bottom: 2px;
offset-y: 6px;
}
}

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

@ -71,7 +71,7 @@ $dash_spacing: $base_margin * 0.5;
// running app dot
.app-grid-running-dot {
// manually position the dot within the dash item
margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
offset-y: -$dash_padding;
}
}

7
js/ui/appDisplay.js
View File

@ -3014,7 +3014,7 @@ export const AppIcon = GObject.registerClass({
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.END,
});
this._dot.translationY = 8;
this._dot.connect('style-changed', () => this._updateDotStyle());
this._iconContainer.add_child(this._dot);
this.label_actor = this.icon.label;
@ -3059,6 +3059,11 @@ export const AppIcon = GObject.registerClass({
}
}
_updateDotStyle() {
const themeNode = this._dot.get_theme_node();
this._dot.translationY = themeNode.get_length('offset-y');
}
_updateRunningStyle() {
if (this.app.state !== Shell.AppState.STOPPED)
this._dot.show();