WIP: Refactor NumericTextFieldWithUnit

plugins/Toolbox/src/Toolbox.py

@@ -50,7 +50,6 @@ class Toolbox(QObject, Extension):
         self._request_headers = [] # type: List[Tuple[bytes, bytes]]
         self._updateRequestHeader()
 
-
         self._request_urls = {}  # type: Dict[str, QUrl]
         self._to_update = []  # type: List[str] # Package_ids that are waiting to be updated
         self._old_plugin_ids = set()  # type: Set[str]

resources/qml/MachineSettings/NumericTextFieldWithUnit.qml

@@ -21,6 +21,9 @@ UM.TooltipArea
     height: childrenRect.height
     width: childrenRect.width
 
+    property int controlWidth: UM.Theme.getSize("setting_control").width
+    property int controlHeight: UM.Theme.getSize("setting_control").height
+
     text: tooltipText
 
     property alias containerStackId: propertyProvider.containerStackId
@@ -63,62 +66,130 @@ UM.TooltipArea
             visible: text != ""
             elide: Text.ElideRight
             renderType: Text.NativeRendering
-            //width: Math.max(0, settingsTabs.labelColumnWidth)
         }
 
-        Item
+        TextField
         {
             id: textFieldWithUnit
 
-            width: textField.width
-            height: textField.height
+            width: numericTextFieldWithUnit.controlWidth
+            height: numericTextFieldWithUnit.controlHeight
+
+            // Background is a rounded-cornered box with filled color as state indication (normal, warning, error, etc.)
+            background: Rectangle
+            {
+                anchors.fill: parent
+                anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
+                radius: UM.Theme.getSize("setting_control_radius").width
+
+                border.color:
+                {
+                    if (!textFieldWithUnit.enabled)
+                    {
+                        return UM.Theme.getColor("setting_control_disabled_border")
+                    }
+                    switch (propertyProvider.properties.validationState)
+                    {
+                        case "ValidatorState.Exception":
+                        case "ValidatorState.MinimumError":
+                        case "ValidatorState.MaximumError":
+                            return UM.Theme.getColor("setting_validation_error")
+                        case "ValidatorState.MinimumWarning":
+                        case "ValidatorState.MaximumWarning":
+                            return UM.Theme.getColor("setting_validation_warning")
+                    }
+                    // Validation is OK.
+                    if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
+                    {
+                        return UM.Theme.getColor("setting_control_border_highlight")
+                    }
+                    return UM.Theme.getColor("setting_control_border")
+                }
+
+                color:
+                {
+                    if (!textFieldWithUnit.enabled)
+                    {
+                        return UM.Theme.getColor("setting_control_disabled")
+                    }
+                    switch (propertyProvider.properties.validationState)
+                    {
+                        case "ValidatorState.Exception":
+                        case "ValidatorState.MinimumError":
+                        case "ValidatorState.MaximumError":
+                            return UM.Theme.getColor("setting_validation_error_background")
+                        case "ValidatorState.MinimumWarning":
+                        case "ValidatorState.MaximumWarning":
+                            return UM.Theme.getColor("setting_validation_warning_background")
+                        case "ValidatorState.Valid":
+                            return UM.Theme.getColor("setting_validation_ok")
+                        default:
+                            return UM.Theme.getColor("setting_control")
+                    }
+                }
+            }
+
+            hoverEnabled: true
+            selectByMouse: true
+            font: UM.Theme.getFont("default")
+            renderType: Text.NativeRendering
 
-            TextField
+            // When the textbox gets focused by TAB, select all text
+            onActiveFocusChanged:
             {
-                id: textField
-                text:
+                if (activeFocus && (focusReason == Qt.TabFocusReason || focusReason == Qt.BacktabFocusReason))
                 {
-                    const value = propertyProvider.properties.value
-                    return value ? value : ""
+                    selectAll()
                 }
-                validator: RegExpValidator { regExp: allowNegativeValue ? /-?[0-9\.,]{0,6}/ : /[0-9\.,]{0,6}/ }
-                onEditingFinished:
+            }
+
+            text:
+            {
+                const value = propertyProvider.properties.value
+                return value ? value : ""
+            }
+            validator: RegExpValidator { regExp: allowNegativeValue ? /-?[0-9\.,]{0,6}/ : /[0-9\.,]{0,6}/ }
+
+            onEditingFinished:
+            {
+                if (propertyProvider && text != propertyProvider.properties.value)
                 {
-                    if (propertyProvider && text != propertyProvider.properties.value)
+                    // For some properties like the extruder-compatible material diameter, they need to
+                    // trigger many updates, such as the available materials, the current material may
+                    // need to be switched, etc. Although setting the diameter can be done directly via
+                    // the provider, all the updates that need to be triggered then need to depend on
+                    // the metadata update, a signal that can be fired way too often. The update functions
+                    // can have if-checks to filter out the irrelevant updates, but still it incurs unnecessary
+                    // overhead.
+                    // The ExtruderStack class has a dedicated function for this call "setCompatibleMaterialDiameter()",
+                    // and it triggers the diameter update signals only when it is needed. Here it is optionally
+                    // choose to use setCompatibleMaterialDiameter() or other more specific functions that
+                    // are available.
+                    if (setValueFunction !== null)
+                    {
+                        setValueFunction(text)
+                    }
+                    else
                     {
-                        // For some properties like the extruder-compatible material diameter, they need to
-                        // trigger many updates, such as the available materials, the current material may
-                        // need to be switched, etc. Although setting the diameter can be done directly via
-                        // the provider, all the updates that need to be triggered then need to depend on
-                        // the metadata update, a signal that can be fired way too often. The update functions
-                        // can have if-checks to filter out the irrelevant updates, but still it incurs unnecessary
-                        // overhead.
-                        // The ExtruderStack class has a dedicated function for this call "setCompatibleMaterialDiameter()",
-                        // and it triggers the diameter update signals only when it is needed. Here it is optionally
-                        // choose to use setCompatibleMaterialDiameter() or other more specific functions that
-                        // are available.
-                        if (setValueFunction !== null)
-                        {
-                            setValueFunction(text)
-                        }
-                        else
-                        {
-                            propertyProvider.setPropertyValue("value", text)
-                        }
-                        forceUpdateOnChangeFunction()
-                        afterOnEditingFinished()
+                        propertyProvider.setPropertyValue("value", text)
                     }
+                    forceUpdateOnChangeFunction()
+                    afterOnEditingFinished()
                 }
             }
 
             Label
             {
                 id: unitLabel
-                anchors.right: textField.right
-                anchors.rightMargin: y - textField.y
-                anchors.verticalCenter: textField.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: Math.round(UM.Theme.getSize("setting_unit_margin").width)
+                anchors.verticalCenter: parent.verticalCenter
                 text: unitText
+                textFormat: Text.PlainText
+                verticalAlignment: Text.AlignVCenter
                 renderType: Text.NativeRendering
+                color: UM.Theme.getColor("setting_unit")
+                font: UM.Theme.getFont("default")
             }
         }
     }