widgets on mpris

modules/bar/components/Storage.qml

@@ -1,20 +1,16 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
+import QtQuick.Layouts
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
 
 StyledLabel {
-    implicitWidth: childrenRect.width
+    RowLayout {
-    implicitHeight: Dimensions.storage.height
-
         Ref {
             service: SystemInfo
         }
-
-    Row {
         StyledText {
             id: icon
 
@@ -22,22 +18,11 @@ StyledLabel {
             font.pixelSize: Dimensions.storage.iconSize
             font.bold: true
             text: Icons.hardDrive
-
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.storage.verticalPadding
-            bottomPadding: Dimensions.storage.verticalPadding
-            leftPadding: Dimensions.storage.horizontalPadding
         }
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.storage.verticalPadding
-            bottomPadding: Dimensions.storage.verticalPadding
-            rightPadding: Dimensions.storage.horizontalPadding
-
             font.pixelSize: Dimensions.storage.fontSize
-
             text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
         }
     }

modules/bar/components/mpris/Mpris.qml

@@ -1,4 +1,3 @@
-import Quickshell
 import Quickshell.Services.Mpris
 import QtQuick
 

modules/bar/components/mpris/Player.qml

@@ -1,9 +1,10 @@
+import qs.config
+import qs.widgets
 import Quickshell.Services.Mpris
 import QtQuick
-import "../../../../styled/"
-import "../../../../config/"
 
 Loader {
+    id: root
     required property MprisPlayer modelData
     required property int index
 
@@ -11,46 +12,37 @@ Loader {
     signal previousPlayer
 
     sourceComponent: player
-    property Component player: Clickable {
+    property Component player: StyledButton {
-        id: clickable
+        id: button
-
-        implicitWidth: text.width
-        implicitHeight: Dimensions.mpris.height
 
         onClicked: {
-            if (!modelData.canTogglePlaying) {
+            if (!root.modelData.canTogglePlaying) {
                 return;
             }
-            if (modelData.isPlaying) {
+            if (root.modelData.isPlaying) {
-                modelData.pause();
+                root.modelData.pause();
             } else {
-                modelData.play();
+                root.modelData.play();
             }
         }
 
         onWheel: event => {
             if (event.angleDelta.y > 0) {
-                parent.nextPlayer();
+                root.nextPlayer();
             } else if (event.angleDelta.y < 0) {
-                parent.previousPlayer();
+                root.previousPlayer();
             }
         }
 
-        StyledText {
+        content: StyledText {
             id: text
-            text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
+            text: `${root.modelData.isPlaying ? "" : ""} ${root.modelData.trackTitle} - ${root.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.containsMouse
+                when: button.containsMouse
                 PropertyChanges {
                     text {
                         color: Theme.palette.base300