feat: Added scrolling to the custom button settings page

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

@@ -47,273 +47,287 @@ ColumnLayout {
     return settings;
   }
 
-  RowLayout {
+  NScrollView {
-    spacing: Style.marginM
+    Layout.preferredWidth: Math.round(600 * Style.uiScaleRatio)
+    Layout.preferredHeight: Math.round(700 * Style.uiScaleRatio)
+    horizontalPolicy: ScrollBar.AlwaysOff
+    verticalPolicy: ScrollBar.AsNeeded
+    padding: Style.marginL
+    focus: true
 
-    NLabel {
+    ColumnLayout {
-      label: I18n.tr("bar.widget-settings.custom-button.icon.label")
+      width: parent.width
-      description: I18n.tr("bar.widget-settings.custom-button.icon.description")
-    }
-
-    NIcon {
-      Layout.alignment: Qt.AlignVCenter
-      icon: valueIcon
-      pointSize: Style.fontSizeXL
-      visible: valueIcon !== ""
-    }
-
-    NButton {
-      text: I18n.tr("bar.widget-settings.custom-button.browse")
-      onClicked: iconPicker.open()
-    }
-  }
-
-  NIconPicker {
-    id: iconPicker
-    initialIcon: valueIcon
-    onIconSelected: function (iconName) {
-      valueIcon = iconName;
-    }
-  }
-
-  RowLayout {
-    spacing: Style.marginM
-
-    NTextInput {
-      id: leftClickExecInput
-      Layout.fillWidth: true
-      label: I18n.tr("bar.widget-settings.custom-button.left-click.label")
-      description: I18n.tr("bar.widget-settings.custom-button.left-click.description")
-      placeholderText: I18n.tr("placeholders.enter-command")
-      text: widgetData?.leftClickExec || widgetMetadata.leftClickExec
-    }
-
-    NToggle {
-      id: leftClickUpdateText
-      enabled: !valueTextStream
-      Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-      Layout.bottomMargin: Style.marginS
-      onEntered: TooltipService.show(leftClickUpdateText, I18n.tr("bar.widget-settings.custom-button.left-click.update-text"), "auto")
-      onExited: TooltipService.hide()
-      checked: widgetData?.leftClickUpdateText ?? widgetMetadata.leftClickUpdateText
-      onToggled: isChecked => checked = isChecked
-    }
-  }
-
-  RowLayout {
-    spacing: Style.marginM
-
-    NTextInput {
-      id: rightClickExecInput
-      Layout.fillWidth: true
-      label: I18n.tr("bar.widget-settings.custom-button.right-click.label")
-      description: I18n.tr("bar.widget-settings.custom-button.right-click.description")
-      placeholderText: I18n.tr("placeholders.enter-command")
-      text: widgetData?.rightClickExec || widgetMetadata.rightClickExec
-    }
-
-    NToggle {
-      id: rightClickUpdateText
-      enabled: !valueTextStream
-      Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-      Layout.bottomMargin: Style.marginS
-      onEntered: TooltipService.show(rightClickUpdateText, I18n.tr("bar.widget-settings.custom-button.right-click.update-text"), "auto")
-      onExited: TooltipService.hide()
-      checked: widgetData?.rightClickUpdateText ?? widgetMetadata.rightClickUpdateText
-      onToggled: isChecked => checked = isChecked
-    }
-  }
-
-  RowLayout {
-    spacing: Style.marginM
-
-    NTextInput {
-      id: middleClickExecInput
-      Layout.fillWidth: true
-      label: I18n.tr("bar.widget-settings.custom-button.middle-click.label")
-      description: I18n.tr("bar.widget-settings.custom-button.middle-click.description")
-      placeholderText: I18n.tr("placeholders.enter-command")
-      text: widgetData.middleClickExec || widgetMetadata.middleClickExec
-    }
-
-    NToggle {
-      id: middleClickUpdateText
-      enabled: !valueTextStream
-      Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-      Layout.bottomMargin: Style.marginS
-      onEntered: TooltipService.show(middleClickUpdateText, I18n.tr("bar.widget-settings.custom-button.middle-click.update-text"), "auto")
-      onExited: TooltipService.hide()
-      checked: widgetData?.middleClickUpdateText ?? widgetMetadata.middleClickUpdateText
-      onToggled: isChecked => checked = isChecked
-    }
-  }
-
-  // Wheel command settings
-  NToggle {
-    id: separateWheelToggle
-    Layout.fillWidth: true
-    label: I18n.tr("bar.widget-settings.custom-button.wheel-mode-separate.label", "Separate wheel commands")
-    description: I18n.tr("bar.widget-settings.custom-button.wheel-mode-separate.description", "Enable separate commands for wheel up and down")
-    property bool internalChecked: (widgetData?.wheelMode || widgetMetadata?.wheelMode || "unified") === "separate"
-    checked: internalChecked
-    onToggled: checked => {
-                 internalChecked = checked;
-               }
-  }
-
-  ColumnLayout {
-    Layout.fillWidth: true
-    Layout.preferredWidth: parent.width
-
-    RowLayout {
-      id: unifiedWheelLayout
-      visible: !separateWheelToggle.checked
       spacing: Style.marginM
 
-      NTextInput {
+      RowLayout {
-        id: wheelExecInput
+        spacing: Style.marginM
+
+        NLabel {
+          label: I18n.tr("bar.widget-settings.custom-button.icon.label")
+          description: I18n.tr("bar.widget-settings.custom-button.icon.description")
+        }
+
+        NIcon {
+          Layout.alignment: Qt.AlignVCenter
+          icon: valueIcon
+          pointSize: Style.fontSizeXL
+          visible: valueIcon !== ""
+        }
+
+        NButton {
+          text: I18n.tr("bar.widget-settings.custom-button.browse")
+          onClicked: iconPicker.open()
+        }
+      }
+
+      NIconPicker {
+        id: iconPicker
+        initialIcon: valueIcon
+        onIconSelected: function (iconName) {
+          valueIcon = iconName;
+        }
+      }
+
+      RowLayout {
+        spacing: Style.marginM
+
+        NTextInput {
+          id: leftClickExecInput
+          Layout.fillWidth: true
+          label: I18n.tr("bar.widget-settings.custom-button.left-click.label")
+          description: I18n.tr("bar.widget-settings.custom-button.left-click.description")
+          placeholderText: I18n.tr("placeholders.enter-command")
+          text: widgetData?.leftClickExec || widgetMetadata.leftClickExec
+        }
+
+        NToggle {
+          id: leftClickUpdateText
+          enabled: !valueTextStream
+          Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+          Layout.bottomMargin: Style.marginS
+          onEntered: TooltipService.show(leftClickUpdateText, I18n.tr("bar.widget-settings.custom-button.left-click.update-text"), "auto")
+          onExited: TooltipService.hide()
+          checked: widgetData?.leftClickUpdateText ?? widgetMetadata.leftClickUpdateText
+          onToggled: isChecked => checked = isChecked
+        }
+      }
+
+      RowLayout {
+        spacing: Style.marginM
+
+        NTextInput {
+          id: rightClickExecInput
+          Layout.fillWidth: true
+          label: I18n.tr("bar.widget-settings.custom-button.right-click.label")
+          description: I18n.tr("bar.widget-settings.custom-button.right-click.description")
+          placeholderText: I18n.tr("placeholders.enter-command")
+          text: widgetData?.rightClickExec || widgetMetadata.rightClickExec
+        }
+
+        NToggle {
+          id: rightClickUpdateText
+          enabled: !valueTextStream
+          Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+          Layout.bottomMargin: Style.marginS
+          onEntered: TooltipService.show(rightClickUpdateText, I18n.tr("bar.widget-settings.custom-button.right-click.update-text"), "auto")
+          onExited: TooltipService.hide()
+          checked: widgetData?.rightClickUpdateText ?? widgetMetadata.rightClickUpdateText
+          onToggled: isChecked => checked = isChecked
+        }
+      }
+
+      RowLayout {
+        spacing: Style.marginM
+
+        NTextInput {
+          id: middleClickExecInput
+          Layout.fillWidth: true
+          label: I18n.tr("bar.widget-settings.custom-button.middle-click.label")
+          description: I18n.tr("bar.widget-settings.custom-button.middle-click.description")
+          placeholderText: I18n.tr("placeholders.enter-command")
+          text: widgetData.middleClickExec || widgetMetadata.middleClickExec
+        }
+
+        NToggle {
+          id: middleClickUpdateText
+          enabled: !valueTextStream
+          Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+          Layout.bottomMargin: Style.marginS
+          onEntered: TooltipService.show(middleClickUpdateText, I18n.tr("bar.widget-settings.custom-button.middle-click.update-text"), "auto")
+          onExited: TooltipService.hide()
+          checked: widgetData?.middleClickUpdateText ?? widgetMetadata.middleClickUpdateText
+          onToggled: isChecked => checked = isChecked
+        }
+      }
+
+      // Wheel command settings
+      NToggle {
+        id: separateWheelToggle
         Layout.fillWidth: true
-        label: I18n.tr("bar.widget-settings.custom-button.wheel.label")
+        label: I18n.tr("bar.widget-settings.custom-button.wheel-mode-separate.label", "Separate wheel commands")
-        description: I18n.tr("bar.widget-settings.custom-button.wheel.description")
+        description: I18n.tr("bar.widget-settings.custom-button.wheel-mode-separate.description", "Enable separate commands for wheel up and down")
-        placeholderText: I18n.tr("placeholders.enter-command")
+        property bool internalChecked: (widgetData?.wheelMode || widgetMetadata?.wheelMode || "unified") === "separate"
-        text: widgetData?.wheelExec || widgetMetadata?.wheelExec || ""
+        checked: internalChecked
+        onToggled: checked => {
+                     internalChecked = checked;
+                   }
+      }
+
+      ColumnLayout {
+        Layout.fillWidth: true
+        Layout.preferredWidth: parent.width
+
+        RowLayout {
+          id: unifiedWheelLayout
+          visible: !separateWheelToggle.checked
+          spacing: Style.marginM
+
+          NTextInput {
+            id: wheelExecInput
+            Layout.fillWidth: true
+            label: I18n.tr("bar.widget-settings.custom-button.wheel.label")
+            description: I18n.tr("bar.widget-settings.custom-button.wheel.description")
+            placeholderText: I18n.tr("placeholders.enter-command")
+            text: widgetData?.wheelExec || widgetMetadata?.wheelExec || ""
+          }
+
+          NToggle {
+            id: wheelUpdateText
+            enabled: !valueTextStream
+            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+            Layout.bottomMargin: Style.marginS
+            onEntered: TooltipService.show(wheelUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
+            onExited: TooltipService.hide()
+            checked: widgetData?.wheelUpdateText ?? widgetMetadata?.wheelUpdateText
+            onToggled: isChecked => checked = isChecked
+          }
+        }
+
+        ColumnLayout {
+          id: separatedWheelLayout
+          Layout.fillWidth: true
+          visible: separateWheelToggle.checked
+
+          RowLayout {
+            spacing: Style.marginM
+
+            NTextInput {
+              id: wheelUpExecInput
+              Layout.fillWidth: true
+              label: I18n.tr("bar.widget-settings.custom-button.wheel-up.label")
+              description: I18n.tr("bar.widget-settings.custom-button.wheel-up.description")
+              placeholderText: I18n.tr("placeholders.enter-command")
+              text: widgetData?.wheelUpExec || widgetMetadata?.wheelUpExec || ""
+            }
+
+            NToggle {
+              id: wheelUpUpdateText
+              enabled: !valueTextStream
+              Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+              Layout.bottomMargin: Style.marginS
+              onEntered: TooltipService.show(wheelUpUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
+              onExited: TooltipService.hide()
+              checked: (widgetData?.wheelUpUpdateText !== undefined) ? widgetData.wheelUpUpdateText : (widgetMetadata?.wheelUpUpdateText ?? false)
+              onToggled: isChecked => checked = isChecked
+            }
+          }
+
+          RowLayout {
+            spacing: Style.marginM
+
+            NTextInput {
+              id: wheelDownExecInput
+              Layout.fillWidth: true
+              label: I18n.tr("bar.widget-settings.custom-button.wheel-down.label")
+              description: I18n.tr("bar.widget-settings.custom-button.wheel-down.description")
+              placeholderText: I18n.tr("placeholders.enter-command")
+              text: widgetData?.wheelDownExec || widgetMetadata?.wheelDownExec || ""
+            }
+
+            NToggle {
+              id: wheelDownUpdateText
+              enabled: !valueTextStream
+              Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+              Layout.bottomMargin: Style.marginS
+              onEntered: TooltipService.show(wheelDownUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
+              onExited: TooltipService.hide()
+              checked: (widgetData?.wheelDownUpdateText !== undefined) ? widgetData.wheelDownUpdateText : (widgetMetadata?.wheelDownUpdateText ?? false)
+              onToggled: isChecked => checked = isChecked
+            }
+          }
+        }
+      }
+
+      NDivider {
+        Layout.fillWidth: true
+      }
+
+      NHeader {
+        label: I18n.tr("bar.widget-settings.custom-button.dynamic-text")
+      }
+
+      NSpinBox {
+        label: I18n.tr("bar.widget-settings.custom-button.max-text-length-horizontal.label", "Max text length (horizontal)")
+        description: I18n.tr("bar.widget-settings.custom-button.max-text-length-horizontal.description", "Maximum number of characters to show in horizontal bar (0 to hide text)")
+        from: 0
+        to: 100
+        value: valueMaxTextLengthHorizontal
+        onValueChanged: valueMaxTextLengthHorizontal = value
+      }
+
+      NSpinBox {
+        label: I18n.tr("bar.widget-settings.custom-button.max-text-length-vertical.label", "Max text length (vertical)")
+        description: I18n.tr("bar.widget-settings.custom-button.max-text-length-vertical.description", "Maximum number of characters to show in vertical bar (0 to hide text)")
+        from: 0
+        to: 100
+        value: valueMaxTextLengthVertical
+        onValueChanged: valueMaxTextLengthVertical = value
       }
 
       NToggle {
-        id: wheelUpdateText
+        id: textStreamInput
-        enabled: !valueTextStream
+        label: I18n.tr("bar.widget-settings.custom-button.text-stream.label")
-        Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+        description: I18n.tr("bar.widget-settings.custom-button.text-stream.description")
-        Layout.bottomMargin: Style.marginS
+        checked: valueTextStream
-        onEntered: TooltipService.show(wheelUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
+        onToggled: checked => valueTextStream = checked
-        onExited: TooltipService.hide()
+      }
-        checked: widgetData?.wheelUpdateText ?? widgetMetadata?.wheelUpdateText
+
-        onToggled: isChecked => checked = isChecked
+      NToggle {
+        id: parseJsonInput
+        label: I18n.tr("bar.widget-settings.custom-button.parse-json.label", "Parse output as JSON")
+        description: I18n.tr("bar.widget-settings.custom-button.parse-json.description", "Parse the command output as a JSON object to dynamically set text and icon.")
+        checked: valueParseJson
+        onToggled: checked => valueParseJson = checked
+      }
+
+      NTextInput {
+        id: textCommandInput
+        Layout.fillWidth: true
+        label: I18n.tr("bar.widget-settings.custom-button.display-command-output.label")
+        description: valueTextStream ? I18n.tr("bar.widget-settings.custom-button.display-command-output.stream-description") : I18n.tr("bar.widget-settings.custom-button.display-command-output.description")
+        placeholderText: I18n.tr("placeholders.command-example")
+        text: widgetData?.textCommand || widgetMetadata.textCommand
+      }
+
+      NTextInput {
+        id: textCollapseInput
+        Layout.fillWidth: true
+        visible: valueTextStream
+        label: I18n.tr("bar.widget-settings.custom-button.collapse-condition.label")
+        description: I18n.tr("bar.widget-settings.custom-button.collapse-condition.description")
+        placeholderText: I18n.tr("placeholders.enter-text-to-collapse")
+        text: widgetData?.textCollapse || widgetMetadata.textCollapse
+      }
+
+      NTextInput {
+        id: textIntervalInput
+        Layout.fillWidth: true
+        visible: !valueTextStream
+        label: I18n.tr("bar.widget-settings.custom-button.refresh-interval.label")
+        description: I18n.tr("bar.widget-settings.custom-button.refresh-interval.description")
+        placeholderText: String(widgetMetadata.textIntervalMs || 3000)
+        text: widgetData && widgetData.textIntervalMs !== undefined ? String(widgetData.textIntervalMs) : ""
       }
     }
-
-    ColumnLayout {
-      id: separatedWheelLayout
-      Layout.fillWidth: true
-      visible: separateWheelToggle.checked
-
-      RowLayout {
-        spacing: Style.marginM
-
-        NTextInput {
-          id: wheelUpExecInput
-          Layout.fillWidth: true
-          label: I18n.tr("bar.widget-settings.custom-button.wheel-up.label")
-          description: I18n.tr("bar.widget-settings.custom-button.wheel-up.description")
-          placeholderText: I18n.tr("placeholders.enter-command")
-          text: widgetData?.wheelUpExec || widgetMetadata?.wheelUpExec || ""
-        }
-
-        NToggle {
-          id: wheelUpUpdateText
-          enabled: !valueTextStream
-          Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-          Layout.bottomMargin: Style.marginS
-          onEntered: TooltipService.show(wheelUpUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
-          onExited: TooltipService.hide()
-          checked: (widgetData?.wheelUpUpdateText !== undefined) ? widgetData.wheelUpUpdateText : (widgetMetadata?.wheelUpUpdateText ?? false)
-          onToggled: isChecked => checked = isChecked
-        }
-      }
-
-      RowLayout {
-        spacing: Style.marginM
-
-        NTextInput {
-          id: wheelDownExecInput
-          Layout.fillWidth: true
-          label: I18n.tr("bar.widget-settings.custom-button.wheel-down.label")
-          description: I18n.tr("bar.widget-settings.custom-button.wheel-down.description")
-          placeholderText: I18n.tr("placeholders.enter-command")
-          text: widgetData?.wheelDownExec || widgetMetadata?.wheelDownExec || ""
-        }
-
-        NToggle {
-          id: wheelDownUpdateText
-          enabled: !valueTextStream
-          Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-          Layout.bottomMargin: Style.marginS
-          onEntered: TooltipService.show(wheelDownUpdateText, I18n.tr("bar.widget-settings.custom-button.wheel.update-text"), "auto")
-          onExited: TooltipService.hide()
-          checked: (widgetData?.wheelDownUpdateText !== undefined) ? widgetData.wheelDownUpdateText : (widgetMetadata?.wheelDownUpdateText ?? false)
-          onToggled: isChecked => checked = isChecked
-        }
-      }
-    }
-  }
-
-  NDivider {
-    Layout.fillWidth: true
-  }
-
-  NHeader {
-    label: I18n.tr("bar.widget-settings.custom-button.dynamic-text")
-  }
-
-  NSpinBox {
-    label: I18n.tr("bar.widget-settings.custom-button.max-text-length-horizontal.label", "Max text length (horizontal)")
-    description: I18n.tr("bar.widget-settings.custom-button.max-text-length-horizontal.description", "Maximum number of characters to show in horizontal bar (0 to hide text)")
-    from: 0
-    to: 100
-    value: valueMaxTextLengthHorizontal
-    onValueChanged: valueMaxTextLengthHorizontal = value
-  }
-
-  NSpinBox {
-    label: I18n.tr("bar.widget-settings.custom-button.max-text-length-vertical.label", "Max text length (vertical)")
-    description: I18n.tr("bar.widget-settings.custom-button.max-text-length-vertical.description", "Maximum number of characters to show in vertical bar (0 to hide text)")
-    from: 0
-    to: 100
-    value: valueMaxTextLengthVertical
-    onValueChanged: valueMaxTextLengthVertical = value
-  }
-
-  NToggle {
-    id: textStreamInput
-    label: I18n.tr("bar.widget-settings.custom-button.text-stream.label")
-    description: I18n.tr("bar.widget-settings.custom-button.text-stream.description")
-    checked: valueTextStream
-    onToggled: checked => valueTextStream = checked
-  }
-
-  NToggle {
-    id: parseJsonInput
-    label: I18n.tr("bar.widget-settings.custom-button.parse-json.label", "Parse output as JSON")
-    description: I18n.tr("bar.widget-settings.custom-button.parse-json.description", "Parse the command output as a JSON object to dynamically set text and icon.")
-    checked: valueParseJson
-    onToggled: checked => valueParseJson = checked
-  }
-
-  NTextInput {
-    id: textCommandInput
-    Layout.fillWidth: true
-    label: I18n.tr("bar.widget-settings.custom-button.display-command-output.label")
-    description: valueTextStream ? I18n.tr("bar.widget-settings.custom-button.display-command-output.stream-description") : I18n.tr("bar.widget-settings.custom-button.display-command-output.description")
-    placeholderText: I18n.tr("placeholders.command-example")
-    text: widgetData?.textCommand || widgetMetadata.textCommand
-  }
-
-  NTextInput {
-    id: textCollapseInput
-    Layout.fillWidth: true
-    visible: valueTextStream
-    label: I18n.tr("bar.widget-settings.custom-button.collapse-condition.label")
-    description: I18n.tr("bar.widget-settings.custom-button.collapse-condition.description")
-    placeholderText: I18n.tr("placeholders.enter-text-to-collapse")
-    text: widgetData?.textCollapse || widgetMetadata.textCollapse
-  }
-
-  NTextInput {
-    id: textIntervalInput
-    Layout.fillWidth: true
-    visible: !valueTextStream
-    label: I18n.tr("bar.widget-settings.custom-button.refresh-interval.label")
-    description: I18n.tr("bar.widget-settings.custom-button.refresh-interval.description")
-    placeholderText: String(widgetMetadata.textIntervalMs || 3000)
-    text: widgetData && widgetData.textIntervalMs !== undefined ? String(widgetData.textIntervalMs) : ""
   }
 }