mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-05 21:13:58 -06:00
Merge pull request #4995 from Ultimaker/CL-1151_add_monitor_carousel
CL-1152 Add monitor carousel
This commit is contained in:
Ian Paschal
GitHub
commit
aed0bb27f2
7 changed files with 284 additions and 32 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
251
plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
Normal file
251
plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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() : {}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue