Tray: basic tray, no dropdown menu yet

2025-08-10 21:59:33 -04:00 · 2025-08-10 21:59:33 -04:00 · 6ce7c7d55d
commit 6ce7c7d55d
parent d6d9350bff
2 changed files with 126 additions and 0 deletions
--- a/Modules/Bar/Tray.qml
+++ b/Modules/Bar/Tray.qml
@ -0,0 +1,122 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import qs.Services
+import qs.Widgets
+
+Row {
+  readonly property real scaling: Scaling.scale(screen)
+  property bool containsMouse: false
+  property var systemTray: SystemTray
+
+  spacing: 8
+  Layout.alignment: Qt.AlignVCenter
+
+  Repeater {
+    model: systemTray.items
+    delegate: Item {
+      width: 24 * scaling
+      height: 24 * scaling
+
+      visible: modelData
+      property bool isHovered: trayMouseArea.containsMouse
+
+      // No animations - static display
+      Rectangle {
+        anchors.centerIn: parent
+        width: 16 * scaling
+        height: 16 * scaling
+        radius: 6
+        color: "transparent"
+        clip: true
+
+        IconImage {
+          id: trayIcon
+          anchors.centerIn: parent
+          width: 16 * scaling
+          height: 16 * scaling
+          smooth: false
+          asynchronous: true
+          backer.fillMode: Image.PreserveAspectFit
+          source: {
+            let icon = modelData?.icon || ""
+            if (!icon) {
+              return ""
+            }
+
+            // Process icon path
+            if (icon.includes("?path=")) {
+              const chunks = icon.split("?path=")
+              const name = chunks[0]
+              const path = chunks[1]
+              const fileName = name.substring(name.lastIndexOf("/") + 1)
+              return `file://${path}/${fileName}`
+            }
+            return icon
+          }
+          opacity: status === Image.Ready ? 1 : 0
+        }
+      }
+
+      MouseArea {
+        id: trayMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onClicked: mouse => {
+                     if (!modelData)
+                     return
+
+                     if (mouse.button === Qt.LeftButton) {
+                       // Close any open menu first
+                       if (trayMenu && trayMenu.visible) {
+                         trayMenu.hideMenu()
+                       }
+
+                       if (!modelData.onlyMenu) {
+                         modelData.activate()
+                       }
+                     } else if (mouse.button === Qt.MiddleButton) {
+                       // Close any open menu first
+                       if (trayMenu && trayMenu.visible) {
+                         trayMenu.hideMenu()
+                       }
+
+                       modelData.secondaryActivate && modelData.secondaryActivate()
+                     } else if (mouse.button === Qt.RightButton) {
+                       trayTooltip.tooltipVisible = false
+                       // If menu is already visible, close it
+                       if (trayMenu && trayMenu.visible) {
+                         trayMenu.hideMenu()
+                         return
+                       }
+
+                       if (modelData.hasMenu && modelData.menu && trayMenu) {
+                         // Anchor the menu to the tray icon item (parent) and position it below the icon
+                         const menuX = (width / 2) - (trayMenu.width / 2)
+                         const menuY = height + 20 * scaling
+                         trayMenu.menu = modelData.menu
+                         trayMenu.showAt(parent, menuX, menuY)
+                       } else {
+
+                         console.log("Tray: no menu available for", modelData.id, "or trayMenu not set")
+                       }
+                     }
+                   }
+        onEntered: trayTooltip.show()
+        onExited: trayTooltip.hide()
+      }
+
+      NTooltip {
+        id: trayTooltip
+        target: trayIcon
+        text: modelData.tooltipTitle || modelData.name || modelData.id || "Tray Item"
+      }
+    }
+  }
+}