Add a binding to react when the infill density changes in the custom panel

Also make the icon dinamic, that will change when the infill density changes.

Contributes to CURA-5941.

resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml

@@ -19,6 +19,42 @@ Item
 
     property real labelColumnWidth: Math.round(width / 3)
 
+    // Create a binding to update the icon when the infill density changes
+    Binding
+    {
+        target: infillRowTitle
+        property: "source"
+        value:
+        {
+            var density = parseInt(infillDensity.properties.value)
+            if (parseInt(infillSteps.properties.value) != 0)
+            {
+                return UM.Theme.getIcon("gradual")
+            }
+            if (density <= 0)
+            {
+                return UM.Theme.getIcon("hollow")
+            }
+            if (density < 40)
+            {
+                return UM.Theme.getIcon("sparse")
+            }
+            if (density < 90)
+            {
+                return UM.Theme.getIcon("dense")
+            }
+            return UM.Theme.getIcon("solid")
+        }
+    }
+
+    // We use a binding to make sure that after manually setting infillSlider.value it is still bound to the property provider
+    Binding
+    {
+        target: infillSlider
+        property: "value"
+        value: parseInt(infillDensity.properties.value)
+    }
+
     // Here are the elements that are shown in the left column
     Cura.IconWithText
     {
@@ -30,13 +66,6 @@ Item
         width: labelColumnWidth
     }
 
-    Rectangle
-    {
-        anchors.fill: infillSliderContainer
-        color: "red"
-        opacity: 0.5
-    }
-
     Item
     {
         id: infillSliderContainer
@@ -158,6 +187,7 @@ Item
         anchors.topMargin: UM.Theme.getSize("wide_margin").height
         anchors.left: infillSliderContainer.left
 
+        text: catalog.i18nc("@label", "Gradual infill")
         style: UM.Theme.styles.checkbox
         enabled: base.settingsEnabled
         visible: infillSteps.properties.enabled == "True"
@@ -200,124 +230,8 @@ Item
 
             onExited: base.hideTooltip()
         }
-
-        Label
-        {
-            id: gradualInfillLabel
-            height: parent.height
-            anchors.left: enableGradualInfillCheckBox.right
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-            verticalAlignment: Text.AlignVCenter
-            text: catalog.i18nc("@label", "Enable gradual")
-            font: UM.Theme.getFont("default")
-            color: UM.Theme.getColor("text")
-            renderType: Text.NativeRendering
-        }
     }
 
-//        Rectangle
-//        {
-//            id: infillIcon
-//
-//            width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width))
-//            height: width
-//
-//            anchors.right: parent.right
-//            anchors.top: parent.top
-//            anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2)
-//
-//            // we loop over all density icons and only show the one that has the current density and steps
-//            Repeater
-//            {
-//                id: infillIconList
-//                model: infillModel
-//                anchors.fill: parent
-//
-//                function activeIndex ()
-//                {
-//                    for (var i = 0; i < infillModel.count; i++)
-//                    {
-//                        var density = Math.round(infillDensity.properties.value)
-//                        var steps = Math.round(infillSteps.properties.value)
-//                        var infillModelItem = infillModel.get(i)
-//
-//                        if (infillModelItem != "undefined"
-//                            && density >= infillModelItem.percentageMin
-//                            && density <= infillModelItem.percentageMax
-//                            && steps >= infillModelItem.stepsMin
-//                            && steps <= infillModelItem.stepsMax)
-//                        {
-//                            return i
-//                        }
-//                    }
-//                    return -1
-//                }
-//
-//                Rectangle
-//                {
-//                    anchors.fill: parent
-//                    visible: infillIconList.activeIndex() == index
-//
-//                    border.width: UM.Theme.getSize("default_lining").width
-//                    border.color: UM.Theme.getColor("quality_slider_unavailable")
-//
-//                    UM.RecolorImage
-//                    {
-//                        anchors.fill: parent
-//                        anchors.margins: 2 * screenScaleFactor
-//                        sourceSize.width: width
-//                        sourceSize.height: width
-//                        source: UM.Theme.getIcon(model.icon)
-//                        color: UM.Theme.getColor("quality_slider_unavailable")
-//                    }
-//                }
-//            }
-//        }
-//
-//        //  Infill list model for mapping icon
-//        ListModel
-//        {
-//            id: infillModel
-//            Component.onCompleted:
-//            {
-//                infillModel.append({
-//                    percentageMin: -1,
-//                    percentageMax: 0,
-//                    stepsMin: -1,
-//                    stepsMax: 0,
-//                    icon: "hollow"
-//                })
-//                infillModel.append({
-//                    percentageMin: 0,
-//                    percentageMax: 40,
-//                    stepsMin: -1,
-//                    stepsMax: 0,
-//                    icon: "sparse"
-//                })
-//                infillModel.append({
-//                    percentageMin: 40,
-//                    percentageMax: 89,
-//                    stepsMin: -1,
-//                    stepsMax: 0,
-//                    icon: "dense"
-//                })
-//                infillModel.append({
-//                    percentageMin: 90,
-//                    percentageMax: 9999999999,
-//                    stepsMin: -1,
-//                    stepsMax: 0,
-//                    icon: "solid"
-//                })
-//                infillModel.append({
-//                    percentageMin: 0,
-//                    percentageMax: 9999999999,
-//                    stepsMin: 1,
-//                    stepsMax: 9999999999,
-//                    icon: "gradual"
-//                })
-//            }
-//        }
-
     UM.SettingPropertyProvider
     {
         id: infillDensity

resources/themes/cura-light/styles.qml

@@ -532,7 +532,7 @@ QtObject
                 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : Theme.getColor("checkbox")
                 Behavior on color { ColorAnimation { duration: 50; } }
 
-                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : 0
+                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width
 
                 border.width: Theme.getSize("default_lining").width
                 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border")
@@ -557,6 +557,7 @@ QtObject
                 color: Theme.getColor("checkbox_text")
                 font: Theme.getFont("default")
                 elide: Text.ElideRight
+                renderType: Text.NativeRendering
             }
         }
     }

resources/themes/cura-light/theme.json

@@ -239,10 +239,10 @@
 
         "checkbox": [255, 255, 255, 255],
         "checkbox_hover": [255, 255, 255, 255],
-        "checkbox_border": [64, 69, 72, 255],
+        "checkbox_border": [199, 199, 199, 255],
         "checkbox_border_hover": [50, 130, 255, 255],
-        "checkbox_mark": [119, 122, 124, 255],
-        "checkbox_text": [27, 27, 27, 255],
+        "checkbox_mark": [50, 130, 255, 255],
+        "checkbox_text": [35, 35, 35, 255],
 
         "tooltip": [68, 192, 255, 255],
         "tooltip_text": [255, 255, 255, 255],
@@ -459,7 +459,8 @@
         "layerview_row": [11.0, 1.5],
         "layerview_row_spacing": [0.0, 0.5],
 
-        "checkbox": [2.0, 2.0],
+        "checkbox": [1.5, 1.5],
+        "checkbox_radius": [0.08, 0.08],
 
         "tooltip": [20.0, 10.0],
         "tooltip_margins": [1.0, 1.0],