[gnome-shell/wip/jimmac/dash-icon-spacing: 27/72] overviewControls/controlsManager: Use a custom layout manager

[Jakub Steiner <jimmac src gnome org>]

commit 2b2f23a9a841ae34c7beb0da252e7cbb8b8839c7
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Dec 30 17:16:18 2020 -0300

    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.
    
    Here, we add a new custom layout manager for ControlsManager
    that allocates the search entry, the view selector, and the
    Dash, vertically.
    
    Remove DashSpacer since it is unused now.

 data/theme/gnome-shell-sass/widgets/_overview.scss |  6 +-
 .../gnome-shell-sass/widgets/_search-entry.scss    |  1 +
 js/ui/overviewControls.js                          | 68 ++++++++++++++++------
 3 files changed, 53 insertions(+), 22 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss 
b/data/theme/gnome-shell-sass/widgets/_overview.scss
index b9946a4e17..30ce61995b 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 329dbc7cd5..4568170e46 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 c66aea7ef7..b00ec5a8c3 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -44,11 +44,56 @@ class DashFader extends St.Widget {
     }
 });
 
+var ControlsManagerLayout = GObject.registerClass(
+class ControlsManagerLayout extends Clutter.BinLayout {
+    _init(searchEntry, viewSelector, dash) {
+        super._init();
+
+        this._searchEntry = searchEntry;
+        this._viewSelector = viewSelector;
+        this._dash = dash;
+    }
+
+    vfunc_set_container(container) {
+        this._container = container;
+    }
+
+    vfunc_allocate(container, box) {
+        const childBox = new Clutter.ActorBox();
+
+        const spacing = container.get_theme_node().get_length('spacing');
+
+        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,
@@ -93,23 +138,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);
-
-        const box = new St.BoxLayout({
-            x_expand: true,
-            y_expand: true,
-        });
-        box.add_child(this.viewSelector);
+        this.add_child(searchEntryBin);
+        this.add_child(this._dashFader);
+        this.add_child(this.viewSelector);
 
-        this._group.add_actor(searchEntryBin);
-        this._group.add_child(box);
-        this._group.add_actor(this._dashFader);
+        this.layout_manager = new ControlsManagerLayout(searchEntryBin,
+            this.viewSelector, this._dashFader);
 
         this.connect('destroy', this._onDestroy.bind(this));
     }