feat: fontbuilder to streamline font styling
This commit is contained in:
@@ -1,51 +0,0 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import ZShell.Config
|
||||
import qs.Helpers
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
implicitWidth: 110
|
||||
|
||||
ColumnLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 0
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.bottomMargin: -(font.pointSize * 0.4)
|
||||
color: Colors.palette.m3secondary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18
|
||||
font.weight: 600
|
||||
text: Time.hourStr
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: Colors.palette.m3primary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18 * 0.9
|
||||
text: "•••"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: -(font.pointSize * 0.4)
|
||||
color: Colors.palette.m3secondary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18
|
||||
font.weight: 600
|
||||
text: Time.minuteStr
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,8 +23,7 @@ Row {
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
fill: 1
|
||||
font.pointSize: Math.floor(info.implicitHeight / 2) || 1
|
||||
grade: 200
|
||||
fontStyle: Tokens.font.icon.large
|
||||
text: "person"
|
||||
}
|
||||
|
||||
@@ -65,7 +64,6 @@ Row {
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: 13
|
||||
text: `: ${SystemInfo.osPrettyName || SystemInfo.osName}`
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
}
|
||||
@@ -103,7 +101,7 @@ Row {
|
||||
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
|
||||
color: line.colour
|
||||
fill: 1
|
||||
font.pointSize: 13
|
||||
fontStyle: Tokens.font.icon.small
|
||||
text: line.icon
|
||||
}
|
||||
|
||||
@@ -114,7 +112,6 @@ Row {
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
elide: Text.ElideNone
|
||||
font.pointSize: 13
|
||||
text: `: ${line.text}`
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
animate: true
|
||||
color: Colors.palette.m3secondary
|
||||
font.pointSize: 54
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
text: Weather.icon
|
||||
}
|
||||
|
||||
@@ -35,8 +35,7 @@ Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
animate: true
|
||||
color: Colors.palette.m3primary
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
font.weight: 500
|
||||
font: Tokens.font.body.large
|
||||
text: Weather.temp
|
||||
}
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@ Item {
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "queue_music"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.large
|
||||
color: Colors.palette.m3onPrimaryContainer
|
||||
}
|
||||
}
|
||||
@@ -116,13 +116,13 @@ Item {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: qsTr("Nothing playing")
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.medium
|
||||
}
|
||||
|
||||
CustomText {
|
||||
text: qsTr("Play something for it to show up here!")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.body.large
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ ColumnLayout {
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackTitle ?? ""
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.title.large
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
@@ -47,7 +47,7 @@ ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackArtist || qsTr("Unknown artist")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
@@ -56,7 +56,7 @@ ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackAlbum || qsTr("Unknown album")
|
||||
color: Colors.palette.m3secondary
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
@@ -70,7 +70,7 @@ ColumnLayout {
|
||||
id: timeMetrics
|
||||
|
||||
text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.label.medium
|
||||
}
|
||||
|
||||
CustomText {
|
||||
@@ -128,7 +128,7 @@ ColumnLayout {
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.shuffle ?? false
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
@@ -141,7 +141,7 @@ ColumnLayout {
|
||||
icon: "skip_previous"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
}
|
||||
@@ -154,7 +154,7 @@ ColumnLayout {
|
||||
shapeMorph: true
|
||||
fillWidth: true
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
}
|
||||
@@ -166,7 +166,7 @@ ColumnLayout {
|
||||
icon: "skip_next"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
}
|
||||
@@ -177,7 +177,7 @@ ColumnLayout {
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.loopSupported
|
||||
onClicked: {
|
||||
const state = Players.active.loopState;
|
||||
|
||||
@@ -179,7 +179,7 @@ Item {
|
||||
CustomText {
|
||||
text: qsTr("Loading lyrics...")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.normal
|
||||
}
|
||||
}
|
||||
|
||||
@@ -204,14 +204,14 @@ Item {
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "sentiment_sad"
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
color: Colors.palette.m3outline
|
||||
}
|
||||
|
||||
CustomText {
|
||||
text: qsTr("No lyrics found")
|
||||
color: Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.medium
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -258,7 +258,7 @@ Item {
|
||||
|
||||
text: modelData || ". . ."
|
||||
color: ListView.isCurrentItem ? Colors.palette.m3primary : mouse.containsMouse ? Colors.palette.m3onSurface : Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.medium
|
||||
font: Tokens.font.body.medium
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
|
||||
layer.enabled: effectScale > 0
|
||||
|
||||
@@ -23,13 +23,13 @@ Item {
|
||||
MaterialIcon {
|
||||
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
|
||||
text: "lyrics"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.large
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: qsTr("Lyrics")
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.body.large
|
||||
}
|
||||
|
||||
LyricsInfo {}
|
||||
|
||||
@@ -184,7 +184,7 @@ Item {
|
||||
|
||||
text: Lyrics.loading ? qsTr("Loading...") : qsTr("No lyrics found")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.medium
|
||||
animate: true
|
||||
}
|
||||
}
|
||||
@@ -206,7 +206,7 @@ Item {
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "more_vert"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,7 +162,7 @@ Item {
|
||||
text: tab.iconName
|
||||
color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
|
||||
fill: tab.current ? 1 : 0
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
|
||||
Behavior on fill {
|
||||
Anim {
|
||||
|
||||
@@ -48,7 +48,7 @@ RowLayout {
|
||||
|
||||
MaterialIcon {
|
||||
text: "device_thermostat"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
color: Colors.palette.m3secondary
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@ RowLayout {
|
||||
|
||||
MaterialIcon {
|
||||
text: "water_drop"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
color: Colors.palette.m3tertiary
|
||||
}
|
||||
|
||||
|
||||
@@ -31,13 +31,13 @@ Item {
|
||||
|
||||
CustomText {
|
||||
text: Weather.city || qsTr("Loading...")
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.body.builders.large.size(24).weight(Font.DemiBold).build()
|
||||
color: Colors.palette.m3onSurface
|
||||
}
|
||||
|
||||
CustomText {
|
||||
text: new Date().toLocaleDateString(Qt.locale("en_US"), "dddd, MMMM d")
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
}
|
||||
}
|
||||
@@ -114,7 +114,7 @@ Item {
|
||||
Layout.leftMargin: Tokens.padding.medium
|
||||
visible: forecastRepeater.count > 0
|
||||
text: qsTr("7-day forecast")
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
|
||||
color: Colors.palette.m3onSurface
|
||||
}
|
||||
|
||||
@@ -148,7 +148,7 @@ Item {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastItem.index === 0 ? qsTr("Today", "forecast column") : new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "ddd")
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
|
||||
color: Colors.palette.m3primary
|
||||
}
|
||||
|
||||
@@ -156,7 +156,7 @@ Item {
|
||||
Layout.topMargin: -Tokens.spacing.extraSmall
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "MMM d")
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
opacity: 0.7
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
}
|
||||
@@ -164,7 +164,7 @@ Item {
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastItem.modelData.icon
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
color: Colors.palette.m3secondary
|
||||
}
|
||||
|
||||
@@ -175,7 +175,7 @@ Item {
|
||||
const max = Weather.formatTemp(forecastItem.modelData.maxTempC, true);
|
||||
return qsTr("%1 / %2", "min/max temperature").arg(min).arg(max);
|
||||
}
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
|
||||
color: Colors.palette.m3tertiary
|
||||
}
|
||||
}
|
||||
@@ -204,7 +204,7 @@ Item {
|
||||
MaterialIcon {
|
||||
text: detailRoot.icon
|
||||
color: detailRoot.colour
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.large
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
@@ -214,20 +214,20 @@ Item {
|
||||
|
||||
CustomText {
|
||||
text: detailRoot.label
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
opacity: 0.7
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
CustomText {
|
||||
text: detailRoot.value
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component WeatherStat: Row {
|
||||
component WeatherStat: RowLayout {
|
||||
id: weatherStat
|
||||
|
||||
property string icon
|
||||
@@ -239,19 +239,20 @@ Item {
|
||||
|
||||
MaterialIcon {
|
||||
text: weatherStat.icon
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
color: weatherStat.colour
|
||||
}
|
||||
|
||||
Column {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
CustomText {
|
||||
text: weatherStat.label
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
}
|
||||
CustomText {
|
||||
text: weatherStat.value
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
|
||||
color: Colors.palette.m3onSurface
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user