dankbar: add a mask while popouts are open

- Retains ability to click items on the bar, while another is open
2025-12-15 18:02:50 -05:00 · 2025-11-15 12:36:12 -05:00
parent 64ec5be919
commit ccf28fc4e7
22 changed files with 573 additions and 49 deletions
--- a/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
+++ b/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
@@ -40,6 +40,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen

+    onBackgroundClicked: close()
+
    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
            appLauncher.searchQuery = ""
--- a/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
+++ b/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
@@ -71,7 +71,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
--- a/quickshell/Modules/DankBar/BarCanvas.qml
+++ b/quickshell/Modules/DankBar/BarCanvas.qml
@@ -24,6 +24,25 @@ Item {
        debounceTimer.restart()
    }

+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        z: -999
+        onClicked: {
+            const activePopout = PopoutManager.getActivePopout(barWindow.screen)
+            if (activePopout) {
+                if (activePopout.dashVisible !== undefined) {
+                    activePopout.dashVisible = false
+                } else if (activePopout.notificationHistoryVisible !== undefined) {
+                    activePopout.notificationHistoryVisible = false
+                } else {
+                    activePopout.close()
+                }
+            }
+            TrayMenuManager.closeAllMenus()
+        }
+    }
+
    Timer {
        id: debounceTimer
        interval: 50
--- a/quickshell/Modules/DankBar/DankBar.qml
+++ b/quickshell/Modules/DankBar/DankBar.qml
@@ -127,10 +127,7 @@ Item {
                    dankDashPopoutLoader.item.triggerScreen = barWindow.screen
                }

-                if (!dankDashPopoutLoader.item.dashVisible) {
-                    dankDashPopoutLoader.item.currentTabIndex = 2
-                }
-                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
+                PopoutManager.requestPopout(dankDashPopoutLoader.item, 2)
            }

            readonly property var dBarLayer: {
@@ -1130,8 +1127,7 @@ Item {
                                        onClockClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 0
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 0)
                                            }
                                        }
                                    }
@@ -1154,8 +1150,7 @@ Item {
                                        onClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 1
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 1)
                                            }
                                        }
                                    }
@@ -1177,8 +1172,7 @@ Item {
                                        onClicked: {
                                            dankDashPopoutLoader.active = true
                                            if (dankDashPopoutLoader.item) {
-                                                dankDashPopoutLoader.item.dashVisible = !dankDashPopoutLoader.item.dashVisible
-                                                dankDashPopoutLoader.item.currentTabIndex = 3
+                                                PopoutManager.requestPopout(dankDashPopoutLoader.item, 3)
                                            }
                                        }
                                    }
--- a/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
@@ -50,8 +50,8 @@ DankPopout {
    triggerWidth: 70
    positioning: ""
    screen: triggerScreen
-    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
@@ -95,7 +95,6 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
@@ -46,7 +46,8 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible
+
+    onBackgroundClicked: close()

    content: Component {
        Rectangle {
--- a/quickshell/Modules/DankBar/Widgets/CpuMonitor.qml
+++ b/quickshell/Modules/DankBar/Widgets/CpuMonitor.qml
@@ -132,8 +132,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "cpu");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/CpuTemperature.qml
+++ b/quickshell/Modules/DankBar/Widgets/CpuTemperature.qml
@@ -132,8 +132,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "cpu_temp");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/GpuTemperature.qml
+++ b/quickshell/Modules/DankBar/Widgets/GpuTemperature.qml
@@ -196,8 +196,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("cpu");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "gpu_temp");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/RamMonitor.qml
+++ b/quickshell/Modules/DankBar/Widgets/RamMonitor.qml
@@ -155,8 +155,8 @@ BasePill {
                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
            }
            DgopService.setSortBy("memory");
-            if (root.toggleProcessList) {
-                root.toggleProcessList();
+            if (popoutTarget) {
+                PopoutManager.requestPopout(popoutTarget, undefined, "memory");
            }
        }
    }
