dash: Add separator between favorite and running apps

Only the area used by favorite apps can be used as drop targets, it
is not possible to add new favorites between the running apps at the
end. While that behavior makes sense, it is currently impossible to
distinguish the two areas with confusing results.

Address this by adding a visual separator between favorites and
running apps.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1606>
This commit is contained in:
Florian Müllner 2021-01-28 23:24:44 +01:00 committed by Marge Bot
parent fec745ffb8
commit 55d85cd55b
2 changed files with 40 additions and 0 deletions

View File

@ -30,6 +30,11 @@ $dash_border_radius: $modal_radius * 1.5;
padding: ($dash_spacing / 2) $dash_spacing; padding: ($dash_spacing / 2) $dash_spacing;
} }
.dash-separator {
width: 1px;
background-color: transparentize($osd_fg_color,0.7);
}
// OSD Tooltip // OSD Tooltip
.dash-label { .dash-label {
background-color: transparentize($osd_bg_color,0.05); background-color: transparentize($osd_bg_color,0.05);

View File

@ -303,6 +303,7 @@ var Dash = GObject.registerClass({
this.iconSize = 64; this.iconSize = 64;
this._shownInitially = false; this._shownInitially = false;
this._separator = null;
this._dragPlaceholder = null; this._dragPlaceholder = null;
this._dragPlaceholderPos = -1; this._dragPlaceholderPos = -1;
this._animatingPlaceholdersCount = 0; this._animatingPlaceholdersCount = 0;
@ -608,6 +609,14 @@ var Dash = GObject.registerClass({
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
}); });
} }
if (this._separator) {
this._separator.ease({
height: this.iconSize,
duration: DASH_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
}
} }
_redisplay() { _redisplay() {
@ -734,6 +743,26 @@ var Dash = GObject.registerClass({
for (let i = 0; i < addedItems.length; i++) for (let i = 0; i < addedItems.length; i++)
addedItems[i].item.show(animate); addedItems[i].item.show(animate);
// Update separator
const nFavorites = Object.keys(favorites).length;
if (nFavorites > 0) {
if (!this._separator) {
this._separator = new St.Widget({
style_class: 'dash-separator',
y_align: Clutter.ActorAlign.CENTER,
height: this.iconSize,
});
this._box.add_child(this._separator);
}
let pos = nFavorites;
if (this._dragPlaceholder)
pos++;
this._box.set_child_at_index(this._separator, pos);
} else if (this._separator) {
this._separator.destroy();
this._separator = null;
}
// Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744 // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744
// Without it, StBoxLayout may use a stale size cache // Without it, StBoxLayout may use a stale size cache
this._box.queue_relayout(); this._box.queue_relayout();
@ -785,6 +814,12 @@ var Dash = GObject.registerClass({
numChildren--; numChildren--;
} }
// Same with the separator
if (this._separator) {
boxWidth -= this._separator.width;
numChildren--;
}
let pos; let pos;
if (!this._emptyDropTarget) if (!this._emptyDropTarget)
pos = Math.floor(x * numChildren / boxWidth); pos = Math.floor(x * numChildren / boxWidth);