Updated the look of the extruder buttons

CURA-5785

resources/qml/ExtruderButton.qml

@@ -2,7 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.0
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
@@ -11,65 +11,19 @@ Button
 {
     id: base
 
-    property var extruder;
+    property var extruder
 
     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)
 
-    style: UM.Theme.styles.toolbar_button
-    iconSource: UM.Theme.getIcon("extruder_button")
-
     checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
     enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
 
-    Item
-    {
-        anchors.centerIn: parent
-        width: UM.Theme.getSize("default_margin").width
-        height: UM.Theme.getSize("default_margin").height
-        opacity: !base.enabled ? 0.2 : 1.0
-
-        Label
-        {
-            anchors.centerIn: parent
-            text: index + 1
-            color:
-            {
-                if (base.checked)
-                {
-                    return UM.Theme.getColor("toolbar_button_text_active")
-                }
-                else if(base.hovered)
-                {
-                    return UM.Theme.getColor("toolbar_button_text_hover")
-                }
-                return UM.Theme.getColor("toolbar_button_text")
-            }
-            font: UM.Theme.getFont("default_bold")
-        }
-    }
-
-    // Material colour circle
-    // Only draw the filling colour of the material inside the SVG border.
-    Rectangle
+    background: Item {}
+    contentItem: ExtruderIcon
     {
-        anchors
-        {
-            right: parent.right
-            top: parent.top
-            rightMargin: UM.Theme.getSize("extruder_button_material_margin").width
-            topMargin: UM.Theme.getSize("extruder_button_material_margin").height
-        }
-
-        color: model.color
-
-        width: UM.Theme.getSize("extruder_button_material").width
-        height: UM.Theme.getSize("extruder_button_material").height
-        radius: Math.round(width / 2)
-
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color: UM.Theme.getColor("extruder_button_material_border")
-
-        opacity: !base.enabled ? 0.2 : 1.0
+        width: UM.Theme.getSize("button_icon").width
+        materialColor: model.color
+        property int index: extruder.index
     }
 
     onClicked:

resources/qml/Toolbar.qml

@@ -116,7 +116,12 @@ Item
                 height: childrenRect.height
                 property var _model: Cura.ExtrudersModel { id: extrudersModel }
                 model: _model.items.length > 1 ? _model : 0
-                ExtruderButton { extruder: model }
+                ExtruderButton
+                {
+                    extruder: model
+                    height: UM.Theme.getSize("button").width
+                    width: UM.Theme.getSize("button").width
+                }
             }
         }
     }