From 55510e9cdf9251e81bda141271305bc1f9a634f6 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Wed, 30 Dec 2020 17:16:18 -0300
Subject: [PATCH] overviewControls/controlsManager: Use a custom layout manager

In the future, we want to tightly control the state of the
layout throught gestures, which requires hooking everything
together with adjustments. This is the first step in this
direction.

Add a new custom layout manager for ControlsManager that
allocates the search entry, the view selector, and the Dash,
vertically.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1624>
---
 .../gnome-shell-sass/widgets/_overview.scss   |  6 +-
 .../widgets/_search-entry.scss                |  1 +
 js/ui/overviewControls.js                     | 63 +++++++++++++++----
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss
index eb62ba68f..f952c5203 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,10 +1,6 @@
 /* OVERVIEW */
 
-#overview {
-  spacing: 24px;
-}
-
-#overview-group {
+.controls-manager {
   spacing: 24px;
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 329dbc7cd..4568170e4 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -11,6 +11,7 @@ $search_entry_height: 36px;
   color: transparentize($fg_color,0.3);
   background-color: $bg_color;
   border-color: $borders_color;
+  margin-top: 24px;
 
   &:hover {
     background-color: $hover_bg_color;
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 911576c4e..d31c5b96c 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -6,11 +6,57 @@ const { Clutter, GObject, St } = imports.gi;
 const Dash = imports.ui.dash;
 const ViewSelector = imports.ui.viewSelector;
 
+var ControlsManagerLayout = GObject.registerClass(
+class ControlsManagerLayout extends Clutter.BoxLayout {
+    _init(searchEntry, viewSelector, dash) {
+        super._init({ orientation: Clutter.Orientation.VERTICAL });
+
+        this._searchEntry = searchEntry;
+        this._viewSelector = viewSelector;
+        this._dash = dash;
+    }
+
+    vfunc_set_container(container) {
+        this._container = container;
+        this.hookup_style(container);
+    }
+
+    vfunc_allocate(container, box) {
+        const childBox = new Clutter.ActorBox();
+
+        const { spacing } = this;
+
+        const [width, height] = box.get_size();
+        let availableHeight = height;
+
+        // Search entry
+        const [searchHeight] = this._searchEntry.get_preferred_height(width);
+        childBox.set_origin(0, 0);
+        childBox.set_size(width, searchHeight);
+        this._searchEntry.allocate(childBox);
+
+        availableHeight -= searchHeight + spacing;
+
+        // Dash
+        const [, dashHeight] = this._dash.get_preferred_height(width);
+        childBox.set_origin(0, height - dashHeight);
+        childBox.set_size(width, dashHeight);
+        this._dash.allocate(childBox);
+
+        availableHeight -= dashHeight + spacing;
+
+        // ViewSelector
+        childBox.set_origin(0, searchHeight + spacing);
+        childBox.set_size(width, availableHeight);
+        this._viewSelector.allocate(childBox);
+    }
+});
+
 var ControlsManager = GObject.registerClass(
 class ControlsManager extends St.Widget {
     _init() {
         super._init({
-            layout_manager: new Clutter.BinLayout(),
+            style_class: 'controls-manager',
             x_expand: true,
             y_expand: true,
             clip_to_allocation: true,
@@ -54,17 +100,12 @@ class ControlsManager extends St.Widget {
         this.viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
             this._workspaceAdjustment, this.dash.showAppsButton);
 
-        this._group = new St.BoxLayout({
-            name: 'overview-group',
-            vertical: true,
-            x_expand: true,
-            y_expand: true,
-        });
-        this.add_actor(this._group);
+        this.add_child(searchEntryBin);
+        this.add_child(this.dash);
+        this.add_child(this.viewSelector);
 
-        this._group.add_child(searchEntryBin);
-        this._group.add_child(this.viewSelector);
-        this._group.add_actor(this.dash);
+        this.layout_manager = new ControlsManagerLayout(searchEntryBin,
+            this.viewSelector, this.dash);
 
         this.connect('destroy', this._onDestroy.bind(this));
     }