nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: migrate components to new font API

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-21 01:02:03 +10:00
parent 79217c46ea
commit 3a30fcc730
17 changed files with 31 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/ConnectionHeader.qml
View file

@ -16,15 +16,13 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
animate: true animate: true
text: root.icon text: root.icon
font.pointSize: Tokens.font.size.extraLarge * 3 font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 3).weight(Font.Bold).build()
font.bold: true
} }
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
animate: true animate: true
text: root.title text: root.title
font.pointSize: Tokens.font.size.large font: Tokens.font.title.builders.medium.weight(Font.Bold).build()
font.bold: true
} }
} }

8
components/ConnectionInfoSection.qml
View file

@ -18,7 +18,7 @@ ColumnLayout {
StyledText { StyledText {
text: root.deviceDetails?.ipAddress || qsTr("Not available") text: root.deviceDetails?.ipAddress || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
StyledText { StyledText {
@ -29,7 +29,7 @@ ColumnLayout {
StyledText { StyledText {
text: root.deviceDetails?.subnet || qsTr("Not available") text: root.deviceDetails?.subnet || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
StyledText { StyledText {
@ -40,7 +40,7 @@ ColumnLayout {
StyledText { StyledText {
text: root.deviceDetails?.gateway || qsTr("Not available") text: root.deviceDetails?.gateway || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
StyledText { StyledText {
@ -51,7 +51,7 @@ ColumnLayout {
StyledText { StyledText {
text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available") text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
wrapMode: Text.Wrap wrapMode: Text.Wrap
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
} }

9
components/MaterialIcon.qml
View file

@ -5,12 +5,5 @@ StyledText {
property real fill property real fill
property int grade: Colours.light ? 0 : -25 property int grade: Colours.light ? 0 : -25
font.family: Tokens.font.family.material font: Tokens.font.icon.builders.large.vaxis("FILL", fill.toFixed(1)).vaxis("GRAD", grade).vaxis("opsz", fontInfo.pixelSize).vaxis("wght", fontInfo.weight).build()
font.pointSize: Tokens.font.size.larger
font.variableAxes: ({
FILL: fill.toFixed(1),
GRAD: grade,
opsz: fontInfo.pixelSize,
wght: fontInfo.weight
})
} }

2
components/PropertyRow.qml
View file

@ -21,6 +21,6 @@ ColumnLayout {
StyledText { StyledText {
text: root.value text: root.value
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
} }

3
components/SectionHeader.qml
View file

@ -15,8 +15,7 @@ ColumnLayout {
StyledText { StyledText {
Layout.topMargin: Tokens.spacing.largeIncreased Layout.topMargin: Tokens.spacing.largeIncreased
text: root.title text: root.title
font.pointSize: Tokens.font.size.larger font: Tokens.font.title.builders.medium.weight(500).build()
font.weight: 500
} }
StyledText { StyledText {

3
components/StyledText.qml
View file

@ -16,8 +16,7 @@ Text {
renderType: Text.NativeRendering renderType: Text.NativeRendering
textFormat: Text.PlainText textFormat: Text.PlainText
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.family: Tokens.font.family.sans font: Tokens.font.body.small
font.pointSize: Tokens.font.size.smaller
Behavior on color { Behavior on color {
CAnim {} CAnim {}

4
components/controls/CircularIndicator.qml
View file

@ -19,8 +19,8 @@ BusyIndicator {
Completing Completing
} }
property real implicitSize: Tokens.font.size.normal * 3 property real implicitSize: Tokens.font.body.medium.pointSize * 3
property real strokeWidth: Tokens.padding.extraSmall * 0.8 property real strokeWidth: Tokens.padding.small * 0.8
property color fgColour: Colours.palette.m3primary property color fgColour: Colours.palette.m3primary
property color bgColour: Colours.palette.m3secondaryContainer property color bgColour: Colours.palette.m3secondaryContainer

7
components/controls/CollapsibleSection.qml
View file

@ -38,8 +38,7 @@ ColumnLayout {
StyledText { StyledText {
text: root.title text: root.title
font.pointSize: Tokens.font.size.larger font: Tokens.font.title.builders.medium.weight(500).build()
font.weight: 500
} }
Item { Item {
@ -50,7 +49,7 @@ ColumnLayout {
text: "expand_more" text: "expand_more"
rotation: root.expanded ? 180 : 0 rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal font: Tokens.font.icon.medium
Behavior on rotation { Behavior on rotation {
Anim { Anim {
@ -122,7 +121,7 @@ ColumnLayout {
visible: root.description !== "" visible: root.description !== ""
text: root.description text: root.description
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
wrapMode: Text.Wrap wrapMode: Text.Wrap
} }
} }

3
components/controls/FilledSlider.qml
View file

@ -70,8 +70,7 @@ Slider {
function update(): void { function update(): void {
animate = !moving; animate = !moving;
binding.when = moving; binding.when = moving;
font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger; font = moving ? Tokens.font.body.small : Tokens.font.icon.large;
font.family = moving ? Tokens.font.family.sans : Tokens.font.family.material;
} }
text: root.icon text: root.icon

4
components/controls/StyledRadioButton.qml
View file

@ -7,7 +7,7 @@ import qs.services
RadioButton { RadioButton {
id: root id: root
font.pointSize: Tokens.font.size.smaller font: Tokens.font.body.small
implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight) implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
@ -46,7 +46,7 @@ RadioButton {
contentItem: StyledText { contentItem: StyledText {
text: root.text text: root.text
font.pointSize: root.font.pointSize font: root.font
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: outerCircle.right anchors.left: outerCircle.right
anchors.leftMargin: Tokens.spacing.medium anchors.leftMargin: Tokens.spacing.medium

4
components/controls/StyledSwitch.qml
View file

@ -18,7 +18,7 @@ Switch {
color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer) color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
implicitWidth: implicitHeight * 1.7 implicitWidth: implicitHeight * 1.7
implicitHeight: Tokens.font.size.normal + Tokens.padding.large implicitHeight: Tokens.font.body.medium.pointSize + Tokens.padding.smaller * 2
StyledRect { StyledRect {
readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
@ -88,7 +88,7 @@ Switch {
asynchronous: true asynchronous: true
ShapePath { ShapePath {
strokeWidth: root.Tokens.font.size.larger * 0.15 strokeWidth: root.Tokens.font.body.large.pointSize * 0.15
strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
fillColor: "transparent" fillColor: "transparent"
capStyle: root.Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap capStyle: root.Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap

3
components/controls/StyledTextField.qml
View file

@ -11,8 +11,7 @@ TextField {
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
placeholderTextColor: Colours.palette.m3outline placeholderTextColor: Colours.palette.m3outline
font.family: Tokens.font.family.sans font: Tokens.font.body.small
font.pointSize: Tokens.font.size.smaller
renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
cursorVisible: !readOnly cursorVisible: !readOnly

4
components/controls/ToggleButton.qml
View file

@ -14,7 +14,7 @@ StyledRect {
property string icon property string icon
property string label property string label
property string accent: "Secondary" property string accent: "Secondary"
property real iconSize: Tokens.font.size.large property real iconSize: Tokens.font.icon.large.pointSize
property real horizontalPadding: Tokens.padding.large property real horizontalPadding: Tokens.padding.large
property real verticalPadding: Tokens.padding.medium property real verticalPadding: Tokens.padding.medium
property string tooltip: "" property string tooltip: ""
@ -61,7 +61,7 @@ StyledRect {
fill: root.toggled ? 1 : 0 fill: root.toggled ? 1 : 0
text: root.icon text: root.icon
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`] color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
font.pointSize: root.iconSize font: Tokens.font.icon.builders.large.size(root.iconSize).build()
Behavior on fill { Behavior on fill {
Anim {} Anim {}

2
components/controls/Tooltip.qml
View file

@ -138,7 +138,7 @@ Popup {
text: root.text text: root.text
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
} }

6
components/filedialog/FolderContents.qml
View file

@ -59,15 +59,13 @@ Item {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: "scan_delete" text: "scan_delete"
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.extraLarge * 2 font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).weight(500).build()
font.weight: 500
} }
StyledText { StyledText {
text: qsTr("This folder is empty") text: qsTr("This folder is empty")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
} }

4
components/filedialog/HeaderBar.qml
View file

@ -78,7 +78,7 @@ StyledRect {
sourceComponent: StyledText { sourceComponent: StyledText {
text: "/" text: "/"
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.bold: true font: Tokens.font.body.builders.small.weight(Font.Bold).build()
} }
} }
@ -125,7 +125,7 @@ StyledRect {
text: folder.modelData text: folder.modelData
color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface
font.bold: true font: Tokens.font.body.builders.small.weight(Font.Bold).build()
} }
} }
} }

7
components/filedialog/Sidebar.qml
View file

@ -32,8 +32,7 @@ StyledRect {
Layout.bottomMargin: Tokens.spacing.medium Layout.bottomMargin: Tokens.spacing.medium
text: qsTr("Files") text: qsTr("Files")
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.larger font: Tokens.font.body.builders.large.weight(Font.Bold).build()
font.bold: true
} }
Repeater { Repeater {
@ -91,7 +90,7 @@ StyledRect {
return "folder"; return "folder";
} }
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
fill: place.selected ? 1 : 0 fill: place.selected ? 1 : 0
Behavior on fill { Behavior on fill {
@ -103,7 +102,7 @@ StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
text: place.modelData text: place.modelData
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.normal font: Tokens.font.body.medium
elide: Text.ElideRight elide: Text.ElideRight
} }
} }