Make the expandable content header to be a common header for every expandable component.

Contributes to CURA-5941.

plugins/SimulationView/SimulationViewMenuComponent.qml

@@ -16,6 +16,7 @@ Cura.ExpandableComponent
     id: base
 
     width: UM.Theme.getSize("layerview_menu_size").width
+    contentHeaderTitle: catalog.i18nc("@label", "Color scheme")
 
     Connections
     {

resources/qml/ExpandableComponent.qml

@@ -1,3 +1,6 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
 import QtQuick 2.7
 import QtQuick.Controls 2.3
 
@@ -40,6 +43,9 @@ Item
     // How much spacing is needed around the contentItem
     property alias contentPadding: content.padding
 
+    // Adds a title to the content item
+    property alias contentHeaderTitle: contentHeader.headerTitle
+
     // How much spacing is needed for the contentItem by Y coordinate
     property var contentSpacingY: UM.Theme.getSize("narrow_margin").width
 
@@ -55,7 +61,7 @@ Item
     property alias iconSize: collapseButton.height
 
     // Is the "drawer" open?
-    readonly property alias expanded: content.visible
+    readonly property alias expanded: contentContainer.visible
 
     // What should the radius of the header be. This is also influenced by the headerCornerSide
     property alias headerRadius: background.radius
@@ -71,7 +77,7 @@ Item
 
     function toggleContent()
     {
-        content.visible = !expanded
+        contentContainer.visible = !expanded
     }
 
     // Add this binding since the background color is not updated otherwise
@@ -147,10 +153,13 @@ Item
         z: background.z - 1
     }
 
-    Control
+    Cura.RoundedRectangle
     {
-        id: content
+        id: contentContainer
+
         visible: false
+        width: childrenRect.width
+        height: childrenRect.height
 
         // Ensure that the content is located directly below the headerItem
         y: background.height + base.shadowOffset + base.contentSpacingY
@@ -158,25 +167,42 @@ Item
         // Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
         // 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
 
-        background: Cura.RoundedRectangle
+        cornerSide: Cura.RoundedRectangle.Direction.All
+        color: contentBackgroundColor
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("lining")
+        radius: UM.Theme.getSize("default_radius").width
+
+        ExpandableComponentHeader
         {
-            cornerSide: Cura.RoundedRectangle.Direction.All
+            id: contentHeader
-            color: contentBackgroundColor
+            headerTitle: ""
-            border.width: UM.Theme.getSize("default_lining").width
+            anchors
-            border.color: UM.Theme.getColor("lining")
+            {
-            radius: UM.Theme.getSize("default_radius").width
+                top: parent.top
+                right: parent.right
+                left: parent.left
+            }
+
         }
 
-        contentItem: Item {}
+        Control
-
-        onContentItemChanged:
         {
-            // Since we want the size of the content to be set by the size of the content,
+            id: content
-            // we need to do it like this.
+
-            content.width = contentItem.width + 2 * content.padding
+            anchors.top: contentHeader.bottom
-            content.height = contentItem.height + 2 * content.padding
+            padding: UM.Theme.getSize("default_margin").width
+
+            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
+            }
         }
     }
 
@@ -187,6 +213,10 @@ Item
         // Since it could be that the content is dynamically populated, we should also take these changes into account.
         target: content.contentItem
         onWidthChanged: content.width = content.contentItem.width + 2 * content.padding
-        onHeightChanged: content.height = content.contentItem.height + 2 * content.padding
+        onHeightChanged:
+        {
+            content.height = content.contentItem.height + 2 * content.padding
+            contentContainer.height = contentHeader.height + content.height
+        }
     }
 }

resources/qml/ExpandablePopup.qml

