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

dash: Re-fittsify

Browse Source 
Now that the dash is no longer attached to a screen edge, it lost
its "infinite width" (Fitts' law). Restore it by moving the visible
bar into a separate layer underneath the actual icons, extend the
icons to the bottom edge, and replace the margin around the dash
with padding inside the icons.

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/89

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1660>
This commit is contained in:
Florian Müllner 2021-02-09 19:57:55 +01:00 committed by Marge Bot
parent 5c31ef6ae2
commit 3a9acb9602
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,15 +5,14 @@ $dash_placeholder_size: 32px;
$dash_padding: $base_padding + 4px; // 10px
$dash_spacing: $base_padding / 4;
$dash_bottom_margin: $base_margin * 4;
$dash_border_radius: $modal_radius * 1.5;
#dash {
background-color: $dash_background_color;
@include fontsize($base_font_size - 2);
margin: $base_margin * 4 $base_margin * 2;
margin: $base_margin * 4 $base_margin * 2 0;
padding: 0 $dash_padding;
border-radius: $dash_border_radius;
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@ -32,14 +31,21 @@ $dash_border_radius: $modal_radius * 1.5;
}
}
.dash-background {
background-color: $dash_background_color;
margin-bottom: $dash_bottom_margin;
padding: $dash_padding;
border-radius: $dash_border_radius;
}
// Dash Items
.dash-item-container > StWidget {
padding: $dash_padding $dash_spacing;
.dash-item-container .app-well-app, .show-apps {
padding: 0 $dash_spacing $dash_bottom_margin;
}
.dash-separator {
width: 1px;
margin: 0 ($dash_spacing + ($dash_padding / 2));
margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
background-color: transparentize($osd_fg_color,0.7);
}

37
js/ui/dash.js
View File

@ -60,6 +60,7 @@ class DashItemContainer extends St.Widget {
super._init({
style_class: 'dash-item-container',
pivot_point: new Graphene.Point({ x: .5, y: .5 }),
layout_manager: new Clutter.BinLayout(),
scale_x: 0,
scale_y: 0,
opacity: 0,
@ -152,6 +153,7 @@ class DashItemContainer extends St.Widget {
this.destroy_all_children();
this.child = actor;
this.child.y_expand = true;
this.add_actor(this.child);
}
@ -203,6 +205,8 @@ class ShowAppsIcon extends DashItemContainer {
{ setSizeManually: true,
showLabel: false,
createIcon: this._createIcon.bind(this) });
this.icon.y_align = Clutter.ActorAlign.CENTER;
this.toggleButton.add_actor(this.icon);
this.toggleButton._delegate = this;
@ -300,7 +304,7 @@ const baseIconSizes = [16, 22, 24, 32, 48, 64];
var Dash = GObject.registerClass({
Signals: { 'icon-size-changed': {} },
}, class Dash extends St.BoxLayout {
}, class Dash extends St.Widget {
_init() {
this._maxWidth = -1;
this.iconSize = 64;
@ -317,26 +321,49 @@ var Dash = GObject.registerClass({
super._init({
name: 'dash',
offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS,
layout_manager: new Clutter.BinLayout(),
});
this._dashContainer = new St.BoxLayout({
x_align: Clutter.ActorAlign.CENTER,
y_expand: true,
});
this._box = new St.Widget({
clip_to_allocation: true,
layout_manager: new DashIconsLayout(),
x_expand: true,
x_align: Clutter.ActorAlign.CENTER,
y_expand: true,
});
this._box._delegate = this;
this.add_child(this._box);
this._dashContainer.add_child(this._box);
this._showAppsIcon = new ShowAppsIcon();
this._showAppsIcon.show(false);
this._showAppsIcon.icon.setIconSize(this.iconSize);
this._hookUpLabel(this._showAppsIcon);
this.add_child(this._showAppsIcon);
this._dashContainer.add_child(this._showAppsIcon);
this.showAppsButton = this._showAppsIcon.toggleButton;
const background = new St.Widget({
style_class: 'dash-background',
});
const sizerBox = new Clutter.Actor();
sizerBox.add_constraint(new Clutter.BindConstraint({
source: this._showAppsIcon.icon,
coordinate: Clutter.BindCoordinate.HEIGHT,
}));
sizerBox.add_constraint(new Clutter.BindConstraint({
source: this._dashContainer,
coordinate: Clutter.BindCoordinate.WIDTH,
}));
background.add_child(sizerBox);
this.add_child(background);
this.add_child(this._dashContainer);
this.connect('notify::width', () => {
if (this._maxWidth !== this.width)
this._queueRedisplay();