Make SimulationViewMenuComponent also use the ExpandableComponent

CURA-5785

plugins/PreviewStage/PreviewMenu.qml

@@ -78,7 +78,7 @@ Item
 
             property var buttonTarget: Qt.point(viewModeButton.x + Math.round(viewModeButton.width / 2), viewModeButton.y + Math.round(viewModeButton.height / 2))
 
-            height: childrenRect.height
+            height: parent.height
             width: childrenRect.width
 
             source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""

plugins/SimulationView/SimulationViewMenuComponent.qml

@@ -10,19 +10,13 @@ import QtGraphicalEffects 1.0
 import UM 1.0 as UM
 import Cura 1.0 as Cura
 
-Rectangle
+
+Cura.ExpandableComponent
 {
     id: base
 
-    color: UM.Theme.getColor("tool_panel_background")
-    border.width: UM.Theme.getSize("default_lining").width
-    border.color: UM.Theme.getColor("lining")
-
     width: UM.Theme.getSize("layerview_menu_size").width
-
-    height: viewSettings.collapsed ? layerViewTypesLabel.height + 2 * UM.Theme.getSize("default_margin").height  : childrenRect.height + 2 * UM.Theme.getSize("default_margin").height
-
-    Behavior on height { NumberAnimation { duration: 100 } }
+    iconSource: UM.Theme.getIcon("pencil")
 
     property var buttonTarget:
     {
@@ -51,59 +45,21 @@ Rectangle
         }
     }
 
-    Label
+    headerItem: Label
     {
         id: layerViewTypesLabel
-        text: catalog.i18nc("@label","Color scheme")
-        font: UM.Theme.getFont("default");
+        text: catalog.i18nc("@label", "Color scheme")
+        font: UM.Theme.getFont("default")
         visible: !UM.SimulationView.compatibilityMode
         color: UM.Theme.getColor("setting_control_text")
-        height: contentHeight
-        anchors
-        {
-            top: parent.top
-            margins: UM.Theme.getSize("default_margin").height
-            right: collapseButton.left
-            left: parent.left
-        }
-    }
-
-    Button
-    {
-        id: collapseButton
-
-        anchors
-        {
-            top: parent.top
-            margins: UM.Theme.getSize("default_margin").width
-            right: parent.right
-        }
-
-        width: UM.Theme.getSize("standard_arrow").width
-        height: UM.Theme.getSize("standard_arrow").height
-
-        onClicked: viewSettings.collapsed = !viewSettings.collapsed
-
-        style: ButtonStyle
-        {
-            background: UM.RecolorImage
-            {
-                width: control.width
-                height: control.height
-                sourceSize.width: width
-                sourceSize.height: width
-                color:  UM.Theme.getColor("setting_control_text")
-                source: viewSettings.collapsed ? UM.Theme.getIcon("arrow_left") : UM.Theme.getIcon("arrow_bottom")
-            }
-            label: Label{ }
-        }
+        height: base.height
+        verticalAlignment: Text.AlignVCenter
     }
 
-    Column
+    popupItem: Column
     {
         id: viewSettings
 
-        property bool collapsed: false
         property var extruder_opacities: UM.Preferences.getValue("layerview/extruder_opacities").split("|")
         property bool show_travel_moves: UM.Preferences.getValue("layerview/show_travel_moves")
         property bool show_helpers: UM.Preferences.getValue("layerview/show_helpers")
@@ -118,19 +74,11 @@ Rectangle
         property bool only_show_top_layers: UM.Preferences.getValue("view/only_show_top_layers")
         property int top_layer_count: UM.Preferences.getValue("view/top_layer_count")
 
-        anchors
-        {
-            top: layerViewTypesLabel.bottom
-            left: parent.left
-            right: parent.right
-            margins: UM.Theme.getSize("default_margin").height
-
-        }
+        width: UM.Theme.getSize("layerview_menu_size").width
+        height: childrenRect.height
 
         spacing: UM.Theme.getSize("layerview_row_spacing").height
 
-        visible: !collapsed
-
         ListModel  // matches SimulationView.py
         {
             id: layerViewTypes

resources/qml/ExpandableComponent.qml

@@ -47,6 +47,14 @@ Item
         popup.contentItem = popupItem
     }
 
+    Connections
+    {
+        // Since it could be that the popup is dynamically populated, we should also take these changes into account.
+        target: popupItem
+        onWidthChanged: popup.width = popupItem.width + 2 * popup.padding
+        onHeightChanged: popup.height = popupItem.height + 2 * popup.padding
+    }
+
     implicitHeight: 100
     implicitWidth: 400
     Rectangle