From 9db9445b0f2ce22732c6e5020a6c08fda2c0017b Mon Sep 17 00:00:00 2001 From: Georges Basile Stavracas Neto Date: Wed, 27 Jan 2021 13:28:36 -0300 Subject: [PATCH] workspaceThumbnail: Scale workspaces in and out Make the slide property control the workspace scale, so that new workspaces scale up, and destroyed workspaces scale down. The scale is done horizontally, and only slightly vertically, as per design direction. Rework the state tracking mechanism to remove the COLLAPSING state, since there's no split between sliding out and collapsing anymore. Also remove the corresponding 'collapse-fraction' property from WorkspaceThumbnail. Make ThumbnailsBox.vfunc_get_preferred_width() consider the slide-position property. Part-of: --- js/ui/workspaceThumbnail.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js index 4ca1dd48b..4c6909245 100644 --- a/js/ui/workspaceThumbnail.js +++ b/js/ui/workspaceThumbnail.js @@ -5,6 +5,7 @@ const { Clutter, Gio, GLib, GObject, Graphene, Meta, Shell, St } = imports.gi; const DND = imports.ui.dnd; const Main = imports.ui.main; +const Util = imports.misc.util; const Workspace = imports.ui.workspace; // The maximum size of a thumbnail is 5% the width and height of the screen @@ -257,6 +258,7 @@ var WorkspaceThumbnail = GObject.registerClass({ super._init({ clip_to_allocation: true, style_class: 'workspace-thumbnail', + pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }), }); this._delegate = this; @@ -334,6 +336,11 @@ var WorkspaceThumbnail = GObject.registerClass({ set slide_position(slidePosition) { if (this._slidePosition == slidePosition) return; + + const scale = Util.lerp(1, 0.75, slidePosition); + this.set_scale(scale, scale); + this.opacity = Util.lerp(255, 0, slidePosition); + this._slidePosition = slidePosition; this.notify('slide-position'); this.queue_relayout(); @@ -1205,8 +1212,19 @@ var ThumbnailsBox = GObject.registerClass({ let nWorkspaces = this._thumbnails.length; let totalSpacing = (nWorkspaces - 1) * spacing; - const naturalWidth = - totalSpacing + nWorkspaces * this._porthole.width * MAX_THUMBNAIL_SCALE; + const naturalWidth = this._thumbnails.reduce((accumulator, thumbnail, index) => { + let workspaceSpacing = 0; + + if (index > 0) + workspaceSpacing += spacing / 2; + if (index < this._thumbnails.length - 1) + workspaceSpacing += spacing / 2; + + const progress = 1 - thumbnail.collapse_fraction; + const width = (this._porthole.width * MAX_THUMBNAIL_SCALE + workspaceSpacing) * progress; + return accumulator + width; + }, 0); + return themeNode.adjust_preferred_width(totalSpacing, naturalWidth); }