add desktop widgets

Colors.qml

@@ -4,104 +4,104 @@ import Quickshell
 
 Singleton {
 	
-		readonly property color background: "#12140e"
+		readonly property color background: "#111318"
 	
 		readonly property color error: "#ffb4ab"
 	
 		readonly property color error_container: "#93000a"
 	
-		readonly property color inverse_on_surface: "#2f312a"
+		readonly property color inverse_on_surface: "#2e3036"
 	
-		readonly property color inverse_primary: "#4d662a"
+		readonly property color inverse_primary: "#425e91"
 	
-		readonly property color inverse_surface: "#e2e3d8"
+		readonly property color inverse_surface: "#e2e2e9"
 	
-		readonly property color on_background: "#e2e3d8"
+		readonly property color on_background: "#e2e2e9"
 	
 		readonly property color on_error: "#690005"
 	
 		readonly property color on_error_container: "#ffdad6"
 	
-		readonly property color on_primary: "#203600"
+		readonly property color on_primary: "#0c305f"
 	
-		readonly property color on_primary_container: "#ceeda2"
+		readonly property color on_primary_container: "#d7e2ff"
 	
-		readonly property color on_primary_fixed: "#112000"
+		readonly property color on_primary_fixed: "#001b3f"
 	
-		readonly property color on_primary_fixed_variant: "#364e15"
+		readonly property color on_primary_fixed_variant: "#284677"
 	
-		readonly property color on_secondary: "#2a331e"
+		readonly property color on_secondary: "#283041"
 	
-		readonly property color on_secondary_container: "#dce7c7"
+		readonly property color on_secondary_container: "#dae2f9"
 	
-		readonly property color on_secondary_fixed: "#161e0b"
+		readonly property color on_secondary_fixed: "#131c2b"
 	
-		readonly property color on_secondary_fixed_variant: "#414a33"
+		readonly property color on_secondary_fixed_variant: "#3e4759"
 	
-		readonly property color on_surface: "#e2e3d8"
+		readonly property color on_surface: "#e2e2e9"
 	
-		readonly property color on_surface_variant: "#c5c8b9"
+		readonly property color on_surface_variant: "#c4c6d0"
 	
-		readonly property color on_tertiary: "#003734"
+		readonly property color on_tertiary: "#3f2844"
 	
-		readonly property color on_tertiary_container: "#bcece7"
+		readonly property color on_tertiary_container: "#fad8fd"
 	
-		readonly property color on_tertiary_fixed: "#00201e"
+		readonly property color on_tertiary_fixed: "#29132e"
 	
-		readonly property color on_tertiary_fixed_variant: "#1f4e4b"
+		readonly property color on_tertiary_fixed_variant: "#573e5c"
 	
-		readonly property color outline: "#8f9285"
+		readonly property color outline: "#8e9099"
 	
-		readonly property color outline_variant: "#44483d"
+		readonly property color outline_variant: "#44474e"
 	
-		readonly property color primary: "#b3d089"
+		readonly property color primary: "#abc7ff"
 	
-		readonly property color primary_container: "#364e15"
+		readonly property color primary_container: "#284677"
 	
-		readonly property color primary_fixed: "#ceeda2"
+		readonly property color primary_fixed: "#d7e2ff"
 	
-		readonly property color primary_fixed_dim: "#b3d089"
+		readonly property color primary_fixed_dim: "#abc7ff"
 	
 		readonly property color scrim: "#000000"
 	
-		readonly property color secondary: "#c0cbac"
+		readonly property color secondary: "#bec6dc"
 	
-		readonly property color secondary_container: "#414a33"
+		readonly property color secondary_container: "#3e4759"
 	
-		readonly property color secondary_fixed: "#dce7c7"
+		readonly property color secondary_fixed: "#dae2f9"
 	
-		readonly property color secondary_fixed_dim: "#c0cbac"
+		readonly property color secondary_fixed_dim: "#bec6dc"
 	
 		readonly property color shadow: "#000000"
 	
-		readonly property color source_color: "#88a95b"
+		readonly property color source_color: "#01224c"
 	
-		readonly property color surface: "#12140e"
+		readonly property color surface: "#111318"
 	
-		readonly property color surface_bright: "#383a32"
+		readonly property color surface_bright: "#37393e"
 	
-		readonly property color surface_container: "#1e201a"
+		readonly property color surface_container: "#1e2025"
 	
-		readonly property color surface_container_high: "#282b24"
+		readonly property color surface_container_high: "#282a2f"
 	
-		readonly property color surface_container_highest: "#33362e"
+		readonly property color surface_container_highest: "#33353a"
 	
-		readonly property color surface_container_low: "#1a1c16"
+		readonly property color surface_container_low: "#1a1c20"
 	
-		readonly property color surface_container_lowest: "#0d0f09"
+		readonly property color surface_container_lowest: "#0c0e13"
 	
-		readonly property color surface_dim: "#12140e"
+		readonly property color surface_dim: "#111318"
 	
-		readonly property color surface_tint: "#b3d089"
+		readonly property color surface_tint: "#abc7ff"
 	
-		readonly property color surface_variant: "#44483d"
+		readonly property color surface_variant: "#44474e"
 	
-		readonly property color tertiary: "#a0d0cb"
+		readonly property color tertiary: "#ddbce0"
 	
-		readonly property color tertiary_container: "#1f4e4b"
+		readonly property color tertiary_container: "#573e5c"
 	
-		readonly property color tertiary_fixed: "#bcece7"
+		readonly property color tertiary_fixed: "#fad8fd"
 	
-		readonly property color tertiary_fixed_dim: "#a0d0cb"
+		readonly property color tertiary_fixed_dim: "#ddbce0"
 	
 }

