Add the RoundedRectangle as background to the ExpandableComponent

This way the expandable components can have rounded corners only on one side,
thus preventing the need to do add backgrounds to the rows that they are in.

CURA-5785

plugins/PrepareStage/PrepareMenu.qml

@@ -24,77 +24,66 @@ Item
     Item
     {
         anchors.horizontalCenter: parent.horizontalCenter
-        width: openFileButtonBackground.width + itemRowBackground.width
+        width: openFileButtonBackground.width + itemRow.width + UM.Theme.getSize("default_margin").width
         height: parent.height
 
-        Rectangle
+        RowLayout
         {
-            id: itemRowBackground
+            id: itemRow
-            radius: UM.Theme.getSize("default_radius").width
-
-            color: UM.Theme.getColor("toolbar_background")
-
-            width: itemRow.width + UM.Theme.getSize("default_margin").width
-            height: parent.height
 
             anchors.left: openFileButtonBackground.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
 
-            RowLayout
+            width: 0.9 * prepareMenu.width
+            height: parent.height
+            spacing: 0
+
+            Cura.MachineSelector
             {
-                id: itemRow
+                id: machineSelection
+                z: openFileButtonBackground.z - 1 //Ensure that the tooltip of the open file button stays above the item row.
+                headerCornerSide: 2 // Show corners on the left.
+                Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
+                Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
 
-                anchors.centerIn: parent
+            // Separator line
-
+            Rectangle
-                width: 0.9 * prepareMenu.width
+            {
                 height: parent.height
-                spacing: 0
+                width: UM.Theme.getSize("default_lining").width
+                color: UM.Theme.getColor("lining")
+            }
 
-                Cura.MachineSelector
+            Cura.QuickConfigurationSelector
-                {
+            {
-                    id: machineSelection
+                Layout.fillHeight: true
-                    z: openFileButtonBackground.z - 1 //Ensure that the tooltip of the open file button stays above the item row.
+                Layout.fillWidth: true
-                    Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
+                Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
-                    Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
+            }
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                }
 
-                // Separator line
+            // Separator line
-                Rectangle
+            Rectangle
-                {
+            {
-                    height: parent.height
+                height: parent.height
-                    width: UM.Theme.getSize("default_lining").width
+                width: UM.Theme.getSize("default_lining").width
-                    color: UM.Theme.getColor("lining")
+                color: UM.Theme.getColor("lining")
-                }
+            }
 
-                Cura.QuickConfigurationSelector
+            Item
-                {
+            {
-                    Layout.fillHeight: true
+                id: printSetupSelectorItem
-                    Layout.fillWidth: true
+                // This is a work around to prevent the printSetupSelector from having to be re-loaded every time
-                    Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
+                // a stage switch is done.
-                }
+                children: [printSetupSelector]
-
+                height: childrenRect.height
-                // Separator line
+                width: childrenRect.width
-                Rectangle
-                {
-                    height: parent.height
-                    width: UM.Theme.getSize("default_lining").width
-                    color: UM.Theme.getColor("lining")
-                }
-
-                Item
-                {
-                    id: printSetupSelectorItem
-                    // This is a work around to prevent the printSetupSelector from having to be re-loaded every time
-                    // a stage switch is done.
-                    children: [printSetupSelector]
-                    height: childrenRect.height
-                    width: childrenRect.width
-                }
             }
         }
 
+
         Rectangle
         {
             id: openFileButtonBackground

plugins/PreviewStage/PreviewMenu.qml

@@ -22,135 +22,122 @@ Item
         name: "cura"
     }
 
-    Rectangle
-    {
-        anchors.fill: stageMenu
-        anchors.leftMargin: -radius
-        radius: UM.Theme.getSize("default_radius").width
-        color: UM.Theme.getColor("toolbar_background")
-    }
 
-    Item
+    Row
     {
-        id: stageMenu
+        id: stageMenuRow
+        anchors.centerIn: parent
         height: parent.height
-        width: stageMenuRow.width + UM.Theme.getSize("default_margin").width
+
-        anchors.horizontalCenter: parent.horizontalCenter
+        Cura.ExpandableComponent
-        Row
         {
-            id: stageMenuRow
+            id: viewSelector
-            anchors.centerIn: parent
+            iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
             height: parent.height
+            headerCornerSide: 2 // Show corners on the left side
 
-            Cura.ExpandableComponent
+            property var viewModel: UM.ViewModel { }
+
+            property var activeView:
             {
-                id: viewSelector
+                for (var i = 0; i < viewModel.rowCount(); i++)
-                iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
-                height: parent.height
-
-                property var viewModel: UM.ViewModel { }
-
-                property var activeView:
                 {
-                    for (var i = 0; i < viewModel.rowCount(); i++)
+                    if (viewModel.items[i].active)
                     {
-                        if (viewModel.items[i].active)
+                        return viewModel.items[i]
-                        {
-                            return viewModel.items[i]
-                        }
                     }
-                    return null
                 }
+                return null
+            }
 
+            Component.onCompleted:
+            {
+                // Nothing was active, so just return the first one (the list is sorted by priority, so the most
+                // important one should be returned)
+                if(activeView == null)
+                {
+                    UM.Controller.setActiveView(viewModel.getItem(0).id)
+                }
+            }
+
+            headerItem: Label
+            {
+                text: viewSelector.activeView ? viewSelector.activeView.name : ""
+                verticalAlignment: Text.AlignVCenter
+                height: parent.height
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default")
+                color: UM.Theme.getColor("text")
+            }
+
+            popupItem: Column
+            {
+                id: viewSelectorPopup
+                width: viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
+
+                // For some reason the height/width of the column gets set to 0 if this is not set...
                 Component.onCompleted:
                 {
-                    // Nothing was active, so just return the first one (the list is sorted by priority, so the most
+                    height = implicitHeight
-                    // important one should be returned)
+                    width = viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
-                    if(activeView == null)
-                    {
-                        UM.Controller.setActiveView(viewModel.getItem(0).id)
-                    }
                 }
 
-                headerItem: Label
+                Repeater
                 {
-                    text: viewSelector.activeView ? viewSelector.activeView.name : ""
+                    id: viewsList
-                    verticalAlignment: Text.AlignVCenter
+                    model: viewSelector.viewModel
-                    height: parent.height
+                    RoundButton
-                    elide: Text.ElideRight
-                    font: UM.Theme.getFont("default")
-                    color: UM.Theme.getColor("text")
-                }
-
-                popupItem: Column
-                {
-                    id: viewSelectorPopup
-                    width: viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
-
-                    // For some reason the height/width of the column gets set to 0 if this is not set...
-                    Component.onCompleted:
                     {
-                        height = implicitHeight
+                        text: name
-                        width = viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
+                        radius: UM.Theme.getSize("default_radius").width
-                    }
+                        checkable: true
-
+                        checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
-                    Repeater
+                        onClicked:
-                    {
-                        id: viewsList
-                        model: viewSelector.viewModel
-                        RoundButton
                         {
-                            text: name
+                            viewSelector.togglePopup()
-                            radius: UM.Theme.getSize("default_radius").width
+                            UM.Controller.setActiveView(id)
-                            checkable: true
-                            checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
-                            onClicked:
-                            {
-                                viewSelector.togglePopup()
-                                UM.Controller.setActiveView(id)
-                            }
                         }
                     }
-
                 }
-            }
 
-            // Separator line
-            Rectangle
-            {
-                height: parent.height
-                // If there is no viewPanel, we only need a single spacer, so hide this one.
-                visible: viewPanel.source != ""
-                width: visible ? UM.Theme.getSize("default_lining").width : 0
-
-                color: UM.Theme.getColor("lining")
             }
+        }
 
-            Loader
+        // Separator line
-            {
+        Rectangle
-                id: viewPanel
+        {
-                height: parent.height
+            height: parent.height
-                width: childrenRect.width
+            // If there is no viewPanel, we only need a single spacer, so hide this one.
-                source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""
+            visible: viewPanel.source != ""
-            }
+            width: visible ? UM.Theme.getSize("default_lining").width : 0
 
-            // Separator line
+            color: UM.Theme.getColor("lining")
-            Rectangle
+        }
-            {
-                height: parent.height
-                width: UM.Theme.getSize("default_lining").width
-                color: UM.Theme.getColor("lining")
-            }
 
-            Item
+        Loader
-            {
+        {
-                id: printSetupSelectorItem
+            id: viewPanel
-                // This is a work around to prevent the printSetupSelector from having to be re-loaded every time
+            height: parent.height
-                // a stage switch is done.
+            width: childrenRect.width
-                children: [printSetupSelector]
+            source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""
-                height: childrenRect.height
+        }
-                width: childrenRect.width
+
-            }
+        // Separator line
+        Rectangle
+        {
+            height: parent.height
+            width: UM.Theme.getSize("default_lining").width
+            color: UM.Theme.getColor("lining")
+        }
+
+        Item
+        {
+            id: printSetupSelectorItem
+            // This is a work around to prevent the printSetupSelector from having to be re-loaded every time
+            // a stage switch is done.
+            children: [printSetupSelector]
+            height: childrenRect.height
+            width: childrenRect.width
         }
     }
 }

resources/qml/Cura.qml

@@ -259,6 +259,7 @@ UM.MainWindow
                     onHideTooltip: base.hideTooltip()
                     width: UM.Theme.getSize("print_setup_widget").width
                     height: UM.Theme.getSize("stage_menu").height
+                    headerCornerSide: 4 // Show corners on the right side
                 }
             }
 

