Merge pull request #1915 from tmarti2/add-settings-bar-widget

Add settings bar widget

Assets/settings-widgets-default.json

@@ -142,6 +142,9 @@
     "SessionMenu": {
       "iconColor": "error"
     },
+    "Settings": {
+      "iconColor": "none"
+    },
     "Spacer": {
       "width": 20
     },

Modules/Bar/Widgets/AudioVisualizer.qml

@@ -41,20 +41,7 @@ Item {
   readonly property bool hideWhenIdle: widgetSettings.hideWhenIdle !== undefined ? widgetSettings.hideWhenIdle : widgetMetadata.hideWhenIdle
   readonly property string colorName: widgetSettings.colorName !== undefined ? widgetSettings.colorName : widgetMetadata.colorName
 
-  readonly property color fillColor: {
-    switch (colorName) {
-    case "primary":
-      return Color.mPrimary;
-    case "secondary":
-      return Color.mSecondary;
-    case "tertiary":
-      return Color.mTertiary;
-    case "error":
-      return Color.mError;
-    default:
-      return Color.mOnSurface;
-    }
-  }
+  readonly property color fillColor: Color.resolveColorKey(colorName)
 
   readonly property bool shouldShow: (currentVisualizerType !== "" && currentVisualizerType !== "none") && (!hideWhenIdle || MediaService.isPlaying)
 

Modules/Bar/Widgets/ControlCenter.qml

@@ -43,18 +43,7 @@ NIconButton {
   readonly property color iconColor: {
     if (!enableColorization)
       return Color.mOnSurface;
-    switch (colorizeSystemIcon) {
-    case "primary":
-      return Color.mPrimary;
-    case "secondary":
-      return Color.mSecondary;
-    case "tertiary":
-      return Color.mTertiary;
-    case "error":
-      return Color.mError;
-    default:
-      return Color.mOnSurface;
-    }
+    return Color.resolveColorKey(colorizeSystemIcon);
   }
 
   // If we have a custom path and not using distro logo, use the theme icon.

Modules/Bar/Widgets/Settings.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Commons
+import qs.Services.UI
+import qs.Widgets
+
+NIconButton {
+  id: root
+
+  property ShellScreen screen
+
+  // Widget properties passed from Bar.qml for per-instance settings
+  property string widgetId: ""
+  property string section: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+
+  property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
+  // Explicit screenName property ensures reactive binding when screen changes
+  readonly property string screenName: screen ? screen.name : ""
+  property var widgetSettings: {
+    if (section && sectionWidgetIndex >= 0 && screenName) {
+      var widgets = Settings.getBarWidgetsForScreen(screenName)[section];
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex];
+      }
+    }
+    return {};
+  }
+
+  readonly property string valueIconColor: widgetSettings.iconColor !== undefined ? widgetSettings.iconColor : widgetMetadata.iconColor
+
+  readonly property color iconColor: Color.resolveColorKey(valueIconColor)
+
+  icon: "settings"
+  tooltipText: !PanelService.getPanel("settingsPanel", screen)?.isPanelOpen ? I18n.tr("tooltips.open-settings") : ""
+  tooltipDirection: BarService.getTooltipDirection(screen?.name)
+  baseSize: Style.getCapsuleHeightForScreen(screen?.name)
+  applyUiScale: false
+  customRadius: Style.radiusL
+  colorBg: Style.capsuleColor
+  colorFg: iconColor
+  colorBgHover: Color.mHover
+  colorFgHover: Color.mOnHover
+  colorBorder: Style.capsuleBorderColor
+  colorBorderHover: Style.capsuleBorderColor
+
+  NPopupContextMenu {
+    id: contextMenu
+
+    model: [
+      {
+        "label": I18n.tr("actions.widget-settings"),
+        "action": "widget-settings",
+        "icon": "settings"
+      },
+    ]
+
+    onTriggered: action => {
+                   contextMenu.close();
+                   PanelService.closeContextMenu(screen);
+
+                   if (action === "widget-settings") {
+                     BarService.openWidgetSettings(screen, section, sectionWidgetIndex, widgetId, widgetSettings);
+                   }
+                 }
+  }
+
+  onClicked: {
+    if (Settings.data.ui.settingsPanelMode === "attached") {
+      PanelService.getPanel("settingsPanel", screen)?.toggle(this);
+    } else {
+      PanelService.getPanel("settingsPanel", screen)?.toggle();
+    }
+  }
+  onRightClicked: {
+    PanelService.showContextMenu(contextMenu, root, screen);
+  }
+}

