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