Replace the shadow of the PrepareMenu with a border

In order for that to be possible, the background border of the ExpandablePopup and the ExpandableComponent had to be exposed.

In addition, since in the `RowLayout` the `ConfigurationMenu` and the `MachineSelector` both draw a border around them, it means that there will be a double "divider" (one border line from each button). To overcome that, we set the spacing of the `RowLayout` as a `- border_width`, which ensures then that there will be only a single line of border between the two adjacent buttons.

CURA-8013

plugins/PrepareStage/PrepareMenu.qml

@@ -44,41 +44,33 @@ Item
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
 
             height: parent.height
-            spacing: 0
+            // This is a trick to make sure that the borders of the two adjacent buttons' borders overlap. Otherwise
+            // there will be double border (one from each button)
+            spacing: -UM.Theme.getSize("default_lining").width
 
             Cura.MachineSelector
             {
                 id: machineSelection
                 headerCornerSide: Cura.RoundedRectangle.Direction.Left
+                headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
+                headerBackgroundBorder.color: UM.Theme.getColor("lining")
+                enableHeaderShadow: false
                 Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 1 / 3 - UM.Theme.getSize("default_lining").width)
                 Layout.fillWidth: true
                 Layout.fillHeight: true
             }
 
-            // Separator line
-            Rectangle
-            {
-                height: parent.height
-                width: UM.Theme.getSize("default_lining").width
-                color: UM.Theme.getColor("lining")
-            }
-
             Cura.ConfigurationMenu
             {
                 id: printerSetup
+                enableHeaderShadow: false
+                headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
+                headerBackgroundBorder.color: UM.Theme.getColor("lining")
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 2 / 3 - UM.Theme.getSize("default_lining").width)
             }
 
-            // Separator line
-            Rectangle
-            {
-                height: parent.height
-                width: UM.Theme.getSize("default_lining").width
-                color: UM.Theme.getColor("lining")
-            }
-
             Item
             {
                 id: printSetupSelectorItem
@@ -119,24 +111,12 @@ Item
                 id: background
                 height: UM.Theme.getSize("stage_menu").height
                 width: UM.Theme.getSize("stage_menu").height
+                border.color: UM.Theme.getColor("lining")
+                border.width: UM.Theme.getSize("default_lining").width
 
                 radius: UM.Theme.getSize("default_radius").width
                 color: openFileButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
             }
-
-            DropShadow
-            {
-                id: shadow
-                // Don't blur the shadow
-                radius: 0
-                anchors.fill: background
-                source: background
-                verticalOffset: 2
-                visible: true
-                color: UM.Theme.getColor("action_button_shadow")
-                // Should always be drawn behind the background.
-                z: background.z - 1
-            }
         }
     }
 }

resources/qml/ExpandableComponent.qml

@@ -56,6 +56,8 @@ Item
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
 
+    property alias headerBackgroundBorder: background.border
+
     // What icon should be displayed on the right.
     property alias iconSource: collapseButton.source
 

resources/qml/ExpandablePopup.qml

@@ -50,6 +50,8 @@ Item
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
 
+    property alias headerBackgroundBorder: background.border
+
     // What icon should be displayed on the right.
     property alias iconSource: collapseButton.source
 

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -17,6 +17,9 @@ Cura.ExpandableComponent
 
     contentPadding: UM.Theme.getSize("default_lining").width
     contentHeaderTitle: catalog.i18nc("@label", "Print settings")
+    enableHeaderShadow: false
+    headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
+    headerBackgroundBorder.color: UM.Theme.getColor("lining")
     enabled: !preSlicedData
     disabledText: catalog.i18nc("@label shown when we load a Gcode file", "Print setup disabled. G-code file can not be modified.")