simplify things by moving popups into a new layer

modules/Services/WidgetTracker.qml

@@ -0,0 +1,15 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+    property string current: ""
+    property ShellScreen screen: null
+    function toggle(name, scr) {
+        current = (current === name && screen === scr) ? "" : name;
+        screen = scr;
+    }
+    function close() {
+        current = "";
+    }
+}

modules/applets/VolPopup.qml

@@ -5,50 +5,22 @@ import Quickshell
 import Quickshell.Wayland
 import QtQuick
 import qs.widgets
+import qs
 import qs.modules.Services
 import QtQuick.Layouts
 import QtQuick.Controls
 
-WlrLayershell {
+Rectangle {
-    id: win
-
-    required property ShellScreen barScreen
-    screen: barScreen
-
-    visible: false
-    color: 'transparent'
-    layer: WlrLayer.Overlay
-    exclusionMode: ExclusionMode.Ignore
-
-    keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
-
-    anchors {
-        top: true
-        right: true
-    }
-    margins {
-        top: Config.cfg.bar.height + (Config.cfg.bar.floating ? 20 : 10)
-        right: Config.cfg.bar.floating ? 10 : 0
-    }
-
-    implicitWidth: audioLayout.implicitWidth + 20
-    implicitHeight: audioLayout.implicitHeight + 20
-    onVisibleChanged: {
-        if (visible)
-            root.forceActiveFocus();
-    }
-
-    Rectangle {
     id: root
-        anchors.fill: parent
     focus: true
     color: Colors.barBg
     radius: Config.cfg.appearance.rounding
-
     Keys.onEscapePressed: event => {
         win.visible = false;
         event.accepted = true;
     }
+    implicitWidth: audioLayout.implicitWidth + 10
+    implicitHeight: audioLayout.implicitHeight + 10
 
     ColumnLayout {
         id: audioLayout
@@ -63,7 +35,7 @@ WlrLayershell {
                 id: audioDelContainer
                 Layout.fillWidth: true
                 color: Colors.moduleBg
-                    radius: Config.cfg.appearance.rounding
+                radius: Config.cfg.appearance.rounding / 1.5
                 required property var modelData
                 implicitHeight: audioRow.implicitHeight + 8
                 implicitWidth: audioRow.implicitWidth
@@ -120,5 +92,4 @@ WlrLayershell {
             }
         }
     }
-    }
 }

modules/applets/WallPicker.qml

@@ -1,58 +1,17 @@
 pragma ComponentBehavior: Bound
-import Quickshell
-import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import Qt.labs.folderlistmodel 2.11
 
 import qs
 import qs.settings
-import qs.widgets
 
-BarComponent {
+Rectangle {
-    id: main
-    implicitWidth: implicitHeight
-    required property int screenHeight
-    StyledIcon {
-        iconName: "preferences-desktop-wallpaper-symbolic"
-        anchors.centerIn: parent
-    }
-    MouseArea {
-        id: clickHandler
-        anchors.fill: main
-        acceptedButtons: Qt.LeftButton
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-            wallPicker.visible = !wallPicker.visible;
-        }
-    }
-    WlrLayershell {
     id: wallPicker
-        visible: false
+    color: "transparent"
-        exclusionMode: ExclusionMode.Ignore
-        keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
-        implicitHeight: main.screenHeight / 8
-        color: 'transparent'
-        anchors {
-            bottom: true
-            left: true
-            right: true
-        }
-        margins {
-            bottom: 20
-            left: 20
-            right: 20
-        }
-        onVisibleChanged: {
-            if (wallPicker.visible)
-                container.forceActiveFocus();
-        }
     Rectangle {
         id: container
         focus: true
-            Keys.onEscapePressed: {
-                wallPicker.visible = false;
-            }
         anchors.fill: parent
         color: Colors.base02
         radius: Config.cfg.appearance.rounding
@@ -103,5 +62,4 @@ BarComponent {
             nameFilters: ["*.png"]
         }
     }
-    }
 }

modules/bar/Bar.qml

@@ -46,11 +46,11 @@ Variants {
                 Mpris {}
                 Bat {}
                 Tray {}
-                WallPicker {
+                WallPickerButton {barScreen: root.modelData}
-                    screenHeight: root.screen.height
-                }
 
-                Pw {barScreen: root.modelData}
+                Pw {
+                    barScreen: root.modelData
+                }
                 Netstatus {}
             }
         }

modules/bar/Pw.qml

@@ -30,10 +30,7 @@ BarComponent {
         acceptedButtons: Qt.LeftButton
         cursorShape: Qt.PointingHandCursor
         anchors.fill: root
-        onClicked: volPopup.visible = !volPopup.visible
+        onClicked: WidgetTracker.toggle("volume", root.barScreen)
-    }
-    VolPopup {
-	barScreen: root.barScreen
-	id: volPopup
     }
+   
 }

modules/bar/WallPickerButton.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import qs.widgets
+import qs.modules.Services
+import Quickshell
+
+
+BarComponent {
+    id: main
+    implicitWidth: implicitHeight
+    required property ShellScreen barScreen
+    StyledIcon {
+        iconName: "preferences-desktop-wallpaper-symbolic"
+        anchors.centerIn: parent
+    }
+    MouseArea {
+        id: clickHandler
+        anchors.fill: main
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            WidgetTracker.toggle("wallpapers", main.barScreen);
+        }
+    }
+}

modules/overlays/Top.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.modules.Services
+import qs.modules.applets
+import qs.settings
+
+Variants {
+    model: Quickshell.screens
+    delegate: PanelWindow {
+        required property ShellScreen modelData
+	aboveWindows: true
+        screen: modelData
+        anchors {
+            top: true
+            left: true
+            bottom: true
+            right: true
+        }
+        exclusionMode: ExclusionMode.Ignore
+        color: 'transparent'
+        visible: WidgetTracker.current !== "" && WidgetTracker.screen === modelData
+        WlrLayershell.keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+        Item {
+            anchors.fill: parent
+            focus: true
+            Keys.onEscapePressed: event => {
+                WidgetTracker.close();
+                event.accepted = true;
+            }
+	    VolPopup {
+		z: 1
+		visible: WidgetTracker.current === "volume"
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.topMargin: Config.cfg.bar.floating ? Config.cfg.bar.height + 20 : Config.cfg.bar.height
+		anchors.rightMargin: 10
+		
+	    }
+	    WallPicker {
+		z: 1
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.margins: 20
+		implicitWidth: 1000
+		implicitHeight: 200
+		visible: WidgetTracker.current === "wallpapers"
+	    }
+	    MouseArea {
+		z: 0
+		anchors.fill: parent
+		acceptedButtons: Qt.LeftButton
+		onClicked: WidgetTracker.close()
+	    }
+        }
+    }
+}

settings/settings.json

@@ -12,6 +12,6 @@
     },
     "wallpaper": {
         "wallDir": "/home/lucy/.walls/",
-        "wallpaper": "/home/lucy/.walls/frierensuff.png"
+        "wallpaper": "/home/lucy/.walls/walkingcastle.png"
     }
 }

shell.qml

@@ -2,12 +2,13 @@
 //@ pragma IconTheme Papirus-Dark
 import Quickshell
 import qs.modules.bar
-import qs.modules.wallpaper
 import qs.modules.notifications
+import qs.modules.overlays
 import qs.modules.Services
 
 ShellRoot {
     Bar {}
-    Wallpaper {}
     NotiPopup {}
+    Bottom {}
+    Top {}
 }