config/Dimensions.qml

@@ -13,7 +13,6 @@ Singleton {
     property Clock clock: Clock {}
     property Workspace workspace: Workspace {}
     property Tray tray: Tray {}
-    property TrayMenu trayMenu: TrayMenu {}
 
     component Bar: QtObject {
         id: bar
@@ -66,14 +65,4 @@ Singleton {
         property int verticalPadding: 6
         property int horizontalPadding: 7
     }
-
-    component TrayMenu: QtObject {
-        id: trayItem
-
-        property int fontSize: 10
-        property int width: 30
-        property int height: 30
-        property int verticalPadding: 6
-        property int horizontalPadding: 7
-    }
 }

modules/bar/Bar.qml

@@ -8,7 +8,7 @@ import "../../config/"
 
 Scope {
     PanelWindow {
-        id: parentWindow
+        id: root
 
         anchors.top: true
         anchors.left: true

modules/bar/components/mpris/Player.qml

@@ -27,14 +27,8 @@ Loader {
                 modelData.play();
             }
         }
-
-        onWheel: event => {
-            if (event.angleDelta.y > 0) {
-                parent.nextPlayer();
-            } else if (event.angleDelta.y < 0) {
-                parent.previousPlayer();
-            }
-        }
+        onScrolledUp: parent.nextPlayer()
+        onScrolledDown: parent.previousPlayer()
 
         StyledText {
             id: text
@@ -50,7 +44,7 @@ Loader {
 
             states: State {
                 name: "hovered"
-                when: clickable.containsMouse
+                when: clickable.hovered
                 PropertyChanges {
                     text {
                         color: Theme.palette.base300

modules/bar/components/tray/Tray.qml

@@ -10,14 +10,6 @@ Row {
     Repeater {
         model: SystemTray.items
 
-        Loader {
-            required property SystemTrayItem modelData
-            active: true
-
-            sourceComponent: item
-            property Component item: TrayItem {
-              trayItem: modelData
-            }
-        }
+        TrayItem {}
     }
 }

modules/bar/components/tray/TrayItem.qml

@@ -7,62 +7,50 @@ import "../../../../config/"
 import "../../../../styled/"
 import "menu/"
 
-Clickable {
-    id: root
+Loader {
+    required property SystemTrayItem modelData
 
-    property SystemTrayItem trayItem
-    property bool menuOpened: false
+    active: modelData.hasMenu
 
-    implicitWidth: Dimensions.tray.width
-    implicitHeight: Dimensions.tray.height
+    onLoaded: console.log(modelData.icon)
+    sourceComponent: item
+    property Component item: Clickable {
+        id: clickable
 
-    onClicked: toggleMenu()
+        property bool menuOpen
 
-    function toggleMenu() {
-        menuOpened = !menuOpened;
-    }
+        width: Dimensions.tray.width
+        height: Dimensions.tray.height
 
-    IconImage {
-        id: icon
-        anchors.margins: 6
-        anchors.fill: parent
-        asynchronous: true
-        source: {
-            let icon = modelData.icon;
-            if (icon.includes("?path=")) {
-                const [name, path] = icon.split("?path=");
-                icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
-            }
-            return icon;
-        }
-        anchors.centerIn: parent
-    }
+        onClicked: menuOpen = !menuOpen
 
-    PopupWindow {
-        id: popup
-
-        visible: root.menuOpened
-
-        color: 'transparent'
-
-        anchor.item: root
-        anchor.rect.x: root.width / 2 - width / 2
-        anchor.rect.y: root.height + 8
-
-        implicitWidth: menu.width
-        implicitHeight: menu.height
-
-        Rectangle {
+        IconImage {
+            id: icon
+            anchors.margins: 6
             anchors.fill: parent
-            color: Theme.palette.base300
-            radius: 8
+            asynchronous: true
+            source: {
+                let icon = modelData.icon;
+                if (icon.includes("?path=")) {
+                    const [name, path] = icon.split("?path=");
+                    icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
+                }
+                return icon;
+            }
+            anchors.centerIn: parent
         }
 
-        Menu {
-            id: menu
+        // Loader {
+        //     active: menuOpen && modelData.hasMenu
+        //
+        //     property Component menu: Menu {
+        //         menu: modelData.menu
+        //     }
+        // }
+        PopupWindow {
 
-            menuOpener: QsMenuOpener {
-                menu: trayItem.menu
+            Menu {
+                menu: modelData.menu
             }
         }
     }

modules/bar/components/tray/menu/Menu.qml

@@ -1,29 +1,23 @@
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import "../../../../../config/"
 import "../../../../../styled/"
 
 ColumnLayout {
-    id: menu
-    property QsMenuOpener menuOpener
-
-    anchors.margins: 8
+    property QsMenuOpener menu
 
     Repeater {
-        model: menuOpener.children
-        delegate: Loader {
-            required property QsMenuEntry modelData
-            active: true
+        model: modelData.children
 
-            sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
-            property Component menuSeperator: Rectangle {
-                implicitHeight: 1
-                implicitWidth: menu.width
-                color: Theme.palette.basecontent
-            }
+        Loader {
+            id: loader
+            required property QsMenuEntry modelData
+
+            active: modelData.enabled
+
+            sourceComponent: menuItem
             property Component menuItem: MenuItem {
-                menuEntry: modelData
+                menuEntry: loader.modelData
             }
         }
     }

modules/bar/components/tray/menu/MenuItem.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import "../../../../../config/"
 import "../../../../../styled/"
 
 Clickable {
@@ -9,20 +8,11 @@ Clickable {
     property QsMenuEntry menuEntry
 
     implicitWidth: text.width
-    implicitHeight: 30
 
-    onClicked: menuEntry.triggered()
-
-    StyledText {
+    Text {
         id: text
-
-        font.pixelSize: Dimensions.clock.fontSize
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.clock.verticalPadding
-        bottomPadding: Dimensions.clock.verticalPadding
-        leftPadding: Dimensions.clock.horizontalPadding
-        rightPadding: Dimensions.clock.horizontalPadding
-
         text: item.menuEntry.text
+
+        padding: 8
     }
 }

styled/Clickable.qml

@@ -1,21 +1,30 @@
 import QtQuick
 import "../config/"
 
-MouseArea {
-    id: mouseArea
-
+Item {
+    id: root
     property bool disabled: false
+    property alias hovered: mouseArea.containsMouse
+    signal clicked
+    signal scrolledUp
+    signal scrolledDown
 
-    hoverEnabled: !disabled
-    cursorShape: Qt.PointingHandCursor
-
-    Rectangle {
+    StyledLabel {
         id: background
         anchors.fill: parent
-
-        radius: Dimensions.radius
-        color: mouseArea.containsMouse ? Theme.palette.primary : Theme.palette.base300
-        Behavior on color {
+        states: State {
+            name: "hovered"
+            when: mouseArea.containsMouse
+            PropertyChanges {
+                background {
+                    color: Theme.palette.primary
+                }
+            }
+        }
+        transitions: Transition {
+            from: ""
+            to: "hovered"
+            reversible: true
             ColorAnimation {
                 properties: "color"
                 duration: 200
@@ -23,4 +32,22 @@ MouseArea {
             }
         }
     }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+
+        hoverEnabled: !disabled
+        cursorShape: Qt.PointingHandCursor
+
+        onClicked: root.clicked()
+
+        onWheel: event => {
+            if (event.angleDelta.y > 0) {
+                root.scrolledUp();
+            } else if (event.angleDelta.y < 0) {
+                root.scrolledDown();
+            }
+        }
+    }
 }