Merge branch 'feature_extruder_buttons' of github.com:Ultimaker/Cura

resources/qml/ExtruderButton.qml

@@ -16,7 +16,7 @@ Button
     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.tool_button;
-    iconSource: checked ? UM.Theme.getIcon("material_selected") : UM.Theme.getIcon("material_not_selected");
+    iconSource: UM.Theme.getIcon("extruder_button")
 
     checked: ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
     enabled: UM.Selection.hasSelection
@@ -36,12 +36,7 @@ Button
 
     Item
     {
-        anchors
-        {
-            right: parent.right;
-            top: parent.top;
-            margins: UM.Theme.getSize("default_lining").width * 3
-        }
+        anchors.centerIn: parent
         width: UM.Theme.getSize("default_margin").width
         height: UM.Theme.getSize("default_margin").height
 
@@ -54,22 +49,27 @@ Button
         }
     }
 
+    // Material colour circle
+    // Only draw the filling colour of the material inside the SVG border.
     Rectangle
     {
         anchors
         {
-            left: parent.left;
-            top: parent.top;
-            margins: UM.Theme.getSize("default_lining").width * 3
+            right: parent.right
+            top: parent.top
+            margins: UM.Theme.getSize("extruder_button_material_margin").width
         }
 
         color: model.color
 
-        width: UM.Theme.getSize("default_margin").width
-        height: UM.Theme.getSize("default_margin").height
+        width: UM.Theme.getSize("extruder_button_material_size").width
+        height: UM.Theme.getSize("extruder_button_material_size").height
+        radius: width / 2
+
+        border.width: 0
+        border.color: "transparent"
 
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color: UM.Theme.getColor("lining");
+        opacity: !base.enabled ? 0.2 : 1.0
     }
 
     onClicked:

resources/qml/Settings/SettingExtruder.qml

