brl/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
Download Patch File Download Diff File Expand all files Collapse all files

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