mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-14 02:07:51 -06:00
Replace queued print job cards with new design
Contributes to CL-1148
This commit is contained in:
Ian Paschal
parent
f10bd28c4a
commit
421a64c7b0
4 changed files with 272 additions and 37 deletions
|
|
@ -6,13 +6,15 @@ 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");
|
||||
color: transparent
|
||||
height: maximumHeight;
|
||||
onVisibleChanged: {
|
||||
if (monitorFrame != null && !monitorFrame.visible) {
|
||||
|
|
@ -21,6 +23,14 @@ Component {
|
|||
}
|
||||
width: maximumWidth;
|
||||
|
||||
LinearGradient {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: "#f6f6f6" }
|
||||
GradientStop { position: 1.0; color: "#ffffff" }
|
||||
}
|
||||
}
|
||||
|
||||
UM.I18nCatalog {
|
||||
id: catalog;
|
||||
name: "cura";
|
||||
|
|
@ -60,39 +70,6 @@ Component {
|
|||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
printJob: null; // Use as skeleton
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: queuedPrintJobs;
|
||||
anchors {
|
||||
|
|
@ -104,12 +81,12 @@ Component {
|
|||
}
|
||||
style: UM.Theme.styles.scrollview;
|
||||
visible: OutputDevice.receivedPrintJobs;
|
||||
width: Math.min(800 * screenScaleFactor, maximumWidth);
|
||||
width: Math.min(834 * screenScaleFactor, maximumWidth);
|
||||
|
||||
ListView {
|
||||
id: printJobList;
|
||||
anchors.fill: parent;
|
||||
delegate: PrintJobInfoBlock {
|
||||
delegate: MonitorPrintJobCard {
|
||||
anchors {
|
||||
left: parent.left;
|
||||
leftMargin: UM.Theme.getSize("default_margin").width;
|
||||
|
|
@ -119,7 +96,7 @@ Component {
|
|||
printJob: modelData;
|
||||
}
|
||||
model: OutputDevice.queuedPrintJobs;
|
||||
spacing: UM.Theme.getSize("default_margin").height - 2 * UM.Theme.getSize("monitor_shadow_radius").width;
|
||||
spacing: 6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,4 +106,5 @@ Component {
|
|||
visible: OutputDevice.activeCameraUrl != "";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
81
plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
Normal file
81
plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
// 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
|
||||
|
||||
// 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 var 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml
Normal file
109
plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
// 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
|
||||
|
||||
// A Print Job Card is essentially just a filled-in Expandable Card item.
|
||||
Item
|
||||
{
|
||||
id: base
|
||||
property var printJob: null
|
||||
|
||||
width: parent.width
|
||||
height: childrenRect.height
|
||||
|
||||
ExpandableCard
|
||||
{
|
||||
headerItem: Row
|
||||
{
|
||||
height: 48
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 24
|
||||
spacing: 18
|
||||
|
||||
MonitorPrintJobPreview
|
||||
{
|
||||
printJob: base.printJob
|
||||
size: 32
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
text: printJob && printJob.name ? printJob.name : ""
|
||||
color: "#374355"
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default_bold")
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 216
|
||||
height: 18
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
|
||||
color: "#374355"
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default_bold")
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 216
|
||||
height: 18
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
color: "#374355"
|
||||
height: 18
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default_bold")
|
||||
text: {
|
||||
if (printJob !== null) {
|
||||
if (printJob.assignedPrinter == null)
|
||||
{
|
||||
if (printJob.state == "error")
|
||||
{
|
||||
return catalog.i18nc("@label", "Waiting for: Unavailable printer")
|
||||
}
|
||||
return catalog.i18nc("@label", "Waiting for: First available")
|
||||
}
|
||||
else
|
||||
{
|
||||
return catalog.i18nc("@label", "Waiting for: ") + printJob.assignedPrinter.name
|
||||
}
|
||||
}
|
||||
return ""
|
||||
}
|
||||
visible: printJob
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 216
|
||||
}
|
||||
}
|
||||
drawerItem: Row
|
||||
{
|
||||
height: 96
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 74
|
||||
spacing: 18
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: printerConfiguration
|
||||
width: 450
|
||||
height: 72
|
||||
color: "blue"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Label {
|
||||
height: 18
|
||||
text: printJob && printJob.owner ? printJob.owner : ""
|
||||
color: "#374355"
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default_bold")
|
||||
anchors.top: printerConfiguration.top
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
// Copyright (c) 2018 Ultimaker B.V.
|
||||
// Cura is released under the terms of the LGPLv3 or higher.
|
||||
|
||||
import QtQuick 2.2
|
||||
import QtQuick.Dialogs 1.1
|
||||
import QtQuick.Controls 2.0
|
||||
import QtQuick.Controls.Styles 1.4
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick.Layouts 1.1
|
||||
import QtQuick.Dialogs 1.1
|
||||
import UM 1.3 as UM
|
||||
|
||||
Item
|
||||
{
|
||||
id: printJobPreview
|
||||
|
||||
property var printJob: null
|
||||
property var size: 256
|
||||
|
||||
width: size
|
||||
height: size
|
||||
|
||||
// Actual content
|
||||
Image
|
||||
{
|
||||
id: previewImage
|
||||
anchors.fill: parent
|
||||
opacity: printJob && printJob.state == "error" ? 0.5 : 1.0
|
||||
source: printJob ? printJob.previewImageUrl : ""
|
||||
visible: printJob
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
id: ultiBotImage
|
||||
|
||||
anchors.centerIn: printJobPreview
|
||||
color: UM.Theme.getColor("monitor_placeholder_image")
|
||||
height: printJobPreview.height
|
||||
source: "../svg/ultibot.svg"
|
||||
sourceSize
|
||||
{
|
||||
height: height
|
||||
width: width
|
||||
}
|
||||
/* Since print jobs ALWAYS have an image url, we have to check if that image URL errors or
|
||||
not in order to determine if we show the placeholder (ultibot) image instead. */
|
||||
visible: printJob && previewImage.status == Image.Error
|
||||
width: printJobPreview.width
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
id: statusImage
|
||||
anchors.centerIn: printJobPreview
|
||||
color: UM.Theme.getColor("monitor_image_overlay")
|
||||
height: 0.5 * printJobPreview.height
|
||||
source: printJob && printJob.state == "error" ? "../svg/aborted-icon.svg" : ""
|
||||
sourceSize
|
||||
{
|
||||
height: height
|
||||
width: width
|
||||
}
|
||||
visible: source != ""
|
||||
width: 0.5 * printJobPreview.width
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue