isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workspaceThumbnails: Expand workspaces before scale-in animation

Browse Source 
When the original animation was implemented, workspaces would only
ever be added at the end. We therefore got away with not having a
separate EXPANDING stage corresponding to the existing COLLAPSING
one when animating out.

Since support for creating in-between workspaces via DND was added,
this is no longer the case. And now that the thumbnails are centered,
the jump is quite noticeable.

Address this by adding new transitional states, so that we can
expand new thumbnails before scaling them in.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1609>
This commit is contained in:
Florian Müllner 2021-01-29 16:25:28 +01:00
parent ac3faac38c
commit b84eb2437d
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/ui/workspaceThumbnail.js
View File

@ -230,13 +230,15 @@ var WindowClone = GObject.registerClass({
var ThumbnailState = { var ThumbnailState = {
NEW: 0, NEW: 0,
ANIMATING_IN: 1, EXPANDING: 1,
NORMAL: 2, EXPANDED: 2,
REMOVING: 3, ANIMATING_IN: 3,
ANIMATING_OUT: 4, NORMAL: 4,
ANIMATED_OUT: 5, REMOVING: 5,
COLLAPSING: 6, ANIMATING_OUT: 6,
DESTROYED: 7, ANIMATED_OUT: 7,
COLLAPSING: 8,
DESTROYED: 9,
}; };
/** /**
@ -928,6 +930,7 @@ var ThumbnailsBox = GObject.registerClass({
let thumbnail = this._thumbnails[newWorkspaceIndex]; let thumbnail = this._thumbnails[newWorkspaceIndex];
this._setThumbnailState(thumbnail, ThumbnailState.NEW); this._setThumbnailState(thumbnail, ThumbnailState.NEW);
thumbnail.slide_position = 1; thumbnail.slide_position = 1;
thumbnail.collapse_fraction = 1;
this._queueUpdateStates(); this._queueUpdateStates();
@ -1034,6 +1037,7 @@ var ThumbnailsBox = GObject.registerClass({
// not the initial fill, and not splicing via DND // not the initial fill, and not splicing via DND
thumbnail.state = ThumbnailState.NEW; thumbnail.state = ThumbnailState.NEW;
thumbnail.slide_position = 1; // start slid out thumbnail.slide_position = 1; // start slid out
thumbnail.collapse_fraction = 1; // start fully collapsed
this._haveNewThumbnails = true; this._haveNewThumbnails = true;
} else { } else {
thumbnail.state = ThumbnailState.NORMAL; thumbnail.state = ThumbnailState.NORMAL;
@ -1129,7 +1133,8 @@ var ThumbnailsBox = GObject.registerClass({
if (this._stateCounts[ThumbnailState.ANIMATING_OUT] > 0) if (this._stateCounts[ThumbnailState.ANIMATING_OUT] > 0)
return; return;
// Once that's complete, we can start scaling to the new size and collapse any removed thumbnails // Once that's complete, we can start scaling to the new size,
// collapse any removed thumbnails and expand added ones
this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => { this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING); this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING);
thumbnail.ease_property('collapse-fraction', 1, { thumbnail.ease_property('collapse-fraction', 1, {
@ -1148,6 +1153,17 @@ var ThumbnailsBox = GObject.registerClass({
}); });
}); });
this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.EXPANDING);
thumbnail.ease_property('collapse-fraction', 0, {
duration: SLIDE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
this._setThumbnailState(thumbnail, ThumbnailState.EXPANDED);
},
});
});
if (this._pendingScaleUpdate) { if (this._pendingScaleUpdate) {
this.ease_property('scale', this._targetScale, { this.ease_property('scale', this._targetScale, {
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
@ -1158,11 +1174,13 @@ var ThumbnailsBox = GObject.registerClass({
} }
// Wait until that's done // Wait until that's done
if (this._scale != this._targetScale || this._stateCounts[ThumbnailState.COLLAPSING] > 0) if (this._scale !== this._targetScale ||
this._stateCounts[ThumbnailState.COLLAPSING] > 0 ||
this._stateCounts[ThumbnailState.EXPANDING] > 0)
return; return;
// And then slide in any new thumbnails // And then slide in any new thumbnails
this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => { this._iterateStateThumbnails(ThumbnailState.EXPANDED, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN); this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN);
thumbnail.ease_property('slide-position', 0, { thumbnail.ease_property('slide-position', 0, {
duration: SLIDE_ANIMATION_TIME, duration: SLIDE_ANIMATION_TIME,