From 783fe9ab73db3c24abe5dbfcfd6e34ce4c09f911 Mon Sep 17 00:00:00 2001
From: Jaime van Kessel <nallath@gmail.com>
Date: Mon, 12 Nov 2018 15:23:58 +0100
Subject: [PATCH] Updated the look of the extruder buttons

CURA-5785
---
 resources/qml/ExtruderButton.qml | 60 ++++----------------------------
 resources/qml/Toolbar.qml        |  7 +++-
 2 files changed, 13 insertions(+), 54 deletions(-)

diff --git a/resources/qml/ExtruderButton.qml b/resources/qml/ExtruderButton.qml
index 7923521658..764e9c94cb 100644
--- a/resources/qml/ExtruderButton.qml
+++ b/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
+    background: Item {}
+    contentItem: ExtruderIcon
     {
-        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
-    {
-        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:
diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml
index 9955ceeba7..2239125fbe 100644
--- a/resources/qml/Toolbar.qml
+++ b/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
+                }
             }
         }
     }