Set contentType to the different expandable components.

Also add a color for the active state when the contentType is 'Fixed'.

Contributes to CURA-5941.

plugins/SimulationView/SimulationViewMenuComponent.qml

@@ -16,7 +16,7 @@ Cura.ExpandableComponent
     id: base
 
     width: UM.Theme.getSize("layerview_menu_size").width
-    iconSource: UM.Theme.getIcon("pencil")
+    contentType: Cura.ExpandableComponent.ContentType.Fixed
 
     Connections
     {

resources/qml/ExpandableComponent.qml

@@ -30,7 +30,7 @@ Item
     property alias headerItem: headerItemLoader.sourceComponent
 
     // The contentItem holds the QML item that is shown when the "open" button is pressed
-    property alias contentItem: content.contentItem
+    property var contentItem: content.contentItem
 
     // Defines the type of the contents
     property int contentType: ExpandableComponent.ContentType.Floating
@@ -38,6 +38,7 @@ Item
     property color contentBackgroundColor: UM.Theme.getColor("action_button")
 
     property color headerBackgroundColor: UM.Theme.getColor("action_button")
+    property color headerActiveColor: UM.Theme.getColor("secondary")
     property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
 
     // Defines the alignment of the content with respect of the headerItem, by default to the right
@@ -123,7 +124,7 @@ Item
             width: parent.width
             height: UM.Theme.getSize("thick_lining").height
             color: UM.Theme.getColor("primary")
-            visible: expanded
+            visible: contentType == ExpandableComponent.ContentType.Floating && expanded
             anchors.bottom: parent.bottom
         }
 
@@ -138,6 +139,9 @@ 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")
             visible: source != ""
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
@@ -151,7 +155,8 @@ Item
             onClicked: toggleContent()
             hoverEnabled: true
             onEntered: background.color = headerHoverColor
-            onExited: background.color = headerBackgroundColor
+            onExited: background.color = (contentType == ExpandableComponent.ContentType.Fixed && expanded) ?
+                            headerActiveColor : headerBackgroundColor
         }
     }
 
@@ -190,16 +195,15 @@ Item
             border.color: UM.Theme.getColor("lining")
             radius: UM.Theme.getSize("default_radius").width
         }
+    }
 
-        contentItem: Item { }
+    onContentItemChanged:
-
+    {
-        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.
-            // Since we want the size of the content to be set by the size of the content,
+        content.width = contentItem.width + 2 * content.padding
-            // we need to do it like this.
+        content.height = contentItem.height + 2 * content.padding
-            content.width = contentItem.width + 2 * content.padding
+        content.contentItem = contentItem
-            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.

resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml

@@ -27,7 +27,6 @@ Cura.ExpandableComponent
         name: "cura"
     }
 
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
     headerItem: Item
     {
         // Horizontal list that shows the extruders

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -14,7 +14,7 @@ Cura.ExpandableComponent
     property string enabledText: catalog.i18nc("@label:Should be short", "On")
     property string disabledText: catalog.i18nc("@label:Should be short", "Off")
 
-    iconSource: UM.Theme.getIcon("pencil")
+    contentType: Cura.ExpandableComponent.ContentType.Fixed
     contentPadding: UM.Theme.getSize("default_lining").width
     contentSpacingY: UM.Theme.getSize("narrow_margin").width
 

resources/qml/PrinterSelector/MachineSelector.qml

@@ -17,7 +17,6 @@ Cura.ExpandableComponent
 
     contentPadding: UM.Theme.getSize("default_lining").width
     contentAlignment: Cura.ExpandableComponent.ContentAlignment.AlignLeft
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
 
     UM.I18nCatalog
     {

resources/qml/ViewsSelector.qml

@@ -13,7 +13,6 @@ Cura.ExpandableComponent
 
     contentPadding: UM.Theme.getSize("default_lining").width
     contentAlignment: Cura.ExpandableComponent.ContentAlignment.AlignLeft
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
 
     property var viewModel: UM.ViewModel { }