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

[Florian Müllner <fmuellner src gnome org>]

commit 72056cbb0f1d6058f74fbde9d4ac8f224dd40b7d
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 | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
---
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index 43a05a8b16..fb150cbaff 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -400,10 +400,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();
 
@@ -479,6 +486,29 @@ var UnlockDialog = GObject.registerClass({
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
+    vfunc_key_press_event(keyEvent) {
+        if (this._activePage === this._promptBox)
+            return Clutter.EVENT_PROPAGATE;
+
+        let symbol = keyEvent.keyval;
+        let unichar = keyEvent.unicode_value;
+
+        let isLiftChar = GLib.unichar_isprint(unichar);
+        let isEnter = symbol === Clutter.KEY_Return ||
+                      symbol === Clutter.KEY_KP_Enter ||
+                      symbol === Clutter.KEY_ISO_Enter;
+
+        if (!isEnter && !isLiftChar)
+            return Clutter.EVENT_PROPAGATE;
+
+        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({
@@ -526,6 +556,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: 300,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => this._promptBox.hide(),
+        });
+
+        this._clock.ease({
+            opacity: 255,
+            duration: 300,
+            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: 300,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => this._clock.hide(),
+        });
+
+        this._promptBox.ease({
+            opacity: 255,
+            duration: 300,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
     _fail() {
         this.emit('failed');
     }
@@ -578,6 +650,7 @@ var UnlockDialog = GObject.registerClass({
     }
 
     addCharacter(unichar) {
+        this._showPrompt();
         this._authPrompt.addCharacter(unichar);
     }