Add the connected icon to the printer selector that shows a blue icon

when the printer is connected. If not connected then there is no icon.

Contributes to CURA-5942.

resources/qml/PrinterSelector/MachineSelector.qml

@@ -14,6 +14,7 @@ Cura.ExpandableComponent
     id: machineSelector
 
     property bool isNetworkPrinter: Cura.MachineManager.activeMachineNetworkKey != ""
+    property bool isPrinterConnected: Cura.MachineManager.printerConnected
     property var outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
     popupPadding: 0
@@ -31,9 +32,9 @@ Cura.ExpandableComponent
         text: isNetworkPrinter ? Cura.MachineManager.activeMachineNetworkGroupName : Cura.MachineManager.activeMachineName
         source:
         {
-            if (isNetworkPrinter && machineSelector.outputDevice != null)
+            if (isNetworkPrinter)
             {
-                if (machineSelector.outputDevice.clusterSize > 1)
+                if (machineSelector.outputDevice != null && machineSelector.outputDevice.clusterSize > 1)
                 {
                     return UM.Theme.getIcon("printer_group")
                 }
@@ -44,6 +45,37 @@ Cura.ExpandableComponent
         font: UM.Theme.getFont("medium")
         color: UM.Theme.getColor("text")
         iconSize: UM.Theme.getSize("machine_selector_icon").width
+
+        UM.RecolorImage
+        {
+            id: icon
+
+            anchors.bottom: parent.bottom
+            x: UM.Theme.getSize("thick_margin").width
+
+            source: UM.Theme.getIcon("printer_connected")
+            width: UM.Theme.getSize("printer_status_icon").width
+            height: UM.Theme.getSize("printer_status_icon").height
+
+            sourceSize.width: width
+            sourceSize.height: height
+
+            color: UM.Theme.getColor("primary")
+            visible: isNetworkPrinter && isPrinterConnected
+
+            // Make a themable circle in the background so we can change it in other themes
+            Rectangle
+            {
+                id: iconBackground
+                anchors.centerIn: parent
+                // Make it a bit bigger so there is an outline
+                width: parent.width + 2
+                height: parent.height + 2
+                radius: Math.round(width / 2)
+                color: UM.Theme.getColor("main_background")
+                z: parent.z - 1
+            }
+        }
     }
 
     popupItem: Item

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

@@ -1,5 +0,0 @@
-<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">
-    <polygon id="Polygon" points="15 8 16 9 9 16 8 15"></polygon>
-    <circle id="Oval-2" cx="6" cy="18" r="4"></circle>
-    <circle id="Oval-2-Copy" cx="18" cy="6" r="4"></circle>
-</svg>

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

@@ -1,6 +0,0 @@
-<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">
-    <circle id="Oval-2" stroke="#FFFFFF" cx="4" cy="20" r="3.5"></circle>
-    <circle id="Oval-2-Copy" stroke="#FFFFFF" cx="20" cy="4" r="3.5"></circle>
-    <polygon id="Polygon" fill="#FFFFFF" points="11 12 12 13 9 16 8 15"></polygon>
-    <polygon id="Polygon-Copy" fill="#FFFFFF" points="15 8 16 9 13 12 12 11"></polygon>
-</svg>

resources/themes/cura-light/theme.json

@@ -449,7 +449,7 @@
         "favorites_button": [2, 2],
         "favorites_button_icon": [1.2, 1.2],
 
-        "printer_status_icon": [1.8, 1.8],
+        "printer_status_icon": [1.0, 1.0],
         "printer_sync_icon": [1.2, 1.2],
 
         "button_tooltip": [1.0, 1.3],