refactor: migrate notifications + sidebar to new font API

This commit is contained in:
2 * r + 2 * t 2026-04-21 01:19:00 +10:00
parent a43fc61fad
commit be357343ff
4 changed files with 25 additions and 35 deletions

View file

@ -174,14 +174,14 @@ StyledRect {
asynchronous: true asynchronous: true
active: !root.hasAppIcon active: !root.hasAppIcon
anchors.centerIn: parent anchors.centerIn: parent
anchors.horizontalCenterOffset: -Tokens.font.size.large * 0.02 anchors.horizontalCenterOffset: -Tokens.font.body.large.pointSize * 0.02
anchors.verticalCenterOffset: Tokens.font.size.large * 0.02 anchors.verticalCenterOffset: Tokens.font.body.large.pointSize * 0.02
sourceComponent: MaterialIcon { sourceComponent: MaterialIcon {
text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency) text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
} }
} }
} }
@ -234,7 +234,7 @@ StyledRect {
text: appNameMetrics.elidedText text: appNameMetrics.elidedText
maximumLineCount: 1 maximumLineCount: 1
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.label.small
opacity: root.expanded ? 1 : 0 opacity: root.expanded ? 1 : 0
@ -247,8 +247,7 @@ StyledRect {
id: appNameMetrics id: appNameMetrics
text: root.modelData.appName text: root.modelData.appName
font.family: appName.font.family font: appName.font
font.pointSize: appName.font.pointSize
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - root.Tokens.spacing.small * 3 elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - root.Tokens.spacing.small * 3
} }
@ -298,8 +297,7 @@ StyledRect {
id: summaryMetrics id: summaryMetrics
text: root.modelData.summary text: root.modelData.summary
font.family: summary.font.family font: summary.font
font.pointSize: summary.font.pointSize
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - root.Tokens.spacing.small * 3 elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - root.Tokens.spacing.small * 3
} }
@ -313,7 +311,7 @@ StyledRect {
text: "•" text: "•"
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
states: State { states: State {
name: "expanded" name: "expanded"
@ -343,7 +341,7 @@ StyledRect {
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: root.modelData.timeStr text: root.modelData.timeStr
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
Item { Item {
@ -368,7 +366,7 @@ StyledRect {
animate: true animate: true
text: root.expanded ? "expand_less" : "expand_more" text: root.expanded ? "expand_less" : "expand_more"
font.pointSize: Tokens.font.size.normal font: Tokens.font.icon.medium
} }
} }
@ -384,7 +382,7 @@ StyledRect {
textFormat: root.bodyTextFormat textFormat: root.bodyTextFormat
text: bodyPreviewMetrics.elidedText text: bodyPreviewMetrics.elidedText
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
opacity: root.expanded ? 0 : 1 opacity: root.expanded ? 0 : 1
@ -397,8 +395,7 @@ StyledRect {
id: bodyPreviewMetrics id: bodyPreviewMetrics
text: root.modelData.body text: root.modelData.body
font.family: bodyPreview.font.family font: bodyPreview.font
font.pointSize: bodyPreview.font.pointSize
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: bodyPreview.width elideWidth: bodyPreview.width
} }
@ -415,7 +412,7 @@ StyledRect {
textFormat: root.bodyTextFormat textFormat: root.bodyTextFormat
text: root.modelData.body text: root.modelData.body
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
height: text ? implicitHeight : 0 height: text ? implicitHeight : 0
@ -495,15 +492,14 @@ StyledRect {
anchors.centerIn: parent anchors.centerIn: parent
text: actionTextMetrics.elidedText text: actionTextMetrics.elidedText
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurfaceVariant color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.label.small
} }
TextMetrics { TextMetrics {
id: actionTextMetrics id: actionTextMetrics
text: action.modelData.text text: action.modelData.text
font.family: actionText.font.family font: actionText.font
font.pointSize: actionText.font.pointSize
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: { elideWidth: {
const numActions = root.modelData.actions.length + 1; const numActions = root.modelData.actions.length + 1;

View file

@ -106,7 +106,7 @@ StyledRect {
animate: true animate: true
text: root.modelData?.timeStr ?? "" text: root.modelData?.timeStr ?? ""
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
} }

View file

@ -43,9 +43,7 @@ Item {
text: root.notifCount text: root.notifCount
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.normal font: Tokens.font.mono.builders.medium.weight(500).build()
font.family: Tokens.font.family.mono
font.weight: 500
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
Anim {} Anim {}
@ -66,9 +64,7 @@ Item {
text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications") text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.normal font: Tokens.font.mono.builders.medium.weight(500).build()
font.family: Tokens.font.family.mono
font.weight: 500
elide: Text.ElideRight elide: Text.ElideRight
} }
} }
@ -111,9 +107,7 @@ Item {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: qsTr("No Notifications") text: qsTr("No Notifications")
color: Colours.palette.m3outlineVariant color: Colours.palette.m3outlineVariant
font.pointSize: Tokens.font.size.large font: Tokens.font.mono.builders.large.weight(500).build()
font.family: Tokens.font.family.mono
font.weight: 500
} }
} }
@ -187,9 +181,9 @@ Item {
id: clearBtn id: clearBtn
icon: "clear_all" icon: "clear_all"
radius: Tokens.rounding.large radius: Tokens.rounding.normal
padding: Tokens.padding.medium padding: Tokens.padding.normal
font.pointSize: Math.round(Tokens.font.size.large * 1.2) font: Tokens.font.icon.builders.large.size(Math.round(Tokens.font.icon.large.pointSize * 1.2)).build()
onClicked: clearTimer.start() onClicked: clearTimer.start()
Elevation { Elevation {

View file

@ -113,7 +113,7 @@ StyledRect {
MaterialIcon { MaterialIcon {
text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency) text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency)
color: root.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer color: root.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
} }
} }
@ -174,7 +174,7 @@ StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
text: root.modelData text: root.modelData
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.title.small
elide: Text.ElideRight elide: Text.ElideRight
} }
@ -182,7 +182,7 @@ StyledRect {
animate: true animate: true
text: root.activeNotifs[0]?.timeStr ?? "" text: root.activeNotifs[0]?.timeStr ?? ""
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.title.small
} }
StyledRect { StyledRect {
@ -210,7 +210,7 @@ StyledRect {
animate: true animate: true
text: root.notifCount text: root.notifCount
color: root.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : Colours.palette.m3onSurface color: root.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.small font: Tokens.font.label.small
} }
MaterialIcon { MaterialIcon {