diff --git a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml b/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml index d210ab40f3..ff4bc72218 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml +++ b/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 != ""; } } + } diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml new file mode 100644 index 0000000000..89d88d671a --- /dev/null +++ b/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 + } + } + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml new file mode 100644 index 0000000000..307a4f908f --- /dev/null +++ b/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 + } + } + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml new file mode 100644 index 0000000000..7322193451 --- /dev/null +++ b/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 + } +} \ No newline at end of file