controlcenter: appearance pane corrections to fp/int values such as scales and border

components/controls/CustomSpinBox.qml

@@ -9,19 +9,69 @@ import QtQuick.Layouts
 RowLayout {
     id: root
 
-    property int value
+    property real value
     property real max: Infinity
     property real min: -Infinity
+    property real step: 1
     property alias repeatRate: timer.interval
 
-    signal valueModified(value: int)
+    signal valueModified(value: real)
 
     spacing: Appearance.spacing.small
 
+    property bool isEditing: false
+    property string displayText: root.value.toString()
+
+    onValueChanged: {
+        if (!root.isEditing) {
+            root.displayText = root.value.toString();
+        }
+    }
+
     StyledTextField {
+        id: textField
+
         inputMethodHints: Qt.ImhFormattedNumbersOnly
-        text: root.value
+        text: root.isEditing ? text : root.displayText
-        onAccepted: root.valueModified(text)
+        validator: DoubleValidator {
+            bottom: root.min
+            top: root.max
+            decimals: root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0
+        }
+        onActiveFocusChanged: {
+            if (activeFocus) {
+                root.isEditing = true;
+            } else {
+                root.isEditing = false;
+                root.displayText = root.value.toString();
+            }
+        }
+        onAccepted: {
+            const numValue = parseFloat(text);
+            if (!isNaN(numValue)) {
+                const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+                root.value = clampedValue;
+                root.displayText = clampedValue.toString();
+                root.valueModified(clampedValue);
+            } else {
+                text = root.displayText;
+            }
+            root.isEditing = false;
+        }
+        onEditingFinished: {
+            if (text !== root.displayText) {
+                const numValue = parseFloat(text);
+                if (!isNaN(numValue)) {
+                    const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+                    root.value = clampedValue;
+                    root.displayText = clampedValue.toString();
+                    root.valueModified(clampedValue);
+                } else {
+                    text = root.displayText;
+                }
+            }
+            root.isEditing = false;
+        }
 
         padding: Appearance.padding.small
         leftPadding: Appearance.padding.normal
@@ -50,7 +100,13 @@ RowLayout {
             onReleased: timer.stop()
 
             function onClicked(): void {
-                root.valueModified(Math.min(root.max, root.value + 1));
+                let newValue = Math.min(root.max, root.value + root.step);
+                // Round to avoid floating point precision errors
+                const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+                newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+                root.value = newValue;
+                root.displayText = newValue.toString();
+                root.valueModified(newValue);
             }
         }
 
@@ -79,7 +135,13 @@ RowLayout {
             onReleased: timer.stop()
 
             function onClicked(): void {
-                root.valueModified(Math.max(root.min, root.value - 1));
+                let newValue = Math.max(root.min, root.value - root.step);
+                // Round to avoid floating point precision errors
+                const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+                newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+                root.value = newValue;
+                root.displayText = newValue.toString();
+                root.valueModified(newValue);
             }
         }
 

components/controls/SpinBoxRow.qml

@@ -13,6 +13,7 @@ StyledRect {
     required property real value
     required property real min
     required property real max
+    property real step: 1
     property var onValueModified: function(value) {}
 
     Layout.fillWidth: true
@@ -41,6 +42,7 @@ StyledRect {
         CustomSpinBox {
             min: root.min
             max: root.max
+            step: root.step
             value: root.value
             onValueModified: value => {
                 root.onValueModified(value);

modules/controlcenter/appearance/AppearancePane.qml

@@ -408,6 +408,7 @@ RowLayout {
                         label: qsTr("Animation duration scale")
                         min: 0.1
                         max: 5
+                        step: 0.1
                         value: root.animDurationsScale
                         onValueModified: value => {
                             root.animDurationsScale = value;
@@ -646,6 +647,7 @@ RowLayout {
                         label: qsTr("Font size scale")
                         min: 0.1
                         max: 5
+                        step: 0.1
                         value: root.fontSizeScale
                         onValueModified: value => {
                             root.fontSizeScale = value;
@@ -665,6 +667,7 @@ RowLayout {
                         label: qsTr("Padding scale")
                         min: 0.1
                         max: 5
+                        step: 0.1
                         value: root.paddingScale
                         onValueModified: value => {
                             root.paddingScale = value;
@@ -676,6 +679,7 @@ RowLayout {
                         label: qsTr("Rounding scale")
                         min: 0.1
                         max: 5
+                        step: 0.1
                         value: root.roundingScale
                         onValueModified: value => {
                             root.roundingScale = value;
@@ -687,6 +691,7 @@ RowLayout {
                         label: qsTr("Spacing scale")
                         min: 0.1
                         max: 5
+                        step: 0.1
                         value: root.spacingScale
                         onValueModified: value => {
                             root.spacingScale = value;
@@ -810,7 +815,8 @@ RowLayout {
                     SpinBoxRow {
                         label: qsTr("Border rounding")
                         min: 0.1
-                        max: 5
+                        max: 100
+                        step: 0.1
                         value: root.borderRounding
                         onValueModified: value => {
                             root.borderRounding = value;
@@ -821,7 +827,8 @@ RowLayout {
                     SpinBoxRow {
                         label: qsTr("Border thickness")
                         min: 0.1
-                        max: 5
+                        max: 100
+                        step: 0.1
                         value: root.borderThickness
                         onValueModified: value => {
                             root.borderThickness = value;