Merge branch 'CURA-5785-Restyle_stage_menu' into CURA-5942_printer_selector

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: Math.round(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: Cura.RoundedRectangle.Direction.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,6 @@ Item
                 width: childrenRect.width
             }
         }
-        }
 
         Rectangle
         {
@@ -103,6 +91,7 @@ Item
 
             radius: UM.Theme.getSize("default_radius").width
             color: UM.Theme.getColor("toolbar_background")
+            
             Button
             {
                 id: openFileButton

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: Cura.RoundedRectangle.Direction.Left
 
             property var viewModel: UM.ViewModel { }
 
@@ -54,22 +42,27 @@ Item
             {
                 for (var i = 0; i < viewModel.rowCount(); i++)
                 {
-                        if (viewModel.getItem(i).active)
+                    if (viewModel.items[i].active)
                     {
-                            return viewModel.getItem(i)
+                        return viewModel.items[i]
                     }
                 }
-                    // Nothing was active, so just return the first one (the list is sorted by priority, so the most
-                    // important one should be returned)
-                    return viewModel.getItem(0)
+                return null
             }
 
-                // Ensure that the controller is synced with whatever happend here.
-                onActiveViewChanged: UM.Controller.setActiveView(activeView.id)
+            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.name
+                text: viewSelector.activeView ? viewSelector.activeView.name : ""
                 verticalAlignment: Text.AlignVCenter
                 height: parent.height
                 elide: Text.ElideRight
@@ -98,7 +91,7 @@ Item
                         text: name
                         radius: UM.Theme.getSize("default_radius").width
                         checkable: true
-                            checked: active
+                        checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
                         onClicked:
                         {
                             viewSelector.togglePopup()
@@ -147,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: RoundedRectangle.Direction.Right
                 }
             }
 

resources/qml/Dialogs/AddMachineDialog.qml

@@ -73,7 +73,7 @@ UM.Dialog
         {
             top: parent.top
             left: parent.left
-            topMargin: UM.Theme.getSize("default_margin")
+            topMargin: UM.Theme.getSize("default_margin").height
         }
         text: catalog.i18nc("@title:tab", "Add a printer to Cura")
 

resources/qml/ExpandableComponent.qml

@@ -50,6 +50,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)
@@ -81,7 +87,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,49 @@
+import QtQuick 2.7
+
+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 5 can be used if no radius is needed.
+    // 1 is down, 2 is left, 3 is up and 4 is right.
+    property int cornerSide: RoundedRectangle.Direction.None
+
+    enum Direction
+    {
+        None = 0,
+        Down = 1,
+        Left = 2,
+        Up = 3,
+        Right = 4,
+        All = 5
+    }
+
+    Rectangle
+    {
+        id: background
+        anchors.fill: parent
+        radius: cornerSide != RoundedRectangle.Direction.None ? parent.radius : 0
+        color: parent.color
+    }
+
+    // The item that covers 2 of the corners to make them not rounded.
+    Rectangle
+    {
+        visible: cornerSide != RoundedRectangle.Direction.None && cornerSide != RoundedRectangle.Direction.All
+        height: cornerSide % 2 ? parent.radius: parent.height
+        width: cornerSide % 2 ? parent.width : parent.radius
+        color: parent.color
+        anchors
+        {
+            right: cornerSide == RoundedRectangle.Direction.Left ? parent.right: undefined
+            bottom: cornerSide == RoundedRectangle.Direction.Up ? parent.bottom: undefined
+        }
+    }
+}