Add Section Header and Section Setting item components.

Upgrade Adhesion to use new components

CURA-9793

resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -7,74 +7,21 @@ import UM 1.5 as UM
 import Cura 1.0 as Cura
 
 
-//
+RecommendedSettingSection
-//  Adhesion
-//
-Item
 {
     id: enableAdhesionRow
     height: enableAdhesionContainer.height
 
-    property real labelColumnWidth: Math.round(width / 3)
+    title: catalog.i18nc("@label", "Adhesion")
+    icon: UM.Theme.getIcon("Adhesion")
+    enableSectionVisible: platformAdhesionType.properties.enabled == "True"
+    enableSectionChecked: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none"
+    enableSectionEnabled: recommendedPrintSetup.settingsEnabled
+
     property var curaRecommendedMode: Cura.RecommendedMode {}
 
-    Cura.IconWithText
+    function onEnableSectionChanged(state) {
-    {
+        curaRecommendedMode.setAdhesion(state)
-        id: enableAdhesionRowTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        source: UM.Theme.getIcon("Adhesion")
-        text: catalog.i18nc("@label", "Adhesion")
-        font: UM.Theme.getFont("medium")
-        width: labelColumnWidth
-        iconSize: UM.Theme.getSize("medium_button_icon").width
-    }
-
-    Item
-    {
-        id: enableAdhesionContainer
-        height: enableAdhesionCheckBox.height
-
-        anchors
-        {
-            left: enableAdhesionRowTitle.right
-            right: parent.right
-            verticalCenter: enableAdhesionRowTitle.verticalCenter
-        }
-
-        UM.CheckBox
-        {
-            id: enableAdhesionCheckBox
-            anchors.verticalCenter: parent.verticalCenter
-
-            //: Setting enable printing build-plate adhesion helper checkbox
-            enabled: recommendedPrintSetup.settingsEnabled
-
-            visible: platformAdhesionType.properties.enabled == "True"
-            checked: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none"
-
-            MouseArea
-            {
-                id: adhesionMouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                // 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

resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml

@@ -98,12 +98,7 @@ Item
             Layout.fillWidth: true
         }
 
-        RecommendedAdhesionSelector
+        RecommendedAdhesionSelector {}
-        {
-            width: parent.width
-            labelColumnWidth: parent.firstColumnWidth
-            Layout.fillWidth: true
-        }
     }
 
     UM.SettingPropertyProvider

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingItem.qml

@@ -0,0 +1,36 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 2.10
+
+import UM 1.5 as UM
+import Cura 1.7 as Cura
+
+
+Item
+{
+    property Component content: Item { visible: false  }
+    property alias settingName: settingLabel.text
+
+    UM.Label
+    {
+        id: settingLabel
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        text: "TEST"
+    }
+
+
+    Loader
+    {
+        id: settingLoader
+        width: parent.width
+        height: content.height
+        anchors.left: settingLabel.right
+        anchors.right: parent.right
+        anchers.verticalCenter: parent.verticalCenter
+        sourceComponent: content
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingSection.qml

@@ -0,0 +1,80 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 2.10
+
+import UM 1.6 as UM
+import Cura 1.7 as Cura
+
+Item
+{
+    property alias title: sectionTitle.text
+    property alias icon: sectionTitle.source
+    property Component content: Item { visible: false  }
+
+    property alias enableSectionVisible: enableSectionSwitch.visible
+    property alias enableSectionChecked: enableSectionSwitch.checked
+    property alias enableSectionEnabled: enableSectionSwitch.enabled
+    property var enableSectionClicked: { return }
+    property int leftColumnWidth: width / 2
+
+    function onEnableSectionChanged(state) {}
+
+    height: childrenRect.height
+    width: parent.width
+
+
+    Item
+    {
+        id: sectionHeader
+
+        Cura.IconWithText
+        {
+            id: sectionTitle
+            width: leftColumnWidth
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: - UM.Theme.getSize("thick_lining").width
+            source: UM.Theme.getIcon("PrintQuality")
+            spacing: UM.Theme.getSize("thick_margin").width
+            iconSize: UM.Theme.getSize("medium_button_icon").width
+            iconColor: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("medium_bold")
+        }
+
+        UM.Switch
+        {
+            id: enableSectionSwitch
+            anchors.left: sectionTitle.right
+            anchors.verticalCenter: parent.verticalCenter
+            visible: false
+
+            onClicked: onEnableSectionChanged(enableSectionSwitch.checked)
+        }
+
+        MouseArea
+        {
+            id: tooltipMouseArea
+            anchors.fill: parent
+            propagateComposedEvents: true
+            hoverEnabled: true
+
+            onEntered: { print("showTooltip") }
+            onExited: { print("hideTooltip" ) }
+        }
+
+    }
+
+    Loader
+    {
+        id: contentLoader
+        width: parent.width
+        height: content.height
+        anchors.left: settingLabel.right
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        sourceComponent: content
+    }
+}