Set the height of the stage menu in the theme instead of hardcoded.

I also adjusted a bit the design to fulfill the requirments from UX/UI
team.

Contributes to CURA-5772.

cura/Stages/CuraStage.py

@@ -1,5 +1,6 @@
-# Copyright (c) 2017 Ultimaker B.V.
+# Copyright (c) 2018 Ultimaker B.V.
 # Cura is released under the terms of the LGPLv3 or higher.
+
 from PyQt5.QtCore import pyqtProperty, QUrl
 
 from UM.Stage import Stage
@@ -27,6 +28,6 @@ class CuraStage(Stage):
     def sidebarComponent(self) -> QUrl:
         return self.getDisplayComponent("sidebar")
 
-    @pyqtProperty(QUrl, constant=True)
+    @pyqtProperty(QUrl, constant = True)
     def stageMenuComponent(self) -> QUrl:
         return self.getDisplayComponent("menu")

plugins/PrepareStage/PrepareMenu.qml

@@ -21,7 +21,6 @@ Item
 
     Row
     {
-        spacing: UM.Theme.getSize("default_margin").width
         anchors.horizontalCenter: parent.horizontalCenter
 
         Button
@@ -34,6 +33,13 @@ Item
             action: Cura.Actions.open
         }
 
+        Item
+        {
+            id: spacing
+            width: UM.Theme.getSize("default_margin").width
+            height: parent.height
+        }
+
         Cura.MachineAndConfigurationSelector
         {
         }

resources/qml/Cura.qml

@@ -20,7 +20,6 @@ UM.MainWindow
 
     // Cura application window title
     title: catalog.i18nc("@title:window", "Ultimaker Cura")
-    viewportRect: Qt.rect(0, 0, 1.0, 1.0)
     backgroundColor: UM.Theme.getColor("viewport_background")
 
     UM.I18nCatalog
@@ -143,6 +142,19 @@ UM.MainWindow
                 }
             }
 
+            Rectangle
+            {
+                anchors
+                {
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                }
+                visible: stageMenu.source != ""
+                height: Math.round(UM.Theme.getSize("stage_menu").height / 2)
+                color: UM.Theme.getColor("topheader_background")
+            }
+
             Loader
             {
                 // The stage menu is, as the name implies, a menu that is defined by the active stage.
@@ -155,10 +167,9 @@ UM.MainWindow
                     left: parent.left
                     right: parent.right
                     top: parent.top
-                    margins: UM.Theme.getSize("default_margin").height
                 }
 
-                height: 50
+                height: UM.Theme.getSize("stage_menu").height
                 source: UM.Controller.activeStage != null ? UM.Controller.activeStage.stageMenuComponent : ""
             }
 

resources/themes/cura-light/theme.json

@@ -344,6 +344,8 @@
         "topheader_button": [8, 4],
         "topheader_button_icon": [1.2, 1.2],
 
+        "stage_menu": [0.0, 4.5],
+
         "account_button": [12, 3],
 
         "views_selector": [0.0, 4.0],