feat: fontbuilder to streamline font styling
This commit is contained in:
+12
-25
@@ -28,27 +28,21 @@ ColumnLayout {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Colors.palette.m3secondary
|
||||
font.bold: true
|
||||
font.family: Config.appearance.font.family.clock
|
||||
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
|
||||
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
|
||||
text: Time.hourStr
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Colors.palette.m3primary
|
||||
font.bold: true
|
||||
font.family: Config.appearance.font.family.clock
|
||||
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
|
||||
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
|
||||
text: ":"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Colors.palette.m3secondary
|
||||
font.bold: true
|
||||
font.family: Config.appearance.font.family.clock
|
||||
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
|
||||
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
|
||||
text: Time.minuteStr
|
||||
}
|
||||
}
|
||||
@@ -57,9 +51,7 @@ ColumnLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: -Tokens.padding.large * 2
|
||||
color: Colors.palette.m3tertiary
|
||||
font.bold: true
|
||||
font.family: Config.appearance.font.family.mono
|
||||
font.pointSize: Math.floor(Tokens.font.size.extraLarge * root.centerScale)
|
||||
font: Tokens.font.title.builders.medium.weight(Font.DemiBold).build()
|
||||
text: Time.format("dddd, d MMMM yyyy")
|
||||
}
|
||||
|
||||
@@ -74,7 +66,7 @@ ColumnLayout {
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Math.floor(root.centerWidth / 4)
|
||||
fontStyle: Tokens.font.icon.size(root.centerWidth / 4).build()
|
||||
text: "person"
|
||||
}
|
||||
|
||||
@@ -144,8 +136,7 @@ ColumnLayout {
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,6 +150,7 @@ ColumnLayout {
|
||||
id: inputField
|
||||
|
||||
pam: root.lock.pam
|
||||
centerScale: root.centerScale
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
@@ -180,7 +172,6 @@ ColumnLayout {
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: root.lock.pam.buffer ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
|
||||
font.weight: 500
|
||||
text: "arrow_forward"
|
||||
}
|
||||
}
|
||||
@@ -193,8 +184,7 @@ ColumnLayout {
|
||||
implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
@@ -226,7 +216,7 @@ ColumnLayout {
|
||||
anchors.right: parent.right
|
||||
animateProp: "opacity"
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.family: Config.appearance.font.family.mono
|
||||
font: Tokens.font.body.small
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
lineHeight: 1.2
|
||||
opacity: shouldBeVisible && !message.msg ? 1 : 0
|
||||
@@ -234,12 +224,10 @@ ColumnLayout {
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
Behavior on scale {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
|
||||
onMsgChanged: {
|
||||
@@ -295,8 +283,7 @@ ColumnLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
color: Colors.palette.m3error
|
||||
font.family: Config.appearance.font.family.mono
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
opacity: 0
|
||||
scale: 0.7
|
||||
|
||||
@@ -14,6 +14,7 @@ Item {
|
||||
|
||||
property string buffer
|
||||
required property Pam pam
|
||||
required property real centerScale
|
||||
readonly property alias placeholder: placeholder
|
||||
|
||||
Layout.fillHeight: true
|
||||
@@ -41,8 +42,7 @@ Item {
|
||||
anchors.centerIn: parent
|
||||
animate: true
|
||||
color: root.pam.passwd.active ? Colors.palette.m3secondary : Colors.palette.m3outline
|
||||
font.family: Config.appearance.font.family.mono
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.builders.medium.scale(root.centerScale).width(110).build()
|
||||
opacity: root.buffer ? 0 : 1
|
||||
text: {
|
||||
if (root.pam.passwd.active)
|
||||
@@ -53,8 +53,7 @@ Item {
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,12 +83,11 @@ Item {
|
||||
implicitHeight: charList.implicitHeight
|
||||
implicitWidth: implicitHeight
|
||||
opacity: 0
|
||||
radius: Tokens.rounding.small / 2
|
||||
radius: Tokens.rounding.full
|
||||
scale: 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
Behavior on scale {
|
||||
Anim {
|
||||
@@ -137,8 +135,7 @@ Item {
|
||||
Behavior on implicitWidth {
|
||||
id: imWidthBehavior
|
||||
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
model: ScriptModel {
|
||||
values: root.buffer.split("")
|
||||
|
||||
@@ -236,8 +236,7 @@ WlSessionLockSurface {
|
||||
id: lockIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
font.bold: true
|
||||
font.pointSize: Tokens.font.size.extraLarge * 4
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(4).weight(Font.Bold).build()
|
||||
text: "lock"
|
||||
}
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ CustomClippingRect {
|
||||
animate: true
|
||||
color: Colors.palette.m3primary
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.title.large
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
|
||||
}
|
||||
@@ -67,7 +67,6 @@ CustomClippingRect {
|
||||
animate: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Tokens.font.size.small
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackArtist ?? qsTr("Try playing some music!")) || qsTr("Unknown artist")
|
||||
}
|
||||
|
||||
@@ -66,9 +66,7 @@ ColumnLayout {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: Colors.palette.m3outlineVariant
|
||||
font.family: Config.appearance.font.family.mono
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font.weight: 500
|
||||
font: Tokens.font.headline.builders.small.width(90).build()
|
||||
text: qsTr("No Notifications")
|
||||
}
|
||||
}
|
||||
@@ -94,8 +92,7 @@ ColumnLayout {
|
||||
to: 1
|
||||
}
|
||||
}
|
||||
delegate: NotifGroup {
|
||||
}
|
||||
delegate: NotifGroup {}
|
||||
displaced: Transition {
|
||||
Anim {
|
||||
properties: "opacity,scale"
|
||||
|
||||
@@ -80,7 +80,7 @@ CustomRect {
|
||||
|
||||
MaterialIcon {
|
||||
color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
|
||||
font.pointSize: Tokens.font.size.large
|
||||
fontStyle: Tokens.font.icon.large
|
||||
text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
|
||||
}
|
||||
}
|
||||
@@ -133,14 +133,14 @@ CustomRect {
|
||||
Layout.fillWidth: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
text: root.modelData
|
||||
}
|
||||
|
||||
CustomText {
|
||||
animate: true
|
||||
color: Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
text: root.notifs[0]?.timeStr ?? ""
|
||||
}
|
||||
|
||||
@@ -153,12 +153,10 @@ CustomRect {
|
||||
radius: Tokens.rounding.full
|
||||
|
||||
Behavior on Layout.preferredWidth {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
@@ -181,7 +179,7 @@ CustomRect {
|
||||
Layout.leftMargin: Tokens.padding.extraSmall / 2
|
||||
animate: true
|
||||
color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
text: root.notifs.length
|
||||
}
|
||||
|
||||
@@ -261,8 +259,7 @@ CustomRect {
|
||||
opacity: root.expanded ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
sourceComponent: ColumnLayout {
|
||||
Repeater {
|
||||
@@ -270,8 +267,7 @@ CustomRect {
|
||||
values: root.notifs.slice(Config.notifs.groupPreviewNum)
|
||||
}
|
||||
|
||||
NotifLine {
|
||||
}
|
||||
NotifLine {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,14 +70,13 @@ CustomRect {
|
||||
implicitSize: width
|
||||
|
||||
Behavior on clampedVal {
|
||||
Anim {
|
||||
}
|
||||
Anim {}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
color: res.fgColor
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
text: res.icon
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ ColumnLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.title.large
|
||||
text: Weather.description
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ ColumnLayout {
|
||||
|
||||
animate: true
|
||||
color: Colors.palette.m3primary
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.body.large
|
||||
text: Weather.temp
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ ColumnLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.large
|
||||
font: Tokens.font.body.large
|
||||
text: qsTr("Feels like %1").arg(Weather.temp)
|
||||
visible: root.rootHeight > 550
|
||||
}
|
||||
@@ -53,7 +53,7 @@ ColumnLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.normal
|
||||
text: {
|
||||
const today = Weather.forecast[0];
|
||||
return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC));
|
||||
|
||||
@@ -24,14 +24,14 @@ CustomRect {
|
||||
|
||||
MaterialIcon {
|
||||
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
text: "schedule"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: title
|
||||
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.title.medium
|
||||
text: qsTr("Hourly forecast")
|
||||
}
|
||||
}
|
||||
@@ -65,8 +65,7 @@ CustomRect {
|
||||
shape: MaterialShape.Cookie4Sided
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
CAnim {}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
@@ -74,7 +73,7 @@ CustomRect {
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: hour.index === Weather.currentHourIndex ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
font: Tokens.font.body.medium
|
||||
text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
|
||||
}
|
||||
}
|
||||
@@ -82,7 +81,7 @@ CustomRect {
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: Colors.palette.m3secondary
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
fontStyle: Tokens.font.icon.extraLarge
|
||||
text: hour.cond.icon
|
||||
}
|
||||
|
||||
@@ -96,7 +95,7 @@ CustomRect {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: Tokens.spacing.extraSmall
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.small
|
||||
font: Tokens.font.body.small
|
||||
text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user