bar/popops: fix menu window anims and positioning

bar/Bar.qml

@@ -67,7 +67,6 @@ PanelWindow {
         SysTray.SysTray {
             id: sysTray
             popup: root.popup
-            Layout.rightMargin: 300
         }
 
         // Notifications.NotificationButton {

bar/popups/MenuWindow.qml

@@ -22,71 +22,72 @@ PopupWindow {
     }
 
     required property var bar
+    property var isOpen: false
+    property var padding: 5
+    property var item
+    property var content
 
     function set(item, content) {
-        content.visible = true;
+        isOpen = false;
-
+        root.item = item;
-        let itemPos = item.mapToItem(bar.contentItem, 0, bar.height, item.width, 0).x;
+        root.content = content;
-        // let contentWidth = content.width;
-
-        popupContainer.x = itemPos;
         popupContent.data = content;
 
-        // popupContent.opacity = 0;
+        let itemPos = item.mapToItem(root.bar.contentItem, 0, root.bar.height, item.width, 0).x;
-        // popupContainer.opacity = 0;
+        position(itemPos);
-        popupContainer.opacity = 1;
-        popupContent.opacity = 1;
-        root.visible = true;
-    }
 
-    // function set(item, content) {
-    //     content.visible = true;
-    //
-    //     let itemPos = item.mapToItem(bar.contentItem, 0, bar.height, item.width, 0).x;
-    //     let contentWidth = content.width;
-    //     let padding = 5;
-    //     let xPos = itemPos;
-    //     let idealX = xPos;
-    //     let idealRightEdge = idealX + contentWidth;
-    //
-    //     // check if touching right edge
-    //     let maxRightEdge = root.width - padding;
-    //     let isTouchingRightEdge = idealRightEdge > maxRightEdge;
-    //
-    //     if (isTouchingRightEdge) {
-    //         // touching right edge
-    //         let constrainedX = maxRightEdge - contentWidth;
-    //         constrainedX = Math.max(0, constrainedX);
-    //
-    //         popupContainer.x = constrainedX;
-    //         popupContainer.implicitWidth = 0;
-    //         popupContent.data = content;
-    //         // popupContent.implicitWidth = contentWidth;
-    //     } else {
-    //         // not touching any edge
-    //         // popupContent.implicitWidth = contentWidth;
-    //         popupContainer.x = idealX;
-    //         popupContent.data = content;
-    //     }
-    //
-    //     popupContainer.y = padding;
-    //
-    //     popupContent.opacity = 0;
-    //     popupContainer.opacity = 0;
-    //     popupContainer.opacity = 1;
-    //     popupContent.opacity = 1;
-    //     root.visible = true;
-    // }
-
-    function clear() {
         popupContainer.opacity = 0;
         popupContent.opacity = 0;
+    }
+
+    function position(itemPos) {
+        if (itemPos === undefined)
+            return;
+
+        let rightEdge = itemPos + popupContainer.implicitWidth;
+        let maxRightEdge = root.width - padding;
+        let isTouchingRightEdge = rightEdge > maxRightEdge;
+
+        if (isTouchingRightEdge) {
+            // touching right edge, reposition
+            // console.log("touching right edge");
+            popupContainer.x = maxRightEdge - popupContainer.implicitWidth;
+            popupContainer.y = padding;
+        } else {
+            // not touching right edge
+            popupContainer.x = itemPos;
+            popupContainer.y = padding;
+        }
+    }
+
+    function show() {
+        isOpen = true;
+        root.visible = true; // set and leave open
+        root.content.visible = true;
+        popupContainer.opacity = 1;
+        popupContent.opacity = 1;
+    }
+
+    function hide() {
+        isOpen = false;
+        popupContainer.opacity = 0;
+        popupContent.opacity = 0;
+
+        root.item = undefined;
+        root.content = undefined;
         popupContent.data = [];
     }
 
+    function toggle() {
+        if (isOpen) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
     WrapperRectangle {
         id: popupContainer
-        property real targetX: 0
 
         color: ShellSettings.settings.colors["surface"]
         radius: 12
@@ -95,9 +96,15 @@ PopupWindow {
         opacity: 0
         visible: opacity > 0
 
-        onVisibleChanged: {
+        // spooky, likely to cause problems lol
-            if (!visible) {
+        width: implicitWidth
-                root.visible = false;
+        height: implicitHeight
+
+        // needed to handle occurences where items are resized while open
+        onImplicitWidthChanged: {
+            if (root.isOpen) {
+                let itemPos = root.item.mapToItem(root.bar.contentItem, 0, root.bar.height, root.item.width, 0).x;
+                root.position(itemPos);
             }
         }
 
@@ -105,17 +112,15 @@ PopupWindow {
             id: popupContent
             implicitWidth: Math.max(childrenRect.width, 120)
             implicitHeight: Math.max(childrenRect.height, 60)
-            opacity: 1
 
-            // Behavior on opacity {
+            Behavior on opacity {
-            //     NumberAnimation {
+                NumberAnimation {
-            //         id: contentOpacity
+                    duration: 200
-            //         duration: 350
+                    easing.type: Easing.Linear
-            //         easing.type: Easing.Linear
+                    from: 0
-            //         from: 0
+                    to: 1
-            //         to: 1
+                }
-            //     }
+            }
-            // }
         }
 
         HoverHandler {
@@ -124,38 +129,37 @@ PopupWindow {
             acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
             onHoveredChanged: {
                 if (hovered == false)
-                    root.clear();
+                    root.hide();
             }
         }
 
-        // Behavior on opacity {
+        Behavior on opacity {
-        //     NumberAnimation {
+            NumberAnimation {
-        //         duration: 500
+                duration: 200
-        //         easing.type: Easing.InOutQuad
+                easing.type: Easing.Linear
-        //     }
+            }
-        // }
+        }
-        //
+
-        // Behavior on x {
+        Behavior on width {
-        //     enabled: root.visible
+            SmoothedAnimation {
-        //     SmoothedAnimation {
+                duration: 200
-        //         duration: 300
+                easing.type: Easing.Linear
-        //         easing.type: Easing.OutQuad
+            }
-        //     }
+        }
-        // }
+
-        //
+        Behavior on height {
-        // Behavior on implicitWidth {
+            SmoothedAnimation {
-        //     enabled: root.visible
+                duration: 200
-        //     SmoothedAnimation {
+                easing.type: Easing.Linear
-        //         duration: 300
+            }
-        //         easing.type: Easing.OutQuad
+        }
-        //     }
+
-        // }
+        Behavior on x {
-        //
+            enabled: root.visible
-        // Behavior on implicitHeight {
+            SmoothedAnimation {
-        //     SmoothedAnimation {
+                duration: 200
-        //         duration: 200
+                easing.type: Easing.OutQuad
-        //         easing.type: Easing.Linear
+            }
-        //     }
+        }
-        // }
     }
 }

bar/systray/SysTray.qml

@@ -31,7 +31,14 @@ RowLayout {
                 onClicked: {
                     // trayText.width =  sysTrayContent.width - trayIcon.width - trayContainer.spacing;
                     // trayText.visible = true;
+                    // root.popup.set(this, trayMenu);
+                    if (root.popup.content == trayMenu) {
+                        root.popup.toggle()
+                        return;
+                    }
+
                     root.popup.set(this, trayMenu);
+                    root.popup.show();
                 }
             }