Pop-up flips directions

Contributes to CL-1165
This commit is contained in:
Ian Paschal 2019-01-10 15:27:04 +01:00
parent 0622c5cb8b
commit 9c711cc8aa
3 changed files with 131 additions and 63 deletions

View file

@ -44,6 +44,8 @@ Popup
*/
property var color: "#ffffff" // TODO: Theme!
Component.onCompleted: recalculatePosition()
background: Item
{
anchors.fill: parent
@ -127,25 +129,61 @@ Popup
}
}
visible: false
onClosed: visible = false
onOpened: visible = true
onOpened:
{
// Flip direction if there is not enough screen space
var availableSpace
var targetPosition = target.mapToItem(monitorFrame, 0, 0)
var requiredSpace = contentItem.implicitHeight + 2 * padding + 8 * screenScaleFactor
switch(direction)
{
case "top":
availableSpace = monitorFrame.height - (targetPosition.y + target.height)
// console.log("Needs", requiredSpace, "has got", availableSpace)
if (availableSpace < requiredSpace)
{
// console.log("putting point on bottom")
direction = "bottom"
}
break
case "bottom":
availableSpace = targetPosition.y
// console.log("Needs", requiredSpace, "has got", availableSpace)
if (availableSpace < requiredSpace)
{
// console.log("putting point on top")
direction = "top"
}
break
}
recalculatePosition()
// Show the pop up
visible = true
}
closePolicy: closeOnClick ? Popup.CloseOnPressOutside : Popup.NoAutoClose
enter: Transition
{
NumberAnimation
{
duration: 75
property: "visible"
}
}
exit: Transition
{
NumberAnimation
{
duration: 75
property: "visible"
}
}
// enter: Transition
// {
// NumberAnimation
// {
// duration: 75
// property: "visible"
// }
// }
// exit: Transition
// {
// NumberAnimation
// {
// duration: 75
// property: "visible"
// }
// }
clip: true
@ -155,48 +193,35 @@ Popup
leftPadding: direction == "left" ? padding + 8 * screenScaleFactor : padding
rightPadding: direction == "right" ? padding + 8 * screenScaleFactor : padding
transformOrigin:
{
switch(direction)
{
case "top":
return Popup.Top
case "bottom":
return Popup.Bottom
case "right":
return Popup.Right
case "left":
return Popup.Left
default:
direction = "bottom"
return Popup.Bottom
}
function recalculatePosition() {
// Stupid pop-up logic causes the pop-up to resize, so let's compute what it SHOULD be
const realWidth = contentItem.implicitWidth + leftPadding + rightPadding
const realHeight = contentItem.implicitHeight + topPadding + bottomPadding
var centered = {
x: target.x + target.width / 2 - realWidth / 2,
y: target.y + target.height / 2 - realHeight / 2
}
visible: false;
x:
{
switch(direction)
{
case "left":
return target.x + target.width + 4 * screenScaleFactor
x = target.x + target.width
y = centered.y
break
case "right":
return target.x - base.width - 4 * screenScaleFactor
default:
return target.x + target.width / 2 - base.width / 2
}
}
y:
{
switch(direction)
{
x = target.x - realWidth
y = centered.y
break
case "top":
return target.y + target.height + 4 * screenScaleFactor
x = centered.x
y = target.y + target.height
break
case "bottom":
return target.y - base.height - 4 * screenScaleFactor
default:
return target.y + target.height / 2 - base.height / 2
x = centered.x
y = target.y - realHeight
break
}
}
}

View file

@ -20,14 +20,7 @@ Item
{
id: popUp
// If the pop-up won't fit in the window, flip it
direction:
{
var availableSpace = monitorFrame.height
var targetPosition = target.mapToItem(null, 0, 0)
var requiredSpace = targetPosition.y + target.height + contentWrapper.implicitHeight
return requiredSpace < availableSpace ? "top" : "bottom"
}
direction: "top"
// Use dark grey for info blurbs and white for context menus
color: "#191919" // TODO: Theme!

View file

@ -198,18 +198,68 @@ Item
}
}
PrintJobContextMenu
// PrintJobContextMenu
// {
// id: contextButton
// anchors
// {
// right: parent.right;
// rightMargin: 8 * screenScaleFactor // TODO: Theme!
// top: parent.top
// topMargin: 8 * screenScaleFactor // TODO: Theme!
// }
// printJob: base.printJob
// width: 32 * screenScaleFactor // TODO: Theme!
// height: 32 * screenScaleFactor // TODO: Theme!
// }
MonitorContextMenuButton
{
id: contextButton
id: contextMenuButton
anchors
{
right: parent.right;
right: parent.right
rightMargin: 8 * screenScaleFactor // TODO: Theme!
top: parent.top
topMargin: 8 * screenScaleFactor // TODO: Theme!
}
printJob: base.printJob
width: 32 * screenScaleFactor // TODO: Theme!
height: 32 * screenScaleFactor // TODO: Theme!
// enabled: base.enabled
enabled: false
onClicked: enabled ? contextMenu.switchPopupState() : {}
visible:
{
if (!printJob) {
return false
}
var states = ["queued", "sent_to_printer", "pre_print", "printing", "pausing", "paused", "resuming"]
return states.indexOf(printJob.state) !== -1
}
}
MonitorContextMenu
{
id: contextMenu
printJob: printer ? printer.activePrintJob : null
target: contextMenuButton
}
// For cloud printing, add this mouse area over the disabled contextButton to indicate that it's not available
MouseArea
{
id: contextMenuDisabledButtonArea
anchors.fill: contextMenuButton
hoverEnabled: contextMenuButton.visible && !contextMenuButton.enabled
onEntered: contextMenuDisabledInfo.open()
onExited: contextMenuDisabledInfo.close()
enabled: !contextMenuButton.enabled
}
MonitorInfoBlurb
{
id: contextMenuDisabledInfo
text: catalog.i18nc("@info", "These options are not available because you are monitoring a cloud printer.")
target: contextMenuButton
}
}