@@ -97,36 +97,36 @@ SettingItem
             }
             label: Item
             {
-                Rectangle
+                Label
                 {
-                    id: swatch
-                    height: UM.Theme.getSize("setting_control").height / 2
-                    width: height
-
+                    id: extruderText
                     anchors.verticalCenter: parent.verticalCenter
 
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    text: control.currentText
+                    font: UM.Theme.getFont("default")
+                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
 
-                    color: control.color
+                    elide: Text.ElideLeft
+                    verticalAlignment: Text.AlignVCenter
                 }
-                Label
+                Rectangle
                 {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
+
                     anchors
                     {
-                        left: swatch.right;
-                        right: arrow.left;
+                        right: arrow.left
                         verticalCenter: parent.verticalCenter
-                        margins: UM.Theme.getSize("default_lining").width
+                        margins: UM.Theme.getSize("default_margin").width / 4
                     }
-                    width: parent.width - swatch.width;
 
-                    text: control.currentText
-                    font: UM.Theme.getFont("default")
-                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+                    border.width: UM.Theme.getSize("default_lining").width * 2
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
 
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    color: control.color
                 }
                 UM.RecolorImage
                 {

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -116,36 +116,36 @@ SettingItem
             }
             label: Item
             {
-                Rectangle
+                Label
                 {
-                    id: swatch
-                    height: UM.Theme.getSize("setting_control").height / 2
-                    width: height
-
                     anchors.verticalCenter: parent.verticalCenter
+                    width: parent.width - swatch.width - arrow.width;
 
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    text: control.currentText
+                    font: UM.Theme.getFont("default")
+                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
 
-                    color: control.color
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
                 }
-                Label
+                Rectangle
                 {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
+
                     anchors
                     {
-                        left: swatch.right;
                         right: arrow.left;
                         verticalCenter: parent.verticalCenter
-                        margins: UM.Theme.getSize("default_lining").width
+                        margins: UM.Theme.getSize("default_margin").width / 4
                     }
-                    width: parent.width - swatch.width;
 
-                    text: control.currentText
-                    font: UM.Theme.getFont("default")
-                    color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+                    border.width: UM.Theme.getSize("default_lining").width * 2
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
 
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    color: control.color
                 }
                 UM.RecolorImage
                 {

resources/qml/SidebarHeader.qml

@@ -22,6 +22,30 @@ Column
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
 
+    Item
+    {
+        height: UM.Theme.getSize("default_margin").height / 4
+        width: height
+        visible: extruderSelectionRow.visible
+    }
+
+    Label
+    {
+        id: extruderSelectionLabel
+        anchors
+        {
+            left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+        height: UM.Theme.getSize("sidebar_tabs").height / 3
+        text: catalog.i18nc("@label", "Extruder configuration")
+        font: UM.Theme.getFont("default_bold")
+        color: UM.Theme.getColor("text")
+        visible: extruderSelectionRow.visible
+    }
+
     Item
     {
         id: extruderSelectionRow
@@ -29,16 +53,12 @@ Column
         height: UM.Theme.getSize("sidebar_tabs").height
         visible: machineExtruderCount.properties.value > 1 && !sidebar.monitoringPrint
 
-        Rectangle
+        anchors
         {
-            id: extruderSeparator
-            visible: machineExtruderCount.properties.value > 1 && !sidebar.monitoringPrint
-
-            width: parent.width
-            height: parent.height
-            color: UM.Theme.getColor("sidebar_lining")
-
-            anchors.top: extruderSelectionRow.top
+            left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
         }
 
         ListView
@@ -53,8 +73,10 @@ Column
             anchors
             {
                 left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width / 2
                 right: parent.right
-                bottom: extruderSelectionRow.bottom
+                rightMargin: UM.Theme.getSize("default_margin").width / 2
+                verticalCenter: parent.verticalCenter
             }
 
             ExclusiveGroup { id: extruderMenuGroup; }
@@ -92,61 +114,116 @@ Column
 
                 style: ButtonStyle
                 {
-                    background: Rectangle
+                    background: Item
                     {
-                        border.width: UM.Theme.getSize("default_lining").width
-                        border.color: control.checked ? UM.Theme.getColor("tab_checked_border") :
-                                      control.pressed ? UM.Theme.getColor("tab_active_border") :
-                                      control.hovered ? UM.Theme.getColor("tab_hovered_border") : UM.Theme.getColor("tab_unchecked_border")
-                        color: control.checked ? UM.Theme.getColor("tab_checked") :
-                               control.pressed ? UM.Theme.getColor("tab_active") :
-                               control.hovered ? UM.Theme.getColor("tab_hovered") : UM.Theme.getColor("tab_unchecked")
-                        Behavior on color { ColorAnimation { duration: 50; } }
-
-                        Rectangle
-                        {
-                            id: highlight
-                            visible: control.checked
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            anchors.top: parent.top
-                            height: UM.Theme.getSize("sidebar_header_highlight").height
-                            color: UM.Theme.getColor("sidebar_header_bar")
-                        }
-
                         Rectangle
                         {
-                            id: swatch
-                            visible: index > -1
-                            height: UM.Theme.getSize("setting_control").height / 2
-                            width: height
-                            anchors.left: parent.left
-                            anchors.leftMargin: (parent.height - height) / 2
-                            anchors.verticalCenter: parent.verticalCenter
-
-                            color: model.color
+                            anchors.fill: parent
                             border.width: UM.Theme.getSize("default_lining").width
-                            border.color: UM.Theme.getColor("setting_control_border")
+                            border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") :
+                                          control.hovered ? UM.Theme.getColor("action_button_hovered_border") :
+                                          UM.Theme.getColor("action_button_border")
+                            color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") :
+                                   control.hovered ? UM.Theme.getColor("action_button_hovered") :
+                                   UM.Theme.getColor("action_button")
+                            Behavior on color { ColorAnimation { duration: 50; } }
                         }
 
-                        Text
+                        Item
                         {
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.left: swatch.visible ? swatch.right : parent.left
-                            anchors.leftMargin: swatch.visible ? UM.Theme.getSize("sidebar_margin").width / 2 : UM.Theme.getSize("sidebar_margin").width
-                            anchors.right: parent.right
-                            anchors.rightMargin: UM.Theme.getSize("sidebar_margin").width / 2
-
-                            color: control.checked ? UM.Theme.getColor("tab_checked_text") :
-                                   control.pressed ? UM.Theme.getColor("tab_active_text") :
-                                   control.hovered ? UM.Theme.getColor("tab_hovered_text") : UM.Theme.getColor("tab_unchecked_text")
-
-                            font: UM.Theme.getFont("default")
-                            text: control.text
-                            elide: Text.ElideRight
+                            id: extruderButtonFace
+                            anchors.centerIn: parent
+                            width: {
+                                var extruderTextWidth = extruderStaticText.visible ? extruderStaticText.width : 0;
+                                var iconWidth = extruderIconItem.width;
+                                return extruderTextWidth + iconWidth + UM.Theme.getSize("default_margin").width / 4;
+                            }
+
+                            // Static text "Extruder"
+                            Text
+                            {
+                                id: extruderStaticText
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: parent.left
+
+                                color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_text") :
+                                       control.hovered ? UM.Theme.getColor("action_button_hovered_text") :
+                                       UM.Theme.getColor("action_button_text")
+
+                                font: UM.Theme.getFont("default")
+                                text: catalog.i18nc("@label", "Extruder")
+                                visible: width < (control.width - extruderIconItem.width - UM.Theme.getSize("default_margin").width)
+                                elide: Text.ElideRight
+                            }
+
+                            // Everthing for the extruder icon
+                            Item
+                            {
+                                id: extruderIconItem
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.right: parent.right
+
+                                property var sizeToUse:
+                                {
+                                    var minimumWidth = control.width < UM.Theme.getSize("button").width ? control.width : UM.Theme.getSize("button").width;
+                                    var minimumHeight = control.height < UM.Theme.getSize("button").height ? control.height : UM.Theme.getSize("button").height;
+                                    var minimumSize = minimumWidth < minimumHeight ? minimumWidth : minimumHeight;
+                                    minimumSize -= UM.Theme.getSize("default_margin").width;
+                                    return minimumSize;
+                                }
+
+                                width: sizeToUse
+                                height: sizeToUse
+
+                                UM.RecolorImage {
+                                    id: mainCircle
+                                    anchors.fill: parent
+
+                                    sourceSize.width: parent.width
+                                    sourceSize.height: parent.width
+                                    source: UM.Theme.getIcon("extruder_button")
+
+                                    color: extruderNumberText.color
+                                }
+
+                                Text
+                                {
+                                    id: extruderNumberText
+                                    anchors.centerIn: parent
+                                    text: index + 1;
+                                    color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_text") :
+                                           control.hovered ? UM.Theme.getColor("action_button_hovered_text") :
+                                           UM.Theme.getColor("action_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: parent.sizeToUse * 0.04
+                                        topMargin: parent.sizeToUse * 0.04
+                                    }
+
+                                    color: model.color
+
+                                    width: parent.width * 0.27
+                                    height: parent.height * 0.27
+                                    radius: width / 2
+
+                                    border.width: 0
+                                    border.color: "transparent"
+
+                                    opacity: !control.checked ? 0.6 : 1.0
+                                }
+                            }
                         }
                     }
-                    label: Item { }
+                    label: Item {}
                 }
             }
         }

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

@@ -0,0 +1,70 @@
+<?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="11.848284"
+     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" />
+  <circle
+     style="fill:none;stroke:#ffffff;stroke-width:1.39310181;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4509"
+     cx="24.75"
+     cy="5.25"
+     r="4.5534492" />
+</svg>

resources/themes/cura-light/styles.qml

@@ -612,24 +612,11 @@ QtObject {
             }
             label: Item
             {
-                Rectangle
-                {
-                    id: swatch
-                    height: UM.Theme.getSize("setting_control").height / 2
-                    width: height
-                    anchors.left: parent.left
-                    anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    color: if (control.color_override != "") {return control.color_override} else {return control.color;}
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : UM.Theme.getColor("setting_control_border")
-                }
                 Label
                 {
-                    anchors.left: swatch.right
+                    anchors.left: parent.left
                     anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                    anchors.right: downArrow.left
+                    anchors.right: swatch.left
                     anchors.rightMargin: UM.Theme.getSize("default_lining").width
                     anchors.verticalCenter: parent.verticalCenter
 
@@ -640,7 +627,25 @@ QtObject {
                     elide: Text.ElideRight
                     verticalAlignment: Text.AlignVCenter
                 }
+                Rectangle
+                {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
 
+                    anchors
+                    {
+                        right: downArrow.left;
+                        verticalCenter: parent.verticalCenter
+                        margins: UM.Theme.getSize("default_margin").width / 4
+                    }
+
+                    border.width: UM.Theme.getSize("default_lining").width * 2
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
+
+                    color: if (control.color_override != "") {return control.color_override} else {return control.color;}
+                }
                 UM.RecolorImage
                 {
                     id: downArrow

resources/themes/cura-light/theme.json

@@ -261,6 +261,9 @@
         "default_arrow": [0.8, 0.8],
         "logo": [9.5, 2.0],
 
+        "extruder_button_material_margin": [0.875, 0.875],
+        "extruder_button_material_size": [0.68, 0.68],
+
         "sidebar": [35.0, 10.0],
         "sidebar_margin": [1.71, 1.43],
         "sidebar_margin_thin": [0.71, 0.71],