Collapse the setting section when the switch for the section is disabled.

Add collapse animation for setting items and setting section.

Swap out ColumnLayout for Layout. Animating the Layouts does not seem to be possible.

I had to put spacer back into the Column but it is the lesser of two evils.

CURA-9793

resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml

@@ -37,10 +37,14 @@ RecommendedSettingSection
     contents: [
         RecommendedSettingItem
         {
-            Layout.preferredHeight: childrenRect.height
+            isCompressed: enableAdhesionRow.isCompressed
             settingName: catalog.i18nc("@action:label", "Print with")
             tooltipText: catalog.i18nc("adhesion_extruder_nr description", "The extruder train to use for printing the skirt/brim/raft. This is used in multi-extrusion.")
-            settingControl: Cura.SingleSettingExtruderSelectorBar { extruderSettingName: "adhesion_extruder_nr" }
+
+            settingControl: Cura.SingleSettingExtruderSelectorBar
+            {
+                extruderSettingName: "adhesion_extruder_nr"
+            }
         }
     ]
 }

resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml

@@ -1,4 +1,4 @@
-//Copyright (c) 2022 Ultimaker B.V.
+//Copyright (c) 2022 UltiMaker B.V.
 //Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -18,7 +18,7 @@ Item
 
     function onModeChanged() {}
 
-    ColumnLayout
+    Column
     {
         spacing: UM.Theme.getSize("default_margin").height
 
@@ -48,7 +48,6 @@ Item
         RecommendedResolutionSelector
         {
             id: recommendedResolutionSelector
-            Layout.fillWidth: true
             width: parent.width
         }
 
@@ -56,46 +55,49 @@ Item
         {
             width: parent.width
             visible: !recommendedResolutionSelector.visible
-            Layout.fillWidth: true
         }
 
+        Item { height: UM.Theme.getSize("default_margin").height } // Spacer
 
         ProfileWarningReset
         {
             width: parent.width
-            Layout.fillWidth: true
-            Layout.topMargin: UM.Theme.getSize("default_margin").height
-            Layout.bottomMargin: UM.Theme.getSize("thin_margin").height
         }
 
+        Item { height: UM.Theme.getSize("thin_margin").height  + UM.Theme.getSize("narrow_margin").height} // Spacer
+
         //Line between the sections.
         Rectangle
         {
             width: parent.width
             height: UM.Theme.getSize("default_lining").height
-            Layout.topMargin: UM.Theme.getSize("narrow_margin").height
-            Layout.bottomMargin: UM.Theme.getSize("narrow_margin").height
-            Layout.fillWidth: true
             color: UM.Theme.getColor("lining")
         }
-        ColumnLayout
-        {
+
+        Item { height: UM.Theme.getSize("narrow_margin").height } //Spacer
+
+        Column {
+            id: settingColumn
+            width: parent.width
             spacing: UM.Theme.getSize("thin_margin").height
 
-            RowLayout
+            Item
             {
+                id: recommendedPrintSettingsHeader
+                height: childrenRect.height
+                width: parent.width
                 UM.Label
                 {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
                     text: catalog.i18nc("@label", "Recommended print settings")
                     font: UM.Theme.getFont("medium")
                 }
 
-                Item { Layout.fillWidth: true } // Spacer
-
                 Cura.SecondaryButton
                 {
                     id: customSettingsButton
-                    anchors.top: parent.top
+                    anchors.verticalCenter: parent.verticalCenter
                     anchors.right: parent.right
                     text: catalog.i18nc("@button", "Show Custom")
                     textFont: UM.Theme.getFont("medium_bold")
@@ -107,18 +109,15 @@ Item
             RecommendedStrengthSelector
             {
                 width: parent.width
-                Layout.fillWidth: true
             }
 
             RecommendedSupportSelector
             {
                 width: parent.width
-                Layout.fillWidth: true
             }
 
             RecommendedAdhesionSelector {
                 width: parent.width
-                Layout.fillWidth: true
             }
         }
     }

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingItem.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2022 Ultimaker B.V.
+// Copyright (c) 2022 UltiMaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -11,14 +11,15 @@ import Cura 1.7 as Cura
 
 Item
 {
+    id: settingItem
     width: parent.width
-    Layout.preferredHeight: childrenRect.height
     Layout.minimumHeight: UM.Theme.getSize("section_header").height
     Layout.fillWidth: true
 
     property alias settingControl: settingContainer.children
     property alias settingName: settingLabel.text
     property string tooltipText: ""
+    property bool isCompressed: false
 
     UM.Label
     {
@@ -49,4 +50,42 @@ Item
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
     }
+
+    states:
+    [
+        State
+        {
+            name: "sectionClosed" // Section is hidden when the switch in parent is off
+            when: isCompressed
+            PropertyChanges
+            {
+                target: settingItem;
+                opacity: 0
+                height: 0
+                implicitHeight: 0
+                Layout.preferredHeight: 0
+                Layout.minimumHeight: 0
+            }
+        },
+        State
+        {
+            // All values are default. This state is only here for the animation.
+            name: "sectionOpened"
+            when: !isCompressed
+        }
+    ]
+
+    transitions: Transition
+    {
+        from: "sectionOpened"; to: "sectionClosed"
+        reversible: true
+        ParallelAnimation
+        {
+            // Animate section compressing as it closes
+            NumberAnimation { property: "Layout.minimumHeight"; duration: 100; }
+            // Animate section dissapearring as it closes
+            NumberAnimation { property: "opacity"; duration: 100; }
+
+        }
+    }
 }

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingSection.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2022 Ultimaker B.V.
+// Copyright (c) 2022 UltiMaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -10,6 +10,7 @@ import Cura 1.7 as Cura
 
 Item
 {
+    id: settingSection
     property alias title: sectionTitle.text
     property alias icon: sectionTitle.source
 
@@ -19,6 +20,7 @@ Item
     property string tooltipText: "test"
     property var enableSectionClicked: { return }
     property int leftColumnWidth: Math.floor(width * 0.35)
+    property bool isCompressed: false
 
     property alias contents: settingColumn.children
 
@@ -68,7 +70,15 @@ Item
         anchors.verticalCenter: sectionHeader.verticalCenter
         visible: false
 
-        onClicked: onEnableSectionChanged(enableSectionSwitch.checked)
+        // This delay forces the setting change to happen after the setting section open/close animation. This is so the animation is smooth.
+        Timer
+        {
+            id: updateTimer
+            interval: 500 // This interval is set long enough so you can spam click the button on/off without lag.
+            repeat: false
+            onTriggered: onEnableSectionChanged(enableSectionSwitch.checked)
+        }
+        onClicked: updateTimer.restart()
     }
 
     ColumnLayout
@@ -80,8 +90,40 @@ Item
         anchors.right: parent.right
         anchors.top: sectionHeader.bottom
         anchors.topMargin: UM.Theme.getSize("narrow_margin").height
+    }
 
-        Layout.preferredHeight: UM.Theme.getSize("recommended_section_setting_item").height
+    states:
+    [
+        State
+        {
+            name: "settingListClosed"
+            when: !enableSectionSwitchChecked && enableSectionSwitchEnabled
+            PropertyChanges
+            {
+                target: settingSection
+                isCompressed: true
+                implicitHeight: 0
+            }
+            PropertyChanges
+            {
+                target: settingColumn
+                spacing: 0
+            }
+        },
+        State
+        {
+            // Use default properties. This is only here for the animation. 
+            name: "settingListOpened"
+            when: enableSectionSwitchChecked && enableSectionSwitchEnabled
+        }
+    ]
 
+    // Animate section closing
+    transitions: Transition
+    {
+        from: "settingListOpened"; to: "settingListClosed"
+        reversible: true
+        // Animate section compressing as it closes
+        NumberAnimation { property: "implicitHeight"; duration: 100; }
     }
 }

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -54,6 +54,7 @@ RecommendedSettingSection
         {
             settingName: catalog.i18nc("@action:label", "Support Type")
             tooltipText: catalog.i18nc("support_structure description", "Chooses between the techniques available to generate support. \"Normal\" support creates a support structure directly below the overhanging parts and drops those areas straight down. \"Tree\" support creates branches towards the overhanging areas that support the model on the tips of those branches, and allows the branches to crawl around the model to support it from the build plate as much as possible.")
+            isCompressed: enableSupportRow.isCompressed
 
             settingControl: Cura.SingleSettingComboBox
             {
@@ -66,12 +67,18 @@ RecommendedSettingSection
             Layout.preferredHeight: childrenRect.height
             settingName: catalog.i18nc("@action:label", "Print with")
             tooltipText: catalog.i18nc("support_extruder_nr description", "The extruder train to use for printing the support. This is used in multi-extrusion.")
-            settingControl: Cura.SingleSettingExtruderSelectorBar { extruderSettingName: "support_extruder_nr" }
+            isCompressed: enableSupportRow.isCompressed
+
+            settingControl: Cura.SingleSettingExtruderSelectorBar
+            {
+                extruderSettingName: "support_extruder_nr"
+            }
         },
         RecommendedSettingItem
         {
             settingName: catalog.i18nc("@action:label", "Placement")
             tooltipText: catalog.i18nc("support_type description", "Adjusts the placement of the support structures. The placement can be set to touching build plate or everywhere. When set to everywhere the support structures will also be printed on the model.")
+            isCompressed: enableSupportRow.isCompressed
 
             settingControl: Cura.SingleSettingComboBox
             {