quickSettings: Allow interactive slider icons

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>

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

@@ -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 {

js/ui/quickSettings.js

@@ -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