Add skeleton loading to print job queue

Contributes to CL-1157
This commit is contained in:
Ian Paschal 2019-01-08 15:15:21 +01:00
parent e81742d296
commit 8f37b65ffe
3 changed files with 64 additions and 26 deletions

View File

@ -15,6 +15,7 @@ Item
id: base
property bool expanded: false
property bool enabled: true
property var borderWidth: 1
property color borderColor: "#CCCCCC"
property color headerBackgroundColor: "white"
@ -34,7 +35,7 @@ Item
color: borderColor
width: borderWidth
}
color: headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
color: base.enabled && headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
height: childrenRect.height
width: parent.width
Behavior on color
@ -50,8 +51,12 @@ Item
{
id: headerMouseArea
anchors.fill: header
onClicked: base.expanded = !base.expanded
hoverEnabled: true
onClicked:
{
if (!base.enabled) return
base.expanded = !base.expanded
}
hoverEnabled: base.enabled
}
Rectangle

View File

@ -26,6 +26,7 @@ Item
ExpandableCard
{
enabled: printJob != null
borderColor: printJob.configurationChanges.length !== 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme!
headerItem: Row
{
@ -41,33 +42,57 @@ Item
anchors.verticalCenter: parent.verticalCenter
}
Item
{
anchors.verticalCenter: parent.verticalCenter
height: 18 * screenScaleFactor // TODO: Theme!
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
Rectangle
{
color: "#eeeeee"
width: Math.round(parent.width / 2)
height: parent.height
visible: !printJob
}
Label
{
text: printJob && printJob.name ? printJob.name : ""
color: "#374355"
elide: Text.ElideRight
font: UM.Theme.getFont("medium") // 14pt, regular
anchors.verticalCenter: parent.verticalCenter
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
visible: printJob
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
height: parent.height
verticalAlignment: Text.AlignVCenter
}
}
Item
{
anchors.verticalCenter: parent.verticalCenter
height: 18 * screenScaleFactor // TODO: Theme!
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
Rectangle
{
color: "#eeeeee"
width: Math.round(parent.width / 3)
height: parent.height
visible: !printJob
}
Label
{
text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
color: "#374355"
elide: Text.ElideRight
font: UM.Theme.getFont("medium") // 14pt, regular
anchors.verticalCenter: parent.verticalCenter
width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
visible: printJob
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}
}
Item
{
@ -75,6 +100,14 @@ Item
height: 18 * screenScaleFactor // TODO: This should be childrenRect.height but QML throws warnings
width: childrenRect.width
Rectangle
{
color: "#eeeeee"
width: 72 * screenScaleFactor // TODO: Theme!
height: parent.height
visible: !printJob
}
Label
{
id: printerAssignmentLabel
@ -100,7 +133,7 @@ Item
width: 120 * screenScaleFactor // TODO: Theme!
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
height: parent.height
verticalAlignment: Text.AlignVCenter
}
@ -115,6 +148,7 @@ Item
}
height: childrenRect.height
spacing: 6 // TODO: Theme!
visible: printJob
Repeater
{

View File

@ -144,7 +144,6 @@ Item
topMargin: 12 * screenScaleFactor // TODO: Theme!
}
style: UM.Theme.styles.scrollview
visible: OutputDevice.receivedPrintJobs
width: parent.width
ListView
@ -160,7 +159,7 @@ Item
}
printJob: modelData
}
model: OutputDevice.queuedPrintJobs
model: OutputDevice.receivedPrintJobs ? OutputDevice.queuedPrintJobs.concat([null,null]) : [null,null]
spacing: 6 // TODO: Theme!
}
}