diff --git a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml new file mode 100644 index 0000000000..1ceebccf89 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml @@ -0,0 +1,47 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.3 +import QtQuick.Controls 2.0 as Controls2 +import QtGraphicalEffects 1.0 + +import UM 1.3 as UM +import Cura 1.0 as Cura + +Rectangle +{ + property var iconSource: null + + width: 36 * screenScaleFactor + height: width + radius: 0.5 * width + color: clickArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary") + + UM.RecolorImage + { + id: icon + width: parent.width / 2 + height: width + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + color: UM.Theme.getColor("primary_text") + source: iconSource + } + + MouseArea + { + id: clickArea + anchors.fill:parent + hoverEnabled: true + onClicked: + { + if (OutputDevice.activeCamera !== null) + { + OutputDevice.setActiveCamera(null) + } + else + { + OutputDevice.setActiveCamera(modelData.camera) + } + } + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml b/plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml index a7061b76e5..f8ad0e763e 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml @@ -16,7 +16,7 @@ Component { id: base property var lineColor: "#DCDCDC" // TODO: Should be linked to theme. - + property var shadowRadius: 5 * screenScaleFactor property var cornerRadius: 4 * screenScaleFactor // TODO: Should be linked to theme. visible: OutputDevice != null anchors.fill: parent @@ -83,6 +83,8 @@ Component ListView { + id: printer_list + property var current_index: -1 anchors { top: parent.top @@ -105,18 +107,35 @@ Component height: childrenRect.height + UM.Theme.getSize("default_margin").height anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter + color: + { + if(modelData.state == "disabled") + { + return UM.Theme.getColor("monitor_background_inactive") + } + else + { + return UM.Theme.getColor("monitor_background_active") + } + } id: base - property var shadowRadius: 5 + property var shadowRadius: 5 * screenScaleFactor property var collapsed: true layer.enabled: true layer.effect: DropShadow { - radius: base.shadowRadius + radius: 5 * screenScaleFactor verticalOffset: 2 color: "#3F000000" // 25% shadow } + Connections + { + target: printer_list + onCurrent_indexChanged: { base.collapsed = printer_list.current_index != model.index } + } + Item { id: printerInfo @@ -132,7 +151,16 @@ Component MouseArea { anchors.fill: parent - onClicked: base.collapsed = !base.collapsed + onClicked: + { + if (base.collapsed) { + printer_list.current_index = model.index + } + else + { + printer_list.current_index = -1 + } + } } Item @@ -168,7 +196,7 @@ Component { if(modelData.state == "disabled") { - return UM.Theme.getColor("setting_control_disabled") + return UM.Theme.getColor("monitor_text_inactive") } if(modelData.activePrintJob != undefined) @@ -176,7 +204,7 @@ Component return UM.Theme.getColor("primary") } - return UM.Theme.getColor("setting_control_disabled") + return UM.Theme.getColor("monitor_text_inactive") } } } @@ -224,7 +252,7 @@ Component width: parent.width elide: Text.ElideRight font: UM.Theme.getFont("default") - opacity: 0.6 + color: UM.Theme.getColor("monitor_text_inactive") } } @@ -257,8 +285,16 @@ Component Rectangle { id: topSpacer - color: UM.Theme.getColor("viewport_background") - height: 2 + color: + { + if(modelData.state == "disabled") + { + return UM.Theme.getColor("monitor_lining_inactive") + } + return UM.Theme.getColor("viewport_background") + } + // UM.Theme.getColor("viewport_background") + height: 1 anchors { left: parent.left @@ -271,7 +307,14 @@ Component PrinterFamilyPill { id: printerFamilyPill - color: UM.Theme.getColor("viewport_background") + color: + { + if(modelData.state == "disabled") + { + return "transparent" + } + return UM.Theme.getColor("viewport_background") + } anchors.top: topSpacer.bottom anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height text: modelData.type @@ -357,21 +400,13 @@ Component function switchPopupState() { - if (popup.visible) - { - popup.close() - } - else - { - popup.open() - } + popup.visible ? popup.close() : popup.open() } Controls2.Button { id: contextButton text: "\u22EE" //Unicode; Three stacked points. - font.pixelSize: 25 width: 35 height: width anchors @@ -389,6 +424,14 @@ Component radius: 0.5 * width color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: contextButton.text + color: UM.Theme.getColor("monitor_text_inactive") + font.pixelSize: 25 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } onClicked: parent.switchPopupState() } @@ -398,18 +441,21 @@ Component // TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property id: popup clip: true - closePolicy: Controls2.Popup.CloseOnPressOutsideParent - x: parent.width - width - y: contextButton.height - width: 160 + closePolicy: Popup.CloseOnPressOutside + x: (parent.width - width) + 26 * screenScaleFactor + y: contextButton.height - 5 * screenScaleFactor // Because shadow + width: 182 * screenScaleFactor height: contentItem.height + 2 * padding visible: false + padding: 5 * screenScaleFactor // Because shadow - transformOrigin: Controls2.Popup.Top + transformOrigin: Popup.Top contentItem: Item { - width: popup.width - 2 * popup.padding - height: childrenRect.height + 15 + width: popup.width + height: childrenRect.height + 36 * screenScaleFactor + anchors.topMargin: 10 * screenScaleFactor + anchors.bottomMargin: 10 * screenScaleFactor Controls2.Button { id: pauseButton @@ -428,14 +474,22 @@ Component } width: parent.width enabled: modelData.activePrintJob != null && ["paused", "printing"].indexOf(modelData.activePrintJob.state) >= 0 + visible: enabled anchors.top: parent.top - anchors.topMargin: 10 + anchors.topMargin: 18 * screenScaleFactor + height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor hoverEnabled: true - background: Rectangle + background: Rectangle { opacity: pauseButton.down || pauseButton.hovered ? 1 : 0 color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: pauseButton.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } } Controls2.Button @@ -448,6 +502,7 @@ Component popup.close(); } width: parent.width + height: 39 * screenScaleFactor anchors.top: pauseButton.bottom hoverEnabled: true enabled: modelData.activePrintJob != null && ["paused", "printing", "pre_print"].indexOf(modelData.activePrintJob.state) >= 0 @@ -456,6 +511,12 @@ Component opacity: abortButton.down || abortButton.hovered ? 1 : 0 color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: abortButton.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } } MessageDialog @@ -488,19 +549,20 @@ Component Item { id: pointedRectangle - width: parent.width -10 - height: parent.height -10 + width: parent.width - 10 * screenScaleFactor // Because of the shadow + height: parent.height - 10 * screenScaleFactor // Because of the shadow anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Rectangle { id: point - height: 13 - width: 13 + height: 14 * screenScaleFactor + width: 14 * screenScaleFactor color: UM.Theme.getColor("setting_control") transform: Rotation { angle: 45} anchors.right: bloop.right + anchors.rightMargin: 24 y: 1 } @@ -510,9 +572,9 @@ Component color: UM.Theme.getColor("setting_control") width: parent.width anchors.top: parent.top - anchors.topMargin: 10 + anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point anchors.bottom: parent.bottom - anchors.bottomMargin: 5 + anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow } } } @@ -595,30 +657,14 @@ Component color: "black" } - Rectangle + CameraButton { - id: showCameraIcon - width: 35 * screenScaleFactor - height: width - radius: 0.5 * width - anchors.left: parent.left - anchors.bottom: printJobPreview.bottom - color: UM.Theme.getColor("setting_control_border_highlight") - Image + id: showCameraButton + iconSource: "../svg/camera-icon.svg" + anchors { - width: parent.width - height: width - anchors.right: parent.right - anchors.rightMargin: parent.rightMargin - source: "../svg/camera-icon.svg" - } - MouseArea - { - anchors.fill:parent - onClicked: - { - OutputDevice.setActiveCamera(modelData.camera) - } + left: parent.left + bottom: printJobPreview.bottom } } } @@ -650,13 +696,24 @@ Component style: ProgressBarStyle { + property var remainingTime: + { + if(modelData.activePrintJob == null) + { + 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". */ + var activeJob = modelData.activePrintJob + return Math.max(activeJob.timeTotal - activeJob.timeElapsed, 0); + } property var progressText: { if(modelData.activePrintJob == null) { return "" } - switch(modelData.activePrintJob.state) { case "wait_cleanup": @@ -669,18 +726,19 @@ Component 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 catalog.i18nc("@label:status", "Paused") + return OutputDevice.formatDuration( remainingTime ) case "resuming": return catalog.i18nc("@label:status", "Resuming") case "queued": return catalog.i18nc("@label:status", "Action required") default: - OutputDevice.formatDuration(modelData.activePrintJob.timeTotal - modelData.activePrintJob.timeElapsed) + return OutputDevice.formatDuration( remainingTime ) } } @@ -693,11 +751,28 @@ Component progress: Rectangle { - color: UM.Theme.getColor("primary") + color: + { + var state = modelData.activePrintJob.state + var inactiveStates = [ + "pausing", + "paused", + "resuming", + "wait_cleanup" + ] + if(inactiveStates.indexOf(state) > -1 && remainingTime > 0) + { + return UM.Theme.getColor("monitor_text_inactive") + } + else + { + return UM.Theme.getColor("primary") + } + } id: progressItem function getTextOffset() { - if(progressItem.width + progressLabel.width < control.width) + if(progressItem.width + progressLabel.width + 16 < control.width) { return progressItem.width + UM.Theme.getSize("default_margin").width } diff --git a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml b/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml index 71b598d05c..f6cf6607c7 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml @@ -26,7 +26,7 @@ Component Label { id: manageQueueLabel - anchors.rightMargin: 4 * UM.Theme.getSize("default_margin").width + anchors.rightMargin: 3 * UM.Theme.getSize("default_margin").width anchors.right: queuedPrintJobs.right anchors.bottom: queuedLabel.bottom text: catalog.i18nc("@label link to connect manager", "Manage queue") @@ -50,7 +50,7 @@ Component anchors.left: queuedPrintJobs.left anchors.top: parent.top anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height - anchors.leftMargin: 3 * UM.Theme.getSize("default_margin").width + anchors.leftMargin: 3 * UM.Theme.getSize("default_margin").width + 5 text: catalog.i18nc("@label", "Queued") font: UM.Theme.getFont("large") color: UM.Theme.getColor("text") diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintCoreConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintCoreConfiguration.qml index 0ae1fec920..b2f4e85f9a 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/PrintCoreConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/PrintCoreConfiguration.qml @@ -67,7 +67,7 @@ Item } return "" } - font: UM.Theme.getFont("default_bold") + font: UM.Theme.getFont("default") elide: Text.ElideRight width: parent.width } diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintJobInfoBlock.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintJobInfoBlock.qml index dd8eb27fca..cfadabad5c 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/PrintJobInfoBlock.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/PrintJobInfoBlock.qml @@ -11,12 +11,14 @@ Item { id: base property var printJob: null - property var shadowRadius: 5 + property var shadowRadius: 5 * screenScaleFactor function getPrettyTime(time) { return OutputDevice.formatDuration(time) } + width: parent.width + UM.I18nCatalog { id: catalog @@ -29,7 +31,7 @@ Item anchors { top: parent.top - topMargin: 3 + topMargin: 3 * screenScaleFactor left: parent.left leftMargin: base.shadowRadius rightMargin: base.shadowRadius @@ -42,7 +44,7 @@ Item layer.effect: DropShadow { radius: base.shadowRadius - verticalOffset: 2 + verticalOffset: 2 * screenScaleFactor color: "#3F000000" // 25% shadow } @@ -55,7 +57,7 @@ Item bottom: parent.bottom left: parent.left right: parent.horizontalCenter - margins: 2 * UM.Theme.getSize("default_margin").width + margins: UM.Theme.getSize("wide_margin").width rightMargin: UM.Theme.getSize("default_margin").width } @@ -106,7 +108,6 @@ Item Label { id: totalTimeLabel - opacity: 0.6 anchors.bottom: parent.bottom anchors.right: parent.right font: UM.Theme.getFont("default") @@ -126,6 +127,7 @@ Item right: parent.right margins: 2 * UM.Theme.getSize("default_margin").width leftMargin: UM.Theme.getSize("default_margin").width + rightMargin: UM.Theme.getSize("default_margin").width / 2 } Label @@ -168,7 +170,6 @@ Item { id: contextButton text: "\u22EE" //Unicode; Three stacked points. - font.pixelSize: 25 width: 35 height: width anchors @@ -186,6 +187,14 @@ Item radius: 0.5 * width color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: contextButton.text + color: UM.Theme.getColor("monitor_text_inactive") + font.pixelSize: 25 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } onClicked: parent.switchPopupState() } @@ -195,18 +204,21 @@ Item // TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property id: popup clip: true - closePolicy: Popup.CloseOnPressOutsideParent - x: parent.width - width - y: contextButton.height - width: 160 + closePolicy: Popup.CloseOnPressOutside + x: (parent.width - width) + 26 * screenScaleFactor + y: contextButton.height - 5 * screenScaleFactor // Because shadow + width: 182 * screenScaleFactor height: contentItem.height + 2 * padding visible: false + padding: 5 * screenScaleFactor // Because shadow transformOrigin: Popup.Top contentItem: Item { - width: popup.width - 2 * popup.padding - height: childrenRect.height + 15 + width: popup.width + height: childrenRect.height + 36 * screenScaleFactor + anchors.topMargin: 10 * screenScaleFactor + anchors.bottomMargin: 10 * screenScaleFactor Button { id: sendToTopButton @@ -218,14 +230,22 @@ Item } width: parent.width enabled: OutputDevice.queuedPrintJobs[0].key != printJob.key + visible: enabled anchors.top: parent.top - anchors.topMargin: 10 + anchors.topMargin: 18 * screenScaleFactor + height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor hoverEnabled: true - background: Rectangle + background: Rectangle { opacity: sendToTopButton.down || sendToTopButton.hovered ? 1 : 0 color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: sendToTopButton.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } } MessageDialog @@ -249,6 +269,7 @@ Item popup.close(); } width: parent.width + height: 39 * screenScaleFactor anchors.top: sendToTopButton.bottom hoverEnabled: true background: Rectangle @@ -256,6 +277,12 @@ Item opacity: deleteButton.down || deleteButton.hovered ? 1 : 0 color: UM.Theme.getColor("viewport_background") } + contentItem: Label + { + text: deleteButton.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + } } MessageDialog @@ -288,19 +315,20 @@ Item Item { id: pointedRectangle - width: parent.width -10 - height: parent.height -10 + width: parent.width - 10 * screenScaleFactor // Because of the shadow + height: parent.height - 10 * screenScaleFactor // Because of the shadow anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter Rectangle { id: point - height: 13 - width: 13 + height: 14 * screenScaleFactor + width: 14 * screenScaleFactor color: UM.Theme.getColor("setting_control") transform: Rotation { angle: 45} anchors.right: bloop.right + anchors.rightMargin: 24 y: 1 } @@ -310,9 +338,9 @@ Item color: UM.Theme.getColor("setting_control") width: parent.width anchors.top: parent.top - anchors.topMargin: 10 + anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point anchors.bottom: parent.bottom - anchors.bottomMargin: 5 + anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow } } } @@ -352,7 +380,7 @@ Item { text: modelData color: UM.Theme.getColor("viewport_background") - padding: 3 + padding: 3 * screenScaleFactor } } } @@ -374,14 +402,14 @@ Item PrintCoreConfiguration { id: leftExtruderInfo - width: Math.round(parent.width / 2) + width: Math.round(parent.width / 2) * screenScaleFactor printCoreConfiguration: printJob.configuration.extruderConfigurations[0] } PrintCoreConfiguration { id: rightExtruderInfo - width: Math.round(parent.width / 2) + width: Math.round(parent.width / 2) * screenScaleFactor printCoreConfiguration: printJob.configuration.extruderConfigurations[1] } } @@ -391,7 +419,7 @@ Item Rectangle { color: UM.Theme.getColor("viewport_background") - width: 2 + width: 2 * screenScaleFactor anchors.top: parent.top anchors.bottom: parent.bottom anchors.margins: UM.Theme.getSize("default_margin").height diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrinterVideoStream.qml b/plugins/UM3NetworkPrinting/resources/qml/PrinterVideoStream.qml index 74c8ec8483..d0213a4571 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/PrinterVideoStream.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/PrinterVideoStream.qml @@ -23,36 +23,18 @@ Item z: 0 } - Button + CameraButton { - id: backButton - anchors.bottom: cameraImage.top - anchors.bottomMargin: UM.Theme.getSize("default_margin").width - anchors.right: cameraImage.right - - // TODO: Hardcoded sizes - width: 20 * screenScaleFactor - height: 20 * screenScaleFactor - - onClicked: OutputDevice.setActiveCamera(null) - - style: ButtonStyle + id: closeCameraButton + iconSource: UM.Theme.getIcon("cross1") + anchors { - label: Item - { - UM.RecolorImage - { - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - width: control.width - height: control.height - sourceSize.width: width - sourceSize.height: width - source: UM.Theme.getIcon("cross1") - } - } - background: Item {} + top: cameraImage.top + topMargin: UM.Theme.getSize("default_margin").height + right: cameraImage.right + rightMargin: UM.Theme.getSize("default_margin").width } + z: 999 } Image diff --git a/plugins/UM3NetworkPrinting/resources/svg/camera-icon.svg b/plugins/UM3NetworkPrinting/resources/svg/camera-icon.svg index 29adfa5875..66bed04508 100644 --- a/plugins/UM3NetworkPrinting/resources/svg/camera-icon.svg +++ b/plugins/UM3NetworkPrinting/resources/svg/camera-icon.svg @@ -1,6 +1,8 @@ - - - - + + + Created with Sketch. + + + \ No newline at end of file diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index c408146669..43d892c34c 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -321,7 +321,12 @@ "favorites_header_hover": [245, 245, 245, 255], "favorites_header_text": [31, 36, 39, 255], "favorites_header_text_hover": [31, 36, 39, 255], - "favorites_row_selected": [196, 239, 255, 255] + "favorites_row_selected": [196, 239, 255, 255], + + "monitor_text_inactive": [154, 154, 154, 255], + "monitor_background_inactive": [240, 240, 240, 255], + "monitor_background_active": [255, 255, 255, 255], + "monitor_lining_inactive": [230, 230, 230, 255] }, "sizes": { @@ -469,6 +474,8 @@ "toolbox_progress_bar": [8.0, 0.5], "toolbox_chart_row": [1.0, 2.0], "toolbox_action_button": [8.0, 2.5], - "toolbox_loader": [2.0, 2.0] + "toolbox_loader": [2.0, 2.0], + + "drop_shadow_radius": [1.0, 1.0] } }