brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/theme/gnome-shell-sass/widgets/_entries.scss
View File

@ -25,9 +25,3 @@ StEntry {
color: transparentize($fg_color, 0.3); color: transparentize($fg_color, 0.3);
} }
} }
.caps-lock-warning-label {
padding-left: 6.2em;
@include fontsize($base_font_size - 1);
color: $warning_color;
}

8
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -57,3 +57,11 @@
// Hidden // Hidden
.hidden { color: rgba(0,0,0,0);} .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;
}

31
js/ui/shellEntry.js
View File

@ -161,31 +161,46 @@ class CapsLockWarning extends St.Label {
this.text = _('Caps lock is on.'); 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._keymap = Clutter.get_default_backend().get_keymap();
this.connect('notify::mapped', () => { this.connect('notify::mapped', () => {
if (this.is_mapped()) { if (this.is_mapped()) {
this._stateChangedId = this._keymap.connect('state-changed', this._stateChangedId = this._keymap.connect('state-changed',
this._updateCapsLockWarningOpacity.bind(this)); () => this._sync(true));
} else { } else {
this._keymap.disconnect(this._stateChangedId); this._keymap.disconnect(this._stateChangedId);
this._stateChangedId = 0; this._stateChangedId = 0;
} }
this._updateCapsLockWarningOpacity(); this._sync(false);
}); });
this.connect('destroy', () => { this.connect('destroy', () => {
if (this._stateChangedId > 0) if (this._stateChangedId)
this._keymap.disconnect(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(); 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;
},
});
} }
}); });