Refactor the code a bit more to better align the components in the

recommended mode.

Contributes to CURA-5941.

resources/qml/ActionButton.qml

@@ -12,7 +12,6 @@ Button
 {
     id: button
     property alias iconSource: buttonIcon.source
-    property alias iconSourceRight: buttonIconRight.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
@@ -37,8 +36,7 @@ Button
     // we elide the text to the right so the text will be cut off with the three dots at the end.
     property var fixedWidthMode: false
 
-    width: buttonIcon.width + buttonText.width + buttonIconRight.width
-    contentItem: Item
+    contentItem: Row
     {
         UM.RecolorImage
         {
@@ -66,20 +64,6 @@ Button
             horizontalAlignment: Text.AlignHCenter
             elide: Text.ElideRight
         }
-
-        UM.RecolorImage
-        {
-            id: buttonIconRight
-            source: ""
-            height: Math.round(0.6 * parent.height)
-            width: height
-            sourceSize.width: width
-            sourceSize.height: height
-            color: button.hovered ? button.textHoverColor : button.textColor
-            visible: source != ""
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: source != "" ? parent.right : undefined
-        }
     }
 
     background: Rectangle

resources/qml/ExpandableComponent.qml

@@ -74,7 +74,7 @@ Item
 
     function togglePopup()
     {
-        if(popup.visible)
+        if (popup.visible)
         {
             popup.close()
         }

resources/qml/IconLabel.qml

@@ -2,8 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
 
 import UM 1.1 as UM
 
@@ -48,7 +47,7 @@ Item
         text: "Empty label"
         elide: Text.ElideRight
         color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("very_small")
+        font: UM.Theme.getFont("default")
         renderType: Text.NativeRendering
     }
 }

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -11,7 +11,6 @@ Cura.ExpandableComponent
 {
     id: base
 
-    property int currentModeIndex: -1
     property bool hideSettings: PrintInformation.preSliced
 
     property string enabledText: catalog.i18nc("@label:Should be short", "On")
@@ -27,13 +26,6 @@ Cura.ExpandableComponent
 
     popupClosePolicy: Popup.CloseOnEscape
 
-    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
-
-    Component.onCompleted:
-    {
-        popupItemWrapper.width = base.width
-    }
-
     UM.I18nCatalog
     {
         id: catalog
@@ -61,8 +53,5 @@ Cura.ExpandableComponent
         id: extrudersModel
     }
 
-    popupItem: PrintSetupSelectorContents
-    {
-
-    }
+    popupItem: PrintSetupSelectorContents {}
 }

resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml

