[gnome-shell/gbsneto/40-stuff: 29/68] overviewControls/controlsManager: Use a custom layout manager

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 19b5712bc20ba2f254d894b5d31cfd02b76e880f
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                          | 72 +++++++++++++++++-----
 3 files changed, 57 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 66afd05207..dd2404d958 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -10,6 +10,8 @@ const Overview = imports.ui.overview;
 
 var SIDE_CONTROLS_ANIMATION_TIME = Overview.ANIMATION_TIME;
 
+const DASH_HEIGHT_PERCENTAGE = 0.15;
+
 var DashFader = GObject.registerClass(
 class DashFader extends St.Bin {
     _init(dash) {
@@ -44,11 +46,58 @@ class DashFader extends St.Bin {
     }
 });
 
+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
+        let [dashHeight] = this._dash.get_preferred_height(width);
+        dashHeight = Math.min(dashHeight,
+            Math.round(box.get_height() * DASH_HEIGHT_PERCENTAGE));
+        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 +142,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));
     }