more work on popups

shell/bar/Bar.qml

@@ -63,7 +63,6 @@ Variants {
                 Layout.alignment: Qt.AlignRight
 
                 SysTray {
-                    id: sysTray
                     bar: root
                     Layout.fillHeight: true
                 }
@@ -77,8 +76,8 @@ Variants {
                 //     Layout.bottomMargin: 2
                 // }
 
-                // BatteryIndicator {
+                // PowerMenu {
-                //     id: batteryIndicator
+                //     bar: root
                 //     Layout.fillHeight: true
                 // }
 

shell/bar/Popup.qml

@@ -30,13 +30,13 @@ Scope {
         if (lastActiveItem != null && lastActiveItem != activeItem) {
             lastActiveItem.targetVisible = false;
         }
-    }
 
-    function setItem(item: PopupItem) {
         if (activeItem != null) {
             lastActiveItem = activeItem;
         }
+    }
 
+    function setItem(item: PopupItem) {
         activeItem = item;
     }
 
@@ -48,10 +48,19 @@ Scope {
 
     function onHidden(item: PopupItem) {
         if (item == lastActiveItem) {
+            console.log("triggered");
             lastActiveItem = null;
         }
     }
 
+    property real scaleMul: lastActiveItem && lastActiveItem.targetVisible ? 1 : 0
+
+    Behavior on scaleMul {
+        SmoothedAnimation {
+            velocity: 5
+        }
+    }
+
     LazyLoader {
         id: popupLoader
         activeAsync: root.shownItem != null
@@ -84,18 +93,34 @@ Scope {
                 }
             }
 
+            // HyprlandWindow.opacity: root.scaleMul
+
             HyprlandWindow.visibleMask: Region {
                 id: mask
                 item: parentItem
             }
 
+            Connections {
+                target: root
+
+                function onScaleMulChanged() {
+                    mask.changed();
+                }
+            }
+
             StyledRectangle {
                 id: parentItem
                 width: targetWidth
                 height: targetHeight
                 x: targetX
                 y: root.gaps
-                clip: true
+
+                transform: Scale {
+                    origin.x: parentItem.targetX
+                    origin.y: 0
+                    xScale: 1
+                    yScale: root.scaleMul
+                }
 
                 readonly property var targetWidth: root.shownItem?.implicitWidth ?? 0
                 readonly property var targetHeight: root.shownItem?.implicitHeight ?? 0
@@ -107,11 +132,16 @@ Scope {
 
                     let owner = root.shownItem.owner;
                     let bar = root.bar;
+                    let isCentered = root.shownItem.centered;
                     let xPos = owner.mapToItem(bar.contentItem, 0, bar.height, owner.width, 0).x;
 
                     let rightEdge = xPos + targetWidth;
                     let maxRightEdge = popup.width;
 
+                    if (isCentered) {
+                        return xPos - (targetWidth / 2) + (owner.width / 2);
+                    }
+
                     if (rightEdge > maxRightEdge) {
                         // touching right edge, reposition
                         // console.log("touching right edge");
@@ -129,31 +159,39 @@ Scope {
                     }
                 }
 
-                // TODO: Make a close animation, a little complicated, will need to track if an animation is running 
+                // TODO: Make a close animation, a little complicated, will need to track if an animation is running
                 // and stop unload from occuring until its done, in the LazyLoader.
 
+                Behavior on x {
+                    enabled: root.lastActiveItem != null
+                    SmoothedAnimation {
+                        duration: 200
+                        easing.type: Easing.InOutQuad
+                    }
+                }
+
                 Behavior on width {
                     enabled: root.lastActiveItem != null
                     SmoothedAnimation {
-                        duration: 300
+                        duration: 200
                         easing.type: Easing.InOutQuad
                     }
                 }
 
                 Behavior on height {
+                    enabled: root.lastActiveItem != null
                     SmoothedAnimation {
-                        duration: 300
+                        duration: 200
                         easing.type: Easing.InOutQuad
                     }
                 }
 
-                Behavior on x {
+                // SmoothedAnimation on height {
-                    enabled: root.lastActiveItem != null
+                //     duration: 200
-                    SmoothedAnimation {
+                //     easing.type: Easing.InOutQuad
-                        duration: 300
+                //     to: parentItem.targetHeight
-                        easing.type: Easing.InOutQuad
+                //     onToChanged: restart()
-                    }
+                // }
-                }
             }
         }
     }

shell/bar/PopupItem.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import qs.widgets
 
 Item {
     id: root
@@ -46,8 +47,9 @@ Item {
         implicitWidth: children[0].implicitWidth
     }
 
-    required property var popup 
+    required property var popup
     required property var owner
+    property bool centered: false
     property bool show: false
 
     signal closed
@@ -61,10 +63,4 @@ Item {
             velocity: 5
         }
     }
-
-    function snapOpacity(opacity: real) {
-        opacityAnimation.enabled = false;
-        targetOpacity = opacity;
-        opacityAnimation.enabled = true;
-    }
 }

shell/bar/power/BatteryIndicator.qml

@@ -1,100 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
-import Quickshell.Widgets
-import Quickshell.Services.UPower
-import "../../widgets" as Widgets
-import "../.."
-
-// todo: redo the tray icon handling
-Item {
-    id: root
-    implicitWidth: height + 8 // for margin
-    visible: UPower.displayDevice.isLaptopBattery
-
-    required property var popup
-
-    Widgets.StyledMouseArea {
-        id: batteryButton
-        hoverEnabled: true
-        onClicked: {
-            if (root.popup.content == powerMenu) {
-                root.popup.hide();
-                return;
-            }
-
-            root.popup.set(this, powerMenu);
-        }
-
-        anchors {
-            fill: parent
-            margins: 1
-        }
-
-        Item {
-            implicitWidth: parent.height
-            implicitHeight: parent.height
-            anchors.centerIn: parent
-            layer.enabled: true
-            layer.effect: OpacityMask {
-                source: Rectangle {
-                    width: root.width
-                    height: root.height
-                    color: "white"
-                }
-
-                maskSource: IconImage {
-                    implicitSize: root.width
-                    source: "root:resources/battery/battery.svg"
-                }
-            }
-
-            Rectangle {
-                id: batteryBackground
-                color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
-                opacity: 0.75
-                anchors {
-                    fill: parent
-                    margins: 2
-                }
-            }
-
-            Rectangle {
-                id: batteryPercentage
-                width: (parent.width - 4) * UPower.displayDevice.percentage
-                color: ShellSettings.colors["inverse_surface"]
-
-                anchors {
-                    left: batteryBackground.left
-                    top: batteryBackground.top
-                    bottom: batteryBackground.bottom
-                }
-            }
-        }
-    }
-
-    Item {
-        id: powerMenu
-        visible: false
-        implicitWidth: 250
-        implicitHeight: 80
-
-        RowLayout {
-            anchors.fill: parent
-
-            // ComboBox {
-            //     model: ScriptModel {
-            //         values: ["Power Save", "Balanced", "Performance"]
-            //     }
-            //
-            //     currentIndex: PowerProfiles.profile
-            //     onCurrentIndexChanged: {
-            //         PowerProfiles.profile = this.currentIndex;
-            //         console.log(PowerProfile.toString(PowerProfiles.profile));
-            //     }
-            // }
-        }
-    }
-}

shell/bar/power/PowerMenu.qml

@@ -0,0 +1,72 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+import Quickshell.Widgets
+import Quickshell.Services.UPower
+import qs.widgets
+import qs.bar
+import qs
+
+// todo: redo the tray icon handling
+StyledMouseArea {
+    id: root
+    implicitWidth: height + 8 // for margin
+    visible: UPower.displayDevice.isLaptopBattery
+    onClicked: showMenu = !showMenu
+
+    required property var bar
+    property bool showMenu: false
+
+    Item {
+        implicitWidth: parent.height
+        implicitHeight: parent.height
+        anchors.centerIn: parent
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            source: Rectangle {
+                width: root.width
+                height: root.height
+                color: "white"
+            }
+
+            maskSource: IconImage {
+                implicitSize: root.width
+                source: "root:resources/battery/battery.svg"
+            }
+        }
+
+        Rectangle {
+            id: batteryBackground
+            color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
+            opacity: 0.75
+            anchors {
+                fill: parent
+                margins: 2
+            }
+        }
+
+        Rectangle {
+            id: batteryPercentage
+            width: (parent.width - 4) * UPower.displayDevice.percentage
+            color: ShellSettings.colors["inverse_surface"]
+
+            anchors {
+                left: batteryBackground.left
+                top: batteryBackground.top
+                bottom: batteryBackground.bottom
+            }
+        }
+    }
+
+    property PopupItem menu: PopupItem {
+        owner: root
+        popup: root.bar.popup
+        show: root.showMenu
+        onClosed: root.showMenu = false
+        centered: true
+
+        implicitWidth: 250 
+        implicitHeight: 250 
+    }
+}

shell/bar/systray/SysTray.qml

@@ -8,6 +8,11 @@ import Quickshell.Services.SystemTray
 import "../../widgets"
 import ".."
 
+// TODO:
+// 1. Get rid of leftItem/rightItem properties on menu
+// 2. Load menu properly, right now its pretty buggy
+// 3. Fix bug that causes close on update (nm-applet wifi networks updating)
+
 RowLayout {
     id: root
     spacing: 5
@@ -60,7 +65,6 @@ RowLayout {
                 implicitWidth: content.implicitWidth + (2 * 8)
                 implicitHeight: content.implicitHeight + (2 * 8)
 
-                // TODO: come up with a better way instead of having to do this
                 property var leftItem: false
                 property var rightItem: false
 
@@ -80,8 +84,8 @@ RowLayout {
                             rootMenu: menu
 
                             onInteracted: {
-                                menuOpener.menu = null;
                                 button.showMenu = false;
+                                menuOpener.menu = null;
                             }
                         }
                     }