unlockDialog: Use adjustment to control the transition

Tying the transition parameters to a single progress value represented
by an adjustment will enable us to implement stick-to-content swipe
gestures.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/972
This commit is contained in:
Florian Müllner 2020-02-02 12:10:10 +01:00 committed by Georges Basile Stavracas Neto
parent 6577a295da
commit 55bfc4d820

View File

@ -426,6 +426,16 @@ var UnlockDialog = GObject.registerClass({
parentActor.add_child(this);
this._adjustment = new St.Adjustment({
lower: 0,
upper: 2,
page_size: 1,
page_increment: 1,
});
this._adjustment.connect('notify::value', () => {
this._setTransitionProgress(this._adjustment.value);
});
this._activePage = null;
let tapAction = new Clutter.TapAction();
@ -451,6 +461,7 @@ var UnlockDialog = GObject.registerClass({
this._promptBox = new St.BoxLayout({ vertical: true });
this._promptBox.set_pivot_point(0.5, 0.5);
this._promptBox.hide();
stack.add_child(this._promptBox);
this._clock = new Clock();
@ -579,36 +590,11 @@ var UnlockDialog = GObject.registerClass({
return;
this._activePage = this._clock;
this._clock.show();
const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
this._promptBox.ease({
opacity: 0,
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: FADE_OUT_TRANSLATION * scaleFactor,
duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
this._promptBox.hide();
this._maybeDestroyAuthPrompt();
},
});
this._clock.set({
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
});
this._clock.ease({
opacity: 255,
scale_x: 1,
scale_y: 1,
translation_y: 0,
this._adjustment.ease(0, {
duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._maybeDestroyAuthPrompt(),
});
}
@ -621,31 +607,30 @@ var UnlockDialog = GObject.registerClass({
this._activePage = this._promptBox;
this._promptBox.show();
this._adjustment.ease(1, {
duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
}
_setTransitionProgress(progress) {
this._promptBox.visible = progress > 0;
this._clock.visible = progress < 1;
const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
this._promptBox.set({
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: FADE_OUT_TRANSLATION * scaleFactor,
opacity: 255 * progress,
scale_x: FADE_OUT_SCALE + (1 - FADE_OUT_SCALE) * progress,
scale_y: FADE_OUT_SCALE + (1 - FADE_OUT_SCALE) * progress,
translation_y: FADE_OUT_TRANSLATION * (1 - progress) * scaleFactor,
});
this._clock.ease({
opacity: 0,
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._clock.hide(),
});
this._promptBox.ease({
opacity: 255,
scale_x: 1,
scale_y: 1,
translation_y: 0,
duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
this._clock.set({
opacity: 255 * (1 - progress),
scale_x: FADE_OUT_SCALE + (1 - FADE_OUT_SCALE) * (1 - progress),
scale_y: FADE_OUT_SCALE + (1 - FADE_OUT_SCALE) * (1 - progress),
translation_y: -FADE_OUT_TRANSLATION * progress * scaleFactor,
});
}