From d03100d60a64a72f4770fa331b60efe098fa829d Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Mon, 23 Jun 2025 01:33:31 +0200
Subject: [PATCH] add spinbox

---
 .../modules/common/widgets/ConfigSpinBox.qml  | 31 +++++++
 .../modules/common/widgets/StyledSpinBox.qml  | 92 +++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 .config/quickshell/modules/common/widgets/ConfigSpinBox.qml
 create mode 100644 .config/quickshell/modules/common/widgets/StyledSpinBox.qml

diff --git a/.config/quickshell/modules/common/widgets/ConfigSpinBox.qml b/.config/quickshell/modules/common/widgets/ConfigSpinBox.qml
new file mode 100644
index 00000000..972c221d
--- /dev/null
+++ b/.config/quickshell/modules/common/widgets/ConfigSpinBox.qml
@@ -0,0 +1,31 @@
+import "root:/modules/common/widgets/"
+import "root:/modules/common/"
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+RowLayout {
+    id: root
+    property string text: ""
+    property alias value: spinBoxWidget.value
+    property alias stepSize: spinBoxWidget.stepSize
+    property alias from: spinBoxWidget.from
+    property alias to: spinBoxWidget.to
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    StyledText {
+        id: labelWidget
+        Layout.fillWidth: true
+        text: root.text
+        font.pixelSize: Appearance.font.pixelSize.small
+        color: Appearance.colors.colOnSecondaryContainer
+    }
+
+    StyledSpinBox {
+        id: spinBoxWidget
+        Layout.fillWidth: false
+        value: root.value
+    }
+}
diff --git a/.config/quickshell/modules/common/widgets/StyledSpinBox.qml b/.config/quickshell/modules/common/widgets/StyledSpinBox.qml
new file mode 100644
index 00000000..2f5b4467
--- /dev/null
+++ b/.config/quickshell/modules/common/widgets/StyledSpinBox.qml
@@ -0,0 +1,92 @@
+import "root:/modules/common"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls
+
+/**
+ * Material 3 styled SpinBox component.
+ */
+SpinBox {
+    id: root
+
+    property real baseHeight: 35
+    property real radius: Appearance.rounding.small
+    property real innerButtonRadius: Appearance.rounding.unsharpen
+    editable: true
+
+    background: Rectangle {
+        color: Appearance.colors.colLayer2
+        radius: root.radius
+    }
+
+    contentItem: Item {
+        implicitHeight: root.baseHeight
+        implicitWidth: Math.max(labelText.implicitWidth, 40)
+
+        StyledTextInput {
+            id: labelText
+            anchors.centerIn: parent
+            text: root.displayText
+            color: Appearance.colors.colOnLayer2
+            font.pixelSize: Appearance.font.pixelSize.small
+            validator: root.validator
+            onTextChanged: {
+                root.value = parseFloat(text);
+            }
+        }
+    }
+
+    down.indicator: Rectangle {
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+        }
+        implicitHeight: root.baseHeight
+        implicitWidth: root.baseHeight
+        topLeftRadius: root.radius
+        bottomLeftRadius: root.radius
+        topRightRadius: root.innerButtonRadius
+        bottomRightRadius: root.innerButtonRadius
+
+        color: root.down.pressed ? Appearance.colors.colLayer2Active : 
+            root.down.hovered ? Appearance.colors.colLayer2Hover : 
+            ColorUtils.transparentize(Appearance.colors.colLayer2)
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: "remove"
+            iconSize: 20
+            color: Appearance.colors.colOnLayer2
+        }
+    }
+
+    up.indicator: Rectangle {
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+        }
+        implicitHeight: root.baseHeight
+        implicitWidth: root.baseHeight
+        topRightRadius: root.radius
+        bottomRightRadius: root.radius
+        topLeftRadius: root.innerButtonRadius
+        bottomLeftRadius: root.innerButtonRadius
+
+        color: root.up.pressed ? Appearance.colors.colLayer2Active : 
+            root.up.hovered ? Appearance.colors.colLayer2Hover : 
+            ColorUtils.transparentize(Appearance.colors.colLayer2)
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: "add"
+            iconSize: 20
+            color: Appearance.colors.colOnLayer2
+        }
+    }
+}