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
-        height: UM.Theme.getSize("print_setup_big_dropdown").height
+        width: UM.Theme.getSize("print_setup_big_item").width
+        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