Improved Icons & Styling

resources/qml/MachineSelection.qml

@@ -12,7 +12,7 @@ import "Menus"
 
 ToolButton {
     property var isNetworkPrinter: Cura.MachineManager.activeMachineNetworkKey ? true : false
-    property var printerStatus: Cura.MachineManager.printerOutputDevices.length != 0 ? "connected" : "unknown"
+    property var printerStatus: Cura.MachineManager.printerOutputDevices.length != 0 ? "connected" : "disconnected"
     text: Cura.MachineManager.activeMachineName
 
     tooltip: Cura.MachineManager.activeMachineName

resources/qml/Menus/ConfigurationMenu/SyncButton.qml

@@ -12,25 +12,22 @@ Button
 {
     id: base
     property var outputDevice: Cura.MachineManager.printerOutputDevices[0]
-    text: catalog.i18nc("@label:sync indicator", "No match")
+    property var matched: updateOnSync()
+    text: matched == true ? "Yes" : "No"
     width: parent.width
     height: parent.height
 
-    function updateOnSync()
-    {
-        if (outputDevice != undefined)
-        {
-            for (var index in outputDevice.uniqueConfigurations)
-            {
+    function updateOnSync() {
+        if (outputDevice != undefined) {
+            for (var index in outputDevice.uniqueConfigurations) {
                 var configuration = outputDevice.uniqueConfigurations[index]
-                if (Cura.MachineManager.matchesConfiguration(configuration))
-                {
-                    base.text = catalog.i18nc("@label:sync indicator", "Matched")
-                    return
+                if (Cura.MachineManager.matchesConfiguration(configuration)) {
+                    base.matched = true;
+                    return;
                 }
             }
         }
-        base.text = catalog.i18nc("@label:sync indicator", "No match")
+        base.matched = false;
     }
 
     style: ButtonStyle
@@ -67,18 +64,19 @@ Button
                 color: UM.Theme.getColor("text_emphasis")
                 source: UM.Theme.getIcon("arrow_bottom")
             }
-            Label
-            {
+            UM.RecolorImage {
                 id: sidebarComboBoxLabel
-                color: UM.Theme.getColor("sidebar_header_text_active")
-                text: control.text
-                elide: Text.ElideRight
                 anchors.left: parent.left
                 anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                anchors.right: downArrow.left
-                anchors.rightMargin: control.rightMargin
                 anchors.verticalCenter: parent.verticalCenter;
-                font: UM.Theme.getFont("medium")
+
+                width: UM.Theme.getSize("printer_status_icon").width
+                height: UM.Theme.getSize("printer_status_icon").height
+
+                color:  control.matched ? UM.Theme.getColor("printer_config_matched") : UM.Theme.getColor("printer_config_mismatch")
+                source: control.matched ? UM.Theme.getIcon("tab_status_connected") : UM.Theme.getIcon("tab_status_unknown")
+                sourceSize.width: width
+                sourceSize.height: height
             }
         }
         label: Label {}

resources/qml/Menus/PrinterStatusIcon.qml

@@ -7,7 +7,7 @@ import UM 1.2 as UM
 import Cura 1.0 as Cura
 
 Item {
-    property var status: "unknown"
+    property var status: "disconnected"
     width: childrenRect.width
     height: childrenRect.height
     UM.RecolorImage {
@@ -17,7 +17,7 @@ Item {
         sourceSize.width: width
         sourceSize.height: width
         color: UM.Theme.getColor("tab_status_" + parent.status )
-        source: UM.Theme.getIcon("tab_status_" + parent.status )
+        source: UM.Theme.getIcon( parent.status )
     }
 }
 

resources/qml/Sidebar.qml

@@ -107,7 +107,7 @@ Rectangle
     ConfigurationSelection {
         id: configSelection
         visible: printerConnected && !sidebar.monitoringPrint && !sidebar.hideSettings
-        width: visible ? Math.round(base.width * 0.25) : 0
+        width: visible ? Math.round(base.width * 0.15) : 0
         height: UM.Theme.getSize("sidebar_header").height
         anchors.top: base.top
         anchors.right: parent.right

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

@@ -0,0 +1,14 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="connected_24" fill="#00B8E9">
+            <g id="Connected" transform="translate(1.500000, 1.500000)">
+                <path d="M15,12 C11.6862915,12 9,9.3137085 9,6 C9,2.6862915 11.6862915,0 15,0 C18.3137085,0 21,2.6862915 21,6 C21,9.3137085 18.3137085,12 15,12 Z M15,9 C16.6568542,9 18,7.65685425 18,6 C18,4.34314575 16.6568542,3 15,3 C13.3431458,3 12,4.34314575 12,6 C12,7.65685425 13.3431458,9 15,9 Z" id="Combined-Shape" fill-rule="evenodd"></path>
+                <path d="M6,21 C2.6862915,21 0,18.3137085 0,15 C0,11.6862915 2.6862915,9 6,9 C9.3137085,9 12,11.6862915 12,15 C12,18.3137085 9.3137085,21 6,21 Z M6,18 C7.65685425,18 9,16.6568542 9,15 C9,13.3431458 7.65685425,12 6,12 C4.34314575,12 3,13.3431458 3,15 C3,16.6568542 4.34314575,18 6,18 Z" id="Combined-Shape" fill-rule="evenodd"></path>
+                <path d="M7.06066017,16.0606602 C6.47487373,16.6464466 5.52512627,16.6464466 4.93933983,16.0606602 C4.35355339,15.4748737 4.35355339,14.5251263 4.93933983,13.9393398 L13.9393398,4.93933983 C14.5251263,4.35355339 15.4748737,4.35355339 16.0606602,4.93933983 C16.6464466,5.52512627 16.6464466,6.47487373 16.0606602,7.06066017 L7.06066017,16.0606602 Z" id="Path" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,13 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="disconnected_24" fill="#FFA34E">
+            <g id="Disconnected">
+                <path d="M18,12 C14.6862915,12 12,9.3137085 12,6 C12,2.6862915 14.6862915,0 18,0 C21.3137085,0 24,2.6862915 24,6 C24,9.3137085 21.3137085,12 18,12 Z M18,9 C19.6568542,9 21,7.65685425 21,6 C21,4.34314575 19.6568542,3 18,3 C16.3431458,3 15,4.34314575 15,6 C15,7.65685425 16.3431458,9 18,9 Z" id="Combined-Shape"></path>
+                <path d="M6,24 C2.6862915,24 0,21.3137085 0,18 C0,14.6862915 2.6862915,12 6,12 C9.3137085,12 12,14.6862915 12,18 C12,21.3137085 9.3137085,24 6,24 Z M6,21 C7.65685425,21 9,19.6568542 9,18 C9,16.3431458 7.65685425,15 6,15 C4.34314575,15 3,16.3431458 3,18 C3,19.6568542 4.34314575,21 6,21 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

resources/themes/cura-light/theme.json

@@ -314,7 +314,10 @@
         "tab_status_finished": [255, 255, 255, 255],
         "tab_status_paused": [255, 255, 255, 255],
         "tab_status_stopped": [255, 255, 255, 255],
-        "tab_status_unknown": [200, 200, 200, 255]
+        "tab_status_disconnected": [200, 200, 200, 255],
+
+        "printer_config_matched": [12, 169, 227, 255],
+        "printer_config_mismatch": [255, 145, 62, 255]
     },
 
     "sizes": {