Redesign Quickshell control center

This commit is contained in:
Mikhail Kilin
2026-07-26 16:51:25 +03:00
parent 6cb1d53a70
commit 4b3109a2dd
17 changed files with 1390 additions and 904 deletions

View File

@@ -9,6 +9,8 @@ import Quickshell.Wayland
Item {
id: root
UiTokens { id: theme }
property bool open: false
property var selectedPlayer: null
property var player: selectedPlayer
@@ -51,8 +53,8 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 52
radius: 20
color: "#f5f2ea"
border.color: "#d8d0c2"
color: "#11111b"
border.color: "#313244"
border.width: 1
z: 1
@@ -70,30 +72,20 @@ Item {
Layout.fillWidth: true
Label {
text: "Media"
color: "#252321"
color: "#cdd6f4"
font.pixelSize: 20
font.bold: true
Layout.fillWidth: true
}
Label {
text: root.player ? root.player.identity : "No player"
color: "#7c756c"
color: "#9399b2"
elide: Text.ElideRight
}
Rectangle {
width: 26
height: 26
radius: 13
color: "#e5e0d7"
Label {
anchors.centerIn: parent
text: "x"
color: "#6e675f"
}
MouseArea {
anchors.fill: parent
onClicked: root.dismissed()
}
CCButton {
theme: theme
text: "Close"
onClicked: root.dismissed()
}
}
@@ -107,7 +99,7 @@ Item {
Layout.preferredWidth: 132
Layout.preferredHeight: 132
radius: 14
color: "#e5e0d7"
color: "#181825"
clip: true
Image {
@@ -132,7 +124,7 @@ Item {
Label {
text: root.player ? (root.player.trackTitle || "Unknown track") : ""
color: "#252321"
color: "#cdd6f4"
font.pixelSize: 17
font.bold: true
elide: Text.ElideRight
@@ -140,20 +132,21 @@ Item {
}
Label {
text: root.player ? (root.player.trackArtist || root.player.trackAlbum || "Unknown artist") : ""
color: "#7c756c"
color: "#9399b2"
elide: Text.ElideRight
Layout.fillWidth: true
}
Item { Layout.fillHeight: true }
Label {
text: root.player ? root.formatTime(root.player.position) + " / " + root.formatTime(root.player.length) : ""
color: "#7c756c"
color: "#9399b2"
font.pixelSize: 11
}
}
}
Slider {
CCSlider {
theme: theme
visible: root.player && root.player.length > 0
Layout.fillWidth: true
from: 0
@@ -169,17 +162,20 @@ Item {
Layout.alignment: Qt.AlignHCenter
spacing: 14
Button {
CCButton {
theme: theme
text: "Prev"
enabled: !!(root.player && root.player.canGoPrevious)
onClicked: root.player.previous()
}
Button {
CCButton {
theme: theme
text: root.player && root.player.playbackState === MprisPlaybackState.Playing ? "Pause" : "Play"
enabled: !!(root.player && root.player.canTogglePlaying)
onClicked: root.player.togglePlaying()
}
Button {
CCButton {
theme: theme
text: "Next"
enabled: !!(root.player && root.player.canGoNext)
onClicked: root.player.next()
@@ -191,13 +187,14 @@ Item {
Layout.fillWidth: true
Label {
text: "Players"
color: "#7c756c"
color: "#9399b2"
Layout.fillWidth: true
}
Repeater {
model: Mpris.players
delegate: Button {
delegate: CCButton {
required property var modelData
theme: theme
text: modelData.identity
onClicked: root.selectedPlayer = modelData
}