decouple clickable from styledlabel

config/Dimensions.qml

@@ -13,6 +13,7 @@ Singleton {
     property Clock clock: Clock {}
     property Workspace workspace: Workspace {}
     property Tray tray: Tray {}
+    property TrayMenu trayMenu: TrayMenu {}
 
     component Bar: QtObject {
         id: bar
@@ -65,4 +66,14 @@ 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: root
+        id: parentWindow
 
         anchors.top: true
         anchors.left: true

modules/bar/components/mpris/Player.qml

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

modules/bar/components/tray/Tray.qml

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

modules/bar/components/tray/TrayItem.qml

@@ -7,22 +7,20 @@ import "../../../../config/"
 import "../../../../styled/"
 import "menu/"
 
-Loader {
+Clickable {
-    required property SystemTrayItem modelData
+    id: root
 
-    active: modelData.hasMenu
+    property SystemTrayItem trayItem
+    property bool menuOpened: false
 
-    onLoaded: console.log(modelData.icon)
+    implicitWidth: Dimensions.tray.width
-    sourceComponent: item
+    implicitHeight: Dimensions.tray.height
-    property Component item: Clickable {
-        id: clickable
 
-        property bool menuOpen
+    onClicked: toggleMenu()
 
-        width: Dimensions.tray.width
+    function toggleMenu() {
-        height: Dimensions.tray.height
+        menuOpened = !menuOpened;
-
+    }
-        onClicked: menuOpen = !menuOpen
 
     IconImage {
         id: icon
@@ -40,17 +38,31 @@ Loader {
         anchors.centerIn: parent
     }
 
-        // Loader {
-        //     active: menuOpen && modelData.hasMenu
-        //
-        //     property Component menu: Menu {
-        //         menu: modelData.menu
-        //     }
-        // }
     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 {
+            anchors.fill: parent
+            color: Theme.palette.base300
+            radius: 8
+        }
 
         Menu {
-                menu: modelData.menu
+            id: menu
+
+            menuOpener: QsMenuOpener {
+                menu: trayItem.menu
             }
         }
     }

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

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

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

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
+import "../../../../../config/"
 import "../../../../../styled/"
 
 Clickable {
@@ -8,11 +9,20 @@ Clickable {
     property QsMenuEntry menuEntry
 
     implicitWidth: text.width
+    implicitHeight: 30
 
-    Text {
+    onClicked: menuEntry.triggered()
+
+    StyledText {
         id: text
-        text: item.menuEntry.text
 
-        padding: 8
+        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
     }
 }

styled/Clickable.qml

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