Add extruder button bar that shows icons for each extruder in a horizontal row 💪

Make ExtruderButton more generic by moving functionality out.

Remove background color from ToolbarButton and add that background color to the Toolbar.qml.

Fix Toolbar border being created by overlapping rectangles instead of using border

Add scaling options for ToolBarButtons icon

CURA-9793

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingItem.qml

@@ -12,12 +12,12 @@ import Cura 1.7 as Cura
 Item
 {
     width: parent.width
-    height: UM.Theme.getSize("section_header").height
+    Layout.preferredHeight: childrenRect.height
+    Layout.minimumHeight: UM.Theme.getSize("section_header").height
     Layout.fillWidth: true
 
     property alias settingControl: settingContainer.children
     property alias settingName: settingLabel.text
-    property int leftColumnWidth: Math.floor(width * 0.35)
 
     UM.Label
     {

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingSection.qml

@@ -17,7 +17,7 @@ Item
     property alias enableSectionChecked: enableSectionSwitch.checked
     property alias enableSectionEnabled: enableSectionSwitch.enabled
     property var enableSectionClicked: { return }
-    property int leftColumnWidth: width / 2
+    property int leftColumnWidth: Math.floor(width * 0.35)
     property var toolTipText: ""
 
     property alias contents: settingColumn.children

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
 import UM 1.5 as UM
-import Cura 1.0 as Cura
+import Cura 1.6 as Cura
 
 
 RecommendedSettingSection
@@ -57,7 +57,9 @@ RecommendedSettingSection
         RecommendedSettingItem
         {
             settingName: catalog.i18nc("@action:label", "Print with")
-            settingControl: Rectangle { color: "red"; width: 10; height:10 }
+            settingControl: Cura.ExtruderSelectorBar { model: extruderModel }
+
+            Layout.preferredHeight: childrenRect.height
 //            ComboBox
 //        {
 //            id: supportExtruderCombobox
@@ -242,7 +244,7 @@ RecommendedSettingSection
         RecommendedSettingItem
         {
             settingName: catalog.i18nc("@action:label", "Placement")
-            settingControl: Rectangle { color: "red"; width: 10; height:10 }
+            settingControl: Rectangle { color: "green"; width: 50; height:50 }
         }
     ]
 

resources/qml/Toolbar.qml

@@ -5,7 +5,7 @@ import QtQuick 2.2
 import QtQuick.Controls 2.3
 
 import UM 1.5 as UM
-import Cura 1.0 as Cura
+import Cura 1.7 as Cura
 
 Item
 {
@@ -29,13 +29,13 @@ Item
             anchors
             {
                 fill: toolButtons
-                leftMargin: -radius - border.width
+                leftMargin: -radius - border.width // Removes border on left side
-                rightMargin: -border.width
-                topMargin: -border.width
-                bottomMargin: -border.width
             }
             radius: UM.Theme.getSize("default_radius").width
-            color: UM.Theme.getColor("lining")
+            color: UM.Theme.getColor("toolbar_background")
+            border.color: UM.Theme.getColor("lining")
+            border.width: UM.Theme.getSize("default_lining").width
+
         }
 
         Column
@@ -111,13 +111,12 @@ Item
             anchors
             {
                 fill: extruderButtons
-                leftMargin: -radius - border.width
+                leftMargin: -radius - border.width // Removes border on left side
-                rightMargin: -border.width
-                topMargin: -border.width
-                bottomMargin: -border.width
             }
             radius: UM.Theme.getSize("default_radius").width
-            color: UM.Theme.getColor("lining")
+            color: UM.Theme.getColor("toolbar_background")
+            border.color: UM.Theme.getColor("lining")
+            border.width: UM.Theme.getSize("default_lining").width
             visible: extrudersModel.items.length > 1
         }
 
@@ -135,11 +134,20 @@ Item
                 height: childrenRect.height
                 model: extrudersModel.items.length > 1 ? extrudersModel : 0
 
-                delegate: ExtruderButton
+                delegate: Cura.ExtruderButton
                 {
                     extruder: model
                     isTopElement: extrudersModel.getItem(0).id == model.id
                     isBottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id
+                    text: catalog.i18ncp("@label %1 is filled in with the name of an extruder", "Print Selected Model with %1", "Print Selected Models with %1", UM.Selection.selectionCount).arg(extruder.name)
+                    checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
+                    enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
+
+                    onClicked:
+                    {
+                        forceActiveFocus() //First grab focus, so all the text fields are updated
+                        CuraActions.setExtruderForSelection(extruder.id)
+                    }
                 }
             }
         }

resources/qml/Widgets/ExtruderSelectorBar.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.3
+
+import UM 1.5 as UM
+import Cura 1.5 as Cura
+
+Row
+{
+    id: extruderSelectionBar
+    property alias model: extruderButtonRepeater.model
+
+    spacing: 0
+    width: parent.width
+    height: childrenRect.height
+
+    Repeater
+    {
+        id: extruderButtonRepeater
+
+        delegate: Item
+        {
+            width: {
+                const maximum_width = Math.floor(extruderSelectionBar.width / extruderButtonRepeater.count);
+                return Math.min(UM.Theme.getSize("large_button").width, maximum_width);
+            }
+
+            height: childrenRect.height
+
+            Cura.ExtruderButton
+            {
+                extruder: model
+                isTopElement: extrudersModel.getItem(0).id == model.id
+                isBottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id
+                iconScale: 0.6
+                buttonSize: UM.Theme.getSize("large_button").width
+            }
+        }
+    }
+}

resources/qml/qmldir

@@ -38,6 +38,8 @@ ScrollView          1.0 ScrollView.qml
 Menu                1.0 Menu.qml
 MenuItem            1.0 MenuItem.qml
 MenuSeparator       1.0 MenuSeparator.qml
+ExtruderSelectorBar 1.6 ExtruderSelectorBar.qml
+ExtruderButton      1.6 ExtruderButton.qml
 
 
 # Cura/MachineSettings