add desktop widgets
This commit is contained in:
parent
1e800c2c11
commit
aceea87c0a
88
Colors.qml
88
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"
|
||||
|
||||
}
|
||||
|
||||
@ -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 {}
|
||||
|
||||
34
modules/wallpaper/DesktopClock.qml
Normal file
34
modules/wallpaper/DesktopClock.qml
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
201
modules/wallpaper/PlayerWidget.qml
Normal file
201
modules/wallpaper/PlayerWidget.qml
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,9 +7,9 @@ import Quickshell.Wayland
|
||||
Variants {
|
||||
model: Quickshell.screens
|
||||
delegate: WlrLayershell {
|
||||
id: wallpaperShell
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
aboveWindows: false
|
||||
id: wallpaperShell
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user