Replace queued print job cards with new design

Contributes to CL-1148

plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml

@@ -6,13 +6,15 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import UM 1.3 as UM
 import Cura 1.0 as Cura
+import QtGraphicalEffects 1.0
 
 Component {
+    
     Rectangle {
         id: monitorFrame;
         property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight");
         property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width;
-        color: UM.Theme.getColor("viewport_background");
+        color: transparent
         height: maximumHeight;
         onVisibleChanged: {
             if (monitorFrame != null && !monitorFrame.visible) {
@@ -21,6 +23,14 @@ Component {
         }
         width: maximumWidth;
 
+        LinearGradient {
+            anchors.fill: parent
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#f6f6f6" }
+                GradientStop { position: 1.0; color: "#ffffff" }
+            }
+        }
+
         UM.I18nCatalog {
             id: catalog;
             name: "cura";
@@ -60,39 +70,6 @@ Component {
             text: catalog.i18nc("@label", "Queued");
         }
 
-        Column {
-            id: skeletonLoader;
-            anchors {
-                bottom: parent.bottom;
-                bottomMargin: UM.Theme.getSize("default_margin").height;
-                horizontalCenter: parent.horizontalCenter;
-                top: queuedLabel.bottom;
-                topMargin: UM.Theme.getSize("default_margin").height;
-            }
-            visible: !queuedPrintJobs.visible;
-            width: Math.min(800 * screenScaleFactor, maximumWidth);
-
-            PrintJobInfoBlock {
-                anchors {
-                    left: parent.left;
-                    leftMargin: UM.Theme.getSize("default_margin").width;
-                    right: parent.right;
-                    rightMargin: UM.Theme.getSize("default_margin").width;
-                }
-                printJob: null; // Use as skeleton
-            }
-
-            PrintJobInfoBlock {
-                anchors {
-                    left: parent.left;
-                    leftMargin: UM.Theme.getSize("default_margin").width;
-                    right: parent.right;
-                    rightMargin: UM.Theme.getSize("default_margin").width;
-                }
-                printJob: null; // Use as skeleton
-            }
-        }
-
         ScrollView {
             id: queuedPrintJobs;
             anchors {
@@ -104,12 +81,12 @@ Component {
             }
             style: UM.Theme.styles.scrollview;
             visible: OutputDevice.receivedPrintJobs;
-            width: Math.min(800 * screenScaleFactor, maximumWidth);
+            width: Math.min(834 * screenScaleFactor, maximumWidth);
 
             ListView {
                 id: printJobList;
                 anchors.fill: parent;
-                delegate: PrintJobInfoBlock {
+                delegate: MonitorPrintJobCard {
                     anchors {
                         left: parent.left;
                         leftMargin: UM.Theme.getSize("default_margin").width;
@@ -119,7 +96,7 @@ Component {
                     printJob: modelData;
                 }
                 model: OutputDevice.queuedPrintJobs;
-                spacing: UM.Theme.getSize("default_margin").height - 2 * UM.Theme.getSize("monitor_shadow_radius").width;
+                spacing: 6;
             }
         }
 
@@ -129,4 +106,5 @@ Component {
             visible: OutputDevice.activeCameraUrl != "";
         }
     }
+    
 }

plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml

@@ -0,0 +1,81 @@
+// 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
+import Cura 1.0 as Cura
+
+// 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.
+Item
+{
+    id: base
+
+    property var expanded: false
+    property var borderWidth: 1
+    property color borderColor: "#EAEAEC"
+    property color headerBackgroundColor: "white"
+    property color headerHoverColor: "#f5f5f5"
+    property color drawerBackgroundColor: "white"
+    property alias headerItem: header.children
+    property alias drawerItem: drawer.children
+
+    width: parent.width
+    height: childrenRect.height
+
+    Rectangle
+    {
+        id: header
+        border
+        {
+            color: borderColor
+            width: borderWidth
+        }
+        color: headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
+        height: childrenRect.height
+        width: parent.width
+        Behavior on color
+        {
+            ColorAnimation
+            {
+                duration: 100
+            }
+        }
+    }
+
+    MouseArea
+    {
+        id: headerMouseArea
+        anchors.fill: header
+        onClicked: base.expanded = !base.expanded
+        hoverEnabled: true
+    }
+
+    Rectangle
+    {
+        id: drawer
+        anchors
+        {
+            top: header.bottom
+            topMargin: -1
+        }
+        border
+        {
+            color: borderColor
+            width: borderWidth
+        }
+        clip: true
+        color: headerBackgroundColor
+        height: base.expanded ? childrenRect.height : 0
+        width: parent.width
+        Behavior on height
+        {
+            NumberAnimation
+            {
+                duration: 100
+            }
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml

@@ -0,0 +1,109 @@
+// 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
+import Cura 1.0 as Cura
+
+// A Print Job Card is essentially just a filled-in Expandable Card item.
+Item
+{
+    id: base
+    property var printJob: null
+
+    width: parent.width
+    height: childrenRect.height
+
+    ExpandableCard
+    {
+        headerItem: Row
+        {
+            height: 48
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            spacing: 18
+
+            MonitorPrintJobPreview
+            {
+                printJob: base.printJob
+                size: 32
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Label
+            {
+                text: printJob && printJob.name ? printJob.name : ""
+                color: "#374355"
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default_bold")
+                anchors.verticalCenter: parent.verticalCenter
+                width: 216
+                height: 18
+            }
+            
+            Label
+            {
+                text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
+                color: "#374355"
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default_bold")
+                anchors.verticalCenter: parent.verticalCenter
+                width: 216
+                height: 18
+            }
+
+            Label
+            {
+                color: "#374355"
+                height: 18
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default_bold")
+                text: {
+                    if (printJob !== null) {
+                        if (printJob.assignedPrinter == null)
+                        {
+                            if (printJob.state == "error")
+                            {
+                                return catalog.i18nc("@label", "Waiting for: Unavailable printer")
+                            }
+                            return catalog.i18nc("@label", "Waiting for: First available")
+                        }
+                        else
+                        {
+                            return catalog.i18nc("@label", "Waiting for: ") + printJob.assignedPrinter.name
+                        }
+                    }
+                    return ""
+                }
+                visible: printJob
+                anchors.verticalCenter: parent.verticalCenter
+                width: 216
+            }
+        }
+        drawerItem: Row
+        {
+            height: 96
+            anchors.left: parent.left
+            anchors.leftMargin: 74
+            spacing: 18
+
+            Rectangle
+            {
+                id: printerConfiguration
+                width: 450
+                height: 72
+                color: "blue"
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            Label {
+                height: 18
+                text: printJob && printJob.owner ? printJob.owner : ""
+                color: "#374355"
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default_bold")
+                anchors.top: printerConfiguration.top
+            }
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml

@@ -0,0 +1,67 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Dialogs 1.1
+import QtQuick.Controls 2.0
+import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.0
+import QtQuick.Layouts 1.1
+import QtQuick.Dialogs 1.1
+import UM 1.3 as UM
+
+Item
+{
+    id: printJobPreview
+
+    property var printJob: null
+    property var size: 256
+
+    width: size
+    height: size
+
+    // Actual content
+    Image
+    {
+        id: previewImage
+        anchors.fill: parent
+        opacity: printJob && printJob.state == "error" ? 0.5 : 1.0
+        source: printJob ? printJob.previewImageUrl : ""
+        visible: printJob
+    }
+
+    UM.RecolorImage
+    {
+        id: ultiBotImage
+        
+        anchors.centerIn: printJobPreview
+        color: UM.Theme.getColor("monitor_placeholder_image")
+        height: printJobPreview.height
+        source: "../svg/ultibot.svg"
+        sourceSize
+        {
+            height: height
+            width: width
+        }
+        /* Since print jobs ALWAYS have an image url, we have to check if that image URL errors or
+            not in order to determine if we show the placeholder (ultibot) image instead. */
+        visible: printJob && previewImage.status == Image.Error
+        width: printJobPreview.width
+    }
+
+    UM.RecolorImage
+    {
+        id: statusImage
+        anchors.centerIn: printJobPreview
+        color: UM.Theme.getColor("monitor_image_overlay")
+        height: 0.5 * printJobPreview.height
+        source: printJob && printJob.state == "error" ? "../svg/aborted-icon.svg" : ""
+        sourceSize
+        {
+            height: height
+            width: width
+        }
+        visible: source != ""
+        width: 0.5 * printJobPreview.width
+    }
+}