Unconnected empty state (DRAFT)

Contributes to CL-1154

plugins/MonitorStage/MonitorMain.qml

@@ -2,7 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.0
 
 import UM 1.3 as UM
 import Cura 1.0 as Cura
@@ -13,6 +13,10 @@ Rectangle
 {
     id: viewportOverlay
 
+    property bool isConnected: Cura.MachineManager.activeMachineHasActiveNetworkConnection || Cura.MachineManager.activeMachineHasActiveCloudConnection
+    property string printerName: Cura.MachineManager.activeMachineDefinitionName
+    property bool isNetworkEnabled: ["Ultimaker 3", "Ultimaker 3 Extended", "Ultimaker S5"].indexOf(printerName) > -1
+
     color: UM.Theme.getColor("viewport_overlay")
     anchors.fill: parent
 
@@ -42,4 +46,97 @@ Rectangle
 
         sourceComponent: Cura.MachineManager.printerOutputDevices.length > 0 ? Cura.MachineManager.printerOutputDevices[0].monitorItem : null
     }
+
+    Column
+    {
+        anchors
+        {
+            top: parent.top
+            topMargin: 67 * screenScaleFactor
+            horizontalCenter: parent.horizontalCenter
+        }
+        width: 480 * screenScaleFactor
+        spacing: UM.Theme.getSize("default_margin").height
+
+        Label
+        {
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+            }
+            visible: isNetworkEnabled && !isConnected
+            text: "Please smake sure your printer has connection:\n- Check if the printer is turned on.\n- Check if the printer is connected to the network."
+            font: UM.Theme.getFont("medium")
+            color: UM.Theme.getColor("monitor_text_primary")
+            wrapMode: Text.WordWrap
+            lineHeight: 28 * screenScaleFactor
+            lineHeightMode: Text.FixedHeight
+            width: contentWidth
+        }
+
+        Cura.PrimaryButton
+        {
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+            }
+            visible: isNetworkEnabled && !isConnected
+            text: "Reconnect"
+            onClicked:
+            {
+                // nothing
+            }
+        }
+
+        Label
+        {
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+            }
+            visible: !isNetworkEnabled
+            text: "Please select a network connected printer to monitor the status and queue or connect your Ultimaker printer to your local network."
+            font: UM.Theme.getFont("medium")
+            color: UM.Theme.getColor("monitor_text_primary")
+            wrapMode: Text.WordWrap
+            width: parent.width
+            lineHeight: 28 * screenScaleFactor
+            lineHeightMode: Text.FixedHeight
+        }
+        Item
+        {
+            anchors
+            {
+                left: parent.left
+            }
+            visible: !isNetworkEnabled
+            height: 18 * screenScaleFactor // TODO: Theme!
+            width: childrenRect.width
+
+            UM.RecolorImage
+            {
+                id: externalLinkIcon
+                anchors.verticalCenter: parent.verticalCenter
+                color: UM.Theme.getColor("monitor_text_link")
+                source: UM.Theme.getIcon("external_link")
+                width: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
+                height: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
+            }
+            Label
+            {
+                id: manageQueueText
+                anchors
+                {
+                    left: externalLinkIcon.right
+                    leftMargin: 6 * screenScaleFactor // TODO: Theme!
+                    verticalCenter: externalLinkIcon.verticalCenter
+                }
+                color: UM.Theme.getColor("monitor_text_link")
+                font: UM.Theme.getFont("medium") // 14pt, regular
+                linkColor: UM.Theme.getColor("monitor_text_link")
+                text: catalog.i18nc("@label link to technical assistance", "More information on connecting the printer")
+                renderType: Text.NativeRendering
+            }
+        }
+    }
 }

plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml

@@ -219,7 +219,7 @@ Item
                 UM.RecolorImage
                 {
                     id: printHistoryIcon
-                    anchors.verticalCenter: manageQueueLabel.verticalCenter
+                    anchors.verticalCenter: parent.verticalCenter
                     color: UM.Theme.getColor("monitor_text_link")
                     source: UM.Theme.getIcon("external_link")
                     width: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)

resources/themes/cura-dark/theme.json

@@ -9,7 +9,7 @@
         "wide_lining": [31, 36, 39, 255],
         "thick_lining": [255, 255, 255, 30],
         "lining": [64, 69, 72, 255],
-        "viewport_overlay": [0, 6, 9, 222],
+        "viewport_overlay": [30, 36, 39, 255],
 
         "primary": [12, 169, 227, 255],
         "primary_hover": [48, 182, 231, 255],

resources/themes/cura-light/theme.json

@@ -146,7 +146,7 @@
         "wide_lining": [245, 245, 245, 255],
         "thick_lining": [127, 127, 127, 255],
         "lining": [192, 193, 194, 255],
-        "viewport_overlay": [0, 0, 0, 192],
+        "viewport_overlay": [246, 246, 246, 255],
 
         "primary": [50, 130, 255, 255],
         "primary_shadow": [64, 47, 205, 255],