Replace the old settingSlider with the RadioButtonbar

CURA-6598

resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml

@@ -3,6 +3,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 1.4
+import QtQuick.Controls 2.3 as Controls2
 import QtQuick.Controls.Styles 1.4
 
 import UM 1.2 as UM
@@ -33,133 +34,6 @@ Item
         }
     }
 
-    Component.onCompleted: qualityModel.update()
-
-    Connections
-    {
-        target: Cura.QualityProfilesDropDownMenuModel
-        onItemsChanged: qualityModel.update()
-    }
-
-    Connections {
-        target: base
-        onVisibleChanged:
-        {
-            // update needs to be called when the widgets are visible, otherwise the step width calculation
-            // will fail because the width of an invisible item is 0.
-            if (visible)
-            {
-                qualityModel.update();
-            }
-        }
-    }
-
-    ListModel
-    {
-        id: qualityModel
-
-        property var totalTicks: 0
-        property var availableTotalTicks: 0
-        property var existingQualityProfile: 0
-
-        property var qualitySliderActiveIndex: 0
-        property var qualitySliderStepWidth: 0
-        property var qualitySliderAvailableMin: 0
-        property var qualitySliderAvailableMax: 0
-        property var qualitySliderMarginRight: 0
-
-        function update ()
-        {
-            reset()
-
-            var availableMin = -1
-            var availableMax = -1
-
-            for (var i = 0; i < Cura.QualityProfilesDropDownMenuModel.rowCount(); i++)
-            {
-                var qualityItem = Cura.QualityProfilesDropDownMenuModel.getItem(i)
-
-                // Add each quality item to the UI quality model
-                qualityModel.append(qualityItem)
-
-                // Set selected value
-                if (Cura.MachineManager.activeQualityType == qualityItem.quality_type)
-                {
-                    // set to -1 when switching to user created profile so all ticks are clickable
-                    if (Cura.MachineManager.hasCustomQuality)
-                    {
-                        qualityModel.qualitySliderActiveIndex = -1
-                    }
-                    else
-                    {
-                        qualityModel.qualitySliderActiveIndex = i
-                    }
-
-                     qualityModel.existingQualityProfile = 1
-                }
-
-                // Set min available
-                if (qualityItem.available && availableMin == -1)
-                {
-                    availableMin = i
-                }
-
-                // Set max available
-                if (qualityItem.available)
-                {
-                    availableMax = i
-                }
-            }
-
-            // Set total available ticks for active slider part
-            if (availableMin != -1)
-            {
-                qualityModel.availableTotalTicks = availableMax - availableMin + 1
-            }
-
-            // Calculate slider values
-            calculateSliderStepWidth(qualityModel.totalTicks)
-            calculateSliderMargins(availableMin, availableMax, qualityModel.totalTicks)
-
-            qualityModel.qualitySliderAvailableMin = availableMin
-            qualityModel.qualitySliderAvailableMax = availableMax
-        }
-
-        function calculateSliderStepWidth (totalTicks)
-        {
-            // Do not use Math.round otherwise the tickmarks won't be aligned
-            qualityModel.qualitySliderStepWidth = totalTicks != 0 ?
-                    ((settingsColumnWidth - UM.Theme.getSize("print_setup_slider_handle").width) / (totalTicks)) : 0
-        }
-
-        function calculateSliderMargins (availableMin, availableMax, totalTicks)
-        {
-            if (availableMin == -1 || (availableMin == 0 && availableMax == 0))
-            {
-                // Do not use Math.round otherwise the tickmarks won't be aligned
-                qualityModel.qualitySliderMarginRight = settingsColumnWidth / 2
-            }
-            else if (availableMin == availableMax)
-            {
-                // Do not use Math.round otherwise the tickmarks won't be aligned
-                qualityModel.qualitySliderMarginRight = (totalTicks - availableMin) * qualitySliderStepWidth
-            }
-            else
-            {
-                // Do not use Math.round otherwise the tickmarks won't be aligned
-                qualityModel.qualitySliderMarginRight = (totalTicks - availableMax) * qualitySliderStepWidth
-            }
-        }
-
-        function reset () {
-            qualityModel.clear()
-            qualityModel.availableTotalTicks = 0
-            qualityModel.existingQualityProfile = 0
-
-            // check, the ticks count cannot be less than zero
-            qualityModel.totalTicks = Math.max(0, Cura.QualityProfilesDropDownMenuModel.rowCount() - 1)
-        }
-    }
 
     // Here are the elements that are shown in the left column
     Item
@@ -210,246 +84,39 @@ Item
         }
     }
 
-    // Show titles for the each quality slider ticks
-    Item
-    {
-        anchors.left: speedSlider.left
-        anchors.top: speedSlider.bottom
-        height: childrenRect.height
-
-        Repeater
-        {
-            model: qualityModel
-
-            Label
-            {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.top: parent.top
-                // The height has to be set manually, otherwise it's not automatically calculated in the repeater
-                height: UM.Theme.getSize("default_margin").height
-                color: (Cura.MachineManager.activeMachine != null && Cura.QualityProfilesDropDownMenuModel.getItem(index).available) ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
-                text:
-                {
-                    var result = ""
-                    if(Cura.MachineManager.activeMachine != null)
-                    {
-                        result = Cura.QualityProfilesDropDownMenuModel.getItem(index).layer_height
-
-                        if(result == undefined)
-                        {
-                            result = "";
-                        }
-                        else
-                        {
-                            result = Number(Math.round(result + "e+2") + "e-2"); //Round to 2 decimals. Javascript makes this difficult...
-                            if (result == undefined || result != result) //Parse failure.
-                            {
-                                result = "";
-                            }
-                        }
-                    }
-                    return result
-                }
-
-                x:
-                {
-                    // Make sure the text aligns correctly with each tick
-                    if (qualityModel.totalTicks == 0)
-                    {
-                        // If there is only one tick, align it centrally
-                        return Math.round(((settingsColumnWidth) - width) / 2)
-                    }
-                    else if (index == 0)
-                    {
-                        return Math.round(settingsColumnWidth / qualityModel.totalTicks) * index
-                    }
-                    else if (index == qualityModel.totalTicks)
-                    {
-                        return Math.round(settingsColumnWidth / qualityModel.totalTicks) * index - width
-                    }
-                    else
-                    {
-                        return Math.round((settingsColumnWidth / qualityModel.totalTicks) * index - (width / 2))
-                    }
-                }
-                font: UM.Theme.getFont("default")
-            }
-        }
-    }
-
-    // Print speed slider
-    // Two sliders are created, one at the bottom with the unavailable qualities
-    // and the other at the top with the available quality profiles and so the handle to select them.
     Item
     {
-        id: speedSlider
-        height: childrenRect.height
-
-        anchors
+        anchors.left: titleRow.right
+        anchors.right: parent.right
+        Controls2.ButtonGroup
         {
-            left: titleRow.right
-            right: parent.right
-            verticalCenter: titleRow.verticalCenter
+            id: activeProfileButtonGroup
+            exclusive: true
+            onClicked: Cura.MachineManager.activeQualityGroup = button.identifier
         }
-
-        // Draw unavailable slider
-        Slider
+        Cura.LabelBar
         {
-            id: unavailableSlider
-
-            width: parent.width
-            height: qualitySlider.height // Same height as the slider that is on top
-            updateValueWhileDragging : false
-            tickmarksEnabled: true
-
-            minimumValue: 0
-            // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
-            // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
-            maximumValue: qualityModel.totalTicks
-            stepSize: 1
-
-            style: SliderStyle
-            {
-                //Draw Unvailable line
-                groove: Item
-                {
-                    Rectangle
-                    {
-                        height: UM.Theme.getSize("print_setup_slider_groove").height
-                        width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: UM.Theme.getColor("quality_slider_unavailable")
-                    }
-                }
-
-                handle: Item {}
-
-                tickmarks: Repeater
-                {
-                    id: qualityRepeater
-                    model: qualityModel.totalTicks > 0 ? qualityModel : 0
-
-                    Rectangle
-                    {
-                        color: Cura.QualityProfilesDropDownMenuModel.getItem(index).available ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
-                        implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
-                        implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        // Do not use Math.round otherwise the tickmarks won't be aligned
-                        x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (implicitWidth / 2) + (qualityModel.qualitySliderStepWidth * index))
-                        radius: Math.round(implicitWidth / 2)
-                    }
-                }
-            }
-
-            // Create a mouse area on top of the unavailable profiles to show a specific tooltip
-            MouseArea
-            {
-                anchors.fill: parent
-                hoverEnabled: true
-                enabled: !Cura.MachineManager.hasCustomQuality
-                onEntered:
-                {
-                    var tooltipContent = catalog.i18nc("@tooltip", "This quality profile is not available for your current material and nozzle configuration. Please change these to enable this quality profile.")
-                    base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height), tooltipContent)
-                }
-                onExited: base.hideTooltip()
-            }
+            id: labelbar
+            anchors.left: parent.left
+            anchors.right: parent.right
+            model: Cura.QualityProfilesDropDownMenuModel
+            modelKey: "layer_height"
         }
-
-        // Draw available slider
-        Slider
+        Cura.RadioCheckbar
         {
-            id: qualitySlider
-
-            width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
-            height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
-            enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized
-            visible: qualityModel.availableTotalTicks > 0
-            updateValueWhileDragging : false
-
-            anchors
-            {
-                right: parent.right
-                rightMargin: qualityModel.qualitySliderMarginRight
-            }
-
-            minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0
-            // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
-            // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
-            maximumValue: qualityModel.qualitySliderAvailableMax >= 1 ? qualityModel.qualitySliderAvailableMax : 1
-            stepSize: 1
-
-            value: qualityModel.qualitySliderActiveIndex
-
-            style: SliderStyle
-            {
-                // Draw Available line
-                groove: Item
-                {
-                    Rectangle
-                    {
-                        height: UM.Theme.getSize("print_setup_slider_groove").height
-                        width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        // Do not use Math.round otherwise the tickmarks won't be aligned
-                        x: UM.Theme.getSize("print_setup_slider_handle").width / 2
-                        color: UM.Theme.getColor("quality_slider_available")
-                    }
-                }
-
-                handle: Rectangle
-                {
-                    id: qualityhandleButton
-                    color: UM.Theme.getColor("primary")
-                    implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
-                    implicitHeight: implicitWidth
-                    radius: Math.round(implicitWidth / 2)
-                    visible: !Cura.SimpleModeSettingsManager.isProfileCustomized && !Cura.MachineManager.hasCustomQuality && qualityModel.existingQualityProfile
-                }
-            }
-
-            onValueChanged:
-            {
-                // only change if an active machine is set and the slider is visible at all.
-                if (Cura.MachineManager.activeMachine != null && visible)
-                {
-                    // prevent updating during view initializing. Trigger only if the value changed by user
-                    if (qualitySlider.value != qualityModel.qualitySliderActiveIndex && qualityModel.qualitySliderActiveIndex != -1)
-                    {
-                        // start updating with short delay
-                        qualitySliderChangeTimer.start()
-                    }
-                }
-            }
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: labelbar.bottom
+            model: Cura.QualityProfilesDropDownMenuModel
+            buttonGroup: activeProfileButtonGroup
+            modelKey: "quality_group"
 
-            // This mouse area is only used to capture the onHover state and don't propagate it to the unavailable mouse area
-            MouseArea
+            function checkedFunction(modelItem)
             {
-                anchors.fill: parent
-                hoverEnabled: true
-                acceptedButtons: Qt.NoButton
-                enabled: !Cura.MachineManager.hasCustomQuality
+                return Cura.MachineManager.activeQualityType == modelItem.quality_type
             }
-        }
 
-        // This mouse area will only take the mouse events and show a tooltip when the profile in use is
-        // a user created profile
-        MouseArea
-        {
-            anchors.fill: parent
-            hoverEnabled: true
-            visible: Cura.MachineManager.hasCustomQuality
-
-            onEntered:
-            {
-                var tooltipContent = catalog.i18nc("@tooltip", "A custom profile is currently active. To enable the quality slider, choose a default quality profile in Custom tab")
-                base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height),  tooltipContent)
-            }
-            onExited: base.hideTooltip()
+            isCheckedFunction: checkedFunction
         }
     }
 }

resources/qml/RadioCheckbar.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
+
 Item
 {
     id: base
@@ -12,12 +13,18 @@ Item
     property int checkboxSize: 14
     property int inactiveMarkerSize: 4
     property int barSize: 2
+    property var isCheckedFunction // Function that accepts the modelItem and returns if the item should be active.
 
     implicitWidth: 200
     implicitHeight: checkboxSize
 
     property var model: null
 
+    // What key of the model should be used to set the identifier of the checkbox.
+    // This is used to figure out what checkbox just got toggled. Set a buttonGroup and listen to it's clicked signal.
+    // You can use button.identifier to figure out which button was clicked.
+    property string modelKey: "name"
+
     // The horizontal inactive bar that sits behind the buttons
     Rectangle
     {
@@ -83,6 +90,7 @@ Item
                     // This can (and should) be done wiht a verticalCenter. For some reason it does work in QtCreator
                     // but not when using the exact same QML in Cura.
                     y: -0.5 * checkboxSize
+                    property var modelItem: model
                 }
             }
         }
@@ -119,6 +127,8 @@ Item
             ButtonGroup.group: buttonGroup
             width: checkboxSize
             height: checkboxSize
+            property var identifier: modelItem[base.modelKey]
+            checked: isCheckedFunction(modelItem)
             indicator: Rectangle
             {
                 height: checkboxSize