quickSettings: Add QuickToggle

Most quick settings items are just buttons with icon, label, and
a particular style. While that's easy enough, a dedicated class
with corresponding properties is more convenient.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2392>

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

@@ -6,3 +6,17 @@
   spacing-rows: 3 * $base_padding;
   spacing-columns: 2 * $base_padding;
 }
+
+.quick-toggle {
+  border-radius: 99px;
+  min-width: 11.5em;
+  max-width: 11.5em;
+  min-height: 48px;
+
+  &:checked { @include button(default); }
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .quick-toggle-label { font-weight: bold; }
+  .quick-toggle-icon { icon-size: $base_icon_size; }
+}

js/ui/quickSettings.js

@@ -1,9 +1,72 @@
-/* exported QuickSettingsMenu */
+/* exported QuickToggle, QuickSettingsMenu */
-const {Clutter, GLib, GObject, St} = imports.gi;
+const {Atk, Clutter, Gio, GLib, GObject, Pango, St} = imports.gi;
 
 const Main = imports.ui.main;
 const PopupMenu = imports.ui.popupMenu;
 
+var QuickToggle = GObject.registerClass({
+    Properties: {
+        'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
+        'gicon': GObject.ParamSpec.object('gicon', '', '',
+            GObject.ParamFlags.READWRITE,
+            Gio.Icon),
+        'label': GObject.ParamSpec.string('label', '', '',
+            GObject.ParamFlags.READWRITE,
+            ''),
+    },
+}, class QuickToggle extends St.Button {
+    _init(params) {
+        super._init({
+            style_class: 'quick-toggle button',
+            accessible_role: Atk.Role.TOGGLE_BUTTON,
+            can_focus: true,
+            ...params,
+        });
+
+        this._box = new St.BoxLayout();
+        this.set_child(this._box);
+
+        const iconProps = {};
+        if (this.gicon)
+            iconProps['gicon'] = this.gicon;
+        if (this.iconName)
+            iconProps['icon-name'] = this.iconName;
+
+        this._icon = new St.Icon({
+            style_class: 'quick-toggle-icon',
+            x_expand: false,
+            ...iconProps,
+        });
+        this._box.add_child(this._icon);
+
+        // bindings are in the "wrong" direction, so we
+        // pick up StIcon's linking of the two properties
+        this._icon.bind_property('icon-name',
+            this, 'icon-name',
+            GObject.BindingFlags.SYNC_CREATE |
+            GObject.BindingFlags.BIDIRECTIONAL);
+        this._icon.bind_property('gicon',
+            this, 'gicon',
+            GObject.BindingFlags.SYNC_CREATE |
+            GObject.BindingFlags.BIDIRECTIONAL);
+
+        this._label = new St.Label({
+            style_class: 'quick-toggle-label',
+            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.START,
+            x_expand: true,
+        });
+        this.label_actor = this._label;
+        this._box.add_child(this._label);
+
+        this._label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+
+        this.bind_property('label',
+            this._label, 'text',
+            GObject.BindingFlags.SYNC_CREATE);
+    }
+});
+
 const QuickSettingsLayoutMeta = GObject.registerClass({
     Properties: {
         'column-span': GObject.ParamSpec.int(