edu4rdshl/gnome-shell
1
0
Fork 0
mirror of https://github.com/edu4rdshl/gnome-shell.git synced 2026-07-18 07:34:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

shellEntry: Hide caps lock warning and use animation to show it

Browse source 
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
This commit is contained in:
Jonas Dreßler 2020-01-23 22:36:09 +01:00 • committed by Florian Müllner
parent 9009b50bd1
commit 0b3fec22d7
3 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

31
js/ui/shellEntry.js
View file

@ -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;
},
});
}
});