Add another expandable component

Use one of them if the drop-panel has to act as a Popup and the other if it has to act as a standard component.

Contributes to CURA-5941.

resources/qml/ExpandableComponent.qml

@@ -20,20 +20,11 @@ Item
         AlignRight
     }
 
-    enum ContentType
-    {
-        Floating,
-        Fixed
-    }
-
     // The headerItem holds the QML item that is always displayed.
     property alias headerItem: headerItemLoader.sourceComponent
 
     // The contentItem holds the QML item that is shown when the "open" button is pressed
-    property var contentItem: content.contentItem
-
-    // Defines the type of the contents
-    property int contentType: ExpandableComponent.ContentType.Floating
+    property alias contentItem: content.contentItem
 
     property color contentBackgroundColor: UM.Theme.getColor("action_button")
 
@@ -48,7 +39,7 @@ Item
     property alias contentPadding: content.padding
 
     // How much spacing is needed for the contentItem by Y coordinate
-    property var contentSpacingY: 0
+    property var contentSpacingY: UM.Theme.getSize("narrow_margin").width
 
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
@@ -64,17 +55,12 @@ Item
     // Is the "drawer" open?
     readonly property alias expanded: content.visible
 
-    property alias expandedHighlightColor: expandedHighlight.color
-
     // What should the radius of the header be. This is also influenced by the headerCornerSide
     property alias headerRadius: background.radius
 
     // On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
     property alias headerCornerSide: background.cornerSide
 
-    // Change the contentItem close behaviour
-    property alias contentClosePolicy : content.closePolicy
-
     property alias headerShadowColor: shadow.color
 
     property alias enableHeaderShadow: shadow.visible
@@ -83,14 +69,7 @@ Item
 
     function toggleContent()
     {
-        if (content.visible)
-        {
-            content.close()
-        }
-        else
-        {
-            content.open()
-        }
+        content.visible = !content.visible
     }
 
     implicitHeight: 100 * screenScaleFactor
@@ -117,17 +96,6 @@ Item
             }
         }
 
-        // A highlight that is shown when the content is expanded
-        Rectangle
-        {
-            id: expandedHighlight
-            width: parent.width
-            height: UM.Theme.getSize("thick_lining").height
-            color: UM.Theme.getColor("primary")
-            visible: contentType == ExpandableComponent.ContentType.Floating && expanded
-            anchors.bottom: parent.bottom
-        }
-
         UM.RecolorImage
         {
             id: collapseButton
@@ -139,9 +107,7 @@ Item
             }
             sourceSize.width: width
             sourceSize.height: height
-            source: contentType == ExpandableComponent.ContentType.Floating ?
-                        (expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")) :
-                        UM.Theme.getIcon("pencil")
+            source: UM.Theme.getIcon("pencil")
             visible: source != ""
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
@@ -155,8 +121,7 @@ Item
             onClicked: toggleContent()
             hoverEnabled: true
             onEntered: background.color = headerHoverColor
-            onExited: background.color = (contentType == ExpandableComponent.ContentType.Fixed && expanded) ?
-                            headerActiveColor : headerBackgroundColor
+            onExited: background.color = expanded ? headerActiveColor : headerBackgroundColor
         }
     }
 
@@ -174,9 +139,10 @@ Item
         z: background.z - 1
     }
 
-    Popup
+    Control
     {
         id: content
+        visible: false
 
         // Ensure that the content is located directly below the headerItem
         y: background.height + base.shadowOffset + base.contentSpacingY
@@ -185,7 +151,6 @@ Item
         // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
         x: contentAlignment == ExpandableComponent.ContentAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
         padding: UM.Theme.getSize("default_margin").width
-        closePolicy: Popup.CloseOnPressOutsideParent
 
         background: Cura.RoundedRectangle
         {
@@ -195,15 +160,16 @@ Item
             border.color: UM.Theme.getColor("lining")
             radius: UM.Theme.getSize("default_radius").width
         }
-    }
 
-    onContentItemChanged:
-    {
-        // Since we want the size of the content to be set by the size of the content,
-        // we need to do it like this.
-        content.width = contentItem.width + 2 * content.padding
-        content.height = contentItem.height + 2 * content.padding
-        content.contentItem = contentItem
+        contentItem: Item {}
+
+        onContentItemChanged:
+        {
+            // Since we want the size of the content to be set by the size of the content,
+            // we need to do it like this.
+            content.width = contentItem.width + 2 * content.padding
+            content.height = contentItem.height + 2 * content.padding
+        }
     }
 
     // DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the content item.