diff --git a/Colors.qml b/Colors.qml index 90eb2f7..b59d283 100644 --- a/Colors.qml +++ b/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" } diff --git a/modules/Bar/Bar.qml b/modules/Bar/Bar.qml index 88ddc67..b11d894 100644 --- a/modules/Bar/Bar.qml +++ b/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 {} diff --git a/modules/wallpaper/DesktopClock.qml b/modules/wallpaper/DesktopClock.qml new file mode 100644 index 0000000..22920b6 --- /dev/null +++ b/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 + } + } +} diff --git a/modules/wallpaper/PlayerWidget.qml b/modules/wallpaper/PlayerWidget.qml new file mode 100644 index 0000000..50c1ab0 --- /dev/null +++ b/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; + } + } + } + } + } + } + } +} diff --git a/modules/wallpaper/Wallpaper.qml b/modules/wallpaper/Wallpaper.qml index 0a9ee9f..da48a72 100644 --- a/modules/wallpaper/Wallpaper.qml +++ b/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 + } + } } } diff --git a/settings/settings.json b/settings/settings.json index 81021a5..4717250 100644 --- a/settings/settings.json +++ b/settings/settings.json @@ -1,10 +1,10 @@ { - "barHeight": 32, - "currentWall": "/home/lucy/.walls/Kita.png", + "barHeight": 34, + "currentWall": "/home/lucy/.walls/mooon.png", "floating": true, - "font": "Maple Mono NF", + "font": "Lora", "fontSize": 14, "margins": 10, - "rounding": 16, + "rounding": 12, "wallswitchershown": false } diff --git a/widgets/CIcon.qml b/widgets/CIcon.qml index 5a93d82..1cac26a 100644 --- a/widgets/CIcon.qml +++ b/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 } }