[gnome-shell] quickSettings: Add QuickToggle

[Marge Bot <marge-bot src gnome org>]

commit e5d4984c1b6bd2cfe739cc09b1f348bea1ad416a
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Jul 24 19:29:50 2022 +0200

    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>

 .../gnome-shell-sass/widgets/_quick-settings.scss  | 14 +++++
 js/ui/quickSettings.js                             | 67 +++++++++++++++++++++-
 2 files changed, 79 insertions(+), 2 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss 
b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 66a0ed3080..8dc5ff8508 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/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; }
+}
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index 82a235850a..340d6a3753 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -1,9 +1,72 @@
-/* exported QuickSettingsMenu */
-const {Clutter, GLib, GObject, St} = imports.gi;
+/* exported QuickToggle, QuickSettingsMenu */
+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(