[gnome-shell/gbsneto/40-stuff: 23/68] workspacesView: Scale inactive workspaces

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

commit f20977b56c627be684f0e89e0eaca54aab74b4de
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Dec 31 14:19:43 2020 -0300

    workspacesView: Scale inactive workspaces
    
    As per the latest mockups, then horizontally snapping, the active
    workspace should be highlighted. Because WorkspacesView clips to
    allocation, we cannot simply scale up the active one. Instead,
    scale down the inactive ones.

 js/ui/workspace.js      |  3 ++-
 js/ui/workspacesView.js | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index af32962afc..983bdedf60 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Workspace */
 
-const { Clutter, GLib, GObject, Meta, St } = imports.gi;
+const { Clutter, GLib, GObject, Graphene, Meta, St } = imports.gi;
 
 const Background = imports.ui.background;
 const DND = imports.ui.dnd;
@@ -951,6 +951,7 @@ class Workspace extends St.Widget {
     _init(metaWorkspace, monitorIndex) {
         super._init({
             style_class: 'window-picker',
+            pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
             layout_manager: new WorkspaceLayout(metaWorkspace, monitorIndex),
         });
 
diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index d82ad3bbbb..b34fa77ca1 100644
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -16,6 +16,8 @@ const MUTTER_SCHEMA = 'org.gnome.mutter';
 const WORKSPACE_MIN_SPACING = 24;
 const WORKSPACE_MAX_SPACING = 80;
 
+const WORKSPACE_INACTIVE_SCALE = 0.94;
+
 var WorkspacesViewBase = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
 }, class WorkspacesViewBase extends St.Widget {
@@ -76,6 +78,7 @@ class WorkspacesView extends WorkspacesViewBase {
 
         this._snapAdjustment = snapAdjustment;
         this._snapNotifyId = this._snapAdjustment.connect('notify::value', () => {
+            this._updateWorkspacesState();
             this.queue_relayout();
         });
 
@@ -203,6 +206,20 @@ class WorkspacesView extends WorkspacesViewBase {
         return Math.clamp(spacing, WORKSPACE_MIN_SPACING, WORKSPACE_MAX_SPACING);
     }
 
+    _updateWorkspacesState() {
+        const adj = this._scrollAdjustment;
+
+        // Fade and scale inactive workspaces
+        this._workspaces.forEach((w, index) => {
+            const distanceToCurrentWorkspace = Math.abs(adj.value - index);
+
+            const progress = 1 - Math.clamp(distanceToCurrentWorkspace, 0, 1);
+
+            const scale = Math.interpolate(WORKSPACE_INACTIVE_SCALE, 1, progress);
+            w.set_scale(scale, scale);
+        });
+    }
+
     vfunc_allocate(box) {
         this.set_allocation(box);
 
@@ -318,6 +335,8 @@ class WorkspacesView extends WorkspacesViewBase {
             this._workspaces[j].destroy();
             this._workspaces.splice(j, 1);
         }
+
+        this._updateWorkspacesState();
     }
 
     _activeWorkspaceChanged(_wm, _from, _to, _direction) {
@@ -376,6 +395,7 @@ class WorkspacesView extends WorkspacesViewBase {
             metaWorkspace.activate(global.get_current_time());
         }
 
+        this._updateWorkspacesState();
         this.queue_relayout();
     }
 });