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,27 +24,15 @@ 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
-        {
-            id: itemRowBackground
-            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
         {
             id: itemRow
 
-                anchors.centerIn: parent
+            anchors.left: openFileButtonBackground.right
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
 
             width: 0.9 * prepareMenu.width
             height: parent.height
@@ -54,6 +42,7 @@ Item
             {
                 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
@@ -93,7 +82,7 @@ Item
                 width: childrenRect.width
             }
         }
-        }
+
 
         Rectangle
         {

plugins/PreviewStage/PreviewMenu.qml

@@ -22,20 +22,7 @@ Item
         name: "cura"
     }
 
-    Rectangle
-    {
-        anchors.fill: stageMenu
-        anchors.leftMargin: -radius
-        radius: UM.Theme.getSize("default_radius").width
-        color: UM.Theme.getColor("toolbar_background")
-    }
 
-    Item
-    {
-        id: stageMenu
-        height: parent.height
-        width: stageMenuRow.width + UM.Theme.getSize("default_margin").width
-        anchors.horizontalCenter: parent.horizontalCenter
     Row
     {
         id: stageMenuRow
@@ -47,6 +34,7 @@ Item
             id: viewSelector
             iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
             height: parent.height
+            headerCornerSide: 2 // Show corners on the left side
 
             property var viewModel: UM.ViewModel { }
 
@@ -152,5 +140,4 @@ Item
             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
+        }
+    }
+}