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,25 +66,90 @@ UM.TooltipArea
             visible: text != ""
             elide: Text.ElideRight
             renderType: Text.NativeRendering
-            //width: Math.max(0, settingsTabs.labelColumnWidth)
         }
 
-        Item
-        {
-            id: textFieldWithUnit
-
-            width: textField.width
-            height: textField.height
-
         TextField
         {
-                id: textField
+            id: textFieldWithUnit
+
+            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
+
+            // When the textbox gets focused by TAB, select all text
+            onActiveFocusChanged:
+            {
+                if (activeFocus && (focusReason == Qt.TabFocusReason || focusReason == Qt.BacktabFocusReason))
+                {
+                    selectAll()
+                }
+            }
+
             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)
@@ -109,16 +177,19 @@ UM.TooltipArea
                     afterOnEditingFinished()
                 }
             }
-            }
 
             Label
             {
                 id: unitLabel
-                anchors.right: textField.right
+                anchors.right: parent.right
-                anchors.rightMargin: y - textField.y
+                anchors.rightMargin: Math.round(UM.Theme.getSize("setting_unit_margin").width)
-                anchors.verticalCenter: textField.verticalCenter
+                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")
             }
         }
     }