dash: Re-fittsify
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:
parent
5c31ef6ae2
commit
3a9acb9602
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user