feat: Implement Control Center custom button basic framework

2026-05-26 07:50:19 +00:00 · 2025-11-03 06:11:02 +08:00
parent 2c3d7bc101
commit 5c19c8433e
7 changed files with 268 additions and 11 deletions
@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+// Widget Settings Dialog Component
+Popup {
+  id: root
+
+  property int widgetIndex: -1
+  property var widgetData: null
+  property string widgetId: ""
+  property string sectionId: ""
+
+  signal updateWidgetSettings(string section, int index, var settings)
+
+  width: Math.max(content.implicitWidth + padding * 2, 500)
+  height: content.implicitHeight + padding * 2
+  padding: Style.marginXL
+  modal: true
+  anchors.centerIn: parent
+
+  onOpened: {
+    PanelService.willOpenPopup(root)
+    if (widgetData && widgetId) {
+      loadWidgetSettings()
+    }
+  }
+
+  onClosed: {
+    PanelService.willClosePopup(root)
+  }
+
+  background: Rectangle {
+    color: Color.mSurface
+    radius: Style.radiusL
+    border.color: Color.mPrimary
+    border.width: Style.borderM
+  }
+
+  contentItem: ColumnLayout {
+    id: content
+    width: parent.width
+    spacing: Style.marginM
+
+    // Title
+    RowLayout {
+      Layout.fillWidth: true
+
+      NText {
+        text: I18n.tr("system.widget-settings-title", { "widget": root.widgetId })
+        pointSize: Style.fontSizeL
+        font.weight: Style.fontWeightBold
+        color: Color.mPrimary
+        Layout.fillWidth: true
+      }
+
+      NIconButton {
+        icon: "close"
+        tooltipText: I18n.tr("tooltips.close")
+        onClicked: root.close()
+      }
+    }
+
+    // Separator
+    Rectangle {
+      Layout.fillWidth: true
+      Layout.preferredHeight: 1
+      color: Color.mOutline
+    }
+
+    Loader {
+      id: settingsLoader
+      Layout.fillWidth: true
+    }
+
+    // Action buttons
+    RowLayout {
+      Layout.fillWidth: true
+      Layout.topMargin: Style.marginM
+      spacing: Style.marginM
+
+      Item { Layout.fillWidth: true }
+
+      NButton {
+        text: I18n.tr("settings.control-center.shortcuts.dialog.cancel", "Cancel")
+        outlined: true
+        onClicked: root.close()
+      }
+
+      NButton {
+        text: I18n.tr("settings.control-center.shortcuts.dialog.apply", "Apply")
+        icon: "check"
+        onClicked: {
+          if (settingsLoader.item && settingsLoader.item.saveSettings) {
+            var newSettings = settingsLoader.item.saveSettings()
+            root.updateWidgetSettings(root.sectionId, root.widgetIndex, newSettings)
+            root.close()
+          }
+        }
+      }
+    }
+  }
+
+  function loadWidgetSettings() {
+    const widgetSettingsMap = {
+      "CustomButton": "WidgetSettings/CustomButtonSettings.qml"
+    }
+
+    const source = widgetSettingsMap[widgetId]
+    if (source) {
+      settingsLoader.setSource(source, {
+                                 "widgetData": widgetData,
+                                 "widgetMetadata": ControlCenterWidgetRegistry.widgetMetadata[widgetId]
+                               })
+    }
+  }
+}
@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM
+
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  property string valueIcon: widgetData.icon !== undefined ? widgetData.icon : widgetMetadata.icon
+  property string valueTooltip: widgetData.tooltipText !== undefined ? widgetData.tooltipText : widgetMetadata.tooltipText
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.icon = valueIcon
+    settings.exec = execInput.text
+    settings.tooltipText = tooltipInput.text
+    return settings
+  }
+
+  RowLayout {
+    spacing: Style.marginM
+
+    NLabel {
+      label: I18n.tr("settings.control-center.shortcuts.custom-button.icon.label", "Icon")
+      description: I18n.tr("settings.control-center.shortcuts.custom-button.icon.description", "The icon for the button.")
+    }
+
+    NIcon {
+      Layout.alignment: Qt.AlignVCenter
+      icon: valueIcon
+      pointSize: Style.fontSizeXL
+      visible: valueIcon !== ""
+    }
+
+    NButton {
+      text: I18n.tr("settings.control-center.shortcuts.custom-button.browse", "Browse")
+      onClicked: iconPicker.open()
+    }
+  }
+
+  NIconPicker {
+    id: iconPicker
+    initialIcon: valueIcon
+    onIconSelected: function (iconName) {
+      valueIcon = iconName
+    }
+  }
+
+  NTextInput {
+    id: execInput
+    Layout.fillWidth: true
+    label: I18n.tr("settings.control-center.shortcuts.custom-button.command.label", "Command")
+    description: I18n.tr("settings.control-center.shortcuts.custom-button.command.description", "The command to execute when the button is clicked.")
+    placeholderText: I18n.tr("placeholders.enter-command")
+    text: widgetData?.exec || widgetMetadata.exec
+  }
+
+  NTextInput {
+    id: tooltipInput
+    Layout.fillWidth: true
+    label: I18n.tr("settings.control-center.shortcuts.custom-button.tooltip.label", "Tooltip")
+    description: I18n.tr("settings.control-center.shortcuts.custom-button.tooltip.description", "The tooltip to show when hovering over the button.")
+    placeholderText: I18n.tr("placeholders.enter-tooltip")
+    text: widgetData?.tooltipText || widgetMetadata.tooltipText
+  }
+}
@@ -226,7 +226,7 @@ ColumnLayout {
      NSectionEditor {
        sectionName: I18n.tr("settings.control-center.shortcuts.sectionLeft")
        sectionId: "left"
-        settingsDialogComponent: ""
+        settingsDialogComponent: Qt.resolvedUrl(Quickshell.shellDir + "/Modules/Settings/ControlCenter/ControlCenterWidgetSettingsDialog.qml")
        maxWidgets: 5
        widgetRegistry: ControlCenterWidgetRegistry
        widgetModel: Settings.data.controlCenter.shortcuts["left"]
@@ -245,7 +245,7 @@ ColumnLayout {
      NSectionEditor {
        sectionName: I18n.tr("settings.control-center.shortcuts.sectionRight")
        sectionId: "right"
-        settingsDialogComponent: ""
+        settingsDialogComponent: Qt.resolvedUrl(Quickshell.shellDir + "/Modules/Settings/ControlCenter/ControlCenterWidgetSettingsDialog.qml")
        maxWidgets: 5
        widgetRegistry: ControlCenterWidgetRegistry
        widgetModel: Settings.data.controlCenter.shortcuts["right"]