Add global profile selector to the custom print setup panel

Also modify some styles to adjust to the designs.

Contributes to CURA-5941.

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -4,6 +4,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+import UM 1.3 as UM
 import Cura 1.0 as Cura
 
 
@@ -14,8 +15,34 @@ Item
     // TODO: Hardcoded now but UX has to decide about the height of this item
     height: 500
 
+    property real padding: UM.Theme.getSize("default_margin").width
+
+    // Profile selector row
+    GlobalProfileSelector
+    {
+        id: globalProfileRow
+        anchors
+        {
+            top: parent.top
+            topMargin: parent.padding
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+        }
+    }
+
     Cura.SettingView
     {
-        anchors.fill: parent
+        anchors
+        {
+            top: globalProfileRow.bottom
+            topMargin: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+            bottom: parent.bottom
+        }
     }
 }

resources/qml/PrintSetupSelector/Custom/GlobalProfileSelector.qml

@@ -9,24 +9,25 @@ import QtQuick.Layouts 1.2
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-import "Menus"
-
 Item
 {
     id: globalProfileRow
-    height: UM.Theme.getSize("print_setup_item").height
+    height: childrenRect.height
 
     Label
     {
         id: globalProfileLabel
-        text: catalog.i18nc("@label","Profile:")
+        anchors
-        textFormat: Text.PlainText
+        {
-        width: Math.round(parent.width * 0.45 - UM.Theme.getSize("thick_margin").width - 2)
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: globalProfileSelection.left
+        }
+        text: catalog.i18nc("@label", "Profile")
         font: UM.Theme.getFont("default")
         color: UM.Theme.getColor("text")
         verticalAlignment: Text.AlignVCenter
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
     }
 
     ToolButton
@@ -34,20 +35,30 @@ Item
         id: globalProfileSelection
 
         text: generateActiveQualityText()
-        width: Math.round(parent.width * 0.55)
+        width: UM.Theme.getSize("print_setup_big_dropdown").width
-        height: UM.Theme.getSize("setting_control").height
+        height: UM.Theme.getSize("print_setup_big_dropdown").height
-        anchors.left: globalProfileLabel.right
+        anchors
-        anchors.right: parent.right
+        {
+            top: parent.top
+            right: parent.right
+        }
         tooltip: Cura.MachineManager.activeQualityOrQualityChangesName
         style: UM.Theme.styles.sidebar_header_button
         activeFocusOnPress: true
-        menu: ProfileMenu { }
+        menu: Cura.ProfileMenu { }
 
-        function generateActiveQualityText () {
+        function generateActiveQualityText()
-            var result = Cura.MachineManager.activeQualityOrQualityChangesName;
+        {
+            var result = Cura.MachineManager.activeQualityOrQualityChangesName
+            if (Cura.MachineManager.isActiveQualityExperimental)
+            {
+                result += " (Experimental)"
+            }
 
-            if (Cura.MachineManager.isActiveQualitySupported) {
+            if (Cura.MachineManager.isActiveQualitySupported)
-                if (Cura.MachineManager.activeQualityLayerHeight > 0) {
+            {
+                if (Cura.MachineManager.activeQualityLayerHeight > 0)
+                {
                     result += " <font color=\"" + UM.Theme.getColor("text_detail") + "\">"
                     result += " - "
                     result += Cura.MachineManager.activeQualityLayerHeight + "mm"
@@ -63,15 +74,15 @@ Item
             id: customisedSettings
 
             visible: Cura.MachineManager.hasUserSettings
-            height: Math.round(parent.height * 0.6)
+            width: UM.Theme.getSize("print_setup_icon").width
-            width: Math.round(parent.height * 0.6)
+            height: UM.Theme.getSize("print_setup_icon").height
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: Math.round(UM.Theme.getSize("setting_preferences_button_margin").width - UM.Theme.getSize("thick_margin").width)
 
             color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button");
-            iconSource: UM.Theme.getIcon("star");
+            iconSource: UM.Theme.getIcon("star")
 
             onClicked:
             {
@@ -81,7 +92,7 @@ Item
             onEntered:
             {
                 var content = catalog.i18nc("@tooltip","Some setting/override values are different from the values stored in the profile.\n\nClick to open the profile manager.")
-                base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0),  content)
+                base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("default_margin").width, 0),  content)
             }
             onExited: base.hideTooltip()
         }

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -11,8 +11,6 @@ Cura.ExpandableComponent
 {
     id: printSetupSelector
 
-    property bool hideSettings: PrintInformation.preSliced
-
     property string enabledText: catalog.i18nc("@label:Should be short", "On")
     property string disabledText: catalog.i18nc("@label:Should be short", "Off")
 

resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml

@@ -182,7 +182,7 @@ Item
             id: customisedSettings
 
             visible: Cura.SimpleModeSettingsManager.isProfileCustomized || Cura.SimpleModeSettingsManager.isProfileUserCreated
-            height: visible ? Math.round(0.8 * qualityRowTitle.height) : 0
+            height: visible ? UM.Theme.getSize("print_setup_icon").height : 0
             width: height
             anchors
             {
@@ -203,7 +203,7 @@ Item
             onEntered:
             {
                 var tooltipContent = catalog.i18nc("@tooltip","You have modified some profile settings. If you want to change these go to custom mode.")
-                base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height),  tooltipContent)
+                base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0),  tooltipContent)
             }
             onExited: base.hideTooltip()
         }

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -76,7 +76,7 @@ Item
         {
             id: supportExtruderCombobox
 
-            height: UM.Theme.getSize("print_setup_support_extruder_selector").height
+            height: UM.Theme.getSize("print_setup_big_dropdown").height
             anchors
             {
                 left: enableSupportCheckBox.right

resources/qml/qmldir

@@ -16,3 +16,4 @@ PrinterTypeLabel 1.0 PrinterTypeLabel.qml
 ViewsSelector 1.0 ViewsSelector.qml
 ToolbarButton 1.0 ToolbarButton.qml
 SettingView 1.0 SettingView.qml
+ProfileMenu 1.0 ProfileMenu.qml

resources/themes/cura-light/styles.qml

@@ -38,6 +38,7 @@ QtObject
                     }
                 }
 
+                radius: UM.Theme.getSize("setting_control_radius").width
                 border.width: Theme.getSize("default_lining").width
                 border.color:
                 {
@@ -489,11 +490,12 @@ QtObject
                 UM.RecolorImage
                 {
                     id: swatch
-                    height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                    height: Math.round(control.height / 2)
                     width: height
                     anchors.right: downArrow.left
                     anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
+                    anchors.rightMargin: UM.Theme.getSize("default_margin").width
+//                    anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
                     sourceSize.width: width
                     sourceSize.height: height
                     source: UM.Theme.getIcon("extruder_button")

resources/themes/cura-light/theme.json

@@ -377,7 +377,8 @@
         "print_setup_slider_groove": [0.16, 0.16],
         "print_setup_slider_handle": [1.0, 1.0],
         "print_setup_slider_tickmarks": [0.32, 0.32],
-        "print_setup_support_extruder_selector": [18.2, 2.5],
+        "print_setup_big_dropdown": [28, 2.5],
+        "print_setup_icon": [1.2, 1.2],
 
         "configuration_selector_mode_tabs": [0.0, 3.0],