modules/bar/components/hyprland/Workspace.qml

@@ -1,56 +1,89 @@
 import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
 import Quickshell.Hyprland
 import "../../../../config"
 import "../../../../styled/"
 
-Loader {
+Item {
+    id: workspace
+
     required property HyprlandWorkspace modelData
 
-    active: modelData.id > 0
+    visible: modelData.id > 0
 
-    sourceComponent: workspace
+    width: Dimensions.workspace.width
-    property Component workspace: Clickable {
+    height: Dimensions.workspace.height
-        id: clickable
 
-        width: Dimensions.workspace.width
+    Rectangle {
-        height: Dimensions.workspace.height
+        id: rectangle
-
+        anchors.fill: parent
-        onClicked: modelData.activate()
+        color: Theme.palette.base100
-
+        radius: Dimensions.radius
-        Icon {
+        states: State {
-            id: icon
+            name: "hovered"
-
+            when: mouseArea.containsMouse
-            source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
+            PropertyChanges {
-
+                rectangle {
-            anchors.centerIn: parent
+                    color: Theme.palette.primary
-            size: Dimensions.workspace.iconSize
-
-            states: State {
-                name: "active"
-                when: modelData.active
-                PropertyChanges {
-                    icon {
-                        rotation: 180
-                        color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
-                    }
                 }
             }
+        }
+        transitions: Transition {
+            from: ""
+            to: "hovered"
+            reversible: true
+            ColorAnimation {
+                properties: "color"
+                duration: 200
+                easing.type: Easing.InOutCubic
+            }
+        }
+    }
 
-            transitions: Transition {
+    Icon {
-                from: ""
+        id: icon
-                to: "active"
+
-                reversible: true
+        source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
-                ParallelAnimation {
+
-                    RotationAnimation {
+        anchors.centerIn: parent
-                        duration: 200
+        size: Dimensions.workspace.iconSize
-                        easing.type: Easing.InOutCubic
+
-                    }
+        states: State {
-                    ColorAnimation {
+            name: "active"
-                        duration: 200
+            when: workspace.modelData.active
-                        easing.type: Easing.OutCubic
+            PropertyChanges {
-                    }
+                icon {
+                    rotation: 180
+                    color: mouseArea.containsMouse ? Theme.palette.basecontent : Theme.palette.primary
+                }
+            }
+        }
+
+        transitions: Transition {
+            from: ""
+            to: "active"
+            reversible: true
+            ParallelAnimation {
+                RotationAnimation {
+                    duration: 200
+                    easing.type: Easing.InOutCubic
+                }
+                ColorAnimation {
+                    duration: 200
+                    easing.type: Easing.OutCubic
                 }
             }
         }
     }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+
+        hoverEnabled: true
+        onClicked: workspace.modelData.activate()
+    }
 }

modules/bar/components/mpris/Mpris.qml

@@ -16,8 +16,8 @@ Item {
 
         Player {
 
-            anchors.horizontalCenter: parent.horizontalCenter
+          anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
+          anchors.verticalCenter: parent.verticalCenter
 
             visible: index === root.currentIndex && modelData.canControl
 

modules/bar/components/mpris/Player.qml

@@ -1,21 +1,40 @@
+import Quickshell
 import Quickshell.Services.Mpris
 import QtQuick
 import "../../../../styled/"
 import "../../../../config/"
 
-Loader {
+Item {
     required property MprisPlayer modelData
     required property int index
 
     signal nextPlayer
     signal previousPlayer
 
-    sourceComponent: player
+    implicitWidth: text.width
-    property Component player: Clickable {
+    implicitHeight: Dimensions.mpris.height
-        id: clickable
 
-        implicitWidth: text.width
+    StyledLabel {
-        implicitHeight: Dimensions.mpris.height
+        anchors.fill: text
+    }
+
+    StyledText {
+        id: text
+        text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.mpris.verticalPadding
+        bottomPadding: Dimensions.mpris.verticalPadding
+        leftPadding: Dimensions.mpris.horizontalPadding
+        rightPadding: Dimensions.mpris.horizontalPadding
+
+        font.pixelSize: Dimensions.mpris.fontSize
+    }
+
+    MouseArea {
+        anchors.fill: text
+
+        cursorShape: Qt.PointingHandCursor
 
         onClicked: {
             if (!modelData.canTogglePlaying) {
@@ -27,39 +46,11 @@ Loader {
                 modelData.play();
             }
         }
-        onScrolledUp: parent.nextPlayer()
+        onWheel: event => {
-        onScrolledDown: parent.previousPlayer()
+            if (event.angleDelta.y > 0) {
-
+                parent.nextPlayer();
-        StyledText {
+            } else if (event.angleDelta.y < 0) {
-            id: text
+                parent.previousPlayer();
-            text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
-
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.mpris.verticalPadding
-            bottomPadding: Dimensions.mpris.verticalPadding
-            leftPadding: Dimensions.mpris.horizontalPadding
-            rightPadding: Dimensions.mpris.horizontalPadding
-
-            font.pixelSize: Dimensions.mpris.fontSize
-
-            states: State {
-                name: "hovered"
-                when: clickable.hovered
-                PropertyChanges {
-                    text {
-                        color: Theme.palette.base300
-                    }
-                }
-            }
-            transitions: Transition {
-                from: ""
-                to: "hovered"
-                reversible: true
-                ColorAnimation {
-                    properties: "color"
-                    duration: 200
-                    easing.type: Easing.InOutCubic
-                }
             }
         }
     }

styled/Clickable.qml

@@ -1,53 +0,0 @@
-import QtQuick
-import "../config/"
-
-Item {
-    id: root
-    property bool disabled: false
-    property alias hovered: mouseArea.containsMouse
-    signal clicked
-    signal scrolledUp
-    signal scrolledDown
-
-    StyledLabel {
-        id: background
-        anchors.fill: parent
-        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
-                easing.type: Easing.InOutCubic
-            }
-        }
-    }
-
-    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();
-            }
-        }
-    }
-}