Swap materials page SpinBox for NumericTextFieldWithUnit

This fixes,
filament cost iterating backwards with spinbox ( who knows why it did this )
text not updating when different material selected
value with decimals not saving

Remove margin from NumericTextFieldWithUnit.qml. Not sure why this was present, it made the TextField slightly smaller than the rest.

Remove some parsing str to float/int. Not needed since settings are stored as str

CURA-8979

2 files changed, 73 insertions, 47 deletions

diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
index 67840d4f26..51c9730052 100644
--- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
+++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
@@ -22,6 +22,7 @@ UM.TooltipArea
 
     property int controlWidth: UM.Theme.getSize("setting_control").width
     property int controlHeight: UM.Theme.getSize("setting_control").height
+    property real spacing: UM.Theme.getSize("default_margin").width
 
     text: tooltipText
 
@@ -75,7 +76,7 @@ UM.TooltipArea
     {
         id: textFieldWithUnit
         anchors.left: fieldLabel.right
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: spacing
         verticalAlignment: Text.AlignVCenter
         selectionColor: UM.Theme.getColor("text_selection")
         selectedTextColor: UM.Theme.getColor("setting_control_text")
@@ -88,7 +89,6 @@ UM.TooltipArea
         background: UM.UnderlineBackground
         {
             anchors.fill: parent
-            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
 
             liningColor:
             {
diff --git a/resources/qml/Preferences/Materials/MaterialsView.qml b/resources/qml/Preferences/Materials/MaterialsView.qml
index c1f8e93bc1..29fd82eac7 100644
--- a/resources/qml/Preferences/Materials/MaterialsView.qml
+++ b/resources/qml/Preferences/Materials/MaterialsView.qml
@@ -140,7 +140,7 @@ Item
                     onRejected:
                     {
                         base.properties.diameter = old_diameter_value;
-                        diameterSpinBox.value = Qt.binding(function() { return base.properties.diameter })
+                        diameterTextField.valueText = Qt.binding(function() { return base.properties.diameter })
                     }
                 }
 
@@ -286,18 +286,26 @@ Item
                         width: informationPage.columnWidth
                         text: catalog.i18nc("@label", "Density")
                     }
-                    Cura.SpinBox
+
+                    Cura.NumericTextFieldWithUnit
                     {
+                        id: densityTextField
                         enabled: base.editingEnabled
-                        id: densitySpinBox
-                        width: informationPage.columnWidth
-                        value: properties.density
+                        valueText: properties.density
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "g/cm³"
                         decimals: 2
-                        suffix: " g/cm³"
-                        stepSize: 0.01
+                        maximum: 1000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".");
+                            base.setMetaDataEntry("properties/density", properties.density, modified_text)
+                        }
 
-                        onEditingFinished: base.setMetaDataEntry("properties/density", properties.density, value)
-                        onValueChanged: updateCostPerMeter()
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
@@ -311,37 +319,43 @@ Item
                         width: informationPage.columnWidth
                         text: catalog.i18nc("@label", "Diameter")
                     }
-                    Cura.SpinBox
+
+                    Cura.NumericTextFieldWithUnit
                     {
+                        id: diameterTextField
                         enabled: base.editingEnabled
-                        id: diameterSpinBox
-                        width: informationPage.columnWidth
-                        value: properties.diameter
+                        valueText: properties.diameter
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "mm"
                         decimals: 2
-                        suffix: " mm"
-                        stepSize: 0.01
+                        maximum: 1000
 
-                        onEditingFinished:
+                        editingFinishedFunction: function()
                         {
                             // This does not use a SettingPropertyProvider, because we need to make the change to all containers
                             // which derive from the same base_file
                             var old_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "properties/diameter");
                             var old_approximate_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "approximate_diameter");
-                            var new_approximate_diameter = getApproximateDiameter(value);
+                            var modified_value = valueText.replace(",", ".");
+                            var new_approximate_diameter = getApproximateDiameter(modified_value);
+
                             if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
                             {
                                 confirmDiameterChangeDialog.old_diameter_value = old_diameter;
-                                confirmDiameterChangeDialog.new_diameter_value = value;
+                                confirmDiameterChangeDialog.new_diameter_value = modified_value;
                                 confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
 
                                 confirmDiameterChangeDialog.open()
                             }
                             else {
-                                base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, getApproximateDiameter(value).toString());
-                                base.setMetaDataEntry("properties/diameter", properties.diameter, value);
+                                base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, new_approximate_diameter);
+                                base.setMetaDataEntry("properties/diameter", properties.diameter, modified_value);
                             }
                         }
-                        onValueChanged: updateCostPerMeter()
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
@@ -355,21 +369,25 @@ Item
                         width: informationPage.columnWidth
                         text: catalog.i18nc("@label", "Filament Cost")
                     }
-                    Cura.SpinBox
+
+                    Cura.NumericTextFieldWithUnit
                     {
-                        id: spoolCostSpinBox
-                        width: informationPage.columnWidth
-                        value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
-                        to: 100000000
-                        editable: true
-                        prefix: base.currency + " "
+                        id: spoolCostTextField
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: base.currency
                         decimals: 2
+                        maximum: 100000000
 
-                        onValueChanged:
+                        editingFinishedFunction: function()
                         {
-                            base.setMaterialPreferenceValue(properties.guid, "spool_cost", parseFloat(value))
-                            updateCostPerMeter()
+                            var modified_text = valueText.replace(",", ".");
+                            base.setMaterialPreferenceValue(properties.guid, "spool_cost", modified_text);
                         }
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
@@ -383,21 +401,25 @@ Item
                         width: informationPage.columnWidth
                         text: catalog.i18nc("@label", "Filament weight")
                     }
-                    Cura.SpinBox
-                    {
-                        id: spoolWeightSpinBox
-                        width: informationPage.columnWidth
-                        value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
-                        stepSize: 100
-                        to: 10000
-                        editable: true
-                        suffix: " g"
 
-                        onValueChanged:
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: spoolWeightTextField
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: " g"
+                        decimals: 0
+                        maximum: 10000
+
+                        editingFinishedFunction: function()
                         {
-                            base.setMaterialPreferenceValue(properties.guid, "spool_weight", parseFloat(value))
-                            updateCostPerMeter()
+                            var modified_text = valueText.replace(",", ".")
+                            base.setMaterialPreferenceValue(properties.guid, "spool_weight", modified_text)
                         }
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
@@ -609,8 +631,12 @@ Item
 
     function updateCostPerMeter()
     {
-        base.spoolLength = calculateSpoolLength(diameterSpinBox.value, densitySpinBox.value, spoolWeightSpinBox.value);
-        base.costPerMeter = calculateCostPerMeter(spoolCostSpinBox.value);
+        var modified_weight = spoolWeightTextField.valueText.replace(",", ".")
+        var modified_cost = spoolCostTextField.valueText.replace(",", ".")
+        var modified_diameter = diameterTextField.valueText.replace(",", ".")
+        var modified_density = densityTextField.valueText.replace(",", ".")
+        base.spoolLength = calculateSpoolLength(modified_diameter, modified_density, parseInt(modified_weight));
+        base.costPerMeter = calculateCostPerMeter(parseFloat(modified_cost));
     }
 
     function calculateSpoolLength(diameter, density, spoolWeight)