Skip to content

Commit

Permalink
Merge pull request Ultimaker#4841 from Ultimaker/CL-1148_restyling_mo…
Browse files Browse the repository at this point in the history 
…nitor_queue_tiles

CL-1148 Re-styling monitor queue tiles
  • Loading branch information
@sedwards2009
sedwards2009 authored Nov 22, 2018
2 parents b091e3a + 963b8aa commit ee7355c
Show file tree
Hide file tree
Showing 12 changed files with 814 additions and 95 deletions.
276 changes: 181 additions & 95 deletions plugins/UM3NetworkPrinting/resources/qml/ClusterMonitorItem.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,127 +6,213 @@ import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import UM 1.3 as UM
import Cura 1.0 as Cura
import QtGraphicalEffects 1.0

Component {
Rectangle {
id: monitorFrame;
property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight");
property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width;
color: UM.Theme.getColor("viewport_background");
height: maximumHeight;
onVisibleChanged: {
if (monitorFrame != null && !monitorFrame.visible) {
OutputDevice.setActiveCameraUrl("");
}
}
width: maximumWidth;
Component
{
Rectangle
{
id: monitorFrame

UM.I18nCatalog {
id: catalog;
name: "cura";
}
property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight")
property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width

Label {
id: manageQueueLabel;
anchors {
bottom: queuedLabel.bottom;
right: queuedPrintJobs.right;
rightMargin: 3 * UM.Theme.getSize("default_margin").width;
color: "transparent"
height: maximumHeight
onVisibleChanged:
{
if (monitorFrame != null && !monitorFrame.visible)
{
OutputDevice.setActiveCameraUrl("")
}
color: UM.Theme.getColor("primary");
font: UM.Theme.getFont("default");
linkColor: UM.Theme.getColor("primary");
text: catalog.i18nc("@label link to connect manager", "Manage queue");
}
width: maximumWidth

MouseArea {
anchors.fill: manageQueueLabel;
hoverEnabled: true;
onClicked: Cura.MachineManager.printerOutputDevices[0].openPrintJobControlPanel();
onEntered: manageQueueLabel.font.underline = true;
onExited: manageQueueLabel.font.underline = false;
UM.I18nCatalog
{
id: catalog
name: "cura"
}

Label {
id: queuedLabel;
anchors {
left: queuedPrintJobs.left;
leftMargin: 3 * UM.Theme.getSize("default_margin").width + 5 * screenScaleFactor;
top: parent.top;
topMargin: 2 * UM.Theme.getSize("default_margin").height;
LinearGradient {
anchors.fill: parent
gradient: Gradient {
GradientStop {
position: 0.0
color: "#f6f6f6"
}
GradientStop {
position: 1.0
color: "#ffffff"
}
}
color: UM.Theme.getColor("text");
font: UM.Theme.getFont("large");
text: catalog.i18nc("@label", "Queued");
}

Column {
id: skeletonLoader;
anchors {
bottom: parent.bottom;
bottomMargin: UM.Theme.getSize("default_margin").height;
horizontalCenter: parent.horizontalCenter;
top: queuedLabel.bottom;
topMargin: UM.Theme.getSize("default_margin").height;
Item
{
id: queue

anchors.fill: parent
anchors.top: parent.top
anchors.topMargin: 400 * screenScaleFactor // TODO: Insert carousel here

Label
{
id: queuedLabel
anchors
{
left: queuedPrintJobs.left
top: parent.top
}
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("large_nonbold")
text: catalog.i18nc("@label", "Queued")
}
visible: !queuedPrintJobs.visible;
width: Math.min(800 * screenScaleFactor, maximumWidth);

PrintJobInfoBlock {
anchors {
left: parent.left;
leftMargin: UM.Theme.getSize("default_margin").width;
right: parent.right;
rightMargin: UM.Theme.getSize("default_margin").width;
Item
{
id: manageQueueLabel
anchors
{
right: queuedPrintJobs.right
verticalCenter: queuedLabel.verticalCenter
}
height: 18 * screenScaleFactor // TODO: Theme!
width: childrenRect.width

UM.RecolorImage
{
id: externalLinkIcon
anchors.verticalCenter: manageQueueLabel.verticalCenter
color: UM.Theme.getColor("primary")
source: "../svg/icons/external_link.svg"
width: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
height: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
}
Label
{
id: manageQueueText
anchors
{
left: externalLinkIcon.right
leftMargin: 6 * screenScaleFactor // TODO: Theme!
verticalCenter: externalLinkIcon.verticalCenter
}
color: UM.Theme.getColor("primary")
font: UM.Theme.getFont("default")
linkColor: UM.Theme.getColor("primary")
text: catalog.i18nc("@label link to connect manager", "Manage queue in Cura Connect")
}
printJob: null; // Use as skeleton
}


PrintJobInfoBlock {
anchors {
left: parent.left;
leftMargin: UM.Theme.getSize("default_margin").width;
right: parent.right;
rightMargin: UM.Theme.getSize("default_margin").width;
MouseArea
{
anchors.fill: manageQueueLabel
hoverEnabled: true
onClicked: Cura.MachineManager.printerOutputDevices[0].openPrintJobControlPanel()
onEntered:
{
manageQueueText.font.underline = true
}
onExited:
{
manageQueueText.font.underline = false
}
printJob: null; // Use as skeleton
}
}

ScrollView {
id: queuedPrintJobs;
anchors {
top: queuedLabel.bottom;
topMargin: UM.Theme.getSize("default_margin").height;
horizontalCenter: parent.horizontalCenter;
bottomMargin: UM.Theme.getSize("default_margin").height;
bottom: parent.bottom;
Row
{
id: printJobQueueHeadings
anchors
{
left: queuedPrintJobs.left
leftMargin: 6 * screenScaleFactor // TODO: Theme!
top: queuedLabel.bottom
topMargin: 24 * screenScaleFactor // TODO: Theme!
}
spacing: 18 * screenScaleFactor // TODO: Theme!

Label
{
text: catalog.i18nc("@label", "Print jobs")
color: "#666666"
elide: Text.ElideRight
font: UM.Theme.getFont("medium") // 14pt, regular
anchors.verticalCenter: parent.verticalCenter
width: 284 * screenScaleFactor // TODO: Theme! (Should match column size)

// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}

Label
{
text: catalog.i18nc("@label", "Total print time")
color: "#666666"
elide: Text.ElideRight
font: UM.Theme.getFont("medium") // 14pt, regular
anchors.verticalCenter: parent.verticalCenter
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)

// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}

Label
{
text: catalog.i18nc("@label", "Waiting for")
color: "#666666"
elide: Text.ElideRight
font: UM.Theme.getFont("medium") // 14pt, regular
anchors.verticalCenter: parent.verticalCenter
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)

// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}
}
style: UM.Theme.styles.scrollview;
visible: OutputDevice.receivedPrintJobs;
width: Math.min(800 * screenScaleFactor, maximumWidth);

ListView {
id: printJobList;
anchors.fill: parent;
delegate: PrintJobInfoBlock {
anchors {
left: parent.left;
leftMargin: UM.Theme.getSize("default_margin").width;
right: parent.right;
rightMargin: UM.Theme.getSize("default_margin").width;

ScrollView
{
id: queuedPrintJobs
anchors {
bottom: parent.bottom
horizontalCenter: parent.horizontalCenter
top: printJobQueueHeadings.bottom
topMargin: 12 * screenScaleFactor // TODO: Theme!
}
style: UM.Theme.styles.scrollview
visible: OutputDevice.receivedPrintJobs
width: Math.min(834 * screenScaleFactor, maximumWidth)

ListView
{
id: printJobList
anchors.fill: parent
delegate: MonitorPrintJobCard
{
anchors
{
left: parent.left
right: parent.right
}
printJob: modelData
}
printJob: modelData;
model: OutputDevice.queuedPrintJobs
spacing: 6
}
model: OutputDevice.queuedPrintJobs;
spacing: UM.Theme.getSize("default_margin").height - 2 * UM.Theme.getSize("monitor_shadow_radius").width;
}
}

PrinterVideoStream {
anchors.fill: parent;
cameraUrl: OutputDevice.activeCameraUrl;
visible: OutputDevice.activeCameraUrl != "";
anchors.fill: parent
cameraUrl: OutputDevice.activeCameraUrl
visible: OutputDevice.activeCameraUrl != ""
}
}

}
82 changes: 82 additions & 0 deletions plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.

import QtQuick 2.2
import QtQuick.Controls 2.0
import UM 1.3 as UM
import Cura 1.0 as Cura

// TODO: Theme & documentation!
// The expandable component has 3 major sub components:
// * The headerItem Always visible and should hold some info about what happens if the component is expanded
// * The popupItem The content that needs to be shown if the component is expanded.
Item
{
id: base

property bool expanded: false
property var borderWidth: 1
property color borderColor: "#EAEAEC"
property color headerBackgroundColor: "white"
property color headerHoverColor: "#f5f5f5"
property color drawerBackgroundColor: "white"
property alias headerItem: header.children
property alias drawerItem: drawer.children

width: parent.width
height: childrenRect.height

Rectangle
{
id: header
border
{
color: borderColor
width: borderWidth
}
color: headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
height: childrenRect.height
width: parent.width
Behavior on color
{
ColorAnimation
{
duration: 100
}
}
}

MouseArea
{
id: headerMouseArea
anchors.fill: header
onClicked: base.expanded = !base.expanded
hoverEnabled: true
}

Rectangle
{
id: drawer
anchors
{
top: header.bottom
topMargin: -1
}
border
{
color: borderColor
width: borderWidth
}
clip: true
color: headerBackgroundColor
height: base.expanded ? childrenRect.height : 0
width: parent.width
Behavior on height
{
NumberAnimation
{
duration: 100
}
}
}
}
Loading

0 comments on commit ee7355c

Please sign in to comment.