diff --git a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml index bb4f34163d..c8c1e56c82 100644 --- a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml +++ b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml @@ -47,6 +47,7 @@ Rectangle height: UM.Theme.getSize("toolbox_heading_label").height width: parent.width - UM.Theme.getSize("default_margin").width wrapMode: Text.WordWrap + elide: Text.ElideRight font: UM.Theme.getFont("medium_bold") } UM.RecolorImage diff --git a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml index 618dbed81c..6f054f9c19 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml @@ -8,11 +8,13 @@ import UM 1.3 as UM import Cura 1.0 as Cura Rectangle { + id: base property var iconSource: null; color: "#0a0850" // TODO: Theme! height: width; radius: Math.round(0.5 * width); width: 24 * screenScaleFactor; + property var enabled: true UM.RecolorImage { id: icon; @@ -29,12 +31,18 @@ Rectangle { MouseArea { id: clickArea; anchors.fill: parent; - hoverEnabled: true; + hoverEnabled: base.enabled onClicked: { - if (OutputDevice.activeCameraUrl != "") { - OutputDevice.setActiveCameraUrl(""); - } else { - OutputDevice.setActiveCameraUrl(modelData.cameraUrl); + if (base.enabled) + { + if (OutputDevice.activeCameraUrl != "") + { + OutputDevice.setActiveCameraUrl("") + } + else + { + OutputDevice.setActiveCameraUrl(modelData.cameraUrl) + } } } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml index 0877a15f00..f86135ae62 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml @@ -16,9 +16,9 @@ Item property bool expanded: false property var borderWidth: 1 - property color borderColor: "#EAEAEC" + property color borderColor: "#CCCCCC" property color headerBackgroundColor: "white" - property color headerHoverColor: "#f5f5f5" + property color headerHoverColor: "#e8f2fc" property color drawerBackgroundColor: "white" property alias headerItem: header.children property alias drawerItem: drawer.children diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml new file mode 100644 index 0000000000..476e3c2aa1 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -0,0 +1,251 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.3 +import QtQuick.Controls 2.0 +import QtGraphicalEffects 1.0 +import UM 1.3 as UM + +Item +{ + id: base + + property var currentIndex: 0 + property var tileWidth: 834 * screenScaleFactor // TODO: Theme! + property var tileHeight: 216 * screenScaleFactor // TODO: Theme! + property var tileSpacing: 60 * screenScaleFactor // TODO: Theme! + property var maxOffset: (OutputDevice.printers.length - 1) * (tileWidth + tileSpacing) + + height: centerSection.height + width: maximumWidth + + Item + { + id: leftHint + anchors + { + right: leftButton.left + rightMargin: 12 * screenScaleFactor // TODO: Theme! + left: parent.left + } + height: parent.height + z: 10 + LinearGradient + { + anchors.fill: parent + start: Qt.point(0, 0) + end: Qt.point(leftHint.width, 0) + gradient: Gradient + { + GradientStop + { + position: 0.0 + color: "#fff6f6f6" // TODO: Theme! + } + GradientStop + { + position: 1.0 + color: "#66f6f6f6" // TODO: Theme! + } + } + } + MouseArea + { + anchors.fill: parent + onClicked: navigateTo(currentIndex - 1) + } + } + + Button + { + id: leftButton + anchors + { + verticalCenter: parent.verticalCenter + right: centerSection.left + rightMargin: 12 * screenScaleFactor // TODO: Theme! + } + width: 36 * screenScaleFactor // TODO: Theme! + height: 72 * screenScaleFactor // TODO: Theme! + visible: currentIndex > 0 + hoverEnabled: true + z: 10 + onClicked: navigateTo(currentIndex - 1) + background: Rectangle + { + color: leftButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme! + border.width: 1 * screenScaleFactor // TODO: Theme! + border.color: "#cccccc" // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + } + contentItem: Item + { + anchors.fill: parent + UM.RecolorImage + { + anchors.centerIn: parent + width: 18 // TODO: Theme! + height: width // TODO: Theme! + sourceSize.width: width // TODO: Theme! + sourceSize.height: width // TODO: Theme! + color: "#152950" // TODO: Theme! + source: UM.Theme.getIcon("arrow_left") + } + } + } + + Item + { + id: centerSection + anchors + { + verticalCenter: parent.verticalCenter + horizontalCenter: parent.horizontalCenter + } + width: tileWidth + height: tiles.height + z: 1 + + Row + { + id: tiles + height: childrenRect.height + width: 5 * tileWidth + 4 * tileSpacing // TODO: Theme! + x: 0 + z: 0 + Behavior on x + { + NumberAnimation + { + duration: 200 + easing.type: Easing.InOutCubic + } + } + spacing: 60 * screenScaleFactor // TODO: Theme! + + Repeater + { + model: OutputDevice.printers + MonitorPrinterCard + { + printer: modelData + enabled: model.index == currentIndex + } + } + } + } + + Button + { + id: rightButton + anchors + { + verticalCenter: parent.verticalCenter + left: centerSection.right + leftMargin: 12 * screenScaleFactor // TODO: Theme! + } + width: 36 * screenScaleFactor // TODO: Theme! + height: 72 * screenScaleFactor // TODO: Theme! + z: 10 + visible: currentIndex < OutputDevice.printers.length - 1 + onClicked: navigateTo(currentIndex + 1) + hoverEnabled: true + background: Rectangle + { + color: rightButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme! + border.width: 1 * screenScaleFactor // TODO: Theme! + border.color: "#cccccc" // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + } + contentItem: Item + { + anchors.fill: parent + UM.RecolorImage + { + anchors.centerIn: parent + width: 18 // TODO: Theme! + height: width // TODO: Theme! + sourceSize.width: width // TODO: Theme! + sourceSize.height: width // TODO: Theme! + color: "#152950" // TODO: Theme! + source: UM.Theme.getIcon("arrow_right") + } + } + } + + Item + { + id: rightHint + anchors + { + left: rightButton.right + leftMargin: 12 * screenScaleFactor // TODO: Theme! + right: parent.right + } + height: centerSection.height + z: 10 + + LinearGradient + { + anchors.fill: parent + start: Qt.point(0, 0) + end: Qt.point(rightHint.width, 0) + gradient: Gradient + { + GradientStop + { + position: 0.0 + color: "#66f6f6f6" // TODO: Theme! + } + GradientStop + { + position: 1.0 + color: "#fff6f6f6" // TODO: Theme! + } + } + } + MouseArea + { + anchors.fill: parent + onClicked: navigateTo(currentIndex + 1) + } + } + + Item + { + id: navigationDots + anchors + { + horizontalCenter: centerSection.horizontalCenter + top: centerSection.bottom + topMargin: 36 * screenScaleFactor // TODO: Theme! + } + Row + { + spacing: 8 * screenScaleFactor // TODO: Theme! + Repeater + { + model: OutputDevice.printers + Button + { + background: Rectangle + { + color: model.index == currentIndex ? "#777777" : "#d8d8d8" // TODO: Theme! + radius: Math.floor(width / 2) + width: 12 * screenScaleFactor // TODO: Theme! + height: width // TODO: Theme! + } + onClicked: navigateTo(model.index) + } + } + } + } + + function navigateTo( i ) { + if (i >= 0 && i < OutputDevice.printers.length) + { + tiles.x = -1 * i * (tileWidth + tileSpacing) + currentIndex = i + } + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml index d8c5d1ec28..f431ef1c52 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml @@ -26,7 +26,7 @@ Item ExpandableCard { - borderColor: printJob.configurationChanges.length !== 0 ? "#f5a623" : "#EAEAEC" // TODO: Theme! + borderColor: printJob.configurationChanges.length !== 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme! headerItem: Row { height: 48 * screenScaleFactor // TODO: Theme! diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml index 1676c51edf..2ca37a7e13 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -25,8 +25,13 @@ Item property var borderSize: 1 * screenScaleFactor // TODO: Theme, and remove from here + // If the printer card's controls are enabled. This is used by the carousel + // to prevent opening the context menu or camera while the printer card is not + // "in focus" + property var enabled: true + width: 834 * screenScaleFactor // TODO: Theme! - height: 216 * screenScaleFactor // TODO: Theme! + height: childrenRect.height // Printer portion Rectangle @@ -34,7 +39,7 @@ Item id: printerInfo border { - color: "#EAEAEC" // TODO: Theme! + color: "#CCCCCC" // TODO: Theme! width: borderSize // TODO: Remove once themed } color: "white" // TODO: Theme! @@ -124,6 +129,7 @@ Item printJob: printer.activePrintJob width: 36 * screenScaleFactor // TODO: Theme! height: 36 * screenScaleFactor // TODO: Theme! + enabled: base.enabled } CameraButton { @@ -136,6 +142,7 @@ Item bottomMargin: 20 * screenScaleFactor // TODO: Theme! } iconSource: "../svg/icons/camera.svg" + enabled: base.enabled } } @@ -151,7 +158,7 @@ Item } border { - color: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? "#f5a623" : "#EAEAEC" // TODO: Theme! + color: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme! width: borderSize // TODO: Remove once themed } color: "white" // TODO: Theme! @@ -320,7 +327,7 @@ Item implicitHeight: 32 * screenScaleFactor // TODO: Theme! implicitWidth: 96 * screenScaleFactor // TODO: Theme! visible: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 - onClicked: overrideConfirmationDialog.open() + onClicked: base.enabled ? overrideConfirmationDialog.open() : {} } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml index 0333e1447c..b80c6a3661 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml @@ -49,32 +49,17 @@ Component } } - ScrollView + Item { id: printers anchors { - left: queue.left - right: queue.right top: parent.top topMargin: 48 * screenScaleFactor // TODO: Theme! } + width: parent.width height: 264 * screenScaleFactor // TODO: Theme! - - Row - { - spacing: 60 * screenScaleFactor // TODO: Theme! - - Repeater - { - model: OutputDevice.printers - - MonitorPrinterCard - { - printer: modelData - } - } - } + MonitorCarousel {} } MonitorQueue diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml index 1edbf9f6a2..5c5c892dad 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml @@ -13,6 +13,7 @@ Item { property var printJob: null; property var started: isStarted(printJob); property var assigned: isAssigned(printJob); + property var enabled: true Button { id: button; @@ -31,8 +32,8 @@ Item { verticalAlignment: Text.AlignVCenter; } height: width; - hoverEnabled: true; - onClicked: parent.switchPopupState(); + hoverEnabled: base.enabled + onClicked: base.enabled ? parent.switchPopupState() : {} text: "\u22EE"; //Unicode; Three stacked points. visible: { if (!printJob) { diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index ea6c92b479..83a51e5431 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -495,7 +495,7 @@ "toolbox_back_button": [4.0, 2.0], "toolbox_installed_tile": [1.0, 8.0], "toolbox_property_label": [1.0, 2.0], - "toolbox_heading_label": [1.0, 4.0], + "toolbox_heading_label": [1.0, 3.8], "toolbox_header": [1.0, 4.0], "toolbox_header_highlight": [0.25, 0.25], "toolbox_progress_bar": [8.0, 0.5],