[gnome-shell] unlockDialog: Use adjustment to control the transition

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

commit 55bfc4d8203282c491cd687758c9ecbbaca17790
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Feb 2 12:10:10 2020 +0100

    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

 js/ui/unlockDialog.js | 79 +++++++++++++++++++++------------------------------
 1 file changed, 32 insertions(+), 47 deletions(-)
---
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index 797e55e637..51fe6253f6 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -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,
-        });
-
-        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(),
+            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._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,
         });
     }