Add SingleSettingTextField.qml

Added a workaround for states of inheriting components. See comments for details.

CURA-9793

resources/qml/PrintSetupSelector/Recommended/RecommendedStrengthSelector.qml

@@ -58,6 +58,18 @@ RecommendedSettingSection
                 width: parent.width
                 settingName: "infill_pattern"
             }
+        },
+        RecommendedSettingItem
+        {
+            settingName: catalog.i18nc("@action:label", "Shell Thickness")
+
+            settingControl: Cura.SingleSettingTextField
+            {
+                width: parent.width
+                settingName: "wall_thickness"
+                validator: Cura.FloatValidator {}
+                unitText: catalog.i18nc("@label", "mm")
+            }
         }
     ]
 }

resources/qml/Widgets/SingleSettingTextField.qml

@@ -0,0 +1,154 @@
+// Copyright (c) 2022 UltiMaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.7 as UM
+import Cura 1.7 as Cura
+
+// This text field allows you to edit a single setting. The setting can be passed by "settingName".
+// You must specify a validator with Validator. We store our default setting validators in qml/Validators
+UM.TextField
+{
+    id: control
+    property alias settingName: propertyProvider.key
+
+    // Resolving the value in the textField.
+    Binding
+    {
+        target: control
+        property: "text"
+
+        value:
+        {
+            if (control.activeFocus)
+            {
+                // This stops the text being reformatted as you edit. For example "10.1" -Edit-> "10." -Auto Format-> "10.0".
+                return control.text
+            }
+            return propertyProvider.properties.value
+        }
+
+    }
+
+    property UM.SettingPropertyProvider propertyProvider: UM.SettingPropertyProvider
+    {
+        id: propertyProvider
+        containerStack: Cura.MachineManager.activeMachine
+        watchedProperties: [ "value", "validationState" ]
+    }
+
+    Connections
+    {
+        target: propertyProvider
+        function onContainerStackChanged() { updateTimer.restart() }
+        function onIsValueUsedChanged() { updateTimer.restart() }
+    }
+
+    // Restart update timer right after releasing a key. This stops lag while typing, but you still get warning and error
+    // textfield styling while typing.
+    Keys.onReleased: updateTimer.restart()
+    // Forces formatting when you finish editing "10.1" -Edit-> "10." -Focus Change-> "10"
+    onActiveFocusChanged: updateTime.restart()
+
+    // Updates to the setting are delayed by interval. This stops lag caused by calling the
+    // parseValueUpdateSetting() function being called repeatedly while changing the text value.
+    Timer
+    {
+        id: updateTimer
+        interval: 50
+        repeat: false
+        onTriggered: parseValueUpdateSetting()
+    }
+
+    function parseValueUpdateSetting()
+    {
+        // Do some parsing of text here
+        updateSetting(text);
+    }
+
+    function updateSetting(value)
+    {
+        if (propertyProvider && text != propertyProvider.properties.value)
+        {
+            propertyProvider.setPropertyValue("value", text)
+        }
+    }
+
+    // Forced to override parent states using overrideState. Otherwise hover in TextField.qml would override the validation states.
+    // The first state to evaluate true applies styling. States in inheriting components get appended to the state list of their parent.
+    overrideState: true
+    states:
+    [
+        State
+        {
+            name: "validationError"
+            when: propertyProvider.properties.validationState == "ValidatorState.Exception" || propertyProvider.properties.validationState == "ValidatorState.MinimumError" || propertyProvider.properties.validationState == "ValidatorState.MaximumError"
+             PropertyChanges
+             {
+                target: background
+                liningColor: UM.Theme.getColor("setting_validation_error")
+                color: UM.Theme.getColor("setting_validation_error_background")
+             }
+        },
+        State
+        {
+            name: "validationWarning"
+            when: propertyProvider.properties.validationState == "ValidatorState.MinimumWarning" || propertyProvider.properties.validationState == "ValidatorState.MaximumWarning"
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("setting_validation_warning")
+                color: UM.Theme.getColor("setting_validation_warning_background")
+            }
+        },
+         State
+        {
+            name: "disabled"
+            when: !control.enabled
+            PropertyChanges
+            {
+                target: control
+                color: UM.Theme.getColor("text_field_text_disabled")
+            }
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_disabled")
+            }
+        },
+        State
+        {
+            name: "invalid"
+            when: !control.acceptableInput
+            PropertyChanges
+            {
+                target: background
+                color: UM.Theme.getColor("setting_validation_error_background")
+            }
+        },
+        State
+        {
+            name: "active"
+            when: control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_active")
+                borderColor: UM.Theme.getColor("text_field_border_active")
+            }
+        },
+        State
+        {
+            name: "hovered"
+            when: control.hovered && !control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+            }
+        }
+    ]
+}