@@ -1,3 +1,6 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
 import QtQuick 2.7
 import QtQuick.Controls 2.3
 

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -11,10 +11,11 @@ Cura.ExpandableComponent
 {
     id: printSetupSelector
 
-    property string enabledText: catalog.i18nc("@label:Should be short", "On")
+    property bool preSlicedData: PrintInformation.preSliced
-    property string disabledText: catalog.i18nc("@label:Should be short", "Off")
 
     contentPadding: UM.Theme.getSize("default_lining").width
+    contentHeaderTitle: catalog.i18nc("@label", "Print settings")
+    enabled: !preSlicedData
 
     UM.I18nCatalog
     {
@@ -22,10 +23,7 @@ Cura.ExpandableComponent
         name: "cura"
     }
 
-    headerItem: PrintSetupSelectorHeader
+    headerItem: PrintSetupSelectorHeader {}
-    {
-        anchors.fill: parent
-    }
 
     Cura.ExtrudersModel
     {

resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml

@@ -12,7 +12,7 @@ import "Custom"
 
 Item
 {
-    id: popup
+    id: content
 
     width: UM.Theme.getSize("print_setup_widget").width - 2 * UM.Theme.getSize("default_margin").width
     height: childrenRect.height
@@ -36,79 +36,6 @@ Item
     }
     onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
 
-
-    // Header of the popup
-    Cura.RoundedRectangle
-    {
-        id: header
-        height: UM.Theme.getSize("print_setup_widget_header").height
-        color: UM.Theme.getColor("secondary")
-        cornerSide: Cura.RoundedRectangle.Direction.Up
-        radius: UM.Theme.getSize("default_radius").width
-
-        anchors
-        {
-            top: parent.top
-            right: parent.right
-            left: parent.left
-        }
-
-        Label
-        {
-            id: headerLabel
-            text: catalog.i18nc("@label", "Print settings")
-            font: UM.Theme.getFont("default")
-            renderType: Text.NativeRendering
-            verticalAlignment: Text.AlignVCenter
-            color: UM.Theme.getColor("text")
-            height: parent.height
-
-            anchors
-            {
-                topMargin: UM.Theme.getSize("default_margin").height
-                left: parent.left
-                leftMargin: UM.Theme.getSize("default_margin").height
-            }
-        }
-
-        Button
-        {
-            id: closeButton
-            width: UM.Theme.getSize("message_close").width
-            height: UM.Theme.getSize("message_close").height
-            hoverEnabled: true
-
-            anchors
-            {
-                right: parent.right
-                rightMargin: UM.Theme.getSize("default_margin").width
-                verticalCenter: parent.verticalCenter
-            }
-
-            contentItem: UM.RecolorImage
-            {
-                anchors.fill: parent
-                sourceSize.width: width
-                color: closeButton.hovered ? UM.Theme.getColor("small_button_text_hover") : UM.Theme.getColor("small_button_text")
-                source: UM.Theme.getIcon("cross1")
-            }
-
-            background: Item {}
-
-            onClicked: toggleContent() // Will hide the popup item
-        }
-    }
-
-    Rectangle
-    {
-        id: topSeparator
-
-        anchors.bottom: header.bottom
-        width: parent.width
-        height: UM.Theme.getSize("default_lining").height
-        color: UM.Theme.getColor("lining")
-    }
-
     Item
     {
         id: contents
@@ -118,7 +45,7 @@ Item
 
         anchors
         {
-            top: header.bottom
+            top: parent.top
             left: parent.left
             right: parent.right
         }

resources/qml/PrintSetupSelector/PrintSetupSelectorHeader.qml

@@ -10,6 +10,9 @@ import Cura 1.0 as Cura
 
 RowLayout
 {
+    property string enabledText: catalog.i18nc("@label:Should be short", "On")
+    property string disabledText: catalog.i18nc("@label:Should be short", "Off")
+
     Cura.IconWithText
     {
         source: UM.Theme.getIcon("category_layer_height")

resources/themes/cura-light/theme.json

@@ -362,13 +362,14 @@
         "print_setup_mode_toggle": [0.0, 2.0],
         "print_setup_item": [0.0, 2.0],
         "print_setup_extruder_box": [0.0, 6.0],
-        "print_setup_widget_header": [0.0, 3.0],
         "print_setup_slider_groove": [0.16, 0.16],
         "print_setup_slider_handle": [1.0, 1.0],
         "print_setup_slider_tickmarks": [0.32, 0.32],
         "print_setup_big_item": [28, 2.5],
         "print_setup_icon": [1.2, 1.2],
 
+        "expandable_component_content_header": [0.0, 3.0],
+
         "configuration_selector_mode_tabs": [0.0, 3.0],
 
         "action_panel_widget": [25.0, 0.0],