refactor: migrate rest of dashboard to new font API

This commit is contained in:
2 * r + 2 * t 2026-04-21 01:22:14 +10:00
parent 71bbebb242
commit e2349f2202
6 changed files with 72 additions and 86 deletions

View file

@ -41,7 +41,7 @@ StyledRect {
text: "lyrics"
fill: 1
color: Colours.palette.m3primary
font.pointSize: Tokens.spacing.largeIncreased
font: Tokens.font.icon.builders.medium.size(Tokens.spacing.large).build()
}
Rectangle {
@ -53,7 +53,7 @@ StyledRect {
StyledText {
anchors.centerIn: parent
text: LyricsService.preferredBackend
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3primary
}
@ -80,7 +80,7 @@ StyledRect {
StyledText {
anchors.centerIn: parent
text: LyricsService.backend
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: LyricsService.backend === "Local" ? Colours.palette.m3tertiary : Colours.palette.m3secondary
}
}
@ -105,7 +105,7 @@ StyledRect {
Layout.fillWidth: true
text: LyricsService.preferredBackend === "Local" ? "Loaded File:" : "Fetched Candidates:"
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
elide: Text.ElideRight
visible: LyricsService.preferredBackend === "Local" ? LyricsService.loadedLocalFile.length > 0 : LyricsService.candidatesModel.count > 0
}
@ -130,7 +130,7 @@ StyledRect {
const parts = path.split('/');
return parts[parts.length - 1];
}
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3tertiary
elide: Text.ElideMiddle
}
@ -145,7 +145,7 @@ StyledRect {
}
return "";
}
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3outline
elide: Text.ElideMiddle
}
@ -253,8 +253,7 @@ StyledRect {
Text {
text: delegateRoot.title
font.pointSize: Tokens.font.size.normal
font.bold: true
font: Tokens.font.body.builders.medium.weight(Font.Bold).build()
color: delegateRoot.hovered ? Colours.palette.m3primary : Colours.palette.m3onSurface
width: parent.width
elide: Text.ElideRight
@ -268,7 +267,7 @@ StyledRect {
Text {
text: delegateRoot.artist
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
elide: Text.ElideRight
}
@ -291,7 +290,7 @@ StyledRect {
StyledText {
Layout.fillWidth: true
text: "Manual Search"
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
elide: Text.ElideRight
}
@ -340,14 +339,14 @@ StyledRect {
MaterialIcon {
text: "contrast_square"
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.large
color: Colours.palette.m3secondary
}
StyledText {
text: "Offset"
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
}
Item {
@ -368,7 +367,7 @@ StyledRect {
horizontalAlignment: TextInput.AlignHCenter
color: Colours.palette.m3secondary
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
selectByMouse: true
text: (LyricsService.offset >= 0 ? "+" : "") + LyricsService.offset.toFixed(1) + "s"
onEditingFinished: {

View file

@ -84,9 +84,8 @@ StyledListView {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.pointSize: Tokens.font.size.normal
font: delegateRoot.isCurrent ? Tokens.font.body.builders.medium.weight(Font.Bold).build() : Tokens.font.body.medium
color: delegateRoot.isCurrent ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
font.bold: delegateRoot.isCurrent
scale: delegateRoot.isCurrent ? 1.15 : 1.0
Behavior on color {

View file

@ -173,7 +173,7 @@ Item {
grade: 200
text: "art_track"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: (parent.width * 0.4) || 1
font: Tokens.font.icon.builders.medium.size((parent.width * 0.4) || 1).build()
}
Image {
@ -215,7 +215,7 @@ Item {
horizontalAlignment: Text.AlignHCenter
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
color: Players.active ? Colours.palette.m3primary : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.normal
font: Tokens.font.title.small
elide: Text.ElideRight
}
@ -230,7 +230,7 @@ Item {
visible: !!Players.active
text: Players.active?.trackAlbum || qsTr("Unknown album")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
elide: Text.ElideRight
}
@ -267,7 +267,7 @@ Item {
PlayerControl {
type: IconButton.Text
icon: Players.active?.shuffle ? "shuffle_on" : "shuffle"
font.pointSize: Math.round(Tokens.font.size.large)
font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize)).build()
disabled: !Players.active?.shuffleSupported
onClicked: Players.active.shuffle = !Players.active?.shuffle
}
@ -275,7 +275,7 @@ Item {
PlayerControl {
type: IconButton.Text
icon: "skip_previous"
font.pointSize: Math.round(Tokens.font.size.large * 1.5)
font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
disabled: !Players.active?.canGoPrevious
onClicked: Players.active?.previous()
}
@ -286,7 +286,7 @@ Item {
toggle: true
padding: Tokens.padding.extraSmall / 2
checked: Players.active?.isPlaying ?? false
font.pointSize: Math.round(Tokens.font.size.large * 1.5)
font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
disabled: !Players.active?.canTogglePlaying
onClicked: Players.active?.togglePlaying()
}
@ -294,7 +294,7 @@ Item {
PlayerControl {
type: IconButton.Text
icon: "skip_next"
font.pointSize: Math.round(Tokens.font.size.large * 1.5)
font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
disabled: !Players.active?.canGoNext
onClicked: Players.active?.next()
}
@ -302,7 +302,7 @@ Item {
PlayerControl {
type: IconButton.Text
icon: "lyrics"
font.pointSize: Math.round(Tokens.font.size.large)
font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize)).build()
onClicked: root.lyricMenuOpen = !root.lyricMenuOpen
}
}
@ -356,7 +356,7 @@ Item {
text: root.lengthStr(Players.active ? Players.active.position % Players.active.length : -1)
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
StyledText {
@ -366,7 +366,7 @@ Item {
text: root.lengthStr(Players.active?.length ?? -1)
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
}
}
@ -443,8 +443,8 @@ Item {
type: IconButton.Text
icon: "move_up"
inactiveOnColour: Colours.palette.m3secondary
padding: Tokens.padding.extraSmall
font.pointSize: Tokens.font.size.large
padding: Tokens.padding.small
font: Tokens.font.icon.large
disabled: !Players.active?.canRaise
onClicked: {
Players.active?.raise();
@ -482,8 +482,8 @@ Item {
type: IconButton.Text
icon: "delete"
inactiveOnColour: Colours.palette.m3error
padding: Tokens.padding.extraSmall
font.pointSize: Tokens.font.size.large
padding: Tokens.padding.small
font: Tokens.font.icon.large
disabled: !Players.active?.canQuit
onClicked: Players.active?.quit()
}

View file

@ -37,21 +37,21 @@ Item {
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "tune"
font.pointSize: Tokens.font.size.extraLarge * 2
font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
color: Colours.palette.m3onSurfaceVariant
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("No widgets enabled")
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
color: Colours.palette.m3onSurface
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Enable widgets in dashboard settings")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}
@ -214,14 +214,14 @@ Item {
return charging ? `battery_charging_${(level + 3) * 10}` : `battery_${level}_bar`;
}
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.large
color: batteryTank.accentColor
}
StyledText {
Layout.fillWidth: true
text: qsTr("Battery")
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
color: Colours.palette.m3onSurface
}
}
@ -238,8 +238,7 @@ Item {
StyledText {
Layout.alignment: Qt.AlignRight
text: `${Math.round(batteryTank.percentage * 100)}%`
font.pointSize: Tokens.font.size.extraLarge
font.weight: Font.Medium
font: Tokens.font.body.builders.large.size(28).weight(Font.Medium).build()
color: batteryTank.accentColor
}
@ -263,7 +262,7 @@ Item {
return `${min}m`;
}
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}
@ -288,13 +287,13 @@ Item {
text: parent.icon
fill: 1
color: parent.accentColor
font.pointSize: Tokens.spacing.largeIncreased
font: Tokens.font.icon.builders.medium.size(Tokens.spacing.large).build()
}
StyledText {
Layout.fillWidth: true
text: parent.title
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
elide: Text.ElideRight
}
}
@ -388,13 +387,12 @@ Item {
StyledText {
text: heroCard.secondaryValue
font.pointSize: Tokens.font.size.normal
font.weight: Font.Medium
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
}
StyledText {
text: heroCard.secondaryLabel
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
anchors.baseline: parent.children[0].baseline
}
@ -423,15 +421,14 @@ Item {
anchors.right: parent.right
text: heroCard.mainLabel
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
color: Colours.palette.m3onSurfaceVariant
}
StyledText {
anchors.right: parent.right
text: heroCard.mainValue
font.pointSize: Tokens.font.size.extraLarge
font.weight: Font.Medium
font: Tokens.font.body.builders.large.size(28).weight(Font.Medium).build()
color: heroCard.accentColor
}
}
@ -496,8 +493,7 @@ Item {
StyledText {
anchors.centerIn: parent
text: `${Math.round(gaugeCard.percentage * 100)}%`
font.pointSize: Tokens.font.size.extraLarge
font.weight: Font.Medium
font: Tokens.font.body.builders.large.size(28).weight(Font.Medium).build()
color: gaugeCard.accentColor
}
}
@ -505,7 +501,7 @@ Item {
StyledText {
Layout.alignment: Qt.AlignHCenter
text: gaugeCard.subtitle
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}
@ -585,7 +581,7 @@ Item {
MaterialIcon {
text: "unfold_more"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
visible: storageGaugeCard.diskCount > 1
opacity: 0.7
ToolTip.visible: hintHover.hovered
@ -616,8 +612,7 @@ Item {
StyledText {
anchors.centerIn: parent
text: storageGaugeCard.currentDisk ? `${Math.round(storageGaugeCard.currentDisk.perc * 100)}%` : "—"
font.pointSize: Tokens.font.size.extraLarge
font.weight: Font.Medium
font: Tokens.font.body.builders.large.size(28).weight(Font.Medium).build()
color: storageGaugeCard.accentColor
}
}
@ -632,7 +627,7 @@ Item {
const totalFmt = SystemUsage.formatKib(storageGaugeCard.currentDisk.total);
return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`;
}
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}
@ -719,7 +714,7 @@ Item {
StyledText {
anchors.centerIn: parent
text: qsTr("Collecting data...")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
visible: NetworkUsage.downloadBuffer.count < 2
opacity: 0.6
@ -734,12 +729,12 @@ Item {
MaterialIcon {
text: "download"
color: Colours.palette.m3tertiary
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
}
StyledText {
text: qsTr("Download")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
@ -752,8 +747,7 @@ Item {
const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
}
font.pointSize: Tokens.font.size.normal
font.weight: Font.Medium
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
color: Colours.palette.m3tertiary
}
}
@ -766,12 +760,12 @@ Item {
MaterialIcon {
text: "upload"
color: Colours.palette.m3secondary
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
}
StyledText {
text: qsTr("Upload")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
@ -784,8 +778,7 @@ Item {
const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
}
font.pointSize: Tokens.font.size.normal
font.weight: Font.Medium
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
color: Colours.palette.m3secondary
}
}
@ -798,12 +791,12 @@ Item {
MaterialIcon {
text: "history"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
}
StyledText {
text: qsTr("Total")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
@ -817,7 +810,7 @@ Item {
const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
return (down && up) ? `${down.value.toFixed(1)}${down.unit} ${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
}
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}

View file

@ -221,7 +221,7 @@ Item {
text: tab.iconName
color: tab.current ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
fill: tab.current ? 1 : 0
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.large
Behavior on fill {
Anim {}

View file

@ -29,14 +29,13 @@ Item {
StyledText {
text: Weather.city || qsTr("Loading...")
font.pointSize: Tokens.font.size.extraLarge
font.weight: 600
font: Tokens.font.body.builders.large.size(28).weight(600).build()
color: Colours.palette.m3onSurface
}
StyledText {
text: new Date().toLocaleDateString(Qt.locale(), "dddd, MMMM d")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
}
@ -80,7 +79,7 @@ Item {
MaterialIcon {
Layout.alignment: Qt.AlignVCenter
text: Weather.icon
font.pointSize: Tokens.font.size.extraLarge * 3
font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 3).build()
color: Colours.palette.m3secondary
animate: true
}
@ -91,15 +90,14 @@ Item {
StyledText {
text: Weather.temp
font.pointSize: Tokens.font.size.extraLarge * 2
font.weight: 500
font: Tokens.font.body.builders.large.size(28 * 2).weight(500).build()
color: Colours.palette.m3primary
}
StyledText {
Layout.leftMargin: Tokens.padding.extraSmall
text: Weather.description
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
color: Colours.palette.m3onSurfaceVariant
}
}
@ -135,8 +133,7 @@ Item {
Layout.leftMargin: Tokens.padding.medium
visible: forecastRepeater.count > 0
text: qsTr("7-Day Forecast")
font.pointSize: Tokens.font.size.normal
font.weight: 600
font: Tokens.font.body.builders.medium.weight(600).build()
color: Colours.palette.m3onSurface
}
@ -170,8 +167,7 @@ Item {
StyledText {
Layout.alignment: Qt.AlignHCenter
text: forecastItem.index === 0 ? qsTr("Today") : new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale(), "ddd")
font.pointSize: Tokens.font.size.normal
font.weight: 600
font: Tokens.font.body.builders.medium.weight(600).build()
color: Colours.palette.m3primary
}
@ -179,7 +175,7 @@ Item {
Layout.topMargin: -Tokens.spacing.extraSmall
Layout.alignment: Qt.AlignHCenter
text: new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale(), "MMM d")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
opacity: 0.7
color: Colours.palette.m3onSurfaceVariant
}
@ -187,14 +183,14 @@ Item {
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: forecastItem.modelData.icon
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.icon.extraLarge
color: Colours.palette.m3secondary
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: GlobalConfig.services.useFahrenheit ? forecastItem.modelData.maxTempF + "°" + " / " + forecastItem.modelData.minTempF + "°" : forecastItem.modelData.maxTempC + "°" + " / " + forecastItem.modelData.minTempC + "°"
font.weight: 600
font: Tokens.font.body.builders.small.weight(600).build()
color: Colours.palette.m3tertiary
}
}
@ -223,7 +219,7 @@ Item {
MaterialIcon {
text: detailRoot.icon
color: detailRoot.colour
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.large
anchors.verticalCenter: parent.verticalCenter
}
@ -233,13 +229,13 @@ Item {
StyledText {
text: detailRoot.label
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
opacity: 0.7
horizontalAlignment: Text.AlignLeft
}
StyledText {
text: detailRoot.value
font.weight: 600
font: Tokens.font.body.builders.small.weight(600).build()
horizontalAlignment: Text.AlignLeft
}
}
@ -258,20 +254,19 @@ Item {
MaterialIcon {
text: weatherStat.icon
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.icon.extraLarge
color: weatherStat.colour
}
Column {
StyledText {
text: weatherStat.label
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant
}
StyledText {
text: weatherStat.value
font.pointSize: Tokens.font.size.small
font.weight: 600
font: Tokens.font.body.builders.small.weight(600).build()
color: Colours.palette.m3onSurface
}
}