Improve printer status and progress bar

Contributes to CL-1153

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml

@@ -21,7 +21,18 @@ Item
     {
         id: previewImage
         anchors.fill: parent
-        opacity: printJob && printJob.state == "error" ? 0.5 : 1.0
+        opacity:
+        {
+            if (!printJob)
+            {
+                return 0
+            }
+            if (printJob.state == "error" || !printJob.isActive)
+            {
+                return 0.5
+            }
+            return 1.0
+        }
         source: printJob ? printJob.previewImageUrl : ""
         visible: printJob
     }
@@ -47,11 +58,32 @@ Item
 
     UM.RecolorImage
     {
-        id: statusImage
+        id: overlayIcon
         anchors.centerIn: printJobPreview
         color: UM.Theme.getColor("monitor_image_overlay")
         height: 0.5 * printJobPreview.height
-        source: printJob && printJob.state == "error" ? "../svg/aborted-icon.svg" : ""
+        source:
+        {
+            switch(printJob.state)
+            {
+                case "error":
+                    return "../svg/aborted-icon.svg"
+                case "wait_cleanup":
+                    if (printJob.state == "wait_cleanup" && printJob.timeTotal > printJob.timeElapsed)
+                    {
+                        return "../svg/aborted-icon.svg"
+                    }
+                    break;
+                case "pausing":
+                    return "../svg/paused-icon.svg"
+                case "paused":
+                    return "../svg/paused-icon.svg"
+                case "resuming":
+                    return "../svg/paused-icon.svg"
+                default:
+                    return ""
+            }
+        }
         sourceSize
         {
             height: height

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml

@@ -15,63 +15,10 @@ import UM 1.3 as UM
 Item
 {
     id: base
+
+    // The print job which all other information is dervied from
     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
-    }
-    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 )
-        }
-    }
     width: childrenRect.width
     height: 18 * screenScaleFactor // TODO: Theme!
 
@@ -82,12 +29,12 @@ Item
         {
             verticalCenter: parent.verticalCenter
         }
-        value: progress;
+        value: printJob ? printJob.progress : 0
         style: ProgressBarStyle
         {
             background: Rectangle
             {
-                color: "#e4e4f2" // TODO: Theme!
+                color: printJob && printJob.isActive ? "#e4e4f2" : "#f3f3f9" // TODO: Theme!
                 implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme!
                 implicitWidth: 180 * screenScaleFactor // TODO: Theme!
                 radius: 4 * screenScaleFactor // TODO: Theme!
@@ -95,41 +42,72 @@ Item
             progress: Rectangle
             {
                 id: progressItem;
-                color:
+                color: printJob && printJob.isActive ? "#0a0850" : "#9392b2" // TODO: Theme!
-                {
-                    if (printJob)
-                    {
-                        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")
-                        }
-                    }
-                    return "#0a0850" // TODO: Theme!
-                }
                 radius: 4 * screenScaleFactor // TODO: Theme!
             }
         }
     }
     Label
     {
-        id: progressLabel
+        id: percentLabel
         anchors
         {
             left: progressBar.right
             leftMargin: 18 * screenScaleFactor // TODO: Theme!
         }
-        text: progressText
+        text: Math.round(printJob.progress * 100) + "%"
-        color: "#374355" // TODO: Theme!
+        color: printJob && printJob.isActive ? "#374355" : "#babac1" // TODO: Theme!
         width: contentWidth
         font: UM.Theme.getFont("medium") // 14pt, regular
 
+        // FIXED-LINE-HEIGHT:
+        height: 18 * screenScaleFactor // TODO: Theme!
+        verticalAlignment: Text.AlignVCenter
+    }
+    Label
+    {
+        id: statusLabel
+        anchors
+        {
+            left: percentLabel.right
+            leftMargin: 18 * screenScaleFactor // TODO: Theme!
+        }
+        color: "#374355" // TODO: Theme!
+        font: UM.Theme.getFont("medium") // 14pt, regular
+        text:
+        {
+            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 "sent_to_printer":
+                    return catalog.i18nc("@label:status", "Preparing...")
+                case "aborting":
+                    return catalog.i18nc("@label:status", "Aborting...")
+                case "aborted":
+                    return catalog.i18nc("@label:status", "Aborted")
+                case "pausing":
+                    return catalog.i18nc("@label:status", "Pausing...")
+                case "paused":
+                    return catalog.i18nc("@label:status", "Paused")
+                case "resuming":
+                    return catalog.i18nc("@label:status", "Resuming...")
+                case "queued":
+                    return catalog.i18nc("@label:status", "Action required")
+                default:
+                    return catalog.i18nc("@label:status", "Finishes ") + OutputDevice.getDateCompleted( printJob.timeRemaining ) + " at " + OutputDevice.getTimeCompleted( printJob.timeRemaining )
+            }
+        }
+        width: contentWidth
+
         // FIXED-LINE-HEIGHT:
         height: 18 * screenScaleFactor // TODO: Theme!
         verticalAlignment: Text.AlignVCenter

plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml

@@ -183,6 +183,7 @@ Item
                     printJob: base.printer.activePrintJob
                     size: parent.height
                 }
+                visible: printer.activePrintJob
             }
 
             Item
@@ -193,14 +194,15 @@ Item
                 }
                 width: 216 * screenScaleFactor // TODO: Theme!
                 height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
+                visible: printer.activePrintJob
 
                 Label
                 {
                     id: printerJobNameLabel
-                    text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N
+                    color: printer.activePrintJob && printer.activePrintJob.isActive ? "#414054" : "#babac1" // TODO: Theme!
-                    color: "#414054" // TODO: Theme!
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("large") // 16pt, bold
+                    text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N
                     width: parent.width
 
                     // FIXED-LINE-HEIGHT:
@@ -217,10 +219,10 @@ Item
                         topMargin: 6 * screenScaleFactor // TODO: Theme!
                         left: printerJobNameLabel.left
                     }
-                    text: printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N
+                    color: printer.activePrintJob && printer.activePrintJob.isActive ? "#53657d" : "#babac1" // TODO: Theme!
-                    color: "#53657d" // TODO: Theme!
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("very_small") // 12pt, regular
+                    text: printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N
                     width: parent.width
 
                     // FIXED-LINE-HEIGHT:
@@ -236,6 +238,7 @@ Item
                     verticalCenter: parent.verticalCenter
                 }
                 printJob: printer.activePrintJob
+                visible: printer.activePrintJob
             }
         }
     }