Updated margins & layout for the monitor page

CL-896
This commit is contained in:
Jaime van Kessel 2018-08-23 17:29:48 +02:00
parent b0d9dc6fdd
commit dab2efab7f
4 changed files with 57 additions and 29 deletions

View file

@ -51,15 +51,27 @@ Component
top: activePrintersLabel.bottom top: activePrintersLabel.bottom
left: parent.left left: parent.left
right: parent.right right: parent.right
margins: UM.Theme.getSize("default_margin").width topMargin: UM.Theme.getSize("default_margin").height
bottom: parent.bottom bottom: parent.bottom
} }
style: UM.Theme.styles.scrollview
ListView ListView
{ {
anchors.fill: parent anchors
{
top: parent.top
bottom: parent.bottom
left: parent.left
right: parent.right
leftMargin: 2 * UM.Theme.getSize("default_margin").width
rightMargin: 2 * UM.Theme.getSize("default_margin").width
}
spacing: UM.Theme.getSize("default_margin").height spacing: UM.Theme.getSize("default_margin").height
displayMarginBeginning: 2 displayMarginBeginning: 2
model: OutputDevice.printers model: OutputDevice.printers
delegate: Rectangle delegate: Rectangle
{ {
width: parent.width - 2 * shadowRadius width: parent.width - 2 * shadowRadius
@ -100,6 +112,8 @@ Component
{ {
id: machineIcon id: machineIcon
anchors.top: parent.top anchors.top: parent.top
anchors.leftMargin: UM.Theme.getSize("default_margin").width
anchors.left: parent.left
width: 50 width: 50
height: 50 height: 50
color: modelData.activePrintJob != undefined ? UM.Theme.getColor("primary") : UM.Theme.getColor("setting_control_disabled") color: modelData.activePrintJob != undefined ? UM.Theme.getColor("primary") : UM.Theme.getColor("setting_control_disabled")
@ -157,7 +171,7 @@ Component
Rectangle Rectangle
{ {
id: topSpacer id: topSpacer
color: "grey" color: UM.Theme.getColor("viewport_background")
height: 1 height: 1
anchors anchors
{ {
@ -165,6 +179,7 @@ Component
right: parent.right right: parent.right
margins: UM.Theme.getSize("default_margin").width margins: UM.Theme.getSize("default_margin").width
top: parent.top top: parent.top
topMargin: 2 * UM.Theme.getSize("default_margin").width
} }
} }
@ -172,11 +187,11 @@ Component
{ {
id: extrudersInfo id: extrudersInfo
anchors.top: topSpacer.bottom anchors.top: topSpacer.bottom
anchors.topMargin : UM.Theme.getSize("default_margin").height anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.leftMargin: 2 * UM.Theme.getSize("default_margin").width
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.rightMargin: 2 * UM.Theme.getSize("default_margin").width
height: childrenRect.height height: childrenRect.height
spacing: UM.Theme.getSize("default_margin").width spacing: UM.Theme.getSize("default_margin").width
@ -198,7 +213,7 @@ Component
Rectangle Rectangle
{ {
id: jobSpacer id: jobSpacer
color: "grey" color: UM.Theme.getColor("viewport_background")
height: 1 height: 1
anchors anchors
{ {
@ -206,6 +221,7 @@ Component
right: parent.right right: parent.right
margins: UM.Theme.getSize("default_margin").width margins: UM.Theme.getSize("default_margin").width
top: extrudersInfo.bottom top: extrudersInfo.bottom
topMargin: 2 * UM.Theme.getSize("default_margin").height
} }
} }
@ -215,10 +231,12 @@ Component
property var showJobInfo: modelData.activePrintJob != null && modelData.activePrintJob.state != "queued" property var showJobInfo: modelData.activePrintJob != null && modelData.activePrintJob.state != "queued"
anchors.top: jobSpacer.bottom anchors.top: jobSpacer.bottom
anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.margins: UM.Theme.getSize("default_margin").width anchors.margins: UM.Theme.getSize("default_margin").width
height: showJobInfo ? childrenRect.height + UM.Theme.getSize("default_margin").height: 0 anchors.leftMargin: 2 * UM.Theme.getSize("default_margin").width
height: showJobInfo ? childrenRect.height + 3 * UM.Theme.getSize("default_margin").height: 0
visible: showJobInfo visible: showJobInfo
Label Label
{ {
@ -246,12 +264,11 @@ Component
Rectangle Rectangle
{ {
id: showCameraIcon id: showCameraIcon
width: 30 * screenScaleFactor width: 35 * screenScaleFactor
height: width height: width
radius: width radius: 0.5 * width
anchors.left: parent.left anchors.left: parent.left
anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.top: printJobPreview.bottom
anchors.bottom: printJobPreview.bottom
color: UM.Theme.getColor("setting_control_border_highlight") color: UM.Theme.getColor("setting_control_border_highlight")
Image Image
{ {

View file

@ -79,15 +79,16 @@ Component
margins: UM.Theme.getSize("default_margin").width margins: UM.Theme.getSize("default_margin").width
top: activePrintersLabel.bottom top: activePrintersLabel.bottom
left: parent.left left: parent.left
leftMargin: UM.Theme.getSize("default_lining").width // To ensure border can be drawn. bottomMargin: 0
rightMargin: UM.Theme.getSize("default_lining").width
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
style: UM.Theme.styles.scrollview
ListView ListView
{ {
anchors.fill: parent anchors.fill: parent
anchors.margins: UM.Theme.getSize("default_margin").height
spacing: UM.Theme.getSize("default_margin").height spacing: UM.Theme.getSize("default_margin").height
model: OutputDevice.queuedPrintJobs model: OutputDevice.queuedPrintJobs
@ -95,11 +96,10 @@ Component
delegate: PrintJobInfoBlock delegate: PrintJobInfoBlock
{ {
printJob: modelData printJob: modelData
width: Math.min(800 * screenScaleFactor, maximumWidth) anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("default_margin").height
height: 125 * screenScaleFactor height: 125 * screenScaleFactor
// Add a 1 pix margin, as the border is sometimes cut off otherwise.
anchors.horizontalCenter: parent.horizontalCenter
} }
} }
} }

View file

@ -47,7 +47,6 @@ Item
{ {
id: materialLabel id: materialLabel
text: text:
{ {
if(printCoreConfiguration != undefined && printCoreConfiguration.activeMaterial != undefined) if(printCoreConfiguration != undefined && printCoreConfiguration.activeMaterial != undefined)
{ {
@ -55,11 +54,15 @@ Item
} }
return "" return ""
} }
elide: Text.ElideRight
width: parent.width
font: UM.Theme.getFont("default_bold") font: UM.Theme.getFont("default_bold")
anchors.left: extruderCircle.right elide: Text.ElideRight
anchors.leftMargin: UM.Theme.getSize("default_margin").height
anchors
{
right: parent.right
left: extruderCircle.right
margins: UM.Theme.getSize("default_margin").width
}
} }
Label Label
@ -75,8 +78,14 @@ Item
} }
anchors.top: materialLabel.bottom anchors.top: materialLabel.bottom
elide: Text.ElideRight elide: Text.ElideRight
width: parent.width
anchors.left: extruderCircle.right anchors
anchors.leftMargin: UM.Theme.getSize("default_margin").height {
top: materialLabel.bottom
right: parent.right
left: extruderCircle.right
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width
}
} }
} }

View file

@ -54,7 +54,8 @@ Item
bottom: parent.bottom bottom: parent.bottom
left: parent.left left: parent.left
right: parent.horizontalCenter right: parent.horizontalCenter
margins: UM.Theme.getSize("default_margin").width margins: 2 * UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width
} }
Label Label
@ -101,7 +102,8 @@ Item
bottom: parent.bottom bottom: parent.bottom
left: parent.horizontalCenter left: parent.horizontalCenter
right: parent.right right: parent.right
margins: UM.Theme.getSize("default_margin").width margins: 2 * UM.Theme.getSize("default_margin").width
leftMargin: UM.Theme.getSize("default_margin").width
} }
Label Label
@ -254,7 +256,7 @@ Item
Rectangle Rectangle
{ {
color: "grey" color: UM.Theme.getColor("viewport_background")
width: 1 width: 1
anchors.top: parent.top anchors.top: parent.top