[gnome-shell] shellEntry: Hide caps lock warning and use animation to show it

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

commit 0b3fec22d7084266233b170946bfab211511a547
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/widgets/_entries.scss |  6 -----
 data/theme/gnome-shell-sass/widgets/_misc.scss    | 10 +++++++-
 js/ui/shellEntry.js                               | 31 +++++++++++++++++------
 3 files changed, 32 insertions(+), 15 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss 
b/data/theme/gnome-shell-sass/widgets/_entries.scss
index 70875b0854..0a43e86f37 100644
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -25,9 +25,3 @@ StEntry {
     color: transparentize($fg_color, 0.3);
   }
 }
-
-.caps-lock-warning-label {
-  padding-left: 6.2em;
-  @include fontsize($base_font_size - 1);
-  color: $warning_color;
-}
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 5d60dbde16..f05436dc57 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -56,4 +56,12 @@
 
 
 // Hidden
-.hidden { color: rgba(0,0,0,0);}
\ No newline at end of file
+.hidden { color: rgba(0,0,0,0);}
+
+// Caps-lock warning
+.caps-lock-warning-label {
+  padding-bottom: 8px;
+  padding-left: 6.2em;
+  @include fontsize($base_font_size - 1);
+  color: $warning_color;
+}
diff --git a/js/ui/shellEntry.js b/js/ui/shellEntry.js
index f8f2f12fd1..0488d70d09 100644
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -161,31 +161,46 @@ 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;
+
+        this.remove_all_transitions();
+
+        this.natural_height_set = false;
+        let [, height] = this.get_preferred_height(-1);
+        this.natural_height_set = true;
+
+        this.ease({
+            height: capsLockOn ? height : 0,
+            opacity: capsLockOn ? 255 : 0,
+            duration: animate ? 200 : 0,
+            onComplete: () => {
+                if (capsLockOn)
+                    this.height = -1;
+            },
+        });
     }
 });