Instead of having a seperate tooltip for the checkbox and the text area, the two have been combined into one tooltip.

The reason for this is that hovering the mouse between the checkbox and text was causing some strange behaviour where sometimes the tooltip would not appear.

The effect of the changes in RecommendedSupportSelector.qml are the same as RecommendedAdhesionSelector.qml. It just required a bit of refactoring to have the checkbox and the textlabel in the same component.

CURA-8849

2 files changed, 208 insertions, 200 deletions

diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml
index 4333288e5a..b69587102e 100644
--- a/resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml
+++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml
@@ -28,7 +28,6 @@ Item
         font: UM.Theme.getFont("medium")
         width: labelColumnWidth
         iconSize: UM.Theme.getSize("medium_button_icon").width
-        tooltipText: catalog.i18nc("@label", "Enable printing a brim or raft. This will add a flat area around or under your object which is easy to cut off afterwards.")
     }
 
     Item
@@ -48,8 +47,6 @@ Item
             id: enableAdhesionCheckBox
             anchors.verticalCenter: parent.verticalCenter
 
-            property alias _hovered: adhesionMouseArea.containsMouse
-
             //: Setting enable printing build-plate adhesion helper checkbox
             enabled: recommendedPrintSetup.settingsEnabled
 
@@ -61,22 +58,25 @@ Item
                 id: adhesionMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
-
-                onClicked:
-                {
-                    curaRecommendedMode.setAdhesion(!parent.checked)
-                }
-
-                onEntered:
-                {
-                    base.showTooltip(enableAdhesionCheckBox, Qt.point(-enableAdhesionContainer.x - UM.Theme.getSize("thick_margin").width, 0),
-                        catalog.i18nc("@label", "Enable printing a brim or raft. This will add a flat area around or under your object which is easy to cut off afterwards."));
-                }
-                onExited: base.hideTooltip()
+                // propagateComposedEvents used on adhesionTooltipMouseArea does not work with Controls Components.
+                // It only works with other MouseAreas, so this is required
+                onClicked: curaRecommendedMode.setAdhesion(!parent.checked)
             }
         }
     }
 
+    MouseArea
+    {
+        id: adhesionTooltipMouseArea
+        anchors.fill: parent
+        propagateComposedEvents: true
+        hoverEnabled: true
+
+        onEntered:base.showTooltip(enableAdhesionCheckBox, Qt.point(-enableAdhesionContainer.x - UM.Theme.getSize("thick_margin").width, 0),
+                catalog.i18nc("@label", "Enable printing a brim or raft. This will add a flat area around or under your object which is easy to cut off afterwards."));
+        onExited: base.hideTooltip()
+    }
+
     UM.SettingPropertyProvider
     {
         id: platformAdhesionType
diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml
index fe0caa5050..fc56c7cfd7 100644
--- a/resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml
+++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml
@@ -18,36 +18,39 @@ Item
 
     property real labelColumnWidth: Math.round(width / 3)
 
-    Cura.IconWithText
-    {
-        id: enableSupportRowTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        visible: enableSupportCheckBox.visible
-        source: UM.Theme.getIcon("Support")
-        text: catalog.i18nc("@label", "Support")
-        font: UM.Theme.getFont("medium")
-        width: labelColumnWidth
-        iconSize: UM.Theme.getSize("medium_button_icon").width
-        tooltipText: catalog.i18nc("@label", "Generate structures to support parts of the model which have overhangs. Without these structures, such parts would collapse during printing.")
-    }
-
     Item
     {
         id: enableSupportContainer
-        height: enableSupportCheckBox.height
+        height: enableSupportCheckBox
+        width: childrenRect.width
 
         anchors
         {
-            left: enableSupportRowTitle.right
-            right: parent.right
-            verticalCenter: enableSupportRowTitle.verticalCenter
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+            rightMargin: UM.Theme.getSize("thick_margin").width
+            verticalCenter: parent.verticalCenter
+        }
+
+        Cura.IconWithText
+        {
+            id: enableSupportRowTitle
+            anchors.left: parent.left
+            visible: enableSupportCheckBox.visible
+            source: UM.Theme.getIcon("Support")
+            text: catalog.i18nc("@label", "Support")
+            font: UM.Theme.getFont("medium")
+            width: labelColumnWidth
+            iconSize: UM.Theme.getSize("medium_button_icon").width
+            tooltipText: catalog.i18nc("@label", "Generate structures to support parts of the model which have overhangs. Without these structures, such parts would collapse during printing.")
         }
 
         UM.CheckBox
         {
             id: enableSupportCheckBox
             anchors.verticalCenter: parent.verticalCenter
+            anchors.left: enableSupportRowTitle.right
 
             property alias _hovered: enableSupportMouseArea.containsMouse
 
@@ -61,157 +64,219 @@ Item
                 id: enableSupportMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
-
+                // propagateComposedEvents used on supportToolTipMouseArea does not work with Controls Components.
+                // It only works with other MouseAreas, so this is required
                 onClicked: supportEnabled.setPropertyValue("value", supportEnabled.properties.value != "True")
-
-                onEntered:
-                {
-                    base.showTooltip(enableSupportCheckBox, Qt.point(-enableSupportContainer.x - UM.Theme.getSize("thick_margin").width, 0),
-                        catalog.i18nc("@label", "Generate structures to support parts of the model which have overhangs. Without these structures, such parts would collapse during printing."))
-                }
-                onExited: base.hideTooltip()
             }
         }
 
-        ComboBox
+        MouseArea
         {
-            id: supportExtruderCombobox
+            id: supportToolTipMouseArea
+            anchors.fill: parent
+            propagateComposedEvents: true
+            hoverEnabled: true
+            onEntered: base.showTooltip(enableSupportContainer, Qt.point(-enableSupportContainer.x - UM.Theme.getSize("thick_margin").width, 0),
+                    catalog.i18nc("@label", "Generate structures to support parts of the model which have overhangs. Without these structures, such parts would collapse during printing."))
+            onExited: base.hideTooltip()
+        }
+    }
 
