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>
This commit is contained in:
parent
f239179682
commit
a73bea02e8
@ -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,
|
||||
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user