diff --git a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml b/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml index ff4bc72218..d055071521 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml +++ b/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 { - - Rectangle { - id: monitorFrame; - property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight"); - property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width; +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: transparent - height: maximumHeight; - onVisibleChanged: { - if (monitorFrame != null && !monitorFrame.visible) { - OutputDevice.setActiveCameraUrl(""); + height: maximumHeight + onVisibleChanged: + { + 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 { position: 1.0; color: "#ffffff" } - } - } - - UM.I18nCatalog { - id: catalog; - name: "cura"; - } - - Label { - id: manageQueueLabel; - anchors { - bottom: queuedLabel.bottom; - right: queuedPrintJobs.right; - rightMargin: 3 * UM.Theme.getSize("default_margin").width; - } - 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"); - } - - MouseArea { - anchors.fill: manageQueueLabel; - hoverEnabled: true; - onClicked: Cura.MachineManager.printerOutputDevices[0].openPrintJobControlPanel(); - onEntered: manageQueueLabel.font.underline = true; - onExited: manageQueueLabel.font.underline = false; - } - - 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"); - font: UM.Theme.getFont("large"); - 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; + GradientStop { + position: 0.0 + color: "#f6f6f6" + } + GradientStop { + position: 1.0 + color: "#ffffff" + } + } + } + + Item + { + 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") + } + + Item + { + 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: parent.bottom + horizontalCenter: parent.horizontalCenter + top: printJobQueueHeadings.bottom + topMargin: 12 * screenScaleFactor // TODO: Theme! + } + 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 + right: parent.right + } + printJob: modelData + } + model: OutputDevice.queuedPrintJobs + spacing: 6 } - model: OutputDevice.queuedPrintJobs; - spacing: 6; } } PrinterVideoStream { - anchors.fill: parent; - cameraUrl: OutputDevice.activeCameraUrl; - visible: OutputDevice.activeCameraUrl != ""; + anchors.fill: parent + cameraUrl: OutputDevice.activeCameraUrl + visible: OutputDevice.activeCameraUrl != "" } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml index 89d88d671a..4922aea853 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml +++ b/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. diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml index d14277a1ff..9ffb1eabb4 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml +++ b/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: "" diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml index 6d02c40776..ada6f8a644 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml +++ b/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,42 +61,72 @@ 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 } - Label + Item { - color: "#374355" - elide: Text.ElideRight - font: UM.Theme.getFont("medium") // 14pt, regular - 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 * screenScaleFactor // TODO: Theme! + height: childrenRect.height + width: childrenRect.width - // FIXED-LINE-HEIGHT: - height: 18 * screenScaleFactor // TODO: Theme! - verticalAlignment: Text.AlignVCenter + Label + { + id: printerAssignmentLabel + anchors.verticalCenter: parent.verticalCenter + color: "#374355" + elide: Text.ElideRight + font: UM.Theme.getFont("medium") // 14pt, regular + text: { + if (printJob !== null) { + if (printJob.assignedPrinter == null) + { + if (printJob.state == "error") + { + return catalog.i18nc("@label", "Unavailable printer") + } + return catalog.i18nc("@label", "First available") + } + else + { + return printJob.assignedPrinter.name + } + } + return "" + } + visible: printJob + + // 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! + } } \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml index 5d4d408b8e..a31c8bbd99 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml +++ b/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 - property var config0: printJob ? printJob.configuration.extruderConfigurations[0] : null - property var config1: printJob ? printJob.configuration.extruderConfigurations[1] : null + // Extracted buildplate configuration + property alias buildplate: buildplateConfig.buildplate - 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! - material: config0 ? config0.activeMaterial.name : "" + color: config0 && config0.activeMaterial ? config0.activeMaterial.color : "#eeeeee" // TODO: Theme! + 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! - material: config1 ? config1.activeMaterial.name : "" + color: config1 && config1.activeMaterial ? config1.activeMaterial.color : "#eeeeee" // TODO: Theme! + 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 } } \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml new file mode 100644 index 0000000000..cd78f1b11f --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/svg/icons/external_link.svg b/plugins/UM3NetworkPrinting/resources/svg/icons/external_link.svg new file mode 100644 index 0000000000..a2130fb97b --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/svg/icons/external_link.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file