quickshell: media card — title/artist right of art, controls+volume below

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-17 14:48:31 +01:00
parent af35c81514
commit c901b9b56d

View file

@ -2424,16 +2424,15 @@ in
anchors.margins: 8 anchors.margins: 8
spacing: 8 spacing: 8
// Album art + transport controls share // Album art with title + artist to its
// the top row, so the art can be large. // right; controls and volume below.
Item { Row {
width: parent.width width: parent.width
height: 128 spacing: 12
Rectangle { Rectangle {
width: 128; height: 128 width: 128; height: 128
radius: Theme.radiusSmall radius: Theme.radiusSmall
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: Theme.base02 color: Theme.base02
clip: true clip: true
@ -2452,9 +2451,34 @@ in
} }
} }
Row { Column {
anchors.right: parent.right width: parent.width - 128 - 12
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
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
}
}
}
// Transport controls, centered below.
Item {
width: parent.width
height: 36
Row {
anchors.centerIn: parent
spacing: 4 spacing: 4
Repeater { Repeater {
model: [ model: [
@ -2484,27 +2508,6 @@ in
} }
} }
// 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 // Per-source volume same per-app path
// as the volume widget. Shown when the // as the volume widget. Shown when the
// player's Pipewire stream is matched. // player's Pipewire stream is matched.