Monitor Tab - Context menu improvements

Fixed:
- In the Queued jobs area, the context menu doesn't close when clicking on the right half of the card.
- Context menu trigger button should be more in the corner for both the print job tiles and the printer tiles
- Context menu text should not be centered
- Context menu should be closer to the context menu trigger button
- Context menu should be aligned further right in relation to the context menu trigger button
- Context menu options that are not available should not be shown.
- Context button dots should be grey.

Contributes to CL-1050
This commit is contained in:
Ian Paschal 2018-09-13 14:52:52 +02:00
parent 7226bc45b5
commit f93413d3a3
2 changed files with 91 additions and 46 deletions

View file

@ -399,21 +399,13 @@ Component
function switchPopupState() function switchPopupState()
{ {
if (popup.visible) popup.visible ? popup.close() : popup.open()
{
popup.close()
}
else
{
popup.open()
}
} }
Controls2.Button Controls2.Button
{ {
id: contextButton id: contextButton
text: "\u22EE" //Unicode; Three stacked points. text: "\u22EE" //Unicode; Three stacked points.
font.pixelSize: 25
width: 35 width: 35
height: width height: width
anchors anchors
@ -431,6 +423,14 @@ Component
radius: 0.5 * width radius: 0.5 * width
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: contextButton.text
color: UM.Theme.getColor("monitor_text_inactive")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
onClicked: parent.switchPopupState() onClicked: parent.switchPopupState()
} }
@ -440,18 +440,21 @@ Component
// TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property // TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property
id: popup id: popup
clip: true clip: true
closePolicy: Controls2.Popup.CloseOnPressOutsideParent closePolicy: Popup.CloseOnPressOutside
x: parent.width - width x: (parent.width - width) + 26 * screenScaleFactor
y: contextButton.height y: contextButton.height - 5 * screenScaleFactor // Because shadow
width: 160 width: 182 * screenScaleFactor
height: contentItem.height + 2 * padding height: contentItem.height + 2 * padding
visible: false visible: false
padding: 5 * screenScaleFactor // Because shadow
transformOrigin: Controls2.Popup.Top transformOrigin: Popup.Top
contentItem: Item contentItem: Item
{ {
width: popup.width - 2 * popup.padding width: popup.width
height: childrenRect.height + 15 height: childrenRect.height + 36 * screenScaleFactor
anchors.topMargin: 10 * screenScaleFactor
anchors.bottomMargin: 10 * screenScaleFactor
Controls2.Button Controls2.Button
{ {
id: pauseButton id: pauseButton
@ -470,14 +473,22 @@ Component
} }
width: parent.width width: parent.width
enabled: modelData.activePrintJob != null && ["paused", "printing"].indexOf(modelData.activePrintJob.state) >= 0 enabled: modelData.activePrintJob != null && ["paused", "printing"].indexOf(modelData.activePrintJob.state) >= 0
visible: enabled
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 18 * screenScaleFactor
height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
hoverEnabled: true hoverEnabled: true
background: Rectangle background: Rectangle
{ {
opacity: pauseButton.down || pauseButton.hovered ? 1 : 0 opacity: pauseButton.down || pauseButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: sendToTopButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
} }
Controls2.Button Controls2.Button
@ -490,6 +501,7 @@ Component
popup.close() popup.close()
} }
width: parent.width width: parent.width
height: 39 * screenScaleFactor
anchors.top: pauseButton.bottom anchors.top: pauseButton.bottom
hoverEnabled: true hoverEnabled: true
enabled: modelData.activePrintJob != null && ["paused", "printing", "pre_print"].indexOf(modelData.activePrintJob.state) >= 0 enabled: modelData.activePrintJob != null && ["paused", "printing", "pre_print"].indexOf(modelData.activePrintJob.state) >= 0
@ -498,6 +510,12 @@ Component
opacity: abortButton.down || abortButton.hovered ? 1 : 0 opacity: abortButton.down || abortButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: abortButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
} }
} }
@ -519,19 +537,20 @@ Component
Item Item
{ {
id: pointedRectangle id: pointedRectangle
width: parent.width -10 width: parent.width - 10 * screenScaleFactor // Because of the shadow
height: parent.height -10 height: parent.height - 10 * screenScaleFactor // Because of the shadow
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Rectangle Rectangle
{ {
id: point id: point
height: 13 height: 14 * screenScaleFactor
width: 13 width: 14 * screenScaleFactor
color: UM.Theme.getColor("setting_control") color: UM.Theme.getColor("setting_control")
transform: Rotation { angle: 45} transform: Rotation { angle: 45}
anchors.right: bloop.right anchors.right: bloop.right
anchors.rightMargin: 24
y: 1 y: 1
} }
@ -541,9 +560,9 @@ Component
color: UM.Theme.getColor("setting_control") color: UM.Theme.getColor("setting_control")
width: parent.width width: parent.width
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 5 anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
} }
} }
} }

View file

