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

quickSettings: Allow interactive slider icons

Browse Source 
Before the move to quick settings, it was possible to mute the volume
by clicking to the left of the slider. In order to re-enable that
feature, allow slider icons to be interactive.

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5974

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2630>
This commit is contained in:
Florian Müllner 2023-02-08 01:32:52 +01:00 committed by Marge Bot
parent 41c91c7a3b
commit 7ee3514ddb
2 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,18 +74,14 @@
.quick-slider {
& > StBoxLayout { spacing: $base_padding; }
.icon-button { padding: $base_padding; }
.slider-bin {
&:focus {@include button(focus);}
min-height: 16px; // slider size
padding: $base_padding;
border-radius: 99px;
}
.quick-toggle-icon {
icon-size: $base_icon_size;
&:ltr { margin-left: $base_padding; }
&:rtl { margin-right: $base_padding; }
}
}
.quick-toggle-menu {

33
js/ui/quickSettings.js
View File

@ -222,11 +222,22 @@ var QuickSlider = GObject.registerClass({
'gicon': GObject.ParamSpec.object('gicon', '', '',
GObject.ParamFlags.READWRITE,
Gio.Icon),
'icon-reactive': GObject.ParamSpec.boolean(
'icon-reactive', '', '',
GObject.ParamFlags.READWRITE,
false),
'icon-label': GObject.ParamSpec.string(
'icon-label', '', '',
GObject.ParamFlags.READWRITE,
''),
'menu-enabled': GObject.ParamSpec.boolean(
'menu-enabled', '', '',
GObject.ParamFlags.READWRITE,
false),
},
Signals: {
'icon-clicked': {},
},
}, class QuickSlider extends QuickSettingsItem {
_init(params) {
super._init({
@ -247,10 +258,28 @@ var QuickSlider = GObject.registerClass({
iconProps['icon-name'] = this.iconName;
this._icon = new St.Icon({
style_class: 'quick-toggle-icon',
...iconProps,
});
box.add_child(this._icon);
this._iconButton = new St.Button({
child: this._icon,
style_class: 'icon-button flat',
can_focus: true,
x_expand: false,
y_expand: true,
});
this._iconButton.connect('clicked',
() => this.emit('icon-clicked'));
// Show as regular icon when non-interactive
this._iconButton.connect('notify::reactive',
() => this._iconButton.remove_style_pseudo_class('insensitive'));
box.add_child(this._iconButton);
this.bind_property('icon-reactive',
this._iconButton, 'reactive',
GObject.BindingFlags.SYNC_CREATE);
this.bind_property('icon-label',
this._iconButton, 'accessible-name',
GObject.BindingFlags.SYNC_CREATE);
// bindings are in the "wrong" direction, so we
// pick up StIcon's linking of the two properties