Add tabs for select the extruder in the custom print setup.

Align some elements beneath the tabs.

Contributes to CURA-5941.

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -13,9 +13,15 @@ Item
     id: customPrintSetup
 
     // TODO: Hardcoded now but UX has to decide about the height of this item
-    height: 500
+    height: 480
 
     property real padding: UM.Theme.getSize("default_margin").width
+    property bool multipleExtruders: extrudersModel.count > 1
+
+    Cura.ExtrudersModel
+    {
+        id: extrudersModel
+    }
 
     // Profile selector row
     GlobalProfileSelector
@@ -32,11 +38,64 @@ Item
         }
     }
 
+    UM.TabRow
+    {
+        id: tabBar
+
+        visible: multipleExtruders  // The tab row is only visible when there are more than 1 extruder
+
+        anchors
+        {
+            top: globalProfileRow.bottom
+            topMargin: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+        }
+
+        currentIndex: Math.max(Cura.ExtruderManager.activeExtruderIndex, 0)
+
+        Repeater
+        {
+            id: repeater
+            model: extrudersModel
+            delegate: UM.TabRowButton
+            {
+                contentItem: Item
+                {
+                    Cura.ExtruderIcon
+                    {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        materialColor: model.color
+                        extruderEnabled: model.enabled
+                    }
+                }
+                onClicked:
+                {
+                    Cura.ExtruderManager.setActiveExtruderIndex(tabBar.currentIndex)
+                }
+            }
+        }
+
+        // When the model of the extruders is rebuilt, the list of extruders is briefly emptied and rebuilt.
+        // This causes the currentIndex of the tab to be in an invalid position which resets it to 0.
+        // Therefore we need to change it back to what it was: The active extruder index.
+        Connections
+        {
+            target: repeater.model
+            onModelChanged:
+            {
+                tabBar.currentIndex = Math.max(Cura.ExtruderManager.activeExtruderIndex, 0)
+            }
+        }
+    }
+
     Cura.SettingView
     {
         anchors
         {
-            top: globalProfileRow.bottom
+            top: tabBar.visible ? tabBar.bottom : globalProfileRow.bottom
             topMargin: UM.Theme.getSize("default_margin").height
             left: parent.left
             leftMargin: parent.padding

resources/qml/PrintSetupSelector/Custom/GlobalProfileSelector.qml

@@ -35,8 +35,8 @@ Item
         id: globalProfileSelection
 
         text: generateActiveQualityText()
-        width: UM.Theme.getSize("print_setup_big_dropdown").width
+        width: UM.Theme.getSize("print_setup_big_item").width
-        height: UM.Theme.getSize("print_setup_big_dropdown").height
+        height: UM.Theme.getSize("print_setup_big_item").height
         anchors
         {
             top: parent.top

resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml

@@ -69,4 +69,13 @@ Item
             labelColumnWidth: parent.firstColumnWidth
         }
     }
+
+    UM.SettingPropertyProvider
+    {
+        id: extrudersEnabledCount
+        containerStack: Cura.MachineManager.activeMachine
+        key: "extruders_enabled_count"
+        watchedProperties: [ "value" ]
+        storeIndex: 0
+    }
 }

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -76,7 +76,7 @@ Item
         {
             id: supportExtruderCombobox
 
-            height: UM.Theme.getSize("print_setup_big_dropdown").height
+            height: UM.Theme.getSize("print_setup_big_item").height
             anchors
             {
                 left: enableSupportCheckBox.right
@@ -171,15 +171,6 @@ Item
         storeIndex: 0
     }
 
-    UM.SettingPropertyProvider
-    {
-        id: extrudersEnabledCount
-        containerStack: Cura.MachineManager.activeMachine
-        key: "extruders_enabled_count"
-        watchedProperties: [ "value" ]
-        storeIndex: 0
-    }
-
     UM.SettingPropertyProvider
     {
         id: supportExtruderNr

resources/qml/Settings/SettingView.qml

@@ -19,70 +19,22 @@ Item
     property Action configureSettings
     property bool findingSettings
 
-    ToolButton
-    {
-        id: settingVisibilityMenu
-
-        property var toolButtonIconColor: UM.Theme.getColor("setting_category_text")
-
-        width: height
-        height: UM.Theme.getSize("setting_control").height
-        anchors
-        {
-            topMargin: UM.Theme.getSize("thick_margin").height
-            left: filterContainer.right
-            leftMargin: UM.Theme.getSize("default_margin").width
-        }
-        style: ButtonStyle
-        {
-            background: Item {
-                UM.RecolorImage {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.round(parent.width * 0.6)
-                    height: Math.round(parent.height * 0.6)
-                    sourceSize.width: width
-                    sourceSize.height: width
-                    color: settingVisibilityMenu.toolButtonIconColor
-                    source: UM.Theme.getIcon("settings")
-                }
-            }
-            label: Label{}
-        }
-        menu: SettingVisibilityPresetsMenu
-        {
-            onShowAllSettings:
-            {
-                definitionsModel.setAllVisible(true);
-                filter.updateDefinitionModel();
-            }
-        }
-
-        MouseArea
-        {
-            anchors.fill: parent
-            hoverEnabled: true
-            acceptedButtons: Qt.RightButton
-            onEntered: settingVisibilityMenu.toolButtonIconColor = UM.Theme.getColor("setting_control_button_hover")
-            onExited: settingVisibilityMenu.toolButtonIconColor = UM.Theme.getColor("setting_category_text")
-        }
-    }
-
     Rectangle
     {
         id: filterContainer
         visible: true
 
+        radius: UM.Theme.getSize("setting_control_radius").width
         border.width: Math.round(UM.Theme.getSize("default_lining").width)
         border.color:
         {
-            if(hoverMouseArea.containsMouse || clearFilterButton.containsMouse)
+            if (hoverMouseArea.containsMouse || clearFilterButton.containsMouse)
             {
-                return UM.Theme.getColor("setting_control_border_highlight");
+                return UM.Theme.getColor("setting_control_border_highlight")
             }
             else
             {
-                return UM.Theme.getColor("setting_control_border");
+                return UM.Theme.getColor("setting_control_border")
             }
         }
 
@@ -90,13 +42,12 @@ Item
 
         anchors
         {
-            topMargin: UM.Theme.getSize("thick_margin").height
+            top: parent.top
             left: parent.left
-            leftMargin: UM.Theme.getSize("default_margin").width
+            right: settingVisibilityMenu.left
-            right: scrollView.right
+            rightMargin: UM.Theme.getSize("default_margin").width
-            rightMargin: Math.floor(UM.Theme.getSize("wide_margin").width * 2)
         }
-        height: UM.Theme.getSize("setting_control").height
+        height: UM.Theme.getSize("print_setup_big_item").height
         Timer
         {
             id: settingsSearchTimer
@@ -108,7 +59,7 @@ Item
 
         TextField
         {
-            id: filter;
+            id: filter
             height: parent.height
             anchors.left: parent.left
             anchors.right: clearFilterButton.left
@@ -118,9 +69,9 @@ Item
 
             style: TextFieldStyle
             {
-                textColor: UM.Theme.getColor("setting_control_text");
+                textColor: UM.Theme.getColor("setting_control_text")
                 placeholderTextColor: UM.Theme.getColor("setting_filter_field")
-                font: UM.Theme.getFont("default");
+                font: UM.Theme.getFont("default_italic")
                 background: Item {}
             }
 
@@ -134,38 +85,38 @@ Item
 
             onEditingFinished:
             {
-                definitionsModel.filter = {"i18n_label": "*" + text};
+                definitionsModel.filter = {"i18n_label": "*" + text}
-                findingSettings = (text.length > 0);
+                findingSettings = (text.length > 0)
-                if(findingSettings != lastFindingSettings)
+                if (findingSettings != lastFindingSettings)
                 {
-                    updateDefinitionModel();
+                    updateDefinitionModel()
-                    lastFindingSettings = findingSettings;
+                    lastFindingSettings = findingSettings
                 }
             }
 
             Keys.onEscapePressed:
             {
-                filter.text = "";
+                filter.text = ""
             }
 
             function updateDefinitionModel()
             {
-                if(findingSettings)
+                if (findingSettings)
                 {
-                    expandedCategories = definitionsModel.expanded.slice();
+                    expandedCategories = definitionsModel.expanded.slice()
-                    definitionsModel.expanded = [""]; // keep categories closed while to prevent render while making settings visible one by one
+                    definitionsModel.expanded = [""]  // keep categories closed while to prevent render while making settings visible one by one
-                    definitionsModel.showAncestors = true;
+                    definitionsModel.showAncestors = true
-                    definitionsModel.showAll = true;
+                    definitionsModel.showAll = true
-                    definitionsModel.expanded = ["*"];
+                    definitionsModel.expanded = ["*"]
                 }
                 else
                 {
-                    if(expandedCategories)
+                    if (expandedCategories)
                     {
-                        definitionsModel.expanded = expandedCategories;
+                        definitionsModel.expanded = expandedCategories
                     }
-                    definitionsModel.showAncestors = false;
+                    definitionsModel.showAncestors = false
-                    definitionsModel.showAll = false;
+                    definitionsModel.showAll = false
                 }
             }
         }
@@ -197,8 +148,45 @@ Item
 
             onClicked:
             {
-                filter.text = "";
+                filter.text = ""
-                filter.forceActiveFocus();
+                filter.forceActiveFocus()
+            }
+        }
+    }
+
+    ToolButton
+    {
+        id: settingVisibilityMenu
+
+        anchors
+        {
+            top: filterContainer.top
+            bottom: filterContainer.bottom
+            right: parent.right
+        }
+
+        style: ButtonStyle
+        {
+            background: Item {
+                UM.RecolorImage {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: UM.Theme.getSize("standard_arrow").width
+                    height: UM.Theme.getSize("standard_arrow").height
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    color: control.enabled ? UM.Theme.getColor("setting_category_text") : UM.Theme.getColor("setting_category_disabled_text")
+                    source: UM.Theme.getIcon("menu")
+                }
+            }
+            label: Label{}
+        }
+        menu: SettingVisibilityPresetsMenu
+        {
+            onShowAllSettings:
+            {
+                definitionsModel.setAllVisible(true)
+                filter.updateDefinitionModel()
             }
         }
     }
@@ -206,33 +194,35 @@ Item
     ScrollView
     {
         id: scrollView
-        anchors.top: filterContainer.bottom;
+        anchors
-        anchors.bottom: parent.bottom;
+        {
-        anchors.right: parent.right;
+            top: filterContainer.bottom
-        anchors.left: parent.left;
+            topMargin: UM.Theme.getSize("default_margin").height
-        anchors.topMargin: UM.Theme.getSize("thick_margin").height
+            bottom: parent.bottom
-        anchors.rightMargin: UM.Theme.getSize("narrow_margin").height / 3
+            right: parent.right
+            left: parent.left
+        }
 
-        style: UM.Theme.styles.scrollview;
+        style: UM.Theme.styles.scrollview
-        flickableItem.flickableDirection: Flickable.VerticalFlick;
+        flickableItem.flickableDirection: Flickable.VerticalFlick
-        __wheelAreaScrollSpeed: 75; // Scroll three lines in one scroll event
+        __wheelAreaScrollSpeed: 75  // Scroll three lines in one scroll event
 
         ListView
         {
             id: contents
-            spacing: Math.round(UM.Theme.getSize("default_lining").height);
+            spacing: Math.round(UM.Theme.getSize("default_lining").height)
-            cacheBuffer: 1000000;   // Set a large cache to effectively just cache every list item.
+            cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
 
             model: UM.SettingDefinitionsModel
             {
-                id: definitionsModel;
+                id: definitionsModel
                 containerId: Cura.MachineManager.activeDefinitionId
                 visibilityHandler: UM.SettingPreferenceVisibilityHandler { }
                 exclude: ["machine_settings", "command_line_settings", "infill_mesh", "infill_mesh_order", "cutting_mesh", "support_mesh", "anti_overhang_mesh"] // TODO: infill_mesh settigns are excluded hardcoded, but should be based on the fact that settable_globally, settable_per_meshgroup and settable_per_extruder are false.
                 expanded: CuraApplication.expandedCategories
                 onExpandedChanged:
                 {
-                    if(!findingSettings)
+                    if (!findingSettings)
                     {
                         // Do not change expandedCategories preference while filtering settings
                         // because all categories are expanded while filtering
@@ -248,7 +238,7 @@ Item
             {
                 id: delegate
 
-                width: Math.round(UM.Theme.getSize("print_setup_widget").width);
+                width: scrollView.width
                 height: provider.properties.enabled == "True" ? UM.Theme.getSize("section").height : - contents.spacing
                 Behavior on height { NumberAnimation { duration: 100 } }
                 opacity: provider.properties.enabled == "True" ? 1 : 0
@@ -318,17 +308,17 @@ Item
                         // machine gets changed.
                         var activeMachineId = Cura.MachineManager.activeMachineId;
 
-                        if(!model.settable_per_extruder)
+                        if (!model.settable_per_extruder)
                         {
                             //Not settable per extruder or there only is global, so we must pick global.
                             return activeMachineId;
                         }
-                        if(inheritStackProvider.properties.limit_to_extruder != null && inheritStackProvider.properties.limit_to_extruder >= 0)
+                        if (inheritStackProvider.properties.limit_to_extruder != null && inheritStackProvider.properties.limit_to_extruder >= 0)
                         {
                             //We have limit_to_extruder, so pick that stack.
                             return Cura.ExtruderManager.extruderIds[String(inheritStackProvider.properties.limit_to_extruder)];
                         }
-                        if(Cura.ExtruderManager.activeExtruderStackId)
+                        if (Cura.ExtruderManager.activeExtruderStackId)
                         {
                             //We're on an extruder tab. Pick the current extruder.
                             return Cura.ExtruderManager.activeExtruderStackId;
@@ -390,14 +380,14 @@ Item
                     }
                     onSetActiveFocusToNextSetting:
                     {
-                        if(forward == undefined || forward)
+                        if (forward == undefined || forward)
                         {
                             contents.currentIndex = contents.indexWithFocus + 1;
                             while(contents.currentItem && contents.currentItem.height <= 0)
                             {
                                 contents.currentIndex++;
                             }
-                            if(contents.currentItem)
+                            if (contents.currentItem)
                             {
                                 contents.currentItem.item.focusItem.forceActiveFocus();
                             }
@@ -409,7 +399,7 @@ Item
                             {
                                 contents.currentIndex--;
                             }
-                            if(contents.currentItem)
+                            if (contents.currentItem)
                             {
                                 contents.currentItem.item.focusItem.forceActiveFocus();
                             }

resources/themes/cura-light/styles.qml

@@ -495,7 +495,7 @@ QtObject
                     anchors.right: downArrow.left
                     anchors.verticalCenter: parent.verticalCenter
                     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,7 @@
         "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_big_dropdown": [28, 2.5],
+        "print_setup_big_item": [28, 2.5],
         "print_setup_icon": [1.2, 1.2],
 
         "configuration_selector_mode_tabs": [0.0, 3.0],
@@ -425,7 +425,7 @@
         "setting_text_maxwidth": [40.0, 0.0],
 
         "standard_list_lineheight": [1.5, 1.5],
-        "standard_arrow": [0.8, 0.8],
+        "standard_arrow": [1.0, 1.0],
 
         "button": [4, 4],
         "button_icon": [2.5, 2.5],