Pop-up flips directions

Contributes to CL-1165

plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml

@@ -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
+    // enter: Transition
-    {
+    // {
-        NumberAnimation
+    //     NumberAnimation
-        {
+    //     {
-            duration: 75
+    //         duration: 75
-            property: "visible"
+    //         property: "visible"
-        }
+    //     }
-    }
+    // }
-    exit: Transition
+    // exit: Transition
-    {
+    // {
-        NumberAnimation
+    //     NumberAnimation
-        {
+    //     {
-            duration: 75
+    //         duration: 75
-            property: "visible"
+    //         property: "visible"
-        }
+    //     }
-    }
+    // }
 
     clip: true
 
@@ -155,48 +193,35 @@ Popup
     leftPadding:   direction == "left"   ? padding + 8 * screenScaleFactor : padding
     rightPadding:  direction == "right"  ? padding + 8 * screenScaleFactor : padding
 
-    transformOrigin:
+    function recalculatePosition() {
-    {
+
-        switch(direction)
+        // Stupid pop-up logic causes the pop-up to resize, so let's compute what it SHOULD be
-        {
+        const realWidth = contentItem.implicitWidth + leftPadding + rightPadding
-            case "top":
+        const realHeight = contentItem.implicitHeight + topPadding + bottomPadding
-                return Popup.Top
+
-            case "bottom":
+        var centered = {
-                return Popup.Bottom
+            x: target.x + target.width / 2 - realWidth / 2,
-            case "right":
+            y: target.y + target.height / 2 - realHeight / 2
-                return Popup.Right
-            case "left":
-                return Popup.Left
-            default:
-                direction = "bottom"
-                return Popup.Bottom
         }
-    }
 
-    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
+                x = target.x - realWidth
-            default:
+                y = centered.y
-                return target.x + target.width / 2 - base.width / 2
+                break
-        }
-    }
-    y:
-    {
-        switch(direction)
-        {
             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
+                x = centered.x
-            default:
+                y = target.y - realHeight
-                return target.y + target.height / 2 - base.height / 2
+                break
         }
     }
 }

plugins/UM3NetworkPrinting/resources/qml/MonitorInfoBlurb.qml

@@ -20,14 +20,7 @@ Item
     {
         id: popUp
 
-        // If the pop-up won't fit in the window, flip it
+        direction: "top"
-        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"
-        }
 
         // Use dark grey for info blurbs and white for context menus
         color: "#191919" // TODO: Theme!

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml

@@ -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
     }
 }