Restyle printer settings dropdown

CURA-5941

plugins/PreviewStage/PreviewMenu.qml

@@ -3,7 +3,7 @@
 
 import QtQuick 2.7
 
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.3
 
 import UM 1.3 as UM
 import Cura 1.1 as Cura

resources/qml/ActionButton.qml

@@ -12,6 +12,7 @@ Button
     id: button
     property alias cursorShape: mouseArea.cursorShape
     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
@@ -29,7 +30,8 @@ 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
 
-    contentItem: Row
+    width: buttonIcon.width + buttonText.width + buttonIconRight.width
+    contentItem: Item
     {
         UM.RecolorImage
         {
@@ -57,6 +59,20 @@ 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/MachineSelector.qml

@@ -2,7 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.3
 import QtQuick.Controls.Styles 1.1
 import QtQuick.Layouts 1.1
 

resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml

@@ -4,7 +4,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.11
+import QtQuick.Layouts 1.3
 
 import QtQuick.Controls 1.1 as OldControls
 

resources/qml/PrintSetupSelector.qml

@@ -28,8 +28,15 @@ Cura.ExpandableComponent
     height: childrenRect.height
     iconSource: UM.Theme.getIcon("pencil")
 
+    popupPadding : 0
+
     onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
 
+    Component.onCompleted:
+    {
+        popupItemWrapper.width = base.width
+    }
+
     UM.I18nCatalog
     {
         id: catalog
@@ -109,142 +116,242 @@ Cura.ExpandableComponent
         }
     }
 
-    popupItem: Item
+
+    Cura.ExtrudersModel
     {
-        height: settingsModeSelection.height + sidebarContents.height + 2 * UM.Theme.getSize("default_margin").height
+        id: extrudersModel
-        width: UM.Theme.getSize("print_setup_widget").width
+    }
-        ListView
+
+    popupItem: Rectangle
     {
-            // Settings mode selection toggle
+        property var total_height: popupItemHeader.height + popupItemContent.height + 10 + separator_footer.height
-            id: settingsModeSelection
+        id: popupItemWrapper
-            model: modesListModel
+        height: total_height
-            height: UM.Theme.getSize("print_setup_mode_toggle").height
+
-            visible: !hideSettings
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("lining")
+
+        Item
+        {
+            id: popupItemHeader
+            height: 36
 
             anchors
             {
+                top: parent.top
                 right: parent.right
                 left: parent.left
-                margins: UM.Theme.getSize("thick_margin").width
             }
 
-            ButtonGroup
+            Label
             {
-                id: modeMenuGroup
+                id: popupItemHeaderText
-            }
+                text: catalog.i18nc("@label", "Print settings");
-
+                font: UM.Theme.getFont("default")
-            delegate: Button
+                verticalAlignment: Text.AlignVCenter
-            {
+                color: UM.Theme.getColor("text")
-                id: control
+                height: parent.height
-
+                anchors.topMargin: UM.Theme.getSize("sidebar_margin").height
-                height: settingsModeSelection.height
+                anchors.bottomMargin: UM.Theme.getSize("sidebar_margin").height
-                width: Math.round(parent.width / 2)
-
                 anchors.left: parent.left
-                anchors.leftMargin: model.index * Math.round(settingsModeSelection.width / 2)
+                anchors.leftMargin: UM.Theme.getSize("print_setup_selector_margin").height
-                anchors.verticalCenter: parent.verticalCenter
-
-                ButtonGroup.group: modeMenuGroup
-
-                checkable: true
-                checked: base.currentModeIndex == index
-                onClicked: base.currentModeIndex = index
-
-                onHoveredChanged:
-                {
-                    if (hovered)
-                    {
-                        tooltipDelayTimer.item = settingsModeSelection
-                        tooltipDelayTimer.text = model.tooltipText
-                        tooltipDelayTimer.start()
             }
-                    else
+
+            Rectangle
             {
-                        tooltipDelayTimer.stop()
+                width: parent.width
-                        base.hideTooltip()
+                height: UM.Theme.getSize("default_lining").height
+                anchors.top: popupItemHeaderText.bottom
+                color: UM.Theme.getColor("action_button_border")
+
+
             }
         }
 
+        Rectangle
+        {
+            id: popupItemContent
+            width: parent.width
+            height: tabBar.height + sidebarContents.height
+            anchors
+            {
+                top: popupItemHeader.bottom
+                topMargin: 10
+                right: parent.right
+                left: parent.left
+                leftMargin: 5
+                rightMargin: 5
+            }
+
+
+            TabBar
+            {
+                id: tabBar
+                onCurrentIndexChanged: Cura.ExtruderManager.setActiveExtruderIndex(currentIndex)
+                width: parent.width
+                height: UM.Theme.getSize("print_setup_tap_bar").width
+                z: 1
+                Repeater
+                {
+                    id: extruder_model_repeater
+                    model: extrudersModel
+
+                    delegate: TabButton
+                    {
+                        z: 2
+                        width: ListView.view != null ?  Math.round(ListView.view.width / extrudersModel.rowCount()): 0
+                        implicitHeight: parent.height
+
+                        contentItem: Rectangle
+                        {
+                            z: 2
+                            Cura.ExtruderIcon
+                            {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                materialColor: model.color
+                                extruderEnabled: model.enabled
+                                width: parent.height
+                                height: parent.height
+                            }
+
+                        }
+
                         background: Rectangle
                         {
-                    border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
-                    border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : control.hovered ? UM.Theme.getColor("action_button_hovered_border") : UM.Theme.getColor("action_button_border")
 
-                    // For some reason, QtQuick decided to use the color of the background property as text color for the contentItem, so here it is
+                            width: parent.width
-                    color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
+                            z: 1
+                            border.width: UM.Theme.getSize("default_lining").width * 2
+                            border.color: UM.Theme.getColor("action_button_border")
+
+                            visible:
+                            {
+                                return index == tabBar.currentIndex
                             }
 
-                contentItem: Label
+                            // overlap bottom border
+                            Rectangle
                             {
-                    text: model.text
+                                width: parent.width - 4
-                    font: UM.Theme.getFont("default")
+                                height: 4
-                    horizontalAlignment: Text.AlignHCenter
+                                anchors.bottom: parent.bottom
-                    verticalAlignment: Text.AlignVCenter
+                                anchors.bottomMargin: -2
-                    renderType: Text.NativeRendering
+                                anchors.leftMargin: 2
-                    elide: Text.ElideRight
+                                anchors.left: parent.left
-                    color:
+
-                    {
-                        if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text")
                             }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text")
-                        }
-                        return UM.Theme.getColor("action_button_text")
                         }
                     }
                 }
             }
 
-        Item
+            Rectangle
             {
                 id: sidebarContents
-            anchors.top: settingsModeSelection.bottom
+                anchors.top: tabBar.bottom
-            anchors.topMargin: UM.Theme.getSize("thick_margin").height
                 anchors.left: parent.left
                 anchors.right: parent.right
                 height: UM.Theme.getSize("print_setup_widget").height
 
-            visible: !hideSettings
 
-            // We load both of them at once (instead of using a loader) because the advanced sidebar can take
+                border.width: UM.Theme.getSize("default_lining").width * 2
-            // quite some time to load. So in this case we sacrifice memory for speed.
+                border.color: UM.Theme.getColor("action_button_border")
+
+                SidebarSimple
+                {
+                    anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
+                    id: sidebar_simple_id
+                    anchors.fill: parent
+                    visible: currentModeIndex != 1
+                    onShowTooltip: base.showTooltip(item, location, text)
+                    onHideTooltip: base.hideTooltip()
+                }
+
                 SidebarAdvanced
                 {
+                    anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
+                    anchors.bottomMargin: 2 //does not overlap bottom border
                     anchors.fill: parent
                     visible: currentModeIndex == 1
                     onShowTooltip: base.showTooltip(item, location, text)
                     onHideTooltip: base.hideTooltip()
                 }
 
-            SidebarSimple
-            {
-                anchors.fill: parent
-                visible: currentModeIndex != 1
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
             }
         }
 
-        // Setting mode: Recommended or Custom
+
-        ListModel
+        Item
         {
-            id: modesListModel
+            id: separator_footer
+            anchors.top: popupItemContent.bottom
+            anchors.topMargin: 10
+            width: parent.width
+            height: settingControlButton.height + 4
+
+            Rectangle
+            {
+                width: parent.width
+                height: UM.Theme.getSize("default_lining").height
+                color: UM.Theme.getColor("action_button_border")
             }
 
+            Cura.ActionButton
+            {
+                id: settingControlButton
+
+                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: 10
+                    bottomMargin: 10
+                    right: parent.right
+                    rightMargin: 5
+                }
+
+                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("print_setup_selector_margin").height * 2
+                    bottomMargin: UM.Theme.getSize("print_setup_selector_margin").height * 2
+                    left: parent.left
+                    leftMargin: UM.Theme.getSize("print_setup_selector_margin").height
+                }
+
+                onClicked: currentModeIndex = 0
+            }
+        }
         Component.onCompleted:
         {
-            modesListModel.append({
-                text: catalog.i18nc("@title:tab", "Recommended"),
-                tooltipText: "<b>%1</b><br/><br/>%2".arg(catalog.i18nc("@tooltip:title", "Recommended Print Setup")).arg(catalog.i18nc("@tooltip", "Print with the recommended settings for the selected printer, material and quality."))
-            })
-            modesListModel.append({
-                text: catalog.i18nc("@title:tab", "Custom"),
-                tooltipText: "<b>%1</b><br/><br/>%2".arg(catalog.i18nc("@tooltip:title", "Custom Print Setup")).arg(catalog.i18nc("@tooltip", "Print with finegrained control over every last bit of the slicing process."))
-            })
-
             var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
 
             if(index != null && !isNaN(index))

resources/themes/cura-light/theme.json

@@ -528,6 +528,11 @@
         "monitor_thick_lining": [0.16, 0.16],
         "monitor_corner_radius": [0.3, 0.3],
         "monitor_shadow_radius": [0.4, 0.4],
-        "monitor_shadow_offset": [0.15, 0.15]
+        "monitor_shadow_offset": [0.15, 0.15],
+
+        "print_setup_selector_margin": [0.5, 0.5],
+        "print_setup_action_button": [13, 5],
+        "print_setup_tap_bar": [4, 4],
+        "print_setup_content_top_margin": [3, 3]
     }
 }