From 0b3fec22d7084266233b170946bfab211511a547 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= <verdre@v0yd.nl>
Date: Thu, 23 Jan 2020 22:36:09 +0100
Subject: [PATCH] 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
---
 .../gnome-shell-sass/widgets/_entries.scss    |  6 ----
 .../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 70875b085..0a43e86f3 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 5d60dbde1..f05436dc5 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 f8f2f12fd..0488d70d0 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;
+            },
+        });
     }
 });