Change ExtruderIcon to match the new design

CURA-5785

resources/qml/CustomConfigurationSelector.qml

@@ -195,8 +195,8 @@ Rectangle
                             height: width
 
                             checked: control.checked
-                            material_color: model.color
-                            text_color: extruderStaticText.color
+                            materialColor: model.color
+                            textColor: extruderStaticText.color
                         }
                     }
                 }

resources/qml/ExtruderIcon.qml

@@ -13,46 +13,44 @@ Item
     implicitHeight: implicitWidth
 
     property bool checked: true
-    property alias material_color: materialColorCircle.color
-    property alias text_color: extruderNumberText.color
+    property alias materialColor: mainIcon.color
+    property alias textColor: extruderNumberText.color
 
     UM.RecolorImage
     {
-        id: mainCircle
+        id: mainIcon
         anchors.fill: parent
 
         sourceSize.width: parent.width
         sourceSize.height: parent.width
         source: UM.Theme.getIcon("extruder_button")
-        color: extruderNumberText.color
+    }
+
+    Rectangle
+    {
+        id: extruderNumberCircle
+
+        width: height
+        height: parent.height / 2
+        radius: Math.round(width / 2)
+        color: "white"
+
+        anchors
+        {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            // The circle needs to be slightly off center (so it sits in the middle of the square bit of the icon)
+            topMargin: (parent.height - height) / 2 - 0.1 * parent.height
         }
 
         Label
         {
             id: extruderNumberText
             anchors.centerIn: parent
-        text: index + 1;
-        font: UM.Theme.getFont("default_bold")
+            text: index + 1
+            font: UM.Theme.getFont("default")
+            width: contentWidth
+            height: contentHeight
         }
-
-    // Material colour circle
-    // Only draw the filling colour of the material inside the SVG border.
-    Rectangle
-    {
-        id: materialColorCircle
-
-        anchors
-        {
-            right: parent.right
-        }
-
-        width: Math.round(parent.width * 0.35)
-        height: Math.round(parent.height * 0.35)
-        radius: Math.round(width / 2)
-
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color: UM.Theme.getColor("extruder_button_material_border")
-
-        opacity: !extruderIconItem.checked ? 0.6 : 1.0
     }
 }

resources/themes/cura-light/icons/extruder_button.svg

@@ -1,64 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="30"
-   height="30"
-   viewBox="0 0 30 30"
-   version="1.1"
-   id="svg4595"
-   sodipodi:docname="extruder_button.svg"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
-  <metadata
-     id="metadata4599">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Artboard 3 Copy</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1137"
-     id="namedview4597"
-     showgrid="false"
-     inkscape:pagecheckerboard="true"
-     inkscape:zoom="23.442308"
-     inkscape:cx="4.9163727"
-     inkscape:cy="17.941232"
-     inkscape:window-x="2552"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4595" />
-  <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title4584">Artboard 3 Copy</title>
-  <desc
-     id="desc4586">Created with Sketch.</desc>
-  <defs
-     id="defs4588" />
-  <ellipse
-     id="path13"
-     cx="14.999999"
-     cy="15"
-     style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     rx="13.735848"
-     ry="13.735849" />
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Configuration-panel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="extruder_icn" fill="#000000">
+            <g id="Icon/-Extruder/-color/-grey">
+                <path d="M20,22 L14,28 L8,22 L2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L26,0 C27.1045695,-2.02906125e-16 28,0.8954305 28,2 L28,20 C28,21.1045695 27.1045695,22 26,22 L20,22 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
 </svg>