From 5e10bed4585bc73d73a33a6fec9f202f1a13ec47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Mon, 12 Oct 2020 13:19:07 +0200
Subject: [PATCH] windowPreview: Allow titles to overlap other previews

We are about to add additional chrome, but still want to use
as much space as possible for the previews. Allowing titles
to overlap other previews should help keeping the additional
whitespace requirement low.

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

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>
---
 js/ui/windowPreview.js | 44 ++++++++++++++++++++++++++++--------------
 js/ui/workspace.js     |  5 +++--
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/js/ui/windowPreview.js b/js/ui/windowPreview.js
index 014b2cc58..319ccf5f0 100644
--- a/js/ui/windowPreview.js
+++ b/js/ui/windowPreview.js
@@ -429,14 +429,20 @@ var WindowPreview = GObject.registerClass({
         return app.get_name();
     }
 
-    chromeHeights() {
-        const [, closeButtonHeight] = this._closeButton.get_preferred_height(-1);
+    overlapHeights() {
         const [, titleHeight] = this._title.get_preferred_height(-1);
 
+        const topOverlap = 0;
+        const bottomOverlap = titleHeight / 2;
+
+        return [topOverlap, bottomOverlap];
+    }
+
+    chromeHeights() {
+        const [, closeButtonHeight] = this._closeButton.get_preferred_height(-1);
+
         const topOversize = (this._borderSize / 2) + (closeButtonHeight / 2);
-        const bottomOversize = Math.max(
-            this._borderSize,
-            (titleHeight / 2) + (this._borderSize / 2));
+        const bottomOversize = this._borderSize;
 
         return [topOversize, bottomOversize];
     }
@@ -462,6 +468,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = true;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -493,6 +500,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = false;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -739,6 +747,21 @@ var WindowPreview = GObject.registerClass({
         return true;
     }
 
+    _restack() {
+        // We may not have a parent if DnD completed successfully, in
+        // which case our clone will shortly be destroyed and replaced
+        // with a new one on the target workspace.
+        const parent = this.get_parent();
+        if (parent !== null) {
+            if (this._overlayShown)
+                parent.set_child_above_sibling(this, null);
+            else if (this._stackAbove === null)
+                parent.set_child_below_sibling(this, null);
+            else if (!this._stackAbove._overlayShown)
+                parent.set_child_above_sibling(this, this._stackAbove);
+        }
+    }
+
     _onDragBegin(_draggable, _time) {
         this.inDrag = true;
         this.hideOverlay(false);
@@ -760,16 +783,7 @@ var WindowPreview = GObject.registerClass({
     _onDragEnd(_draggable, _time, _snapback) {
         this.inDrag = false;
 
-        // We may not have a parent if DnD completed successfully, in
-        // which case our clone will shortly be destroyed and replaced
-        // with a new one on the target workspace.
-        let parent = this.get_parent();
-        if (parent !== null) {
-            if (this._stackAbove == null)
-                parent.set_child_below_sibling(this, null);
-            else
-                parent.set_child_above_sibling(this, this._stackAbove);
-        }
+        this._restack();
 
         if (this['has-pointer'])
             this.showOverlay(true);
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index b9f8c2720..a93ec2726 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -469,10 +469,11 @@ var WorkspaceLayout = GObject.registerClass({
             colSpacing += Math.max(leftOversize, rightOversize);
 
         if (containerBox) {
-            containerBox.x1 += leftOversize;
+            const [topOverlap, bottomOverlap] = window.overlapHeights();
+            containerBox.x1 += leftOversize + topOverlap;
             containerBox.x2 -= rightOversize;
             containerBox.y1 += topOversize;
-            containerBox.y2 -= bottomOversize;
+            containerBox.y2 -= bottomOversize + bottomOverlap;
         }
 
         return [rowSpacing, colSpacing, containerBox];