feat: use ButtonRow for dash media controls

Also increase default IconButton font to medium size
This commit is contained in:
2 * r + 2 * t 2026-05-02 21:23:56 +10:00
parent deb28b44ab
commit 0210f98686
2 changed files with 11 additions and 34 deletions

View file

@ -9,6 +9,7 @@ ButtonBase {
property alias icon: label.text
readonly property alias label: label
font: Tokens.font.icon.medium
padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.small
activeColour: type === IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import QtQuick
import Caelestia.Components
import Caelestia.Config
import Caelestia.Services
import qs.components
@ -119,7 +120,7 @@ Item {
elide: Text.ElideRight
}
Item {
ButtonRow {
id: controls
anchors.top: artist.bottom
@ -128,41 +129,29 @@ Item {
anchors.topMargin: Tokens.spacing.medium
anchors.margins: Tokens.padding.large
implicitHeight: Math.max(previousBtn.implicitHeight, playPauseBtn.implicitHeight, nextBtn.implicitHeight)
PlayerControl {
id: previousBtn
anchors.left: parent.left
width: Math.round(implicitWidth * shapeMorphExpansion - playPauseBtn.implicitWidth * (playPauseBtn.shapeMorphExpansion - 1))
spacing: Tokens.spacing.small
IconButton {
type: IconButton.Tonal
icon: "skip_previous"
isRound: true
disabled: !Players.active?.canGoPrevious
onClicked: Players.active?.previous()
}
PlayerControl {
id: playPauseBtn
anchors.left: previousBtn.right
anchors.right: nextBtn.left
anchors.margins: Tokens.spacing.small
IconButton {
fillWidth: true
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
isRound: true
checked: Players.active?.isPlaying ?? false
disabled: !Players.active?.canTogglePlaying
onClicked: Players.active?.togglePlaying()
}
PlayerControl {
id: nextBtn
anchors.right: parent.right
width: Math.round(implicitWidth * shapeMorphExpansion - playPauseBtn.implicitWidth * (playPauseBtn.shapeMorphExpansion - 1))
IconButton {
type: IconButton.Tonal
icon: "skip_next"
isRound: true
disabled: !Players.active?.canGoNext
onClicked: Players.active?.next()
}
@ -185,17 +174,4 @@ Item {
asynchronous: true
fillMode: AnimatedImage.PreserveAspectFit
}
component PlayerControl: IconButton {
property real shapeMorphExpansion: pressed ? 1.16 : 1
font: Tokens.font.icon.medium
isRound: true
Behavior on shapeMorphExpansion {
Anim {
type: Anim.FastSpatial
}
}
}
}