resources/qml/ExpandableComponent.qml

@@ -40,6 +40,12 @@ Item
 
     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
+
     function togglePopup()
     {
         if(popup.visible)
@@ -71,7 +77,8 @@ Item
 
     implicitHeight: 100 * screenScaleFactor
     implicitWidth: 400 * screenScaleFactor
-    Rectangle
+
+    RoundedRectangle
     {
         id: background
         property real padding: UM.Theme.getSize("default_margin").width

resources/qml/RoundedRectangle.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.0
+
+import UM 1.2 as UM
+
+// The rounded rectangle works mostly like a regular rectangle, but provides the option to have rounded corners on only one side of the rectangle.
+Item
+{
+    // As per the regular rectangle
+    property color color: "transparent"
+
+    // As per regular rectangle
+    property int radius: UM.Theme.getSize("default_radius").width
+
+    // On what side should the corners be shown 0 can be used if no radius is needed.
+    // 1 is down, 2 is left, 3 is up and 4 is right.
+    property int cornerSide: 0
+
+    Rectangle
+    {
+        id: background
+        anchors.fill: parent
+        radius: cornerSide != 0 ? parent.radius : 0
+        color: parent.color
+    }
+
+    // The item that covers 2 of the corners to make them not rounded.
+    Rectangle
+    {
+        visible: cornerSide != 0
+        height: cornerSide % 2 ? parent.radius: parent.height
+        width: cornerSide % 2 ? parent.width : parent.radius
+        color: parent.color
+        anchors
+        {
+            right: cornerSide == 2 ? parent.right: undefined
+            bottom: cornerSide == 3 ? parent.bottom: undefined
+        }
+    }
+}