[gnome-shell] panel: Add quick settings indicator

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

commit 84a62cc8688a080177bc56a6325d2bd1939a66ce
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Jul 24 19:49:58 2022 +0200

    panel: Add quick settings indicator
    
    The new indicator will eventually expose all the system status
    items that are currently provided by the aggregate menu, but in
    a more accessible form than the current submenu-heavy menu.
    
    Right now this just adds the new empty indicator to the top bar,
    alongside the existing aggregate menu.
    
    We can then move items over one-by-one.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2392>

 js/ui/panel.js       | 22 ++++++++++++++++++++++
 js/ui/sessionMode.js |  6 +++---
 2 files changed, 25 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 992cdd8e93..850d4f06c1 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -11,6 +11,7 @@ const DND = imports.ui.dnd;
 const Overview = imports.ui.overview;
 const PopupMenu = imports.ui.popupMenu;
 const PanelMenu = imports.ui.panelMenu;
+const {QuickSettingsMenu} = imports.ui.quickSettings;
 const Main = imports.ui.main;
 
 var PANEL_ICON_SIZE = 16;
@@ -18,6 +19,8 @@ var APP_MENU_ICON_MARGIN = 0;
 
 var BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
+const N_QUICK_SETTINGS_COLUMNS = 2;
+
 /**
  * AppMenuButton:
  *
@@ -432,10 +435,29 @@ class AggregateMenu extends PanelMenu.Button {
     }
 });
 
+var QuickSettings = GObject.registerClass(
+class QuickSettings extends PanelMenu.Button {
+    _init() {
+        super._init(0.0, C_('System menu in the top bar', 'System'), true);
+
+        this._indicators = new St.BoxLayout({
+            style_class: 'panel-status-indicators-box',
+        });
+        this.add_child(this._indicators);
+
+        this.setMenu(new QuickSettingsMenu(this, N_QUICK_SETTINGS_COLUMNS));
+    }
+
+    _addItems(items, colSpan = 1) {
+        items.forEach(item => this.menu.addItem(item, colSpan));
+    }
+});
+
 const PANEL_ITEM_IMPLEMENTATIONS = {
     'activities': ActivitiesButton,
     'aggregateMenu': AggregateMenu,
     'appMenu': AppMenuButton,
+    'quickSettings': QuickSettings,
     'dateMenu': imports.ui.dateMenu.DateMenuButton,
     'a11y': imports.ui.status.accessibility.ATIndicator,
     'keyboard': imports.ui.status.keyboard.InputSourceIndicator,
diff --git a/js/ui/sessionMode.js b/js/ui/sessionMode.js
index acf584d8c9..c82e8329c9 100644
--- a/js/ui/sessionMode.js
+++ b/js/ui/sessionMode.js
@@ -59,7 +59,7 @@ const _modes = {
         panel: {
             left: [],
             center: ['dateMenu'],
-            right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu'],
+            right: ['dwellClick', 'a11y', 'keyboard', 'quickSettings', 'aggregateMenu'],
         },
         panelStyle: 'login-screen',
     },
@@ -71,7 +71,7 @@ const _modes = {
         panel: {
             left: [],
             center: [],
-            right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu'],
+            right: ['dwellClick', 'a11y', 'keyboard', 'quickSettings', 'aggregateMenu'],
         },
         panelStyle: 'unlock-screen',
     },
@@ -94,7 +94,7 @@ const _modes = {
         panel: {
             left: ['activities', 'appMenu'],
             center: ['dateMenu'],
-            right: ['screenRecording', 'screenSharing', 'dwellClick', 'a11y', 'keyboard', 'aggregateMenu'],
+            right: ['screenRecording', 'screenSharing', 'dwellClick', 'a11y', 'keyboard', 'quickSettings', 
'aggregateMenu'],
         },
     },
 };