[gnome-shell/wip/rstrode/login-screen-extensions: 22/134] shellEntry: Hide caps lock warning and use animation to show it

[Ray Strode <halfline src gnome org>]

commit 1b445167431d0995eb7d289e211d47991b5bcc25
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Thu Jan 23 22:36:09 2020 +0100

    shellEntry: Hide caps lock warning and use animation to show it
    
    Since the caps-lock warning adds a lot of spacing to dialogs and the
    lock screen, hide it by default and only show it when necessary. To make
    the transition smooth instead of just showing the label, animate it in
    using the height and opacity.
    
    Also add some bottom padding to the label so we can show or hide that
    padding, too.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/952

 data/theme/gnome-shell-sass/_common.scss |  1 +
 js/ui/shellEntry.js                      | 33 ++++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index e243b397df..e79f0937b8 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -95,6 +95,7 @@ StEntry {
 }
 
 .caps-lock-warning-label {
+  padding-bottom: 8px;
   padding-left: 6.2em;
   @include fontsize($font-size - 1);
   color: $warning_color;
diff --git a/js/ui/shellEntry.js b/js/ui/shellEntry.js
index 46eba88d54..fc8ee37a9a 100644
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -6,6 +6,7 @@ const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;
+const Tweener = imports.ui.tweener;
 
 var EntryMenu = class extends PopupMenu.PopupMenu {
     constructor(entry) {
@@ -179,31 +180,47 @@ class CapsLockWarning extends St.Label {
 
         this.text = _('Caps lock is on.');
 
+        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this.clutter_text.line_wrap = true;
+
         this._keymap = Clutter.get_default_backend().get_keymap();
 
         this.connect('notify::mapped', () => {
             if (this.is_mapped()) {
                 this._stateChangedId = this._keymap.connect('state-changed',
-                    this._updateCapsLockWarningOpacity.bind(this));
+                    () => this._sync(true));
             } else {
                 this._keymap.disconnect(this._stateChangedId);
                 this._stateChangedId = 0;
             }
 
-            this._updateCapsLockWarningOpacity();
+            this._sync(false);
         });
 
         this.connect('destroy', () => {
-            if (this._stateChangedId > 0)
+            if (this._stateChangedId)
                 this._keymap.disconnect(this._stateChangedId);
         });
-
-        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.clutter_text.line_wrap = true;
     }
 
-    _updateCapsLockWarningOpacity() {
+    _sync(animate) {
         let capsLockOn = this._keymap.get_caps_lock_state();
-        this.opacity = capsLockOn ? 255 : 0;
+
+        Tweener.removeTweens(this);
+
+        this.natural_height_set = false;
+        let [, height] = this.get_preferred_height(-1);
+        this.natural_height_set = true;
+
+        Tweener.addTween(this, {
+            height: capsLockOn ? height : 0,
+            opacity: capsLockOn ? 255 : 0,
+            time: animate ? 0.2 : 0,
+            transition: 'easeOutQuad',
+            onComplete: () => {
+                if (capsLockOn)
+                    this.height = -1;
+            },
+        });
     }
 });