Add Cura 4.0 printer cards

Contributes to CL-1150

plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml

@@ -10,14 +10,13 @@ import QtGraphicalEffects 1.0
 
 Component
 {
-    Rectangle
+    Item
     {
         id: monitorFrame
 
         property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight")
         property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width
 
-        color: "transparent"
         height: maximumHeight
         onVisibleChanged:
         {
@@ -48,13 +47,44 @@ Component
             }
         }
 
+        ScrollView
+        {
+            id: printers
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                topMargin: 48 * screenScaleFactor // TODO: Theme!
+            }
+            height: 264 * screenScaleFactor // TODO: Theme!
+            Row
+            {
+                spacing: 60 * screenScaleFactor // TODO: Theme!
+                
+                Repeater
+                {
+                    model: OutputDevice.printers
+
+                    MonitorPrinterCard
+                    {
+                        printer: modelData
+                    }
+                }
+            }
+        }
+
         Item
         {
             id: queue
 
-            anchors.fill: parent
+            anchors {
-            anchors.top: parent.top
+                bottom: parent.bottom
-            anchors.topMargin: 400 * screenScaleFactor // TODO: Insert carousel here
+                left: parent.left
+                right: parent.right
+                top: printers.bottom
+                topMargin: 48
+            }
 
             Label
             {

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml

@@ -0,0 +1,112 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.3
+import QtQuick.Controls.Styles 1.3
+import QtQuick.Controls 1.4
+import UM 1.3 as UM
+
+ProgressBar
+{
+    property var printJob: null
+    property var progress: {
+        if (!printJob) {
+            return 0;
+        }
+        var result = printJob.timeElapsed / printJob.timeTotal;
+        if (result > 1.0) {
+            result = 1.0;
+        }
+        return result;
+    }
+    width: 180 * screenScaleFactor // TODO: Theme!
+    value: progress;
+    style: ProgressBarStyle {
+        property var remainingTime: {
+            if (!printJob) {
+                return 0;
+            }
+            /* Sometimes total minus elapsed is less than 0. Use Math.max() to prevent remaining
+                time from ever being less than 0. Negative durations cause strange behavior such
+                as displaying "-1h -1m". */
+            return Math.max(printer.activePrintJob.timeTotal - printer.activePrintJob.timeElapsed, 0);
+        }
+        property var progressText: {
+            if (!printJob) {
+                return "";
+            }
+            switch (printJob.state) {
+                case "wait_cleanup":
+                    if (printJob.timeTotal > printJob.timeElapsed) {
+                        return catalog.i18nc("@label:status", "Aborted");
+                    }
+                    return catalog.i18nc("@label:status", "Finished");
+                case "pre_print":
+                case "sent_to_printer":
+                    return catalog.i18nc("@label:status", "Preparing");
+                case "aborted":
+                    return catalog.i18nc("@label:status", "Aborted");
+                case "wait_user_action":
+                    return catalog.i18nc("@label:status", "Aborted");
+                case "pausing":
+                    return catalog.i18nc("@label:status", "Pausing");
+                case "paused":
+                    return OutputDevice.formatDuration( remainingTime );
+                case "resuming":
+                    return catalog.i18nc("@label:status", "Resuming");
+                case "queued":
+                    return catalog.i18nc("@label:status", "Action required");
+                default:
+                    return OutputDevice.formatDuration( remainingTime );
+            }
+        }
+        background: Rectangle {
+            color: "#e4e4f2" // TODO: Theme!
+            implicitHeight: visible ? 8 : 0;
+            implicitWidth: 180;
+            radius: 4
+        }
+        progress: Rectangle {
+            id: progressItem;
+            color: {
+                if (!printJob) {
+                    return "black";
+                }
+                var state = printJob.state
+                var inactiveStates = [
+                    "pausing",
+                    "paused",
+                    "resuming",
+                    "wait_cleanup"
+                ];
+                if (inactiveStates.indexOf(state) > -1 && remainingTime > 0) {
+                    return UM.Theme.getColor("monitor_progress_fill_inactive");
+                } else {
+                    return "#0a0850" // TODO: Theme!
+                }
+            }
+            radius: 4
+
+            Label {
+                id: progressLabel;
+                anchors {
+                    left: parent.left;
+                    leftMargin: getTextOffset();
+                }
+                text: progressText;
+                anchors.verticalCenter: parent.verticalCenter;
+                color: progressItem.width + progressLabel.width < control.width ? UM.Theme.getColor("text") : UM.Theme.getColor("monitor_progress_fill_text");
+                width: contentWidth;
+                font: UM.Theme.getFont("default");
+            }
+
+            function getTextOffset() {
+                if (progressItem.width + progressLabel.width + 16 < control.width) {
+                    return progressItem.width + UM.Theme.getSize("default_margin").width;
+                } else {
+                    return progressItem.width - progressLabel.width - UM.Theme.getSize("default_margin").width;
+                }
+            }
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml

@@ -0,0 +1,228 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+/**
+ * A Printer Card is has two main components: the printer portion and the print
+ * job portion, the latter being paired in the UI when a print job is paired
+ * a printer in-cluster.
+ *
+ * NOTE: For most labels, a fixed height with vertical alignment is used to make
+ * layouts more deterministic (like the fixed-size textboxes used in original
+ * mock-ups). This is also a stand-in for CSS's 'line-height' property. Denoted
+ * with '// FIXED-LINE-HEIGHT:'.
+ */
+Item
+{
+    id: base
+
+    // The printer which all printer data is derived from
+    property var printer: null
+
+    property var borderSize: 1 * screenScaleFactor // TODO: Theme, and remove from here
+
+    width: 834 * screenScaleFactor // TODO: Theme!
+    height: 216 * screenScaleFactor // TODO: Theme!
+
+    // Printer portion
+    Rectangle
+    {
+        id: printerInfo
+        border
+        {
+            color: "#EAEAEC" // TODO: Theme!
+            width: borderSize // TODO: Remove once themed
+        }
+        color: "white" // TODO: Theme!
+        width: parent.width
+        height: 144 * screenScaleFactor // TODO: Theme!
+
+        Row
+        {
+            anchors
+            {
+                left: parent.left
+                leftMargin: 36 * screenScaleFactor // TODO: Theme!
+                verticalCenter: parent.verticalCenter
+            }
+            spacing: 18 * screenScaleFactor // TODO: Theme!
+
+            Rectangle
+            {
+                id: printerImage
+                color: "#eeeeee"
+                width: 108
+                height: 108
+            }
+
+            Item
+            {
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                }
+                width: 216 * screenScaleFactor // TODO: Theme!
+                height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
+
+                Label
+                {
+                    id: printerNameLabel
+                    text: printer && printer.name ? printer.name : ""
+                    color: "#414054" // TODO: Theme!
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("large") // 16pt, bold
+                    width: parent.width
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                MonitorPrinterPill
+                {
+                    id: printerFamilyPill
+                    anchors
+                    {
+                        top: printerNameLabel.bottom
+                        topMargin: 6 * screenScaleFactor // TODO: Theme!
+                        left: printerNameLabel.left
+                    }
+                    text: printer.type
+                }
+            }
+
+            MonitorPrinterConfiguration
+            {
+                id: printerConfiguration
+                anchors.verticalCenter: parent.verticalCenter
+                buildplate: "Glass"
+                configurations:
+                [
+                    base.printer.printerConfiguration.extruderConfigurations[0],
+                    base.printer.printerConfiguration.extruderConfigurations[1]
+                ]
+                height: 72 * screenScaleFactor // TODO: Theme!
+            }
+        }
+
+        PrintJobContextMenu
+        {
+            id: contextButton
+            // anchors
+            // {
+            //     right: parent.right
+            //     rightMargin: 8 * screenScaleFactor // TODO: Theme!
+            //     top: parent.top
+            //     topMargin: 8 * screenScaleFactor // TODO: Theme!
+            // }
+            printJob: base.printJob
+            width: 32 * screenScaleFactor // TODO: Theme!
+            height: 32 * screenScaleFactor // TODO: Theme!
+        }
+    }
+
+
+    // Print job portion
+    Rectangle
+    {
+        id: printJobInfo
+        anchors
+        {
+            top: printerInfo.bottom
+            topMargin: -borderSize * screenScaleFactor // TODO: Theme!
+        }
+        border
+        {
+            color: "#EAEAEC" // TODO: Theme!
+            width: borderSize // TODO: Remove once themed
+        }
+        color: "white" // TODO: Theme!
+        height: 84 * screenScaleFactor + borderSize // TODO: Remove once themed
+        width: parent.width
+
+        Row
+        {
+            anchors
+            {
+                fill: parent
+                topMargin: 12 * screenScaleFactor + borderSize // TODO: Theme!
+                bottomMargin: 12 * screenScaleFactor // TODO: Theme!
+                leftMargin: 36 * screenScaleFactor // TODO: Theme!
+            }
+            height: childrenRect.height
+            spacing: 18 * screenScaleFactor // TODO: Theme!
+
+            Item
+            {
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                }
+                width: printerImage.width
+                height: childrenRect.height
+                MonitorPrintJobPreview
+                {
+                    anchors.centerIn: parent
+                    printJob: base.printer.activePrintJob
+                    size: 60 * screenScaleFactor // TODO: Theme!
+                }
+            }
+
+            Item
+            {
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                }
+                width: 216 * screenScaleFactor // TODO: Theme!
+                height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
+
+                Label
+                {
+                    id: printerJobNameLabel
+                    text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N
+                    color: "#414054" // TODO: Theme!
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("large") // 16pt, bold
+                    width: parent.width
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                Label
+                {
+                    id: printerJobOwnerLabel
+                    anchors
+                    {
+                        top: printerJobNameLabel.bottom
+                        topMargin: 6 * screenScaleFactor // TODO: Theme!
+                        left: printerJobNameLabel.left
+                    }
+                    text: printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N
+                    color: "#53657d" // TODO: Theme!
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("very_small") // 12pt, regular
+                    width: parent.width
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+
+            MonitorPrintJobProgressBar
+            {
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                }
+                printJob: printer.activePrintJob
+            }
+        }
+    }
+}