Finalize queue

Contributes to CL-1148

plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml

@@ -8,102 +8,203 @@ import UM 1.3 as UM
 import Cura 1.0 as Cura
 import QtGraphicalEffects 1.0
 
-Component {
+Component
+{
+    Rectangle
+    {
+        id: monitorFrame
+
+        property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight")
+        property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width
 
-    Rectangle {
-        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;
+        height: maximumHeight
-        onVisibleChanged: {
+        onVisibleChanged:
-            if (monitorFrame != null && !monitorFrame.visible) {
+        {
-                OutputDevice.setActiveCameraUrl("");
+            if (monitorFrame != null && !monitorFrame.visible)
+            {
+                OutputDevice.setActiveCameraUrl("")
             }
         }
-        width: maximumWidth;
+        width: maximumWidth
+
+        UM.I18nCatalog
+        {
+            id: catalog
+            name: "cura"
+        }
 
         LinearGradient {
             anchors.fill: parent
             gradient: Gradient {
-                GradientStop { position: 0.0; color: "#f6f6f6" }
+                GradientStop {
-                GradientStop { position: 1.0; color: "#ffffff" }
+                    position: 0.0
+                    color: "#f6f6f6"
+                }
+                GradientStop {
+                    position: 1.0
+                    color: "#ffffff"
+                }
             }
         }
 
-        UM.I18nCatalog {
+        Item
-            id: catalog;
+        {
-            name: "cura";
+            id: queue
+
+            anchors.fill: parent
+            anchors.top: parent.top
+            anchors.topMargin: 400 * screenScaleFactor // TODO: Insert carousel here
+
+            Label
+            {
+                id: queuedLabel
+                anchors
+                {
+                    left: queuedPrintJobs.left
+                    top: parent.top
+                }
+                color: UM.Theme.getColor("text")
+                font: UM.Theme.getFont("large_nonbold")
+                text: catalog.i18nc("@label", "Queued")
             }
 
-        Label {
+            Item
-            id: manageQueueLabel;
+            {
+                id: manageQueueLabel
+                anchors
+                {
+                    right: queuedPrintJobs.right
+                    verticalCenter: queuedLabel.verticalCenter
+                }
+                height: 18 * screenScaleFactor // TODO: Theme!
+                width: childrenRect.width
+
+                UM.RecolorImage
+                {
+                    id: externalLinkIcon
+                    anchors.verticalCenter: externalLinkIcon.verticalCenter
+                    color: UM.Theme.getColor("primary")
+                    source: "../svg/icons/external_link.svg"
+                    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
+                {
+                    anchors
+                    {
+                        left: externalLinkIcon.right
+                        leftMargin: 6 * screenScaleFactor // TODO: Theme!
+                        verticalCenter: externalLinkIcon.verticalCenter
+                    }
+                    color: UM.Theme.getColor("primary")
+                    font: UM.Theme.getFont("default")
+                    linkColor: UM.Theme.getColor("primary")
+                    text: catalog.i18nc("@label link to connect manager", "Manage queue in Cura Connect")
+                }
+            }
+            
+
+            MouseArea
+            {
+                anchors.fill: manageQueueLabel
+                hoverEnabled: true
+                onClicked: Cura.MachineManager.printerOutputDevices[0].openPrintJobControlPanel()
+                onEntered: manageQueueLabel.font.underline = true
+                onExited: manageQueueLabel.font.underline = false
+            }
+
+            Row
+            {
+                id: printJobQueueHeadings
+                anchors
+                {
+                    left: queuedPrintJobs.left
+                    leftMargin: 6 * screenScaleFactor // TODO: Theme!
+                    top: queuedLabel.bottom
+                    topMargin: 24 * screenScaleFactor // TODO: Theme!
+                }
+                spacing: 18 * screenScaleFactor // TODO: Theme!
+
+                Label
+                {
+                    text: catalog.i18nc("@label", "Print jobs")
+                    color: "#666666"
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("medium") // 14pt, regular
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 284 * screenScaleFactor // TODO: Theme! (Should match column size)
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                Label
+                {
+                    text: catalog.i18nc("@label", "Total print time")
+                    color: "#666666"
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("medium") // 14pt, regular
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                Label
+                {
+                    text: catalog.i18nc("@label", "Waiting for")
+                    color: "#666666"
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("medium") // 14pt, regular
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+
+            ScrollView
+            {
+                id: queuedPrintJobs
                 anchors {
-                bottom: queuedLabel.bottom;
+                    bottom: parent.bottom
-                right: queuedPrintJobs.right;
+                    horizontalCenter: parent.horizontalCenter
-                rightMargin: 3 * UM.Theme.getSize("default_margin").width;
+                    top: printJobQueueHeadings.bottom
-            }
+                    topMargin: 12 * screenScaleFactor // TODO: Theme!
-            color: UM.Theme.getColor("primary");
-            font: UM.Theme.getFont("default");
-            linkColor: UM.Theme.getColor("primary");
-            text: catalog.i18nc("@label link to connect manager", "Manage queue");
                 }
+                style: UM.Theme.styles.scrollview
+                visible: OutputDevice.receivedPrintJobs
+                width: Math.min(834 * screenScaleFactor, maximumWidth)
 
-        MouseArea {
+                ListView
-            anchors.fill: manageQueueLabel;
+                {
-            hoverEnabled: true;
+                    id: printJobList
-            onClicked: Cura.MachineManager.printerOutputDevices[0].openPrintJobControlPanel();
+                    anchors.fill: parent
-            onEntered: manageQueueLabel.font.underline = true;
+                    delegate: MonitorPrintJobCard
-            onExited: manageQueueLabel.font.underline = false;
+                    {
+                        anchors
+                        {
+                            left: parent.left
+                            right: parent.right
                         }
-
+                        printJob: modelData
-        Label {
-            id: queuedLabel;
-            anchors {
-                left: queuedPrintJobs.left;
-                leftMargin: 3 * UM.Theme.getSize("default_margin").width + 5 * screenScaleFactor;
-                top: parent.top;
-                topMargin: 2 * UM.Theme.getSize("default_margin").height;
                     }
-            color: UM.Theme.getColor("text");
+                    model: OutputDevice.queuedPrintJobs
-            font: UM.Theme.getFont("large");
+                    spacing: 6
-            text: catalog.i18nc("@label", "Queued");
                 }
-
-        ScrollView {
-            id: queuedPrintJobs;
-            anchors {
-                top: queuedLabel.bottom;
-                topMargin: UM.Theme.getSize("default_margin").height;
-                horizontalCenter: parent.horizontalCenter;
-                bottomMargin: UM.Theme.getSize("default_margin").height;
-                bottom: parent.bottom;
-            }
-            style: UM.Theme.styles.scrollview;
-            visible: OutputDevice.receivedPrintJobs;
-            width: Math.min(834 * screenScaleFactor, maximumWidth);
-
-            ListView {
-                id: printJobList;
-                anchors.fill: parent;
-                delegate: MonitorPrintJobCard {
-                    anchors {
-                        left: parent.left;
-                        leftMargin: UM.Theme.getSize("default_margin").width;
-                        right: parent.right;
-                        rightMargin: UM.Theme.getSize("default_margin").width;
-                    }
-                    printJob: modelData;
-                }
-                model: OutputDevice.queuedPrintJobs;
-                spacing: 6;
             }
         }
 
         PrinterVideoStream {
-            anchors.fill: parent;
+            anchors.fill: parent
-            cameraUrl: OutputDevice.activeCameraUrl;
+            cameraUrl: OutputDevice.activeCameraUrl
-            visible: OutputDevice.activeCameraUrl != "";
+            visible: OutputDevice.activeCameraUrl != ""
         }
     }
     

plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.0
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
+// TODO: Theme & documentation!
 // The expandable component has 3 major sub components:
 //      * The headerItem Always visible and should hold some info about what happens if the component is expanded
 //      * The popupItem The content that needs to be shown if the component is expanded.

plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml

@@ -41,7 +41,6 @@ Item
                 id: buildplateIcon
                 anchors.centerIn: parent
                 color: "#0a0850" // TODO: Theme! (Standard purple)
-                elide: Text.ElideRight
                 height: parent.height
                 source: "../svg/icons/buildplate.svg"
                 width: height
@@ -52,6 +51,7 @@ Item
         {
             id: buildplateLabel
             color: "#191919" // TODO: Theme!
+            elide: Text.ElideRight
             font: UM.Theme.getFont("very_small") // 12pt, regular
             text: ""
 

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml

@@ -47,7 +47,7 @@ Item
                 elide: Text.ElideRight
                 font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216 * screenScaleFactor // TODO: Theme!
+                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
 
                 // FIXED-LINE-HEIGHT:
                 height: 18 * screenScaleFactor // TODO: Theme!
@@ -61,15 +61,23 @@ Item
                 elide: Text.ElideRight
                 font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216 * screenScaleFactor // TODO: Theme!
+                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
 
                 // FIXED-LINE-HEIGHT:
                 height: 18 * screenScaleFactor // TODO: Theme!
                 verticalAlignment: Text.AlignVCenter
             }
 
+            Item
+            {
+                anchors.verticalCenter: parent.verticalCenter
+                height: childrenRect.height
+                width: childrenRect.width
+
                 Label
                 {
+                    id: printerAssignmentLabel
+                    anchors.verticalCenter: parent.verticalCenter
                     color: "#374355"
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("medium") // 14pt, regular
@@ -79,25 +87,47 @@ Item
                             {
                                 if (printJob.state == "error")
                                 {
-                                return catalog.i18nc("@label", "Waiting for: Unavailable printer")
+                                    return catalog.i18nc("@label", "Unavailable printer")
                                 }
-                            return catalog.i18nc("@label", "Waiting for: First available")
+                                return catalog.i18nc("@label", "First available")
                             }
                             else
                             {
-                            return catalog.i18nc("@label", "Waiting for: ") + printJob.assignedPrinter.name
+                                return printJob.assignedPrinter.name
                             }
                         }
                         return ""
                     }
                     visible: printJob
-                anchors.verticalCenter: parent.verticalCenter
-                width: 216 * screenScaleFactor // TODO: Theme!
 
                     // FIXED-LINE-HEIGHT:
                     height: 18 * screenScaleFactor // TODO: Theme!
                     verticalAlignment: Text.AlignVCenter
                 }
+
+                Row
+                {
+                    id: printerFamilyPills
+                    anchors
+                    {
+                        left: printerAssignmentLabel.right;
+                        leftMargin: 12 // TODO: Theme!
+                        verticalCenter: parent.verticalCenter
+                    }
+                    height: childrenRect.height
+                    spacing: 6 // TODO: Theme!
+
+                    Repeater
+                    {
+                        id: compatiblePills
+                        delegate: MonitorPrinterPill
+                        {
+                            text: modelData
+                        }
+                        model: printJob ? printJob.compatibleMachineFamilies : []
+                    }
+                }
+            }
         }
         drawerItem: Row
         {
@@ -106,14 +136,17 @@ Item
                 left: parent.left
                 leftMargin: 74 * screenScaleFactor // TODO: Theme!
             }
-            height: 96 * screenScaleFactor // TODO: Theme!
+            height: 108 * screenScaleFactor // TODO: Theme!
             spacing: 18 * screenScaleFactor // TODO: Theme!
 
             MonitorPrinterConfiguration
             {
                 id: printerConfiguration
                 anchors.verticalCenter: parent.verticalCenter
-                printJob: base.printJob
+                buildplate: "Glass"
+                config0: base.printJob.configuration.extruderConfigurations[0]
+                config1: base.printJob.configuration.extruderConfigurations[1]
+                height: 72 * screenScaleFactor // TODO: Theme!
             }
             Label {
                 text: printJob && printJob.owner ? printJob.owner : ""
@@ -128,4 +161,19 @@ Item
             }
         }
     }
+
+    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!
+    }
 }

plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml

@@ -6,17 +6,26 @@ import QtQuick.Controls 2.0
 import UM 1.3 as UM
 
 /**
- *
+ * The MonitorPrinterConfiguration accepts 2 configuration objects as input and
+ * applies them to a MonitorBuildplateConfiguration instance and two instances
+ * of MonitorExtruderConfiguration. It's used in both the MonitorPrintJobCard
+ * component as well as the MonitorPrinterCard component.
  */
 Item
 {
     id: base
 
-    property var printJob: null
+    // Extracted buildplate configuration
-    property var config0: printJob ? printJob.configuration.extruderConfigurations[0] : null
+    property alias buildplate: buildplateConfig.buildplate
-    property var config1: printJob ? printJob.configuration.extruderConfigurations[1] : null
 
-    height: 72 * screenScaleFactor // TODO: Theme!
+    // Extracted extruder configuration for position 0
+    property var config0: null
+
+    // Extracted extruder configuration for position 1
+    property var config1: null
+
+    // Default size, but should be stretched to fill parent
+    height: 72 * parent.height
     width: 450 * screenScaleFactor // TODO: Theme!
 
     Row
@@ -25,8 +34,8 @@ Item
 
         MonitorExtruderConfiguration
         {
-            color: config0 ? config0.activeMaterial.color : "#eeeeee" // TODO: Theme!
+            color: config0 && config0.activeMaterial ? config0.activeMaterial.color : "#eeeeee" // TODO: Theme!
-            material: config0 ? config0.activeMaterial.name : ""
+            material: config0 && config0.activeMaterial ? config0.activeMaterial.name : ""
             position: config0.position
             printCore: config0 ? config0.hotendID : ""
             visible: config0
@@ -37,8 +46,8 @@ Item
 
         MonitorExtruderConfiguration
         {
-            color: config1 ? config1.activeMaterial.color : "#eeeeee" // TODO: Theme!
+            color: config1 && config1.activeMaterial ? config1.activeMaterial.color : "#eeeeee" // TODO: Theme!
-            material: config1 ? config1.activeMaterial.name : ""
+            material: config1 && config1.activeMaterial ? config1.activeMaterial.name : ""
             position: config1.position
             printCore: config1 ? config1.hotendID : ""
             visible: config1
@@ -50,7 +59,8 @@ Item
 
     MonitorBuildplateConfiguration
     {
+        id: buildplateConfig
         anchors.bottom: parent.bottom
-        buildplate: "Glass"
+        buildplate: "Glass" // 'Glass' as a default
     }
 }

plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml

@@ -0,0 +1,34 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.4
+import UM 1.2 as UM
+
+/**
+ * A MonitorPrinterPill is a blue-colored tag indicating which printers a print
+ * job is compatible with. It is used by the MonitorPrintJobCard component.
+ */
+Item
+{
+    // The printer name
+    property alias text: printerNameLabel.text;
+
+    implicitHeight: 18 * screenScaleFactor // TODO: Theme!
+    implicitWidth: printerNameLabel.contentWidth + 12 // TODO: Theme!
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: "#e4e4f2" // TODO: Theme!
+        radius: 2 * screenScaleFactor // TODO: Theme!
+    }
+
+    Label {
+        id: printerNameLabel
+        anchors.centerIn: parent
+        color: "#535369" // TODO: Theme!
+        text: ""
+        font.pointSize: 10
+    }
+}

plugins/UM3NetworkPrinting/resources/svg/icons/external_link.svg

@@ -0,0 +1,8 @@
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="External-site" fill="#2671E7">
+            <path d="M15.2542746,0 L10.117115,0 C9.70521103,0 9.37138968,0.331077601 9.37138968,0.7395961 C9.37138968,1.1481146 9.70521103,1.4791922 10.117115,1.4791922 L13.5368139,1.4791922 L6.21853299,8.73732261 C5.92715567,9.02612743 5.92715567,9.49450277 6.21853299,9.78330758 C6.36413212,9.92770999 6.55504068,10 6.74577014,10 C6.93649962,10 7.12740818,9.92770999 7.2730073,9.78330758 L14.5085492,2.60705849 L14.5085492,5.83435463 C14.5085492,6.24287313 14.8423706,6.57395074 15.2542746,6.57395074 C15.6661786,6.57395074 16,6.24287313 16,5.83435463 L16,0.7395961 C16,0.331077601 15.6661786,0 15.2542746,0 Z" id="Path"></path>
+            <path d="M12.2810964,7.69220962 C11.8840075,7.69220962 11.5621929,8.01402427 11.5621929,8.41111317 L11.5621929,14.0829238 C11.5621929,14.3427581 11.3427581,14.5621929 11.0829238,14.5621929 L1.91707615,14.5621929 C1.65724189,14.5621929 1.43780712,14.3427581 1.43780712,14.0829238 L1.43780712,4.91707615 C1.43780712,4.65724189 1.65724189,4.43780712 1.91707615,4.43780712 L7.60891391,4.43780712 C8.00600281,4.43780712 8.32781747,4.11599245 8.32781747,3.71890356 C8.32781747,3.32181465 8.00600281,3 7.60891391,3 L1.91707615,3 C0.859956439,3 0,3.85995644 0,4.91707615 L0,14.0829238 C0,15.1400436 0.859956439,16 1.91707615,16 L11.0829238,16 C12.1400436,16 13,15.1400436 13,14.0829238 L13,8.41111317 C13,8.01419692 12.6781853,7.69220962 12.2810964,7.69220962 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>