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 anchors.margins: 8
spacing: 8 spacing: 8
Row { // Album art + transport controls share
// the top row, so the art can be large.
Item {
width: parent.width width: parent.width
height: 48 height: 64
spacing: 10
Rectangle { Rectangle {
width: 48; height: 48 width: 64; height: 64
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
@ -2440,7 +2442,7 @@ in
visible: albumArt.status !== Image.Ready visible: albumArt.status !== Image.Ready
text: "music_note" text: "music_note"
color: Theme.base04 color: Theme.base04
font.pixelSize: 22 font.pixelSize: 28
} }
Image { Image {
id: albumArt 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 { Row {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 2 spacing: 4
Repeater { Repeater {
model: [ model: [
{ glyph: "skip_previous", act: "prev" }, { glyph: "skip_previous", act: "prev" },
@ -2483,7 +2465,7 @@ in
HoverRow { HoverRow {
id: mediaBtn id: mediaBtn
required property var modelData required property var modelData
width: 28; height: 28; radius: 14 width: 36; height: 36; radius: 18
onClicked: { onClicked: {
let p = mediaCard.modelData; let p = mediaCard.modelData;
if (!p) return; if (!p) return;
@ -2495,13 +2477,34 @@ in
anchors.centerIn: parent anchors.centerIn: parent
text: mediaBtn.modelData.glyph text: mediaBtn.modelData.glyph
color: Theme.base05 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 // 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.