[gnome-shell/gbsneto/40-stuff: 62/68] overviewControls: Make AppDisplay rise from the bottom

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

commit 51f96304835956b2cc9406b44b9de83e3f904650
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Jan 20 19:25:13 2021 -0300

    overviewControls: Make AppDisplay rise from the bottom
    
    It makes more sense in a spatial overview that the app grid
    comes and goes to somewhere in the screen, instead of fading
    in and out into the void.
    
    Make the app grid rise from the bottom of the screen.

 js/ui/overviewControls.js | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)
---
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 7ddc4866f0..b57890317d 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -93,6 +93,31 @@ class ControlsManagerLayout extends Clutter.BinLayout {
         return workspaceBox;
     }
 
+    _getAppDisplayBoxForState(state, params, appGridBox) {
+        const { box, searchHeight, dashHeight, spacing } = params;
+        const [width, height] = box.get_size();
+        const appDisplayBox = new Clutter.ActorBox();
+
+        switch (state) {
+        case ControlsState.HIDDEN:
+        case ControlsState.WINDOW_PICKER:
+            appDisplayBox.set_origin(0, box.y2);
+            break;
+        case ControlsState.APP_GRID:
+            appDisplayBox.set_origin(0,
+                searchHeight + spacing + appGridBox.get_height());
+            break;
+        }
+
+        appDisplayBox.set_size(width,
+            height -
+            searchHeight - spacing -
+            appGridBox.get_height() - spacing -
+            dashHeight);
+
+        return appDisplayBox;
+    }
+
     vfunc_set_container(container) {
         this._container = container;
     }
@@ -144,15 +169,21 @@ class ControlsManagerLayout extends Clutter.BinLayout {
 
         // AppDisplay
         const appGridBox = workspaceBoxes[ControlsState.APP_GRID];
+        const appDisplayBoxes = [
+            this._getAppDisplayBoxForState(ControlsState.HIDDEN, params, appGridBox),
+            this._getAppDisplayBoxForState(ControlsState.WINDOW_PICKER, params, appGridBox),
+            this._getAppDisplayBoxForState(ControlsState.APP_GRID, params, appGridBox),
+        ];
 
-        childBox.set_origin(0, searchHeight + spacing + appGridBox.get_height());
-        childBox.set_size(width,
-            height -
-            searchHeight - spacing -
-            appGridBox.get_height() - spacing -
-            dashHeight);
+        if (initialState === finalState) {
+            const appDisplayBox = appDisplayBoxes[state];
+            this._appDisplay.allocate(appDisplayBox);
+        } else {
+            const initialBox = appDisplayBoxes[initialState];
+            const finalBox = appDisplayBoxes[finalState];
 
-        this._appDisplay.allocate(childBox);
+            this._appDisplay.allocate(initialBox.interpolate(finalBox, progress));
+        }
 
         // ViewSelector
         childBox.set_origin(0, searchHeight + spacing);