[gnome-shell/gbsneto/new-lock-screen-part2: 27/38] unlockDialog: Toggle between clock and auth prompt

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

commit 6d70d2b5006b32497959d60fb46ea9fca27a365c
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri Nov 29 14:37:10 2019 -0300

    unlockDialog: Toggle between clock and auth prompt
    
    Toggle between them when (1) tapping anythere on the screen, and
    (2) pressing any key.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/872

 js/ui/unlockDialog.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
---
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index 94752aaf08..5d69333518 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -16,6 +16,8 @@ const IDLE_TIMEOUT = 2 * 60;
 
 const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 
+const CROSSFADE_TIME = 300;
+
 const BLUR_BRIGHTNESS = 0.55;
 const BLUR_RADIUS = 200;
 
@@ -400,10 +402,17 @@ var UnlockDialog = GObject.registerClass({
             accessible_role: Atk.Role.WINDOW,
             style_class: 'login-dialog',
             visible: false,
+            reactive: true,
         });
 
         parentActor.add_child(this);
 
+        this._activePage = null;
+
+        let tapAction = new Clutter.TapAction();
+        tapAction.connect('tap', this._showPrompt.bind(this));
+        this.add_action(tapAction);
+
         // Background
         this._backgroundGroup = new Clutter.Actor();
         this.add_child(this._backgroundGroup);
@@ -426,6 +435,7 @@ var UnlockDialog = GObject.registerClass({
 
         this._clock = new Clock();
         stack.add_child(this._clock);
+        this._showClock();
 
         this._authPrompt = new AuthPrompt.AuthPrompt(new Gdm.Client(), 
AuthPrompt.AuthPromptMode.UNLOCK_ONLY);
         this._authPrompt.connect('failed', this._fail.bind(this));
@@ -476,6 +486,21 @@ var UnlockDialog = GObject.registerClass({
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
+    vfunc_key_press_event(keyEvent) {
+        if (this._activePage === this._promptBox ||
+            (this._promptBox && this._promptBox.visible))
+            return Clutter.EVENT_PROPAGATE;
+
+        let unichar = keyEvent.unicode_value;
+
+        this._showPrompt();
+
+        if (GLib.unichar_isgraph(unichar))
+            this.addCharacter(unichar);
+
+        return Clutter.EVENT_PROPAGATE;
+    }
+
     _createBackground(monitorIndex) {
         let monitor = Main.layoutManager.monitors[monitorIndex];
         let widget = new St.Widget({
@@ -523,6 +548,48 @@ var UnlockDialog = GObject.registerClass({
         }
     }
 
+    _showClock() {
+        if (this._activePage === this._clock)
+            return;
+
+        this._activePage = this._clock;
+        this._clock.show();
+
+        this._promptBox.ease({
+            opacity: 0,
+            duration: CROSSFADE_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => this._promptBox.hide(),
+        });
+
+        this._clock.ease({
+            opacity: 255,
+            duration: CROSSFADE_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
+    _showPrompt() {
+        if (this._activePage === this._promptBox)
+            return;
+
+        this._activePage = this._promptBox;
+        this._promptBox.show();
+
+        this._clock.ease({
+            opacity: 0,
+            duration: CROSSFADE_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => this._clock.hide(),
+        });
+
+        this._promptBox.ease({
+            opacity: 255,
+            duration: CROSSFADE_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
     _fail() {
         this.emit('failed');
     }
@@ -569,6 +636,7 @@ var UnlockDialog = GObject.registerClass({
     }
 
     addCharacter(unichar) {
+        this._showPrompt();
         this._authPrompt.addCharacter(unichar);
     }