quickshell: restack media card — art+controls row, then title/artist/volume

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-17 14:43:09 +01:00
parent a772034220
commit 150f362998

View file

@ -2424,14 +2424,16 @@ in
anchors.margins: 8
spacing: 8
Row {
// Album art + transport controls share
// the top row, so the art can be large.
Item {
width: parent.width
height: 48
spacing: 10
height: 64
Rectangle {
width: 48; height: 48
width: 64; height: 64
radius: Theme.radiusSmall
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
color: Theme.base02
clip: true
@ -2440,7 +2442,7 @@ in
visible: albumArt.status !== Image.Ready
text: "music_note"
color: Theme.base04
font.pixelSize: 22
font.pixelSize: 28
}
Image {
id: albumArt
@ -2450,30 +2452,10 @@ in
}
}
Column {
width: parent.width - 48 - 10 - 88 - 10
anchors.verticalCenter: parent.verticalCenter
spacing: 2
SText {
width: parent.width
text: mediaCard.modelData.trackTitle
color: Theme.base05
font.pixelSize: 12
font.weight: Font.Medium
elide: Text.ElideRight
}
SText {
width: parent.width
text: mediaCard.modelData.trackArtist
color: Theme.base04
font.pixelSize: 11
elide: Text.ElideRight
}
}
Row {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 2
spacing: 4
Repeater {
model: [
{ glyph: "skip_previous", act: "prev" },
@ -2483,7 +2465,7 @@ in
HoverRow {
id: mediaBtn
required property var modelData
width: 28; height: 28; radius: 14
width: 36; height: 36; radius: 18
onClicked: {
let p = mediaCard.modelData;
if (!p) return;
@ -2495,13 +2477,34 @@ in
anchors.centerIn: parent
text: mediaBtn.modelData.glyph
color: Theme.base05
font.pixelSize: 18
font.pixelSize: 24
}
}
}
}
}
// Title, then artist, stacked below.
Column {
width: parent.width
spacing: 2
SText {
width: parent.width
text: mediaCard.modelData.trackTitle
color: Theme.base05
font.pixelSize: 13
font.weight: Font.Medium
elide: Text.ElideRight
}
SText {
width: parent.width
text: mediaCard.modelData.trackArtist
color: Theme.base04
font.pixelSize: 11
elide: Text.ElideRight
}
}
// Per-source volume same per-app path
// as the volume widget. Shown when the
// player's Pipewire stream is matched.