feat: add network page

This commit is contained in:
2 * r + 2 * t 2026-06-06 00:56:50 +10:00
parent 1bfc451a68
commit f109f5f2d7
3 changed files with 170 additions and 5 deletions

View file

@ -11,6 +11,7 @@ QtObject {
readonly property list<Component> pageComps: [
// Appearance
Component {
// Wallpaper & style
StackPage {
Component {
WallpaperAndStyle {}
@ -25,6 +26,16 @@ QtObject {
ColourSelect {}
}
}
},
// Connectivity
Component {
// Network
StackPage {
Component {
NetworkPage {}
}
}
}
]
}

View file

@ -10,18 +10,25 @@ StyledSwitch {
property string subtext
property bool first
property bool last
readonly property alias bg: bg
implicitWidth: implicitContentWidth + implicitIndicatorWidth + Tokens.padding.largeIncreased * 2
implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + Tokens.padding.medium * 2
horizontalPadding: Tokens.padding.largeIncreased
verticalPadding: Tokens.padding.medium
font: Tokens.font.body.small
implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
cLayer: 2
indicator.anchors.verticalCenter: verticalCenter
indicator.anchors.right: right
indicator.anchors.rightMargin: Tokens.padding.large
indicator.anchors.rightMargin: root.horizontalPadding
onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
background: StyledRect {
id: bg
color: Colours.tPalette.m3surfaceContainer
topLeftRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
topRightRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
@ -43,7 +50,7 @@ StyledSwitch {
contentItem: Item {
anchors.left: parent.left
anchors.right: root.indicator.left
anchors.leftMargin: Tokens.padding.large
anchors.leftMargin: root.horizontalPadding
anchors.rightMargin: Tokens.spacing.medium
implicitWidth: column.implicitWidth
@ -58,11 +65,13 @@ StyledSwitch {
spacing: 0
StyledText {
id: label
anchors.left: parent.left
anchors.right: parent.right
text: root.text
font: Tokens.font.body.small
font: root.font
elide: Text.ElideRight
}

View file

@ -0,0 +1,145 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Caelestia.Components
import Caelestia.Config
import qs.components
import qs.components.controls
import qs.services
import qs.utils
import qs.modules.nexus.common
PageBase {
id: root
title: qsTr("Network")
ColumnLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: root.cappedWidth
spacing: Tokens.spacing.extraSmall / 2
ToggleRow {
Layout.fillWidth: true
first: true
text: qsTr("Wi-Fi")
font: Tokens.font.title.medium
checked: Network.wifiEnabled
onToggled: Network.enableWifi(checked)
horizontalPadding: Tokens.padding.largeIncreased
verticalPadding: Tokens.padding.medium
}
StyledRect {
Layout.fillWidth: true
implicitHeight: networkList.implicitHeight + networkList.anchors.margins * 2
radius: Tokens.rounding.extraSmall
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: networkList
anchors.fill: parent
spacing: 0
Repeater {
model: Network.networks
StateLayer {
id: network
required property Network.AccessPoint modelData
Layout.fillWidth: true
implicitHeight: networkLayout.implicitHeight + networkLayout.anchors.margins * 2
radius: Tokens.rounding.extraSmall
anchors.fill: undefined
RowLayout {
id: networkLayout
anchors.fill: parent
anchors.margins: Tokens.padding.medium
anchors.leftMargin: Tokens.padding.largeIncreased
anchors.rightMargin: Tokens.padding.largeIncreased
spacing: Tokens.spacing.medium
MaterialIcon {
text: Icons.getNetworkIcon(network.modelData.strength)
color: network.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3onSurfaceVariant
font: Tokens.font.icon.medium
}
ColumnLayout {
Layout.fillWidth: true
spacing: 0
StyledText {
Layout.fillWidth: true
text: network.modelData.ssid
font: Tokens.font.body.small
elide: Text.ElideRight
}
StyledText {
Layout.fillWidth: true
text: qsTr("Security: %1").arg(network.modelData.security)
color: Colours.tPalette.m3outline
font: Tokens.font.label.small
elide: Text.ElideRight
}
}
MaterialIcon {
visible: network.modelData.isSecure
text: network.modelData.active ? "settings" : "lock"
color: network.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3onSurfaceVariant
font: Tokens.font.icon.medium
}
}
}
}
}
}
StyledRect {
Layout.fillWidth: true
bottomLeftRadius: Tokens.rounding.extraLarge
bottomRightRadius: Tokens.rounding.extraLarge
radius: Tokens.rounding.extraSmall
implicitHeight: addNetworkLayout.implicitHeight + addNetworkLayout.anchors.margins * 2
color: Colours.tPalette.m3surfaceContainer
StateLayer {}
RowLayout {
id: addNetworkLayout
anchors.fill: parent
anchors.margins: Tokens.padding.medium
anchors.leftMargin: Tokens.padding.largeIncreased
anchors.rightMargin: Tokens.padding.largeIncreased
spacing: Tokens.spacing.medium
MaterialIcon {
text: "add"
color: Colours.tPalette.m3onSurfaceVariant
font: Tokens.font.icon.medium
}
StyledText {
Layout.fillWidth: true
text: qsTr("Add network")
color: Colours.tPalette.m3onSurfaceVariant
font: Tokens.font.body.small
elide: Text.ElideRight
}
}
}
}
}