-            height: UM.Theme.getSize("print_setup_big_item").height
-            anchors
-            {
-                left: enableSupportCheckBox.right
-                right: parent.right
-                leftMargin: UM.Theme.getSize("thick_margin").width
-                rightMargin: UM.Theme.getSize("thick_margin").width
-                verticalCenter: parent.verticalCenter
-            }
+    ComboBox
+    {
+        id: supportExtruderCombobox
 
-            enabled: recommendedPrintSetup.settingsEnabled
-            visible: enableSupportCheckBox.visible && (supportEnabled.properties.value == "True") && (extrudersEnabledCount.properties.value > 1)
-            textRole: "name"  // this solves that the combobox isn't populated in the first time Cura is started
+        height: UM.Theme.getSize("print_setup_big_item").height
+        anchors
+        {
+            left: enableSupportContainer.right
+            right: parent.right
+            leftMargin: UM.Theme.getSize("default_margin").width
+            rightMargin: UM.Theme.getSize("thick_margin").width
+            verticalCenter: parent.verticalCenter
+        }
+
+        enabled: recommendedPrintSetup.settingsEnabled
+        visible: enableSupportCheckBox.visible && (supportEnabled.properties.value == "True") && (extrudersEnabledCount.properties.value > 1)
+        textRole: "name"  // this solves that the combobox isn't populated in the first time Cura is started
 
-            model: extruderModel
+        model: extruderModel
 
-            // knowing the extruder position, try to find the item index in the model
-            function getIndexByPosition(position)
+        // knowing the extruder position, try to find the item index in the model
+        function getIndexByPosition(position)
+        {
+            var itemIndex = -1  // if position is not found, return -1
+            for (var item_index in model.items)
             {
-                var itemIndex = -1  // if position is not found, return -1
-                for (var item_index in model.items)
+                var item = model.getItem(item_index)
+                if (item.index == position)
                 {
-                    var item = model.getItem(item_index)
-                    if (item.index == position)
-                    {
-                        itemIndex = item_index
-                        break
-                    }
+                    itemIndex = item_index
+                    break
                 }
-                return itemIndex
             }
+            return itemIndex
+        }
+
+        onActivated:
+        {
+            if (model.getItem(index).enabled)
+            {
+                forceActiveFocus();
+                supportExtruderNr.setPropertyValue("value", model.getItem(index).index);
+            } else
+            {
+                currentIndex = supportExtruderNr.properties.value;  // keep the old value
+            }
+        }
+
+        currentIndex: (supportExtruderNr.properties.value !== undefined) ? supportExtruderNr.properties.value : 0
 
-            onActivated:
+        property string color: "#fff"
+        Connections
+        {
+            target: extruderModel
+            function onModelChanged()
             {
-                if (model.getItem(index).enabled)
-                {
-                    forceActiveFocus();
-                    supportExtruderNr.setPropertyValue("value", model.getItem(index).index);
-                } else
+                var maybeColor = supportExtruderCombobox.model.getItem(supportExtruderCombobox.currentIndex).color
+                if (maybeColor)
                 {
-                    currentIndex = supportExtruderNr.properties.value;  // keep the old value
+                    supportExtruderCombobox.color = maybeColor
                 }
             }
+        }
+        onCurrentIndexChanged:
+        {
+            var maybeColor = supportExtruderCombobox.model.getItem(supportExtruderCombobox.currentIndex).color
+            if(maybeColor)
+            {
+                supportExtruderCombobox.color = maybeColor
+            }
+        }
+
+        Binding
+        {
+            target: supportExtruderCombobox
+            property: "currentIndex"
+            value: supportExtruderCombobox.getIndexByPosition(supportExtruderNr.properties.value)
+            // Sometimes when the value is already changed, the model is still being built.
+            // The when clause ensures that the current index is not updated when this happens.
+            when: supportExtruderCombobox.model.count > 0
+        }
+
+        indicator: UM.ColorImage
+        {
+            id: downArrow
+            x: supportExtruderCombobox.width - width - supportExtruderCombobox.rightPadding
+            y: supportExtruderCombobox.topPadding + Math.round((supportExtruderCombobox.availableHeight - height) / 2)
+
+            source: UM.Theme.getIcon("ChevronSingleDown")
+            width: UM.Theme.getSize("standard_arrow").width
+            height: UM.Theme.getSize("standard_arrow").height
 
-            currentIndex: (supportExtruderNr.properties.value !== undefined) ? supportExtruderNr.properties.value : 0
+            color: UM.Theme.getColor("setting_control_button")
+        }
 
-            property string color: "#fff"
-            Connections
+        background: Rectangle
+        {
+            color:
             {
-                target: extruderModel
-                function onModelChanged()
+                if (!enabled)
+                {
+                    return UM.Theme.getColor("setting_control_disabled")
+                }
+                if (supportExtruderCombobox.hovered || base.activeFocus)
                 {
-                    var maybeColor = supportExtruderCombobox.model.getItem(supportExtruderCombobox.currentIndex).color
-                    if (maybeColor)
-                    {
-                        supportExtruderCombobox.color = maybeColor
-                    }
+                    return UM.Theme.getColor("setting_control_highlight")
                 }
+                return UM.Theme.getColor("setting_control")
             }
-            onCurrentIndexChanged:
+            radius: UM.Theme.getSize("setting_control_radius").width
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color:
             {
-                var maybeColor = supportExtruderCombobox.model.getItem(supportExtruderCombobox.currentIndex).color
-                if(maybeColor)
+                if (!enabled)
                 {
-                    supportExtruderCombobox.color = maybeColor
+                    return UM.Theme.getColor("setting_control_disabled_border")
+                }
+                if (supportExtruderCombobox.hovered || supportExtruderCombobox.activeFocus)
+                {
+                    return UM.Theme.getColor("setting_control_border_highlight")
                 }
+                return UM.Theme.getColor("setting_control_border")
             }
+        }
 
-            Binding
+        contentItem: UM.Label
+        {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+            anchors.right: downArrow.left
+            rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
+
+            text: supportExtruderCombobox.currentText
+            textFormat: Text.PlainText
+            color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+
+            elide: Text.ElideLeft
+
+
+            background: Rectangle
             {
-                target: supportExtruderCombobox
-                property: "currentIndex"
-                value: supportExtruderCombobox.getIndexByPosition(supportExtruderNr.properties.value)
-                // Sometimes when the value is already changed, the model is still being built.
-                // The when clause ensures that the current index is not updated when this happens.
-                when: supportExtruderCombobox.model.count > 0
+                id: swatch
+                height: Math.round(parent.height / 2)
+                width: height
+                radius: Math.round(width / 2)
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.rightMargin: UM.Theme.getSize("thin_margin").width
+
+                color: supportExtruderCombobox.color
             }
+        }
 
-            indicator: UM.ColorImage
-            {
-                id: downArrow
-                x: supportExtruderCombobox.width - width - supportExtruderCombobox.rightPadding
-                y: supportExtruderCombobox.topPadding + Math.round((supportExtruderCombobox.availableHeight - height) / 2)
+        popup: Popup
+        {
+            y: supportExtruderCombobox.height - UM.Theme.getSize("default_lining").height
+            width: supportExtruderCombobox.width
+            implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width
+            padding: UM.Theme.getSize("default_lining").width
 
-                source: UM.Theme.getIcon("ChevronSingleDown")
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
+            contentItem: ListView
+            {
+                implicitHeight: contentHeight
 
-                color: UM.Theme.getColor("setting_control_button")
+                ScrollBar.vertical: UM.ScrollBar {}
+                clip: true
+                model: supportExtruderCombobox.popup.visible ? supportExtruderCombobox.delegateModel : null
+                currentIndex: supportExtruderCombobox.highlightedIndex
             }
 
             background: Rectangle
             {
-                color:
-                {
-                    if (!enabled)
-                    {
-                        return UM.Theme.getColor("setting_control_disabled")
-                    }
-                    if (supportExtruderCombobox.hovered || base.activeFocus)
-                    {
-                        return UM.Theme.getColor("setting_control_highlight")
-                    }
-                    return UM.Theme.getColor("setting_control")
-                }
-                radius: UM.Theme.getSize("setting_control_radius").width
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color:
-                {
-                    if (!enabled)
-                    {
-                        return UM.Theme.getColor("setting_control_disabled_border")
-                    }
-                    if (supportExtruderCombobox.hovered || supportExtruderCombobox.activeFocus)
-                    {
-                        return UM.Theme.getColor("setting_control_border_highlight")
-                    }
-                    return UM.Theme.getColor("setting_control_border")
-                }
+                color: UM.Theme.getColor("setting_control")
+                border.color: UM.Theme.getColor("setting_control_border")
             }
+        }
+
+        delegate: ItemDelegate
+        {
+            width: supportExtruderCombobox.width - 2 * UM.Theme.getSize("default_lining").width
+            height: supportExtruderCombobox.height
+            highlighted: supportExtruderCombobox.highlightedIndex == index
 
             contentItem: UM.Label
             {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
+                anchors.fill: parent
                 anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
-                anchors.right: downArrow.left
-                rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
+                anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width
 
-                text: supportExtruderCombobox.currentText
-                textFormat: Text.PlainText
-                color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-
-                elide: Text.ElideLeft
+                text: model.name
+                color: model.enabled ? UM.Theme.getColor("setting_control_text"): UM.Theme.getColor("action_button_disabled_text")
 
+                elide: Text.ElideRight
+                rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
                 background: Rectangle
                 {
@@ -223,71 +288,14 @@ Item
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                    color: supportExtruderCombobox.color
-                }
-            }
-
-            popup: Popup
-            {
-                y: supportExtruderCombobox.height - UM.Theme.getSize("default_lining").height
-                width: supportExtruderCombobox.width
-                implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width
-                padding: UM.Theme.getSize("default_lining").width
-
-                contentItem: ListView
-                {
-                    implicitHeight: contentHeight
-
-                    ScrollBar.vertical: UM.ScrollBar {}
-                    clip: true
-                    model: supportExtruderCombobox.popup.visible ? supportExtruderCombobox.delegateModel : null
-                    currentIndex: supportExtruderCombobox.highlightedIndex
-                }
-
-                background: Rectangle
-                {
-                    color: UM.Theme.getColor("setting_control")
-                    border.color: UM.Theme.getColor("setting_control_border")
+                    color: supportExtruderCombobox.model.getItem(index).color
                 }
             }
 
-            delegate: ItemDelegate
+            background: Rectangle
             {
-                width: supportExtruderCombobox.width - 2 * UM.Theme.getSize("default_lining").width
-                height: supportExtruderCombobox.height
-                highlighted: supportExtruderCombobox.highlightedIndex == index
-
-                contentItem: UM.Label
-                {
-                    anchors.fill: parent
-                    anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
-                    anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width
-
-                    text: model.name
-                    color: model.enabled ? UM.Theme.getColor("setting_control_text"): UM.Theme.getColor("action_button_disabled_text")
-
-                    elide: Text.ElideRight
-                    rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
-
-                    background: Rectangle
-                    {
-                        id: swatch
-                        height: Math.round(parent.height / 2)
-                        width: height
-                        radius: Math.round(width / 2)
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.rightMargin: UM.Theme.getSize("thin_margin").width
-
-                        color: supportExtruderCombobox.model.getItem(index).color
-                    }
-                }
-
-                background: Rectangle
-                {
-                    color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
-                    border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
-                }
+                color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
             }
         }
     }