Make popups relative based on top bar position

2025-12-06 21:45:38 -05:00 · 2025-08-04 23:42:35 -04:00
parent ccd9f00201
commit 16e3b18e8e
14 changed files with 288 additions and 19 deletions
--- a/Modules/TopBar/Battery.qml
+++ b/Modules/TopBar/Battery.qml
@@ -8,6 +8,8 @@ Rectangle {
    id: battery

    property bool batteryPopupVisible: false
+    property string section: "right"
+    property var popupTarget: null

    signal toggleBatteryPopup()

@@ -92,6 +94,11 @@ Rectangle {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
            toggleBatteryPopup();
        }
    }
--- a/Modules/TopBar/BatteryPopout.qml
+++ b/Modules/TopBar/BatteryPopout.qml
@@ -12,6 +12,17 @@ PanelWindow {
    id: root

    property bool batteryPopupVisible: false
+    property real triggerX: Screen.width - 380 - Theme.spacingL
+    property real triggerY: Theme.barHeight + Theme.spacingS
+    property real triggerWidth: 70
+    property string triggerSection: "right"
+
+    function setTriggerPosition(x, y, width, section) {
+        triggerX = x;
+        triggerY = y;
+        triggerWidth = width;
+        triggerSection = section;
+    }

    function isActiveProfile(profile) {
        if (typeof PowerProfiles === "undefined")
@@ -61,13 +72,30 @@ PanelWindow {

        readonly property real targetWidth: Math.min(380, Screen.width - Theme.spacingL * 2)
        readonly property real targetHeight: Math.min(450, Screen.height - Theme.barHeight - Theme.spacingS * 2)
+        readonly property real calculatedX: {
+            var centerX = root.triggerX + (root.triggerWidth / 2) - (targetWidth / 2);
+            
+            if (centerX >= Theme.spacingM && centerX + targetWidth <= Screen.width - Theme.spacingM) {
+                return centerX;
+            }
+            
+            if (centerX < Theme.spacingM) {
+                return Theme.spacingM;
+            }
+            
+            if (centerX + targetWidth > Screen.width - Theme.spacingM) {
+                return Screen.width - targetWidth - Theme.spacingM;
+            }
+            
+            return centerX;
+        }

        asynchronous: true
        active: batteryPopupVisible
        width: targetWidth
        height: targetHeight
-        x: Math.max(Theme.spacingL, Screen.width - targetWidth - Theme.spacingL)
-        y: Theme.barHeight + Theme.spacingS
+        x: calculatedX
+        y: root.triggerY
        opacity: batteryPopupVisible ? 1 : 0
        scale: batteryPopupVisible ? 1 : 0.9

--- a/Modules/TopBar/Clock.qml
+++ b/Modules/TopBar/Clock.qml
@@ -8,6 +8,8 @@ Rectangle {

    property date currentDate: new Date()
    property bool compactMode: false
+    property string section: "center"
+    property var popupTarget: null

    signal clockClicked()

@@ -67,6 +69,11 @@ Rectangle {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
            root.clockClicked();
        }
    }
--- a/Modules/TopBar/CpuMonitor.qml
+++ b/Modules/TopBar/CpuMonitor.qml
@@ -10,6 +10,8 @@ Rectangle {
    property bool showPercentage: true
    property bool showIcon: true
    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null

    width: 55
    height: 30
@@ -32,10 +34,14 @@ Rectangle {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
            SysMonitorService.setSortBy("cpu");
            if (root.toggleProcessList)
                root.toggleProcessList();
-
        }
    }

--- a/Modules/TopBar/LauncherButton.qml
+++ b/Modules/TopBar/LauncherButton.qml
@@ -7,6 +7,8 @@ Rectangle {
    id: root

    property bool isActive: false
+    property string section: "left" // Which section this button is in
+    property var popupTarget: null // Reference to the popup to position

    signal clicked()

@@ -42,7 +44,14 @@ Rectangle {
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
-        onClicked: root.clicked()
+        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
+            root.clicked();
+        }
    }

    Behavior on color {
--- a/Modules/TopBar/Media.qml
+++ b/Modules/TopBar/Media.qml
@@ -13,6 +13,8 @@ Rectangle {
    readonly property int baseContentWidth: mediaRow.implicitWidth + Theme.spacingS * 2
    readonly property int normalContentWidth: Math.min(280, baseContentWidth)
    readonly property int compactContentWidth: Math.min(120, baseContentWidth)
+    property string section: "center"
+    property var popupTarget: null

    signal clicked()

@@ -127,7 +129,14 @@ Rectangle {
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
-                    onClicked: root.clicked()
+                    onClicked: {
+                        if (root.popupTarget && root.popupTarget.setTriggerPosition) {
+                            var globalPos = mapToGlobal(0, 0);
+                            var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                            root.popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, root.width, root.section);
+                        }
+                        root.clicked();
+                    }
                }

            }
--- a/Modules/TopBar/NotificationCenterButton.qml
+++ b/Modules/TopBar/NotificationCenterButton.qml
@@ -7,6 +7,8 @@ Rectangle {

    property bool hasUnread: false
    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null

    signal clicked()

@@ -44,6 +46,11 @@ Rectangle {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
            root.clicked();
        }
    }
--- a/Modules/TopBar/RamMonitor.qml
+++ b/Modules/TopBar/RamMonitor.qml
@@ -10,6 +10,8 @@ Rectangle {
    property bool showPercentage: true
    property bool showIcon: true
    property var toggleProcessList
+    property string section: "right"
+    property var popupTarget: null

    width: 55
    height: 30
@@ -32,10 +34,14 @@ Rectangle {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
            SysMonitorService.setSortBy("memory");
            if (root.toggleProcessList)
                root.toggleProcessList();
-
        }
    }

--- a/Modules/TopBar/TopBar.qml
+++ b/Modules/TopBar/TopBar.qml
@@ -437,10 +437,19 @@ PanelWindow {

                LauncherButton {
                    isActive: appDrawerPopout ? appDrawerPopout.isVisible : false
+                    section: {
+                        // Determine which section this loader is in by checking parent
+                        if (parent && parent.parent) {
+                            if (parent.parent === leftSection) return "left";
+                            if (parent.parent === rightSection) return "right";
+                            if (parent.parent === centerSection) return "center";
+                        }
+                        return "left"; // default fallback
+                    }
+                    popupTarget: appDrawerPopout
                    onClicked: {
                        if (appDrawerPopout)
                            appDrawerPopout.toggle();
-
                    }
                }

@@ -470,6 +479,13 @@ PanelWindow {

                Clock {
                    compactMode: topBarContent.overlapping
+                    section: {
+                        if (parent && parent.parent === leftSection) return "left";
+                        if (parent && parent.parent === rightSection) return "right";
+                        if (parent && parent.parent === centerSection) return "center";
+                        return "center";
+                    }
+                    popupTarget: centcomPopout
                    onClockClicked: {
                        centcomPopout.calendarVisible = !centcomPopout.calendarVisible;
                    }
@@ -482,6 +498,13 @@ PanelWindow {

                Media {
                    compactMode: topBarContent.spacingTight || topBarContent.overlapping
+                    section: {
+                        if (parent && parent.parent === leftSection) return "left";
+                        if (parent && parent.parent === rightSection) return "right";
+                        if (parent && parent.parent === centerSection) return "center";
+                        return "center";
+                    }
+                    popupTarget: centcomPopout
                    onClicked: {
                        centcomPopout.calendarVisible = !centcomPopout.calendarVisible;
                    }
@@ -493,6 +516,13 @@ PanelWindow {
                id: weatherComponent

                Weather {
+                    section: {
+                        if (parent && parent.parent === leftSection) return "left";
+                        if (parent && parent.parent === rightSection) return "right";
+                        if (parent && parent.parent === centerSection) return "center";
+                        return "center";
+                    }
+                    popupTarget: centcomPopout
                    onClicked: {
                        centcomPopout.calendarVisible = !centcomPopout.calendarVisible;
                    }
@@ -565,12 +595,26 @@ PanelWindow {
                    spacing: Theme.spacingXS

                    CpuMonitor {
+                        section: {
+                            if (parent && parent.parent && parent.parent.parent === leftSection) return "left";
+                            if (parent && parent.parent && parent.parent.parent === rightSection) return "right";
+                            if (parent && parent.parent && parent.parent.parent === centerSection) return "center";
+                            return "right";
+                        }
+                        popupTarget: processListPopout
                        toggleProcessList: () => {
                            return processListPopout.toggle();
                        }
                    }

                    RamMonitor {
+                        section: {
+                            if (parent && parent.parent && parent.parent.parent === leftSection) return "left";
+                            if (parent && parent.parent && parent.parent.parent === rightSection) return "right";
+                            if (parent && parent.parent && parent.parent.parent === centerSection) return "center";
+                            return "right";
+                        }
+                        popupTarget: processListPopout
                        toggleProcessList: () => {
                            return processListPopout.toggle();
                        }
@@ -586,6 +630,13 @@ PanelWindow {
                NotificationCenterButton {
                    hasUnread: root.notificationCount > 0
                    isActive: notificationCenter.notificationHistoryVisible
+                    section: {
+                        if (parent && parent.parent === leftSection) return "left";
+                        if (parent && parent.parent === rightSection) return "right";
+                        if (parent && parent.parent === centerSection) return "center";
+                        return "right";
+                    }
+                    popupTarget: notificationCenter
                    onClicked: {
                        notificationCenter.notificationHistoryVisible = !notificationCenter.notificationHistoryVisible;
                    }
@@ -598,6 +649,13 @@ PanelWindow {

                Battery {
                    batteryPopupVisible: batteryPopout.batteryPopupVisible
+                    section: {
+                        if (parent && parent.parent === leftSection) return "left";
+                        if (parent && parent.parent === rightSection) return "right";
+                        if (parent && parent.parent === centerSection) return "center";
+                        return "right";
+                    }
+                    popupTarget: batteryPopout
                    onToggleBatteryPopup: {
                        batteryPopout.batteryPopupVisible = !batteryPopout.batteryPopupVisible;
                    }
--- a/Modules/TopBar/Weather.qml
+++ b/Modules/TopBar/Weather.qml
@@ -6,6 +6,9 @@ import qs.Widgets
 Rectangle {
    id: root

+    property string section: "center"
+    property var popupTarget: null
+
    signal clicked()

    width: visible ? Math.min(100, weatherRow.implicitWidth + Theme.spacingS * 2) : 0
@@ -48,7 +51,14 @@ Rectangle {
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
-        onClicked: root.clicked()
+        onClicked: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0);
+                var screenRelativeX = globalPos.x >= Screen.width ? globalPos.x % Screen.width : globalPos.x;
+                popupTarget.setTriggerPosition(screenRelativeX, Theme.barHeight + Theme.spacingXS, width, section);
+            }
+            root.clicked();
+        }
    }

    Behavior on color {