[gnome-shell] workspaceThumbnails: Animate showing/hiding

[Marge Bot <marge-bot src gnome org>]

commit a73bea02e8d6ec3ed13dce6813f457b15f3da718
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Feb 16 22:03:29 2021 +0100

    workspaceThumbnails: Animate showing/hiding
    
    Right now the minimap only hides itself in case of a single static
    workspace. That's not only an edge case, but also not expected to
    change while the overview is visible, so changing the visibility
    without a transition is fine.
    
    However that is about to change, and we'll hide the minimap as well
    when there are fewer than three workspaces. As that condition is
    very much expected to change from within the overview, the transition
    should be animated.
    
    Implement that via a new :collapse-fraction property on ThumbnailsBox,
    and use that to transition both the height of the box itself and the
    scale of the individual thumbnails.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3739
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1696>

 js/ui/overviewControls.js   | 19 ++++++++++++++-----
 js/ui/workspaceThumbnail.js | 22 ++++++++++++++++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)
---
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 5a7f4aa24e..673a596fbc 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -47,6 +47,7 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         const workspaceBox = box.copy();
         const [width, height] = workspaceBox.get_size();
         const { spacing } = this;
+        const { expandFraction } = this._workspacesThumbnails;
 
         switch (state) {
         case ControlsState.HIDDEN:
@@ -54,12 +55,12 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         case ControlsState.WINDOW_PICKER:
             workspaceBox.set_origin(0,
                 searchHeight + spacing +
-                (thumbnailsHeight > 0 ? thumbnailsHeight + spacing : 0));
+                thumbnailsHeight + spacing * expandFraction);
             workspaceBox.set_size(width,
                 height -
                 dashHeight - spacing -
                 searchHeight - spacing -
-                (thumbnailsHeight > 0 ? thumbnailsHeight + spacing : 0));
+                thumbnailsHeight - spacing * expandFraction);
             break;
         case ControlsState.APP_GRID:
             workspaceBox.set_origin(0, searchHeight + spacing);
@@ -133,10 +134,11 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         // Workspace Thumbnails
         let thumbnailsHeight = 0;
         if (this._workspacesThumbnails.visible) {
+            const { expandFraction } = this._workspacesThumbnails;
             [thumbnailsHeight] =
                 this._workspacesThumbnails.get_preferred_height(width);
             thumbnailsHeight = Math.min(
-                thumbnailsHeight,
+                thumbnailsHeight * expandFraction,
                 height * WorkspaceThumbnail.MAX_THUMBNAIL_SCALE);
             childBox.set_origin(0, searchHeight + spacing);
             childBox.set_size(width, thumbnailsHeight);
@@ -303,8 +305,15 @@ class ControlsManager extends St.Widget {
 
         this._thumbnailsBox =
             new WorkspaceThumbnail.ThumbnailsBox(this._workspaceAdjustment);
-        this._thumbnailsBox.connect('notify::should-show',
-            () => this._updateThumbnailsBox());
+        this._thumbnailsBox.connect('notify::should-show', () => {
+            this._thumbnailsBox.show();
+            this._thumbnailsBox.ease_property('expand-fraction',
+                this._thumbnailsBox.should_show ? 1 : 0, {
+                    duration: SIDE_CONTROLS_ANIMATION_TIME,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                    onComplete: () => this._updateThumbnailsBox(),
+                });
+        });
 
         this._workspacesDisplay = new WorkspacesView.WorkspacesDisplay(
             this,
diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 3c9b7ed0ad..e84764842a 100644
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -603,6 +603,10 @@ var WorkspaceThumbnail = GObject.registerClass({
 
 var ThumbnailsBox = GObject.registerClass({
     Properties: {
+        'expand-fraction': GObject.ParamSpec.double(
+            'expand-fraction', 'expand-fraction', 'expand-fraction',
+            GObject.ParamFlags.READWRITE,
+            0, 1, 1),
         'scale': GObject.ParamSpec.double(
             'scale', 'scale', 'scale',
             GObject.ParamFlags.READWRITE,
@@ -643,6 +647,7 @@ var ThumbnailsBox = GObject.registerClass({
 
         this._targetScale = 0;
         this._scale = 0;
+        this._expandFraction = 1;
         this._pendingScaleUpdate = false;
         this._stateUpdateQueued = false;
         this._animatingIndicator = false;
@@ -1298,8 +1303,9 @@ var ThumbnailsBox = GObject.registerClass({
         }
 
         const ratio = portholeWidth / portholeHeight;
-        const thumbnailHeight = Math.round(portholeHeight * this._scale);
-        const thumbnailWidth = Math.round(thumbnailHeight * ratio);
+        const thumbnailFullHeight = Math.round(portholeHeight * this._scale);
+        const thumbnailWidth = Math.round(thumbnailFullHeight * ratio);
+        const thumbnailHeight = thumbnailFullHeight * this._expandFraction;
         const roundedVScale = thumbnailHeight / portholeHeight;
 
         // We always request size for MAX_THUMBNAIL_SCALE, distribute
@@ -1422,4 +1428,16 @@ var ThumbnailsBox = GObject.registerClass({
     get shouldShow() {
         return this._shouldShow;
     }
+
+    set expandFraction(expandFraction) {
+        if (this._expandFraction === expandFraction)
+            return;
+        this._expandFraction = expandFraction;
+        this.notify('expand-fraction');
+        this.queue_relayout();
+    }
+
+    get expandFraction() {
+        return this._expandFraction;
+    }
 });