From e5d4984c1b6bd2cfe739cc09b1f348bea1ad416a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sun, 24 Jul 2022 19:29:50 +0200
Subject: [PATCH] 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>
---
 .../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 66a0ed308..8dc5ff850 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 82a235850..340d6a375 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(