@@ -3,24 +3,26 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
 
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
-Rectangle
+Item
 {
-    property var total_height: popupItemHeader.height + popupItemContent.height + footerControll.height + UM.Theme.getSize("narrow_margin").height * 2
-    id: popupItemWrapper
-    height: total_height
+    id: popup
 
-    border.width: UM.Theme.getSize("default_lining").width
-    border.color: UM.Theme.getColor("lining")
+    width: UM.Theme.getSize("print_setup_widget").width
+    height: childrenRect.height
 
-    Item
+    property int currentModeIndex: -1
+    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
+
+    // Header of the popup
+    Rectangle
     {
-        id: popupItemHeader
-        height: 36
+        id: header
+        height: UM.Theme.getSize("print_setup_widget_header").height
+        color: UM.Theme.getColor("action_button_hovered")  // TODO: It's not clear the color that we need to use here
 
         anchors
         {
@@ -31,8 +33,8 @@ Rectangle
 
         Label
         {
-            id: popupItemHeaderText
-            text: catalog.i18nc("@label", "Print settings");
+            id: headerLabel
+            text: catalog.i18nc("@label", "Print settings")
             font: UM.Theme.getFont("default")
             renderType: Text.NativeRendering
             verticalAlignment: Text.AlignVCenter
@@ -47,221 +49,153 @@ Rectangle
             }
         }
 
-        Rectangle
-        {
-            width: parent.width
-            height: UM.Theme.getSize("default_lining").height
-            anchors.top: popupItemHeaderText.bottom
-            color: UM.Theme.getColor("action_button_border")
-
-
-        }
-
         Button
         {
-            id: closeButton;
-            width: UM.Theme.getSize("message_close").width;
-            height: UM.Theme.getSize("message_close").height;
+            id: closeButton
+            width: UM.Theme.getSize("message_close").width
+            height: UM.Theme.getSize("message_close").height
 
             anchors
             {
-                right: parent.right;
-                rightMargin: UM.Theme.getSize("default_margin").width;
-                top: parent.top;
-                topMargin: 10
+                right: parent.right
+                rightMargin: UM.Theme.getSize("default_margin").width
+                verticalCenter: parent.verticalCenter
             }
 
-            UM.RecolorImage
+            contentItem: UM.RecolorImage
             {
-                anchors.fill: parent;
+                anchors.fill: parent
                 sourceSize.width: width
                 sourceSize.height: width
                 color: UM.Theme.getColor("message_text")
                 source: UM.Theme.getIcon("cross1")
             }
 
-            onClicked: base.togglePopup() // Will hide the popup item
+            background: Item {}
 
-            background: Rectangle
-            {
-                color: UM.Theme.getColor("message_background")
-            }
+            onClicked: togglePopup() // Will hide the popup item
         }
     }
 
     Rectangle
     {
-        id: popupItemContent
-        width: parent.width
-        height: tabBar.height + sidebarContents.height
+        id: topSeparator
 
+        anchors.bottom: header.bottom
+        width: parent.width
+        height: UM.Theme.getSize("default_lining").height
+        color: UM.Theme.getColor("lining")
+    }
+
+    Loader
+    {
+        id: loader
+        width: parent.width
         anchors
         {
-            top: popupItemHeader.bottom
-            topMargin: UM.Theme.getSize("narrow_margin").height
-            right: parent.right
-            left: parent.left
+            top: header.bottom
             leftMargin: UM.Theme.getSize("default_margin").width
             rightMargin: UM.Theme.getSize("default_margin").width
         }
-
-        UM.TabRow
-        {
-            id: tabBar
-            anchors.topMargin: UM.Theme.getSize("default_margin").height
-            onCurrentIndexChanged: Cura.ExtruderManager.setActiveExtruderIndex(currentIndex)
-            z: 1
-            Repeater
-            {
-                model: extrudersModel
-                delegate: UM.TabRowButton
-                {
-                    contentItem: Rectangle
-                    {
-                        z: 2
-                        Cura.ExtruderIcon
-                        {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            materialColor: model.color
-                            extruderEnabled: model.enabled
-                            width: parent.height
-                            height: parent.height
-                        }
+        sourceComponent: currentModeIndex == 0 ? recommendedPrintSetup : customPrintSetup
     }
 
-                    background: Rectangle
-                    {
+//    Item
+//    {
+//        id: content
+//        width: parent.width
+//        height: 100
+//////        height: tabBar.height + sidebarContents.height
+////
+//        anchors
+//        {
+//            top: header.bottom
+//            leftMargin: UM.Theme.getSize("default_margin").width
+//            rightMargin: UM.Theme.getSize("default_margin").width
+//        }
+////
+////        Rectangle
+////        {
+////            id: sidebarContents
+////            anchors.top: tabBar.bottom
+////            anchors.bottom: parent.bottom
+////            anchors.left: parent.left
+////            anchors.right: parent.right
+////            height: UM.Theme.getSize("print_setup_widget").height
+////
+////            border.width: UM.Theme.getSize("default_lining").width * 2
+////            border.color: UM.Theme.getColor("action_button_border")
+////        }
+//    }
 
+    Rectangle
+    {
+        id: buttonsSeparator
+
+        anchors.top: loader.bottom
         width: parent.width
-                        z: 1
-                        border.width: UM.Theme.getSize("default_lining").width * 2
-                        border.color: UM.Theme.getColor("action_button_border")
-
-                        visible:
-                        {
-                            return index == tabBar.currentIndex
-                        }
-
-                        // overlap bottom border
-                        Rectangle
-                        {
-                            width: parent.width - UM.Theme.getSize("default_lining").width * 4
-                            height: UM.Theme.getSize("default_lining").width * 4
-                            anchors.bottom: parent.bottom
-                            anchors.bottomMargin: - (UM.Theme.getSize("default_lining").width * 2)
-                            anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
-                            anchors.left: parent.left
-
-                        }
-                    }
-                }
-            }
-        }
-
-        Rectangle
-        {
-            id: sidebarContents
-            anchors.top: tabBar.bottom
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: UM.Theme.getSize("print_setup_widget").height
-
-            border.width: UM.Theme.getSize("default_lining").width * 2
-            border.color: UM.Theme.getColor("action_button_border")
-
-            RecommendedPrintSetup
-            {
-                anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
-                anchors.fill: parent
-                visible: currentModeIndex != 1
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
-            }
-
-            CustomPrintSetup
-            {
-                anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
-                anchors.bottomMargin: 2 //don't overlap bottom border
-                anchors.fill: parent
-                visible: currentModeIndex == 1
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
-            }
-        }
+        height: UM.Theme.getSize("default_lining").height
+        color: UM.Theme.getColor("lining")
     }
 
     Item
     {
-        id: footerControll
-        anchors.top: popupItemContent.bottom
-        anchors.topMargin: UM.Theme.getSize("narrow_margin").height * 2
-        width: parent.width
-        height: settingControlButton.height + UM.Theme.getSize("default_lining").height * 4
-        Rectangle
+        id: buttonRow
+        height: childrenRect.height
+
+        // The buttonsSeparator is inside the buttonRow. This is to avoid some weird behaviours with the scroll bar.
+        anchors
         {
-            width: parent.width
-            height: UM.Theme.getSize("default_lining").height
-            color: UM.Theme.getColor("action_button_border")
+            top: buttonsSeparator.top
+            left: parent.left
+            right: parent.right
         }
 
-        Cura.ActionButton
+        Cura.SecondaryButton
         {
-            id: settingControlButton
+            anchors.left: parent.left
             leftPadding: UM.Theme.getSize("default_margin").width
             rightPadding: UM.Theme.getSize("default_margin").width
-            height: UM.Theme.getSize("action_panel_button").height
-            text: catalog.i18nc("@button", "Custom")
-            color: UM.Theme.getColor("secondary")
-            hoverColor: UM.Theme.getColor("secondary")
-            textColor: UM.Theme.getColor("primary")
-            textHoverColor: UM.Theme.getColor("text")
-            iconSourceRight: UM.Theme.getIcon("arrow_right")
-            width: UM.Theme.getSize("print_setup_action_button").width
-            fixedWidthMode: true
-            visible: currentModeIndex == 0
-            anchors
-            {
-                top: parent.top
-                topMargin: UM.Theme.getSize("narrow_margin").height * 2
-                bottomMargin: UM.Theme.getSize("narrow_margin").height * 2
-                right: parent.right
-                rightMargin: UM.Theme.getSize("narrow_margin").height
-            }
-
-            onClicked: currentModeIndex = 1
-        }
-
-        Cura.ActionButton
-        {
-            height: UM.Theme.getSize("action_panel_button").height
             text: catalog.i18nc("@button", "Recommended")
-            color: UM.Theme.getColor("secondary")
-            hoverColor: UM.Theme.getColor("secondary")
-            textColor: UM.Theme.getColor("primary")
-            textHoverColor: UM.Theme.getColor("text")
-            iconSource: UM.Theme.getIcon("arrow_left")
-            width: UM.Theme.getSize("print_setup_action_button").width
-            fixedWidthMode: true
             visible: currentModeIndex == 1
-            anchors
-            {
-                top: parent.top
-                topMargin: UM.Theme.getSize("narrow_margin").height * 2
-                bottomMargin: UM.Theme.getSize("narrow_margin").height * 2
-                left: parent.left
-                leftMargin: UM.Theme.getSize("narrow_margin").height
-            }
-
-            MouseArea {
-                anchors.fill: parent
             onClicked: currentModeIndex = 0
         }
+
+        Cura.SecondaryButton
+        {
+            anchors.right: parent.right
+            leftPadding: UM.Theme.getSize("default_margin").width
+            rightPadding: UM.Theme.getSize("default_margin").width
+            text: catalog.i18nc("@button", "Custom")
+            visible: currentModeIndex == 0
+            onClicked: currentModeIndex = 1
         }
     }
 
+    Component
+    {
+        id: recommendedPrintSetup
+        RecommendedPrintSetup
+        {
+            onShowTooltip: base.showTooltip(item, location, text)
+            onHideTooltip: base.hideTooltip()
+        }
+    }
+
+    Component
+    {
+        id: customPrintSetup
+        CustomPrintSetup
+        {
+            onShowTooltip: base.showTooltip(item, location, text)
+            onHideTooltip: base.hideTooltip()
+        }
+    }
+
+
     Component.onCompleted:
     {
+        print(height, "!!!!!!!!!!!!!!!!!!!!!!!")
         var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
 
         if(index != null && !isNaN(index))

resources/qml/PrintSetupSelector/PrintSetupSelectorHeader.qml

@@ -10,7 +10,7 @@ import Cura 1.0 as Cura
 
 RowLayout
 {
-    Cura.IconLabel
+    Cura.IconWithText
     {
         source: UM.Theme.getIcon("category_layer_height")
         text: Cura.MachineManager.activeStack ? Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm" : ""
@@ -24,7 +24,7 @@ RowLayout
         }
     }
 
-    Cura.IconLabel
+    Cura.IconWithText
     {
         source: UM.Theme.getIcon("category_infill")
         text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
@@ -38,7 +38,7 @@ RowLayout
         }
     }
 
-    Cura.IconLabel
+    Cura.IconWithText
     {
         source: UM.Theme.getIcon("category_support")
         text: supportEnabled.properties.value == "True" ? enabledText : disabledText
@@ -53,7 +53,7 @@ RowLayout
         }
     }
 
-    Cura.IconLabel
+    Cura.IconWithText
     {
         source: UM.Theme.getIcon("category_adhesion")
         text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText

resources/qml/PrintSetupSelector/RecommendedPrintSetup.qml

@@ -4,7 +4,6 @@
 import QtQuick 2.7
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.3
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
@@ -15,6 +14,7 @@ Item
 
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
+    height: childrenRect.height
 
     property Action configureSettings
 
@@ -26,20 +26,6 @@ Item
         name: "cura"
     }
 
-    ScrollView
-    {
-        visible: Cura.MachineManager.activeMachineName != "" // If no printers added then the view is invisible
-        anchors.fill: parent
-        style: UM.Theme.styles.scrollview
-        flickableItem.flickableDirection: Flickable.VerticalFlick
-
-        Item
-        {
-            width: childrenRect.width
-            height: childrenRect.height
-
-            anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
     //
     // Quality profile
     //
@@ -188,7 +174,7 @@ Item
             }
         }
 
-                Cura.IconLabel
+        Cura.IconWithText
         {
             id: qualityRowTitle
             source: UM.Theme.getIcon("category_layer_height")
@@ -496,7 +482,7 @@ Item
 
         width: Math.round(UM.Theme.getSize("print_setup_widget").width * .45) - UM.Theme.getSize("thick_margin").width
 
-                Cura.IconLabel
+        Cura.IconWithText
         {
             id: infillLabel
             source: UM.Theme.getIcon("category_infill")
@@ -818,7 +804,7 @@ Item
     //
     //  Enable support
     //
-            Cura.IconLabel
+    Cura.IconWithText
     {
         id: enableSupportLabel
         visible: enableSupportCheckBox.visible
@@ -942,7 +928,7 @@ Item
 
     }
 
-            Cura.IconLabel
+    Cura.IconWithText
     {
         id: adhesionHelperLabel
         visible: adhesionCheckBox.visible
@@ -1107,8 +1093,6 @@ Item
         watchedProperties: [ "value" ]
         storeIndex: 0
     }
-        }
-    }
 
     function populateExtruderModel()
     {

resources/qml/qmldir

@@ -9,6 +9,7 @@ MaterialMenu 1.0 MaterialMenu.qml
 NozzleMenu 1.0 NozzleMenu.qml
 ActionPanelWidget 1.0 ActionPanelWidget.qml
 IconLabel 1.0 IconLabel.qml
+IconWithText 1.0 IconWithText.qml
 OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
 ExpandableComponent 1.0 ExpandableComponent.qml
 PrinterTypeLabel 1.0 PrinterTypeLabel.qml

resources/themes/cura-light/theme.json

@@ -372,6 +372,7 @@
         "print_setup_mode_toggle": [0.0, 2.0],
         "print_setup_item": [0.0, 2.0],
         "print_setup_extruder_box": [0.0, 6.0],
+        "print_setup_widget_header": [0.0, 3.0],
 
         "configuration_selector_mode_tabs": [0.0, 3.0],