more raw

components/MprisController.qml

@@ -9,88 +9,82 @@ import QtQuick.Layouts
 import Quickshell.Services.Mpris
 import Quickshell.Widgets
 
-WrapperRectangle {
+ColumnLayout {
     id: root
+
     required property MprisPlayer player
 
-    color: Theme.palette.base200
+    spacing: 12
-    radius: 8
-    margin: 16
 
-    ColumnLayout {
+    implicitWidth: 800
 
-        spacing: 12
+    StyledText {
+        id: text
+        Layout.alignment: Qt.AlignHCenter
+        text: `${root.player.trackTitle} - ${root.player.trackArtist}`
+        font.pixelSize: Dimensions.mpris.fontSize
+    }
 
-        implicitWidth: 800
+    RowLayout {
-
+        Layout.alignment: Qt.AlignHCenter
-        StyledText {
+        StyledButton {
-            id: text
+            id: backButton
-            Layout.alignment: Qt.AlignHCenter
+            content: LucideIcon {
-            text: `${root.player.trackTitle} - ${root.player.trackArtist}`
+                color: backButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-            font.pixelSize: Dimensions.mpris.fontSize
+                text: Icons.skipBack
-        }
-
-        RowLayout {
-            Layout.alignment: Qt.AlignHCenter
-            StyledButton {
-                id: backButton
-                content: LucideIcon {
-                    color: backButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-                    text: Icons.skipBack
-                }
-                onClicked: {
-                    root.player.previous();
-                }
             }
-            StyledButton {
+            onClicked: {
-                id: playPauseButton
+                root.player.previous();
-                content: LucideIcon {
-                    color: playPauseButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-                    text: root.player.isPlaying ? Icons.square : Icons.play
-                }
-                onClicked: {
-                    root.player.isPlaying = !root.player.isPlaying;
-                }
-            }
-            StyledButton {
-                id: forwardButton
-                content: LucideIcon {
-                    color: forwardButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-                    text: Icons.skipForward
-                }
-                onClicked: {
-                    root.player.next();
-                }
             }
         }
-
+        StyledButton {
-        StyledText {
+            id: playPauseButton
-            Layout.alignment: Qt.AlignHCenter
+            content: LucideIcon {
-            text: {
+                color: playPauseButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-                function formatTime(num) {
+                text: root.player.isPlaying ? Icons.square : Icons.play
-                    return Math.floor(num).toString().padStart(2, "0");
+            }
-                }
+            onClicked: {
-                return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`;
+                root.player.isPlaying = !root.player.isPlaying;
             }
-            font.pixelSize: Dimensions.mpris.fontSize
         }
-
+        StyledButton {
-        StyledSlider {
+            id: forwardButton
-            from: 0
+            content: LucideIcon {
-            to: root.player.length ?? 0
+                color: forwardButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-            value: root.player.position
+                text: Icons.skipForward
-            implicitHeight: 6
-            Layout.fillWidth: true
-            onMoved: {
-                root.player.position = value;
             }
-
+            onClicked: {
-            Timer {
+                root.player.next();
-                running: root.player.isPlaying
-                interval: 1000
-                repeat: true
-                onTriggered: root.player.positionChanged()
             }
         }
     }
+
+    StyledText {
+        Layout.alignment: Qt.AlignHCenter
+        text: {
+            function formatTime(num) {
+                return Math.floor(num).toString().padStart(2, "0");
+            }
+            return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`;
+        }
+        font.pixelSize: Dimensions.mpris.fontSize
+    }
+
+    StyledSlider {
+        from: 0
+        to: root.player.length ?? 0
+        value: root.player.position
+        implicitHeight: 6
+        Layout.fillWidth: true
+        onMoved: {
+            root.player.position = value;
+        }
+
+        Timer {
+            running: root.player.isPlaying
+            interval: 1000
+            repeat: true
+            onTriggered: root.player.positionChanged()
+        }
+    }
 }

modules/drawers/dashboard/Dashboard.qml

@@ -15,11 +15,14 @@ StyledDrawer {
     visible: Visibility.dashboard
 
     WrapperRectangle {
-        color: Theme.palette.base300
+        color: Theme.palette.base200
         radius: 8
-        margin: 20
+        margin: 32
         ColumnLayout {
-            RowLayout {
+          spacing: 8
+          RowLayout {
+            spacing: 8
+
                 Layout.alignment: Qt.AlignHCenter
 
                 StyledButton {
@@ -60,7 +63,7 @@ StyledDrawer {
             }
 
             MprisController {
-                player: Mpris.active
+              player: Mpris.active
             }
         }
     }