modules/Bar/Bar.qml

@@ -30,7 +30,7 @@ Variants {
             color: Colors.surface
             RowLayout {
                 id: left
-                anchors.leftMargin: Settings.config.floating ? (Settings.config.barHeight / 1.5) / 6 : 10
+                anchors.leftMargin: Settings.config.floating ? 3 : 10
                 anchors {
                     left: parent.left
                     verticalCenter: parent.verticalCenter
@@ -52,7 +52,7 @@ Variants {
                 anchors {
                     right: parent.right
                     verticalCenter: parent.verticalCenter
-                    rightMargin: Settings.config.floating ? (Settings.config.barHeight / 1.5)  / 6 : 10
+                    rightMargin: Settings.config.floating ? 3 : 10
                 }
                 Clock {}
                 StatusIcons {}

modules/wallpaper/DesktopClock.qml

@@ -0,0 +1,34 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: root
+    implicitWidth: dataLayout.implicitWidth + 10
+    implicitHeight: dataLayout.implicitHeight + 10
+    color: Colors.surface
+    radius: Settings.config.rounding
+    SystemClock {
+        id: clock
+        precision: SystemClock.Minutes
+    }
+    Column {
+        id: dataLayout
+        anchors.fill: parent
+        anchors.centerIn: parent
+        spacing: 0
+        anchors.leftMargin: 5
+        CText {
+            text: Qt.formatDateTime(clock.date, "hh:mm")
+            font.pixelSize: 48
+        }
+        CText {
+            text: Qt.formatDateTime(clock.date, "dd.MM.yy")
+            opacity: 0.6
+            font.pixelSize: 24
+        }
+    }
+}

modules/wallpaper/PlayerWidget.qml

@@ -0,0 +1,201 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Services.Mpris
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: root
+    color: Colors.surface
+    radius: Settings.config.rounding * 2
+    implicitWidth: 600
+    implicitHeight: 200
+    visible: getSpotify() != null
+    MouseArea {
+	    id: hoverDetect
+	    hoverEnabled: true
+	    anchors.fill: parent
+	    onExited: title.x = 0
+    }
+    function getSpotify() {
+        for (var i = 0; i < Mpris.players.values.length; i++) {
+            if (Mpris.players.values[i].identity == "Spotify" || Mpris.players.values[i] == "spotify") {
+                return Mpris.players.values[i];
+            } else {
+                return null;
+            }
+        }
+        return null;
+    }
+    property var spotify: getSpotify() != null ? getSpotify() : null
+    property var title: getSpotify() != null ? getSpotify().trackTitle : ""
+    property var album: getSpotify() != null ? getSpotify().trackAlbum : ""
+    property var art: getSpotify() != null ? getSpotify().trackArtUrl : ""
+    property var artist: getSpotify() != null ? getSpotify().trackArtist : ""
+    ClippingWrapperRectangle {
+        id: songWrapper
+        radius: Settings.config.rounding
+        anchors.margins: 10
+        margin: 10
+        anchors.fill: parent
+        color: "transparent"
+
+        RowLayout {
+            id: songLayout
+            spacing: 0
+            ClippingWrapperRectangle {
+                id: coverRounder
+                radius: 8
+                Image {
+                    id: songCover
+                    source: root.art
+                    sourceSize {
+                        width: 160
+                        height: 160
+                    }
+                }
+            }
+            ColumnLayout {
+                id: songInfo
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                Layout.leftMargin: 20
+                Item {
+                    id: titleContainer
+                    Layout.fillWidth: true
+                    x: 0
+                    implicitHeight: title.implicitHeight
+                    clip: true // Keeps the text inside this "window"
+
+                    CText {
+                        id: title
+                        Layout.maximumWidth: 300
+                        text: root.title
+                        font.pixelSize: 30
+                        SequentialAnimation on x {
+                            id: scrollAnimation
+                            running: hoverDetect.containsMouse && title.width > titleContainer.width
+                            loops: Animation.Infinite
+
+                            // Pause at the start
+                            PauseAnimation {
+                                duration: 2000
+                            }
+
+                            // Scroll to the end
+                            NumberAnimation {
+                                to: titleContainer.width - title.width
+                                duration: Math.max(2000, (title.width - titleContainer.width) * 30)
+                                easing.type: Easing.InOutQuad
+                            }
+
+                            // Pause at the end
+                            PauseAnimation {
+                                duration: 2000
+                            }
+
+                            // Scroll back to the start
+                            NumberAnimation {
+                                to: 0
+                                duration: Math.max(2000, (title.width - titleContainer.width) * 30)
+                                easing.type: Easing.InOutQuad
+                            }
+                        }
+                    }
+                }
+                CText {
+                    id: album
+                    text: root.album + " - " + root.artist
+                    opacity: 0.6
+                    Layout.maximumWidth: 250
+                    elide: Text.ElideRight
+                }
+                ProgressBar {
+                    id: songProgress
+                    FrameAnimation {
+                        // only emit the signal when the position is actually changing.
+                        running: root.spotify.playbackState == MprisPlaybackState.Playing || root.visible
+                        // emit the positionChanged signal every frame.
+                        onTriggered: root.spotify.positionChanged()
+                    }
+                    implicitWidth: 200
+                    implicitHeight: 10
+                    from: 0
+                    to: root.spotify != null ? root.spotify.length : 0
+                    value: root.spotify != null ? root.spotify.position : 0
+                    background: Rectangle {
+                        implicitWidth: 200
+                        implicitHeight: 6
+                        color: Colors.surface_container_highest
+                        radius: 32
+                    }
+                    contentItem: Item {
+                        implicitWidth: 200
+                        implicitHeight: 4
+
+                        // Progress indicator for determinate state.
+                        Rectangle {
+                            width: songProgress.visualPosition * parent.width
+                            height: parent.height
+                            radius: 32
+                            color: Colors.primary
+                            visible: !songProgress.indeterminate
+                        }
+                    }
+                }
+                RowLayout {
+                    id: playerControls
+                    spacing: 15
+                    CIcon {
+                        id: previous
+                        text: "\ue045"
+                        Layout.alignment: Qt.AlignLeft
+                        MouseArea {
+                            id: prevHandler
+                            anchors.fill: parent
+                            acceptedButtons: Qt.LeftButton
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.spotify.previous();
+                                title.x = 0;
+                            }
+                        }
+                    }
+                    CIcon {
+                        id: pause
+                        text: root.spotify.isPlaying ? "\ue034" : "\ue037"
+                        MouseArea {
+                            id: pauseHandler
+                            anchors.fill: parent
+                            acceptedButtons: Qt.LeftButton
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.spotify.togglePlaying();
+                                title.x = 0;
+                            }
+                        }
+                    }
+                    CIcon {
+                        id: next
+                        Layout.alignment: Qt.AlignRight
+                        text: "\ue044"
+                        MouseArea {
+                            id: nextHandler
+                            anchors.fill: parent
+                            acceptedButtons: Qt.LeftButton
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.spotify.next();
+                                title.x = 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

modules/wallpaper/Wallpaper.qml

@@ -7,9 +7,9 @@ import Quickshell.Wayland
 Variants {
     model: Quickshell.screens
     delegate: WlrLayershell {
-        exclusionMode: ExclusionMode.Ignore
-	aboveWindows: false
         id: wallpaperShell
+        exclusionMode: ExclusionMode.Ignore
+        aboveWindows: false
         required property ShellScreen modelData
         layer: WlrLayer.Background
         anchors {
@@ -23,5 +23,20 @@ Variants {
             source: Settings.config.currentWall ? Settings.config.currentWall : ""
             anchors.fill: parent
         }
+        DesktopClock {
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+                margins: Settings.config.margins + 20
+            }
+        }
+        PlayerWidget {
+            anchors {
+                top: parent.top
+                left: parent.left
+                margins: Settings.config.margins + 5
+                topMargin: Settings.config.margins + Settings.config.barHeight + 15
+            }
+        }
     }
 }

settings/settings.json

@@ -1,10 +1,10 @@
 {
-    "barHeight": 32,
+    "barHeight": 34,
-    "currentWall": "/home/lucy/.walls/Kita.png",
+    "currentWall": "/home/lucy/.walls/mooon.png",
     "floating": true,
-    "font": "Maple Mono NF",
+    "font": "Lora",
     "fontSize": 14,
     "margins": 10,
-    "rounding": 16,
+    "rounding": 12,
     "wallswitchershown": false
 }

widgets/CIcon.qml

@@ -5,14 +5,14 @@ import qs.settings
 Text {
     id: root
     color: Colors.on_surface
-    property real iconSize: 12
+    property real iconSize: 13
     property real fill: 1
     renderType: Text.NativeRendering
     font {
-        family: "Material Symbols Rounded"
+        family: "Material Symbols Sharp"
         pointSize: iconSize
         variableAxes: {
-            "FILL": fill.toFixed(1),
+            "FILL": 1,
             "opsz": iconSize
         }
     }