refactor: migrate controlcenter network to new font API

This commit is contained in:
2 * r + 2 * t 2026-04-21 01:06:03 +10:00
parent 77dbcf5a88
commit d04963160b
10 changed files with 63 additions and 76 deletions

View file

@ -27,8 +27,7 @@ DeviceList {
StyledText { StyledText {
text: qsTr("Settings") text: qsTr("Settings")
font.pointSize: Tokens.font.size.large font: Tokens.font.title.builders.medium.weight(500).build()
font.weight: 500
} }
Item { Item {
@ -39,9 +38,9 @@ DeviceList {
toggled: !root.session.ethernet.active toggled: !root.session.ethernet.active
icon: "settings" icon: "settings"
accent: "Primary" accent: "Primary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
onClicked: { onClicked: {
if (root.session.ethernet.active) if (root.session.ethernet.active)
@ -101,7 +100,7 @@ DeviceList {
anchors.centerIn: parent anchors.centerIn: parent
text: "cable" text: "cable"
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
fill: modelData.connected ? 1 : 0 fill: modelData.connected ? 1 : 0
color: modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface color: modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
@ -130,8 +129,7 @@ DeviceList {
Layout.fillWidth: true Layout.fillWidth: true
text: modelData.connected ? qsTr("Connected") : qsTr("Disconnected") text: modelData.connected ? qsTr("Connected") : qsTr("Disconnected")
color: modelData.connected ? Colours.palette.m3primary : Colours.palette.m3outline color: modelData.connected ? Colours.palette.m3primary : Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.builders.small.weight(modelData.connected ? 500 : 400).build()
font.weight: modelData.connected ? 500 : 400
elide: Text.ElideRight elide: Text.ElideRight
} }
} }

View file

@ -25,8 +25,7 @@ ColumnLayout {
StyledText { StyledText {
Layout.topMargin: Tokens.spacing.largeIncreased Layout.topMargin: Tokens.spacing.largeIncreased
text: qsTr("Ethernet devices") text: qsTr("Ethernet devices")
font.pointSize: Tokens.font.size.larger font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
StyledText { StyledText {
@ -58,7 +57,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("%1").arg(Nmcli.ethernetDevices.length) text: qsTr("%1").arg(Nmcli.ethernetDevices.length)
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
StyledText { StyledText {
@ -69,7 +68,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("%1").arg(Nmcli.ethernetDevices.filter(d => d.connected).length) text: qsTr("%1").arg(Nmcli.ethernetDevices.filter(d => d.connected).length)
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
} }
} }

View file

@ -87,8 +87,8 @@ ColumnLayout {
TextButton { TextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Tokens.spacing.medium Layout.topMargin: Tokens.spacing.normal
Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2 Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
text: qsTr("⚙ Manage VPN Providers") text: qsTr("⚙ Manage VPN Providers")
inactiveColour: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
inactiveOnColour: Colours.palette.m3onSecondaryContainer inactiveOnColour: Colours.palette.m3onSecondaryContainer

View file

@ -51,8 +51,7 @@ Item {
StyledText { StyledText {
text: qsTr("Network") text: qsTr("Network")
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
Item { Item {
@ -63,9 +62,9 @@ Item {
toggled: Nmcli.wifiEnabled toggled: Nmcli.wifiEnabled
icon: "wifi" icon: "wifi"
accent: "Tertiary" accent: "Tertiary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
tooltip: qsTr("Toggle WiFi") tooltip: qsTr("Toggle WiFi")
onClicked: { onClicked: {
@ -77,9 +76,9 @@ Item {
toggled: Nmcli.scanning toggled: Nmcli.scanning
icon: "wifi_find" icon: "wifi_find"
accent: "Secondary" accent: "Secondary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
tooltip: qsTr("Scan for networks") tooltip: qsTr("Scan for networks")
onClicked: { onClicked: {
@ -91,9 +90,9 @@ Item {
toggled: !root.session.ethernet.active && !root.session.network.active toggled: !root.session.ethernet.active && !root.session.network.active
icon: "settings" icon: "settings"
accent: "Primary" accent: "Primary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
tooltip: qsTr("Network settings") tooltip: qsTr("Network settings")
onClicked: { onClicked: {

View file

@ -96,7 +96,7 @@ DeviceDetails {
TextButton { TextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2 Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
visible: root.providerEnabled visible: root.providerEnabled
enabled: !VPN.connecting enabled: !VPN.connecting
inactiveColour: Colours.palette.m3primaryContainer inactiveColour: Colours.palette.m3primaryContainer
@ -163,7 +163,7 @@ DeviceDetails {
Layout.topMargin: Tokens.spacing.medium Layout.topMargin: Tokens.spacing.medium
visible: root.providerEnabled && VPN.status.state === "needs-auth" && VPN.status.authUrl === "" visible: root.providerEnabled && VPN.status.state === "needs-auth" && VPN.status.authUrl === ""
text: qsTr("Click 'Connect' to generate authentication URL") text: qsTr("Click 'Connect' to generate authentication URL")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -320,8 +320,7 @@ DeviceDetails {
StyledText { StyledText {
text: qsTr("Edit VPN Provider") text: qsTr("Edit VPN Provider")
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
ColumnLayout { ColumnLayout {
@ -330,7 +329,7 @@ DeviceDetails {
StyledText { StyledText {
text: qsTr("Display Name") text: qsTr("Display Name")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -367,7 +366,7 @@ DeviceDetails {
StyledText { StyledText {
text: qsTr("Interface (e.g., wg0, torguard)") text: qsTr("Interface (e.g., wg0, torguard)")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -405,7 +404,7 @@ DeviceDetails {
StyledText { StyledText {
text: qsTr("Connect Command") text: qsTr("Connect Command")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -443,7 +442,7 @@ DeviceDetails {
StyledText { StyledText {
text: qsTr("Disconnect Command") text: qsTr("Disconnect Command")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }

View file

@ -138,7 +138,7 @@ ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
text: modelData.enabled && VPN.connected ? "vpn_key" : "vpn_key_off" text: modelData.enabled && VPN.connected ? "vpn_key" : "vpn_key_off"
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
fill: modelData.enabled && VPN.connected ? 1 : 0 fill: modelData.enabled && VPN.connected ? 1 : 0
color: modelData.enabled && VPN.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface color: modelData.enabled && VPN.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
} }
@ -196,8 +196,7 @@ ColumnLayout {
return Colours.palette.m3tertiary; return Colours.palette.m3tertiary;
return Colours.palette.m3onSurface; return Colours.palette.m3onSurface;
} }
font.pointSize: Tokens.font.size.small font: Tokens.font.body.builders.small.weight(modelData.enabled && VPN.connected ? 500 : 400).build()
font.weight: modelData.enabled && VPN.connected ? 500 : 400
elide: Text.ElideRight elide: Text.ElideRight
} }
} }
@ -457,8 +456,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("Add VPN Provider") text: qsTr("Add VPN Provider")
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
StyledText { StyledText {
@ -466,7 +464,7 @@ ColumnLayout {
text: qsTr("Choose a provider to add") text: qsTr("Choose a provider to add")
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
TextButton { TextButton {
@ -576,8 +574,7 @@ ColumnLayout {
StyledText { StyledText {
text: vpnDialog.editIndex >= 0 ? qsTr("Edit VPN Provider") : qsTr("Add %1 VPN").arg(vpnDialog.displayName) text: vpnDialog.editIndex >= 0 ? qsTr("Edit VPN Provider") : qsTr("Add %1 VPN").arg(vpnDialog.displayName)
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
ColumnLayout { ColumnLayout {
@ -586,7 +583,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("Display Name") text: qsTr("Display Name")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -623,7 +620,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("Interface (e.g., wg0, torguard)") text: qsTr("Interface (e.g., wg0, torguard)")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -661,7 +658,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("Connect Command (e.g., wg-quick up wg0)") text: qsTr("Connect Command (e.g., wg-quick up wg0)")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }
@ -699,7 +696,7 @@ ColumnLayout {
StyledText { StyledText {
text: qsTr("Disconnect Command (e.g., wg-quick down wg0)") text: qsTr("Disconnect Command (e.g., wg-quick down wg0)")
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
} }

View file

@ -94,7 +94,7 @@ ColumnLayout {
MaterialIcon { MaterialIcon {
text: modelData.isActive ? "vpn_key" : "vpn_key_off" text: modelData.isActive ? "vpn_key" : "vpn_key_off"
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
color: modelData.isActive ? Colours.palette.m3primary : Colours.palette.m3outline color: modelData.isActive ? Colours.palette.m3primary : Colours.palette.m3outline
} }
@ -104,12 +104,12 @@ ColumnLayout {
StyledText { StyledText {
text: modelData.displayName text: modelData.displayName
font.weight: modelData.isActive ? 500 : 400 font: Tokens.font.body.builders.medium.weight(modelData.isActive ? 500 : 400).build()
} }
StyledText { StyledText {
text: qsTr("%1 • %2").arg(modelData.name).arg(modelData.interface || qsTr("No interface")) text: qsTr("%1 • %2").arg(modelData.name).arg(modelData.interface || qsTr("No interface"))
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
color: Colours.palette.m3outline color: Colours.palette.m3outline
} }
} }

View file

@ -86,8 +86,8 @@ DeviceDetails {
TextButton { TextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Tokens.spacing.medium Layout.topMargin: Tokens.spacing.normal
Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2 Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
visible: { visible: {
if (!root.network || !root.network.ssid) { if (!root.network || !root.network.ssid) {
return false; return false;

View file

@ -34,7 +34,7 @@ DeviceList {
visible: Nmcli.scanning visible: Nmcli.scanning
text: qsTr("Scanning...") text: qsTr("Scanning...")
color: Colours.palette.m3primary color: Colours.palette.m3primary
font.pointSize: Tokens.font.size.small font: Tokens.font.title.small
} }
} }
@ -52,8 +52,7 @@ DeviceList {
StyledText { StyledText {
text: qsTr("Settings") text: qsTr("Settings")
font.pointSize: Tokens.font.size.large font: Tokens.font.title.builders.medium.weight(500).build()
font.weight: 500
} }
Item { Item {
@ -64,9 +63,9 @@ DeviceList {
toggled: Nmcli.wifiEnabled toggled: Nmcli.wifiEnabled
icon: "wifi" icon: "wifi"
accent: "Tertiary" accent: "Tertiary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
onClicked: { onClicked: {
Nmcli.toggleWifi(null); Nmcli.toggleWifi(null);
@ -77,9 +76,9 @@ DeviceList {
toggled: Nmcli.scanning toggled: Nmcli.scanning
icon: "wifi_find" icon: "wifi_find"
accent: "Secondary" accent: "Secondary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
onClicked: { onClicked: {
Nmcli.rescanWifi(); Nmcli.rescanWifi();
@ -90,9 +89,9 @@ DeviceList {
toggled: !root.session.network.active toggled: !root.session.network.active
icon: "settings" icon: "settings"
accent: "Primary" accent: "Primary"
iconSize: Tokens.font.size.normal iconSize: Tokens.font.body.medium.pointSize
horizontalPadding: Tokens.padding.medium horizontalPadding: Tokens.padding.normal
verticalPadding: Tokens.padding.small verticalPadding: Tokens.padding.smaller
onClicked: { onClicked: {
if (root.session.network.active) if (root.session.network.active)
@ -146,7 +145,7 @@ DeviceList {
anchors.centerIn: parent anchors.centerIn: parent
text: Icons.getNetworkIcon(modelData.strength, modelData.isSecure) text: Icons.getNetworkIcon(modelData.strength, modelData.isSecure)
font.pointSize: Tokens.font.size.large font: Tokens.font.icon.large
fill: modelData.active ? 1 : 0 fill: modelData.active ? 1 : 0
color: modelData.active ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface color: modelData.active ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
} }
@ -182,8 +181,7 @@ DeviceList {
return qsTr("Open"); return qsTr("Open");
} }
color: modelData.active ? Colours.palette.m3primary : Colours.palette.m3outline color: modelData.active ? Colours.palette.m3primary : Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.builders.small.weight(modelData.active ? 500 : 400).build()
font.weight: modelData.active ? 500 : 400
elide: Text.ElideRight elide: Text.ElideRight
} }
} }

View file

@ -149,21 +149,20 @@ Item {
MaterialIcon { MaterialIcon {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: "lock" text: "lock"
font.pointSize: Tokens.font.size.extraLarge * 2 font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
} }
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: qsTr("Enter password") text: qsTr("Enter password")
font.pointSize: Tokens.font.size.large font: Tokens.font.body.builders.large.weight(500).build()
font.weight: 500
} }
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: root.network ? qsTr("Network: %1").arg(root.network.ssid) : "" text: root.network ? qsTr("Network: %1").arg(root.network.ssid) : ""
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small font: Tokens.font.body.small
} }
StyledText { StyledText {
@ -182,8 +181,7 @@ Item {
return ""; return "";
} }
color: connectButton.hasError ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant color: connectButton.hasError ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small font: Tokens.font.body.builders.small.weight(400).build()
font.weight: 400
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.maximumWidth: parent.width - Tokens.padding.extraLargeIncreased Layout.maximumWidth: parent.width - Tokens.padding.extraLargeIncreased
} }
@ -302,8 +300,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: qsTr("Password") text: qsTr("Password")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.normal font: Tokens.font.mono.medium
font.family: Tokens.font.family.mono
opacity: passwordContainer.passwordBuffer ? 0 : 1 opacity: passwordContainer.passwordBuffer ? 0 : 1
Behavior on opacity { Behavior on opacity {
@ -318,7 +315,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: fullWidth implicitWidth: fullWidth
implicitHeight: Tokens.font.size.normal implicitHeight: Tokens.font.body.medium.pointSize
orientation: Qt.Horizontal orientation: Qt.Horizontal
spacing: Tokens.spacing.extraSmall spacing: Tokens.spacing.extraSmall
@ -398,7 +395,7 @@ Item {
id: cancelButton id: cancelButton
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2 Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
inactiveColour: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
inactiveOnColour: Colours.palette.m3onSecondaryContainer inactiveOnColour: Colours.palette.m3onSecondaryContainer
text: qsTr("Cancel") text: qsTr("Cancel")
@ -413,7 +410,7 @@ Item {
property bool hasError: false property bool hasError: false
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2 Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
inactiveColour: Colours.palette.m3primary inactiveColour: Colours.palette.m3primary
inactiveOnColour: Colours.palette.m3onPrimary inactiveOnColour: Colours.palette.m3onPrimary
text: qsTr("Connect") text: qsTr("Connect")