@ -30,7 +30,7 @@ Item
anchors anchors
{ {
top: parent.top top: parent.top
topMargin: 3 topMargin: 3 * screenScaleFactor
left: parent.left left: parent.left
leftMargin: base.shadowRadius leftMargin: base.shadowRadius
rightMargin: base.shadowRadius rightMargin: base.shadowRadius
@ -43,7 +43,7 @@ Item
layer.effect: DropShadow layer.effect: DropShadow
{ {
radius: base.shadowRadius radius: base.shadowRadius
verticalOffset: 2 verticalOffset: 2 * screenScaleFactor
color: "#3F000000" // 25% shadow color: "#3F000000" // 25% shadow
} }
@ -126,7 +126,7 @@ Item
right: parent.right right: parent.right
margins: 2 * UM.Theme.getSize("default_margin").width margins: 2 * UM.Theme.getSize("default_margin").width
leftMargin: UM.Theme.getSize("default_margin").width leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width rightMargin: UM.Theme.getSize("default_margin").width / 2
} }
Label Label
@ -169,7 +169,6 @@ Item
{ {
id: contextButton id: contextButton
text: "\u22EE" //Unicode; Three stacked points. text: "\u22EE" //Unicode; Three stacked points.
font.pixelSize: 25
width: 35 width: 35
height: width height: width
anchors anchors
@ -187,6 +186,14 @@ Item
radius: 0.5 * width radius: 0.5 * width
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: contextButton.text
color: UM.Theme.getColor("monitor_text_inactive")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
onClicked: parent.switchPopupState() onClicked: parent.switchPopupState()
} }
@ -196,18 +203,21 @@ Item
// TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property // TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property
id: popup id: popup
clip: true clip: true
closePolicy: Popup.CloseOnPressOutsideParent closePolicy: Popup.CloseOnPressOutside
x: parent.width - width x: (parent.width - width) + 26 * screenScaleFactor
y: contextButton.height y: contextButton.height - 5 * screenScaleFactor // Because shadow
width: 160 width: 182 * screenScaleFactor
height: contentItem.height + 2 * padding height: contentItem.height + 2 * padding
visible: false visible: false
padding: 5 * screenScaleFactor // Because shadow
transformOrigin: Popup.Top transformOrigin: Popup.Top
contentItem: Item contentItem: Item
{ {
width: popup.width - 2 * popup.padding width: popup.width
height: childrenRect.height + 15 height: childrenRect.height + 36 * screenScaleFactor
anchors.topMargin: 10 * screenScaleFactor
anchors.bottomMargin: 10 * screenScaleFactor
Button Button
{ {
id: sendToTopButton id: sendToTopButton
@ -219,14 +229,22 @@ Item
} }
width: parent.width width: parent.width
enabled: OutputDevice.queuedPrintJobs[0].key != printJob.key enabled: OutputDevice.queuedPrintJobs[0].key != printJob.key
visible: enabled
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 18 * screenScaleFactor
height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
hoverEnabled: true hoverEnabled: true
background: Rectangle background: Rectangle
{ {
opacity: sendToTopButton.down || sendToTopButton.hovered ? 1 : 0 opacity: sendToTopButton.down || sendToTopButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: sendToTopButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
} }
Button Button
@ -239,6 +257,7 @@ Item
popup.close() popup.close()
} }
width: parent.width width: parent.width
height: 39 * screenScaleFactor
anchors.top: sendToTopButton.bottom anchors.top: sendToTopButton.bottom
hoverEnabled: true hoverEnabled: true
background: Rectangle background: Rectangle
@ -246,6 +265,12 @@ Item
opacity: deleteButton.down || deleteButton.hovered ? 1 : 0 opacity: deleteButton.down || deleteButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
} }
contentItem: Label
{
text: deleteButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
} }
} }
@ -267,19 +292,20 @@ Item
Item Item
{ {
id: pointedRectangle id: pointedRectangle
width: parent.width -10 width: parent.width - 10 * screenScaleFactor // Because of the shadow
height: parent.height -10 height: parent.height - 10 * screenScaleFactor // Because of the shadow
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Rectangle Rectangle
{ {
id: point id: point
height: 13 height: 14 * screenScaleFactor
width: 13 width: 14 * screenScaleFactor
color: UM.Theme.getColor("setting_control") color: UM.Theme.getColor("setting_control")
transform: Rotation { angle: 45} transform: Rotation { angle: 45}
anchors.right: bloop.right anchors.right: bloop.right
anchors.rightMargin: 24
y: 1 y: 1
} }
@ -289,9 +315,9 @@ Item
color: UM.Theme.getColor("setting_control") color: UM.Theme.getColor("setting_control")
width: parent.width width: parent.width
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 5 anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
} }
} }
} }
@ -331,7 +357,7 @@ Item
{ {
text: modelData text: modelData
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
padding: 3 padding: 3 * screenScaleFactor
} }
} }
} }
@ -353,14 +379,14 @@ Item
PrintCoreConfiguration PrintCoreConfiguration
{ {
id: leftExtruderInfo id: leftExtruderInfo
width: Math.round(parent.width / 2) width: Math.round(parent.width / 2) * screenScaleFactor
printCoreConfiguration: printJob.configuration.extruderConfigurations[0] printCoreConfiguration: printJob.configuration.extruderConfigurations[0]
} }
PrintCoreConfiguration PrintCoreConfiguration
{ {
id: rightExtruderInfo id: rightExtruderInfo
width: Math.round(parent.width / 2) width: Math.round(parent.width / 2) * screenScaleFactor
printCoreConfiguration: printJob.configuration.extruderConfigurations[1] printCoreConfiguration: printJob.configuration.extruderConfigurations[1]
} }
} }
@ -370,7 +396,7 @@ Item
Rectangle Rectangle
{ {
color: UM.Theme.getColor("viewport_background") color: UM.Theme.getColor("viewport_background")
width: 2 width: 2 * screenScaleFactor
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.margins: UM.Theme.getSize("default_margin").height anchors.margins: UM.Theme.getSize("default_margin").height