styled slider

components/MprisController.qml

@@ -1,99 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import qs.components
-import qs.config
-import qs.constants
-import qs.widgets
-import QtQuick
-import QtQuick.Layouts
-import Quickshell.Services.Mpris
-import Quickshell.Widgets
-
-WrapperRectangle {
-    id: root
-    required property MprisPlayer player
-
-    color: Theme.palette.base200
-    radius: 8
-    margin: 16
-
-    ColumnLayout {
-
-        spacing: 12
-
-        implicitWidth: 800
-
-        StyledText {
-            Layout.alignment: Qt.AlignHCenter
-            text: {
-                if (root.player.identity) {
-                    const words = root.player.identity.split("-");
-                    const capitalized = words.map(val => String(val).charAt(0).toUpperCase() + String(val).slice(1));
-                    console.log(capitalized);
-                    return capitalized.join(" ");
-                }
-                return root.player.desktopEntry ?? root.player.dbusName ?? "unknown";
-            }
-            font.pixelSize: 20
-        }
-
-        StyledText {
-            id: text
-            Layout.alignment: Qt.AlignHCenter
-            text: `${root.player.trackTitle} - ${root.player.trackArtist}`
-            font.pixelSize: Dimensions.mpris.fontSize
-        }
-
-        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 {
-                id: playPauseButton
-                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();
-                }
-            }
-        }
-
-        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()
-            }
-        }
-    }
-}

components/StyledSlider.qml

@@ -5,13 +5,11 @@ import QtQuick.Controls
 Slider {
     id: control
 
-    height: 24
-
     background: Rectangle {
         x: control.leftPadding
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 200
-        implicitHeight: control.height
+        implicitHeight: 24
         width: control.availableWidth
         height: implicitHeight
         radius: 8

constants/Icons.qml

@@ -19,8 +19,6 @@ Singleton {
     property string memoryStick: "\u{E44a}"
     property string play: "\u{E140}"
     property string search: "\u{E155}"
-    property string skipBack: "\u{E163}"
-    property string skipForward: "\u{E164}"
     property string stop: "\u{E132}"
     property string square: "\u{E16B}"
     property string wifiOff: "\u{E1af}"

modules/bar/components/Mpris.qml

@@ -1,17 +1,13 @@
 pragma ComponentBehavior: Bound
 
-import qs.components
 import qs.config
 import qs.services
 import qs.widgets
 import QtQuick
-import QtQuick.Layouts
 
 StyledButton {
     id: root
 
-    padding: 6
-
     onClicked: {
         if (!Mpris.active.canTogglePlaying) {
             return;
@@ -23,54 +19,29 @@ StyledButton {
         }
     }
 
-    content: ColumnLayout {
+    content: StyledText {
-        id: content
+        id: text
+        text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
 
-        spacing: 0
+        font.pixelSize: Dimensions.mpris.fontSize
 
-        implicitWidth: text.width
+        states: State {
-        implicitHeight: text.height
+            name: "hovered"
-        StyledText {
+            when: root.containsMouse
-            id: text
+            PropertyChanges {
-            text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
+                text {
-
+                    color: Theme.palette.base300
-            font.pixelSize: Dimensions.mpris.fontSize
-
-            states: State {
-                name: "hovered"
-                when: root.containsMouse
-                PropertyChanges {
-                    text {
-                        color: Theme.palette.primarycontent
-                    }
-                }
-            }
-            transitions: Transition {
-                from: ""
-                to: "hovered"
-                reversible: true
-                ColorAnimation {
-                    properties: "color"
-                    duration: 100
-                    easing.type: Easing.InOutCubic
                 }
             }
         }
-        StyledSlider {
+        transitions: Transition {
-            from: 0
+            from: ""
-            to: Mpris.active?.length ?? 0
+            to: "hovered"
-            value: Mpris.active?.position
+            reversible: true
-            implicitHeight: 6
+            ColorAnimation {
-            Layout.fillWidth: true
+                properties: "color"
-            onMoved: {
+                duration: 200
-                Mpris.active.position = value;
+                easing.type: Easing.InOutCubic
-            }
-
-            Timer {
-                running: Mpris.active?.isPlaying
-                interval: 1000
-                repeat: true
-                onTriggered: Mpris.active?.positionChanged()
             }
         }
     }

modules/storybook/Storybook.qml

@@ -82,16 +82,6 @@ StyledWindow {
                 }
             }
 
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Controller"
-                    font.pixelSize: 18
-                }
-                MprisController {
-                    player: Mpris.active ?? null
-                }
-            }
-
             ColumnLayout {
                 StyledText {
                     text: "Drawer"