Modules/Panels/Settings/Bar/WidgetSettings/ClockSettings.qml

@@ -25,20 +25,7 @@ ColumnLayout {
   property string valueFormatVertical: widgetData.formatVertical !== undefined ? widgetData.formatVertical : (widgetMetadata.formatVertical !== undefined ? widgetMetadata.formatVertical : "")
   property string valueTooltipFormat: widgetData.tooltipFormat !== undefined ? widgetData.tooltipFormat : (widgetMetadata.tooltipFormat !== undefined ? widgetMetadata.tooltipFormat : "")
 
-  readonly property color textColor: {
-    switch (valueClockColor) {
-    case "primary":
-      return Color.mPrimary;
-    case "secondary":
-      return Color.mSecondary;
-    case "tertiary":
-      return Color.mTertiary;
-    case "error":
-      return Color.mError;
-    default:
-      return Color.mOnSurface;
-    }
-  }
+  readonly property color textColor: Color.resolveColorKey(valueClockColor)
 
   // Track the currently focused input field
   property var focusedInput: null

Modules/Panels/Settings/Bar/WidgetSettings/SettingsSettings.qml

@@ -0,0 +1,34 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM
+
+  // Properties to receive data from parent
+  property var screen: null
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  signal settingsChanged(var settings)
+
+  // Local state
+  property string valueIconColor: widgetData.iconColor !== undefined ? widgetData.iconColor : widgetMetadata.iconColor
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {});
+    settings.iconColor = valueIconColor;
+    settingsChanged(settings);
+  }
+
+  NColorChoice {
+    label: I18n.tr("common.select-icon-color")
+    currentKey: valueIconColor
+    onSelected: key => {
+                  valueIconColor = key;
+                  saveSettings();
+                }
+  }
+}

Services/UI/BarWidgetRegistry.qml

@@ -33,6 +33,7 @@ Singleton {
                            "NotificationHistory": notificationHistoryComponent,
                            "PowerProfile": powerProfileComponent,
                            "SessionMenu": sessionMenuComponent,
+                           "Settings": settingsComponent,
                            "Spacer": spacerComponent,
                            "SystemMonitor": systemMonitorComponent,
                            "Taskbar": taskbarComponent,
@@ -65,6 +66,7 @@ Singleton {
                                      "NotificationHistory": "WidgetSettings/NotificationHistorySettings.qml",
                                      "PowerProfile": "WidgetSettings/PowerProfileSettings.qml",
                                      "SessionMenu": "WidgetSettings/SessionMenuSettings.qml",
+                                     "Settings": "WidgetSettings/SettingsSettings.qml",
                                      "Spacer": "WidgetSettings/SpacerSettings.qml",
                                      "SystemMonitor": "WidgetSettings/SystemMonitorSettings.qml",
                                      "Taskbar": "WidgetSettings/TaskbarSettings.qml",
@@ -218,6 +220,9 @@ Singleton {
                                   "SessionMenu": {
                                     "iconColor": "error"
                                   },
+                                  "Settings": {
+                                    "iconColor": "non"
+                                  },
                                   "Spacer": {
                                     "width": 20
                                   },
@@ -367,6 +372,9 @@ Singleton {
   property Component sessionMenuComponent: Component {
     SessionMenu {}
   }
+  property Component settingsComponent: Component {
+    Settings {}
+  }
   property Component controlCenterComponent: Component {
     ControlCenter {}
   }