--- a/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
@@ -51,6 +51,21 @@ Item {
    property bool menuOpen: false
    property bool overflowWasOpenBeforeTrayMenu: false

+    Component.onCompleted: {
+        if (parentScreen) {
+            TrayMenuManager.registerOverflowMenu(parentScreen.name, {
+                close: () => { root.menuOpen = false }
+            })
+        }
+    }
+
+    Component.onDestruction: {
+        if (parentScreen) {
+            TrayMenuManager.unregisterOverflowMenu(parentScreen.name)
+            TrayMenuManager.unregisterTrayMenu(parentScreen.name)
+        }
+    }
+
    Rectangle {
        id: visualBackground
        width: root.visualWidth
@@ -372,12 +387,106 @@ Item {
            : (screen?.devicePixelRatio || 1)
        property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)

+        readonly property var barBounds: {
+            if (!overflowMenu.screen) {
+                return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+            }
+            return SettingsData.getBarBounds(overflowMenu.screen, root.barThickness + SettingsData.dankBarSpacing)
+        }
+
+        readonly property real barX: barBounds.x
+        readonly property real barY: barBounds.y
+        readonly property real barWidth: barBounds.width
+        readonly property real barHeight: barBounds.height
+
+        readonly property real maskX: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Left:
+                return barWidth > 0 ? barWidth : 0
+            case SettingsData.Position.Right:
+            case SettingsData.Position.Top:
+            case SettingsData.Position.Bottom:
+            default:
+                return 0
+            }
+        }
+
+        readonly property real maskY: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Top:
+                return barHeight > 0 ? barHeight : 0
+            case SettingsData.Position.Bottom:
+            case SettingsData.Position.Left:
+            case SettingsData.Position.Right:
+            default:
+                return 0
+            }
+        }
+
+        readonly property real maskWidth: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Left:
+                return barWidth > 0 ? width - barWidth : width
+            case SettingsData.Position.Right:
+                return barWidth > 0 ? width - barWidth : width
+            case SettingsData.Position.Top:
+            case SettingsData.Position.Bottom:
+            default:
+                return width
+            }
+        }
+
+        readonly property real maskHeight: {
+            switch (SettingsData.dankBarPosition) {
+            case SettingsData.Position.Top:
+                return barHeight > 0 ? height - barHeight : height
+            case SettingsData.Position.Bottom:
+                return barHeight > 0 ? height - barHeight : height
+            case SettingsData.Position.Left:
+            case SettingsData.Position.Right:
+            default:
+                return height
+            }
+        }
+
+        mask: Region {
+            item: Rectangle {
+                x: overflowMenu.maskX
+                y: overflowMenu.maskY
+                width: overflowMenu.maskWidth
+                height: overflowMenu.maskHeight
+            }
+        }
+
        onVisibleChanged: {
            if (visible) {
+                PopoutManager.closeAllPopouts()
+                ModalManager.closeAllModalsExcept(null)
+                TrayMenuManager.closeTrayMenus()
                updatePosition()
            }
        }

+        MouseArea {
+            x: overflowMenu.maskX
+            y: overflowMenu.maskY
+            width: overflowMenu.maskWidth
+            height: overflowMenu.maskHeight
+            z: -1
+            enabled: root.menuOpen
+            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+            onClicked: mouse => {
+                const clickX = mouse.x + overflowMenu.maskX
+                const clickY = mouse.y + overflowMenu.maskY
+                const outsideContent = clickX < menuContainer.x || clickX > menuContainer.x + menuContainer.width ||
+                                       clickY < menuContainer.y || clickY > menuContainer.y + menuContainer.height
+
+                if (!outsideContent) return
+
+                root.menuOpen = false
+            }
+        }
+
        FocusScope {
            id: overflowFocusScope
            anchors.fill: parent
@@ -622,12 +731,6 @@ Item {
                }
            }
        }
-
-        MouseArea {
-            anchors.fill: parent
-            z: -1
-            onClicked: root.menuOpen = false
-        }
    }

    Component {
@@ -730,12 +833,106 @@ Item {
                    : (screen?.devicePixelRatio || 1)
                property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)

+                readonly property var barBounds: {
+                    if (!menuWindow.screen) {
+                        return { "x": 0, "y": 0, "width": 0, "height": 0, "wingSize": 0 }
+                    }
+                    return SettingsData.getBarBounds(menuWindow.screen, root.barThickness + SettingsData.dankBarSpacing)
+                }
+
+                readonly property real barX: barBounds.x
+                readonly property real barY: barBounds.y
+                readonly property real barWidth: barBounds.width
+                readonly property real barHeight: barBounds.height
+
+                readonly property real maskX: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Left:
+                        return barWidth > 0 ? barWidth : 0
+                    case SettingsData.Position.Right:
+                    case SettingsData.Position.Top:
+                    case SettingsData.Position.Bottom:
+                    default:
+                        return 0
+                    }
+                }
+
+                readonly property real maskY: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Top:
+                        return barHeight > 0 ? barHeight : 0
+                    case SettingsData.Position.Bottom:
+                    case SettingsData.Position.Left:
+                    case SettingsData.Position.Right:
+                    default:
+                        return 0
+                    }
+                }
+
+                readonly property real maskWidth: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Left:
+                        return barWidth > 0 ? width - barWidth : width
+                    case SettingsData.Position.Right:
+                        return barWidth > 0 ? width - barWidth : width
+                    case SettingsData.Position.Top:
+                    case SettingsData.Position.Bottom:
+                    default:
+                        return width
+                    }
+                }
+
+                readonly property real maskHeight: {
+                    switch (SettingsData.dankBarPosition) {
+                    case SettingsData.Position.Top:
+                        return barHeight > 0 ? height - barHeight : height
+                    case SettingsData.Position.Bottom:
+                        return barHeight > 0 ? height - barHeight : height
+                    case SettingsData.Position.Left:
+                    case SettingsData.Position.Right:
+                    default:
+                        return height
+                    }
+                }
+
+                mask: Region {
+                    item: Rectangle {
+                        x: menuWindow.maskX
+                        y: menuWindow.maskY
+                        width: menuWindow.maskWidth
+                        height: menuWindow.maskHeight
+                    }
+                }
+
                onVisibleChanged: {
                    if (visible) {
+                        PopoutManager.closeAllPopouts()
+                        ModalManager.closeAllModalsExcept(null)
+                        TrayMenuManager.closeOverflowMenus()
                        updatePosition()
                    }
                }

+                MouseArea {
+                    x: menuWindow.maskX
+                    y: menuWindow.maskY
+                    width: menuWindow.maskWidth
+                    height: menuWindow.maskHeight
+                    z: -1
+                    enabled: menuRoot.showMenu
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                    onClicked: mouse => {
+                        const clickX = mouse.x + menuWindow.maskX
+                        const clickY = mouse.y + menuWindow.maskY
+                        const outsideContent = clickX < menuContainer.x || clickX > menuContainer.x + menuContainer.width ||
+                                               clickY < menuContainer.y || clickY > menuContainer.y + menuContainer.height
+
+                        if (!outsideContent) return
+
+                        menuRoot.close()
+                    }
+                }
+
                FocusScope {
                    id: menuFocusScope
                    anchors.fill: parent
@@ -1128,12 +1325,6 @@ Item {
                        }
                    }
                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    z: -1
-                    onClicked: menuRoot.close()
-                }
            }
        }
    }
@@ -1156,11 +1347,20 @@ Item {
        }

        if (currentTrayMenu) {
+            root.overflowWasOpenBeforeTrayMenu = false
+            currentTrayMenu.showMenu = false
            currentTrayMenu.destroy()
+            currentTrayMenu = null
        }
+
        currentTrayMenu = trayMenuComponent.createObject(null)
-        if (currentTrayMenu) {
+        if (currentTrayMenu && screen) {
            currentTrayMenu.showForTrayItem(item, anchor, screen, atBottom, vertical ?? false, axisObj)
+            TrayMenuManager.registerTrayMenu(screen.name, () => {
+                if (currentTrayMenu) {
+                    currentTrayMenu.close()
+                }
+            })
        }
    }

--- a/quickshell/Modules/DankDash/DankDashPopout.qml
+++ b/quickshell/Modules/DankDash/DankDashPopout.qml
@@ -45,7 +45,6 @@ DankPopout {
    triggerY: Math.max(26 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2
    triggerWidth: 80
    shouldBeVisible: dashVisible
-    visible: shouldBeVisible

    property bool __focusArmed: false
    property bool __contentReady: false
--- a/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
+++ b/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
@@ -42,7 +42,14 @@ DankPopout {
    positioning: ""
    screen: triggerScreen
    shouldBeVisible: notificationHistoryVisible
-    visible: shouldBeVisible
+
+    function toggle() {
+        notificationHistoryVisible = !notificationHistoryVisible
+    }
+
+    onBackgroundClicked: {
+        notificationHistoryVisible = false
+    }

    onNotificationHistoryVisibleChanged: {
        if (notificationHistoryVisible) {
--- a/quickshell/Modules/Plugins/PluginPopout.qml
+++ b/quickshell/Modules/Plugins/PluginPopout.qml
@@ -27,7 +27,6 @@ DankPopout {
    popupHeight: contentHeight
    screen: triggerScreen
    shouldBeVisible: false
-    visible: shouldBeVisible

    content: Component {
        Rectangle {
--- a/quickshell/Modules/ProcessList/ProcessListPopout.qml
+++ b/quickshell/Modules/ProcessList/ProcessListPopout.qml
@@ -45,9 +45,10 @@ DankPopout {
    triggerWidth: 55
    positioning: ""
    screen: triggerScreen
-    visible: shouldBeVisible
    shouldBeVisible: false

+    onBackgroundClicked: close()
+
    Ref {
        service: DgopService
    }
--- a/quickshell/Modules/SystemUpdatePopout.qml
+++ b/quickshell/Modules/SystemUpdatePopout.qml
@@ -35,9 +35,10 @@ DankPopout {
    triggerWidth: 55
    positioning: ""
    screen: triggerScreen
-    visible: shouldBeVisible
    shouldBeVisible: false

+    onBackgroundClicked: close()
+
    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
            if (SystemUpdateService.updateCount === 0 && !SystemUpdateService.isChecking) {