From 7fc5742b7f328b0a46b1708526eaf8bf3f5aba33 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:01:40 +0100 Subject: [PATCH 1/9] Add monitor carousel Contributes to CL-1151 --- .../resources/qml/MonitorCarousel.qml | 231 ++++++++++++++++++ .../resources/qml/MonitorPrinterCard.qml | 2 +- .../resources/qml/MonitorStage.qml | 21 +- 3 files changed, 235 insertions(+), 19 deletions(-) create mode 100644 plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml new file mode 100644 index 0000000000..7d56b2f294 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -0,0 +1,231 @@ +// 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 + 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" + } + GradientStop + { + position: 1.0 + color: "#00f6f6f6" + } + } + } + } + + Button + { + id: leftButton + anchors + { + verticalCenter: parent.verticalCenter + right: centerSection.left + rightMargin: 12 * screenScaleFactor + } + width: 36 * screenScaleFactor // TODO: Theme! + height: 72 * screenScaleFactor // TODO: Theme! + visible: currentIndex > 0 + z: 10 + onClicked: navigateTo(currentIndex - 1) + background: Rectangle + { + color: "#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 + height: 18 + sourceSize.width: 18 + sourceSize.height: 18 + color: "#666666" // 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 + x: 0 + z: 0 + Behavior on x { NumberAnimation { duration: 100 } } + spacing: 60 * screenScaleFactor // TODO: Theme! + + Repeater + { + model: OutputDevice.printers + MonitorPrinterCard + { + printer: modelData + } + } + } + } + + Button + { + id: rightButton + anchors + { + verticalCenter: parent.verticalCenter + left: centerSection.right + leftMargin: 12 * screenScaleFactor + } + width: 36 * screenScaleFactor // TODO: Theme! + height: 72 * screenScaleFactor // TODO: Theme! + z: 10 + visible: currentIndex < OutputDevice.printers.length - 1 + onClicked: navigateTo(currentIndex + 1) + background: Rectangle + { + color: "#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 + height: 18 + sourceSize.width: 18 + sourceSize.height: 18 + color: "#666666" // TODO: Theme! + source: UM.Theme.getIcon("arrow_right") + } + } + } + + Item + { + id: rightHint + anchors + { + left: rightButton.right + leftMargin: 12 * screenScaleFactor + 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: "#00f6f6f6" + } + GradientStop + { + position: 1.0 + color: "#fff6f6f6" + } + } + } + } + + 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 + } + 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/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml index 1676c51edf..cfeb77cc89 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -26,7 +26,7 @@ Item property var borderSize: 1 * screenScaleFactor // TODO: Theme, and remove from here width: 834 * screenScaleFactor // TODO: Theme! - height: 216 * screenScaleFactor // TODO: Theme! + height: childrenRect.height // Printer portion Rectangle diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml index 4d59e0eb6b..f77cfee1ef 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml @@ -48,32 +48,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 {} } Item From 5d0da580b9a65c76b9bf21c4d7bcf4470133c1dd Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:04:22 +0100 Subject: [PATCH 2/9] Fix border colors --- plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml | 2 +- .../UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml | 2 +- .../UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml index 0877a15f00..7778c4e1a2 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml @@ -16,7 +16,7 @@ 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 drawerBackgroundColor: "white" 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 cfeb77cc89..038f0535f0 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -34,7 +34,7 @@ Item id: printerInfo border { - color: "#EAEAEC" // TODO: Theme! + color: "#CCCCCC" // TODO: Theme! width: borderSize // TODO: Remove once themed } color: "white" // TODO: Theme! @@ -151,7 +151,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! From b2ea597543f58db9e447167f38389e58425237f9 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:10:34 +0100 Subject: [PATCH 3/9] Fix button color Contributes to CL-1151 --- plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index 7d56b2f294..49d35f794f 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -82,7 +82,7 @@ Item height: 18 sourceSize.width: 18 sourceSize.height: 18 - color: "#666666" // TODO: Theme! + color: "#152950" // TODO: Theme! source: UM.Theme.getIcon("arrow_left") } } @@ -152,7 +152,7 @@ Item height: 18 sourceSize.width: 18 sourceSize.height: 18 - color: "#666666" // TODO: Theme! + color: "#152950" // TODO: Theme! source: UM.Theme.getIcon("arrow_right") } } From 2f6a274c0e2b78064fb9ae8a3c6f7766f8623e1a Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:27:55 +0100 Subject: [PATCH 4/9] Small style improvements Contributes to CL-1151 --- .../resources/qml/ExpandableCard.qml | 2 +- .../resources/qml/MonitorCarousel.qml | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml index 7778c4e1a2..f86135ae62 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml @@ -18,7 +18,7 @@ Item property var borderWidth: 1 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 index 49d35f794f..cd7c6f177f 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -63,11 +63,12 @@ Item width: 36 * screenScaleFactor // TODO: Theme! height: 72 * screenScaleFactor // TODO: Theme! visible: currentIndex > 0 + hoverEnabled: true z: 10 onClicked: navigateTo(currentIndex - 1) background: Rectangle { - color: "#ffffff" // TODO: Theme! + color: leftButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme! border.width: 1 * screenScaleFactor // TODO: Theme! border.color: "#cccccc" // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! @@ -79,9 +80,9 @@ Item { anchors.centerIn: parent width: 18 - height: 18 - sourceSize.width: 18 - sourceSize.height: 18 + height: width + sourceSize.width: width + sourceSize.height: width color: "#152950" // TODO: Theme! source: UM.Theme.getIcon("arrow_left") } @@ -135,9 +136,10 @@ Item z: 10 visible: currentIndex < OutputDevice.printers.length - 1 onClicked: navigateTo(currentIndex + 1) + hoverEnabled: true background: Rectangle { - color: "#ffffff" // TODO: Theme! + color: rightButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme! border.width: 1 * screenScaleFactor // TODO: Theme! border.color: "#cccccc" // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! @@ -149,9 +151,9 @@ Item { anchors.centerIn: parent width: 18 - height: 18 - sourceSize.width: 18 - sourceSize.height: 18 + height: width + sourceSize.width: width + sourceSize.height: width color: "#152950" // TODO: Theme! source: UM.Theme.getIcon("arrow_right") } From 3bd5d141ab74b9e41f85510add3168604c13f5a8 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:39:17 +0100 Subject: [PATCH 5/9] Add easing and make animation less snappy and awesome Contributes to CL-1151 --- .../UM3NetworkPrinting/resources/qml/MonitorCarousel.qml | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index cd7c6f177f..988008dc31 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -108,7 +108,14 @@ Item width: 5 * tileWidth + 4 * tileSpacing x: 0 z: 0 - Behavior on x { NumberAnimation { duration: 100 } } + Behavior on x + { + NumberAnimation + { + duration: 200 + easing.type: Easing.InOutCubic + } + } spacing: 60 * screenScaleFactor // TODO: Theme! Repeater From 30168103b726fb2d49d7d4cc1d563b9a302757a6 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 15:47:36 +0100 Subject: [PATCH 6/9] Update MonitorStage.qml --- plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml index f77cfee1ef..22badfc8ac 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml @@ -15,9 +15,6 @@ Component { id: monitorFrame - property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight") - property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width - height: maximumHeight onVisibleChanged: { @@ -39,11 +36,11 @@ Component gradient: Gradient { GradientStop { position: 0.0 - color: "#f6f6f6" + color: "#f6f6f6" // TODO: Theme! } GradientStop { position: 1.0 - color: "#ffffff" + color: "#ffffff" // TODO: Theme! } } } From e877b47e22cb95b2534a7121db73914d4a321d93 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 16:55:48 +0100 Subject: [PATCH 7/9] Disable printer cards which are not in focus Contributes to CL-1151 --- .../resources/qml/CameraButton.qml | 18 +++++++++++++----- .../resources/qml/MonitorCarousel.qml | 1 + .../resources/qml/MonitorPrinterCard.qml | 9 ++++++++- .../resources/qml/PrintJobContextMenu.qml | 5 +++-- 4 files changed, 25 insertions(+), 8 deletions(-) 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/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index 988008dc31..952ec1e162 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -124,6 +124,7 @@ Item MonitorPrinterCard { printer: modelData + enabled: model.index == currentIndex } } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml index 038f0535f0..2ca37a7e13 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -25,6 +25,11 @@ 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: childrenRect.height @@ -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 } } @@ -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/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) { From 331cd730f11c4b5a486fe7a5e1474c54b0d054fd Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Fri, 14 Dec 2018 16:56:20 +0100 Subject: [PATCH 8/9] Improve visual hint that side cards are not in focus Contributes to CL-1151 --- plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index 952ec1e162..ea1449ac8d 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -45,7 +45,7 @@ Item GradientStop { position: 1.0 - color: "#00f6f6f6" + color: "#66f6f6f6" } } } @@ -190,7 +190,7 @@ Item GradientStop { position: 0.0 - color: "#00f6f6f6" + color: "#66f6f6f6" } GradientStop { From 5c697ab5bed61ad4169db31ac676cdd2f056d9c8 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Mon, 17 Dec 2018 16:58:51 +0100 Subject: [PATCH 9/9] Make hints clickable Contributes to CL-1151 --- .../resources/qml/MonitorCarousel.qml | 46 +++++++++++-------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index ea1449ac8d..476e3c2aa1 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -25,7 +25,7 @@ Item anchors { right: leftButton.left - rightMargin: 12 * screenScaleFactor + rightMargin: 12 * screenScaleFactor // TODO: Theme! left: parent.left } height: parent.height @@ -40,15 +40,20 @@ Item GradientStop { position: 0.0 - color: "#fff6f6f6" + color: "#fff6f6f6" // TODO: Theme! } GradientStop { position: 1.0 - color: "#66f6f6f6" + color: "#66f6f6f6" // TODO: Theme! } } } + MouseArea + { + anchors.fill: parent + onClicked: navigateTo(currentIndex - 1) + } } Button @@ -58,7 +63,7 @@ Item { verticalCenter: parent.verticalCenter right: centerSection.left - rightMargin: 12 * screenScaleFactor + rightMargin: 12 * screenScaleFactor // TODO: Theme! } width: 36 * screenScaleFactor // TODO: Theme! height: 72 * screenScaleFactor // TODO: Theme! @@ -79,10 +84,10 @@ Item UM.RecolorImage { anchors.centerIn: parent - width: 18 - height: width - sourceSize.width: width - sourceSize.height: width + 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") } @@ -105,7 +110,7 @@ Item { id: tiles height: childrenRect.height - width: 5 * tileWidth + 4 * tileSpacing + width: 5 * tileWidth + 4 * tileSpacing // TODO: Theme! x: 0 z: 0 Behavior on x @@ -137,7 +142,7 @@ Item { verticalCenter: parent.verticalCenter left: centerSection.right - leftMargin: 12 * screenScaleFactor + leftMargin: 12 * screenScaleFactor // TODO: Theme! } width: 36 * screenScaleFactor // TODO: Theme! height: 72 * screenScaleFactor // TODO: Theme! @@ -158,10 +163,10 @@ Item UM.RecolorImage { anchors.centerIn: parent - width: 18 - height: width - sourceSize.width: width - sourceSize.height: width + 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") } @@ -174,7 +179,7 @@ Item anchors { left: rightButton.right - leftMargin: 12 * screenScaleFactor + leftMargin: 12 * screenScaleFactor // TODO: Theme! right: parent.right } height: centerSection.height @@ -190,15 +195,20 @@ Item GradientStop { position: 0.0 - color: "#66f6f6f6" + color: "#66f6f6f6" // TODO: Theme! } GradientStop { position: 1.0 - color: "#fff6f6f6" + color: "#fff6f6f6" // TODO: Theme! } } } + MouseArea + { + anchors.fill: parent + onClicked: navigateTo(currentIndex + 1) + } } Item @@ -223,7 +233,7 @@ Item color: model.index == currentIndex ? "#777777" : "#d8d8d8" // TODO: Theme! radius: Math.floor(width / 2) width: 12 * screenScaleFactor // TODO: Theme! - height: width + height: width // TODO: Theme! } onClicked: navigateTo(model.index) }