From 55d85cd55b79c948cb98e087fc371fdb3e32f5f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Thu, 28 Jan 2021 23:24:44 +0100
Subject: [PATCH] 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>
---
 .../theme/gnome-shell-sass/widgets/_dash.scss |  5 +++
 js/ui/dash.js                                 | 35 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 82901309d..50483830b 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -30,6 +30,11 @@ $dash_border_radius: $modal_radius * 1.5;
   padding: ($dash_spacing / 2) $dash_spacing;
 }
 
+.dash-separator {
+  width: 1px;
+  background-color: transparentize($osd_fg_color,0.7);
+}
+
 // OSD Tooltip
 .dash-label {
   background-color: transparentize($osd_bg_color,0.05);
diff --git a/js/ui/dash.js b/js/ui/dash.js
index 0e100cea6..2d329ae91 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -303,6 +303,7 @@ var Dash = GObject.registerClass({
         this.iconSize = 64;
         this._shownInitially = false;
 
+        this._separator = null;
         this._dragPlaceholder = null;
         this._dragPlaceholderPos = -1;
         this._animatingPlaceholdersCount = 0;
@@ -608,6 +609,14 @@ var Dash = GObject.registerClass({
                 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() {
@@ -734,6 +743,26 @@ var Dash = GObject.registerClass({
         for (let i = 0; i < addedItems.length; i++)
             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
         // Without it, StBoxLayout may use a stale size cache
         this._box.queue_relayout();
@@ -785,6 +814,12 @@ var Dash = GObject.registerClass({
             numChildren--;
         }
 
+        // Same with the separator
+        if (this._separator) {
+            boxWidth -= this._separator.width;
+            numChildren--;
+        }
+
         let pos;
         if (!this._emptyDropTarget)
             pos = Math.floor(x * numChildren / boxWidth);