[gnome-shell] quickSettings: Add QuickMenuToggle

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

commit 4b9dcb3f89b716642f664420185aa9b3919b29d7
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Jul 29 18:33:54 2022 +0200

    quickSettings: Add QuickMenuToggle
    
    This is a convenience subclass for a quick toggle with a menu.
    
    The menu can be disabled dynamically and if enabled, an arrow
    is displayed that allows opening the menu.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>

 .../gnome-shell-sass/widgets/_quick-settings.scss  | 20 ++++++++++-
 js/ui/quickSettings.js                             | 39 +++++++++++++++++++++-
 2 files changed, 57 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 4f8a62f275..f1f2eb235e 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -17,8 +17,26 @@
 
   & > StBoxLayout { spacing: $base_padding; }
 
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 2 * $base_padding; }
+
   .quick-toggle-label { font-weight: bold; }
-  .quick-toggle-icon { icon-size: $base_icon_size; }
+  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+}
+
+.quick-menu-toggle {
+  &:ltr > StBoxLayout { padding-right: 0; }
+  &:rtl > StBoxLayout { padding-left: 0; }
+
+  & .quick-toggle-arrow {
+    background-color: transparentize($fg_color, 0.9);
+    padding: 8px;
+
+    &:ltr { border-radius: 0 99px 99px 0; }
+    &:rtl { border-radius: 99px 0 0 99px; }
+  }
 }
 
 .quick-toggle-menu {
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index 634a0703f9..ecffc98791 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -1,4 +1,4 @@
-/* exported QuickToggle, QuickSettingsMenu, SystemIndicator */
+/* exported QuickToggle, QuickMenuToggle, QuickSettingsMenu, SystemIndicator */
 const {Atk, Clutter, Gio, GLib, GObject, Graphene, Pango, St} = imports.gi;
 
 const Main = imports.ui.main;
@@ -94,6 +94,43 @@ var QuickToggle = GObject.registerClass({
     }
 });
 
+var QuickMenuToggle = GObject.registerClass({
+    Properties: {
+        'menu-enabled': GObject.ParamSpec.boolean(
+            'menu-enabled', '', '',
+            GObject.ParamFlags.READWRITE,
+            true),
+    },
+}, class QuickMenuToggle extends QuickToggle {
+    _init(params) {
+        super._init({
+            ...params,
+            hasMenu: true,
+        });
+
+        this.add_style_class_name('quick-menu-toggle');
+
+        this._menuButton = new St.Button({
+            child: new St.Icon({
+                style_class: 'quick-toggle-arrow',
+                icon_name: 'go-next-symbolic',
+            }),
+            x_expand: false,
+            y_expand: true,
+        });
+        this._box.add_child(this._menuButton);
+
+        this.bind_property('menu-enabled',
+            this._menuButton, 'visible',
+            GObject.BindingFlags.DEFAULT);
+        this._menuButton.connect('clicked', () => this.menu.open());
+        this.connect('popup-menu', () => {
+            if (this.menuEnabled)
+                this.menu.open();
+        });
+    }
+});
+
 class QuickToggleMenu extends PopupMenu.PopupMenuBase {
     constructor(sourceActor) {
         super(sourceActor, 'quick-toggle-menu');