refactor: migrate notifications + sidebar to new font API
This commit is contained in:
parent
a43fc61fad
commit
be357343ff
4 changed files with 25 additions and 35 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue