diff --git a/modules/nexus/PageCompRegistry.qml b/modules/nexus/PageCompRegistry.qml index d4b52438..efc831ae 100644 --- a/modules/nexus/PageCompRegistry.qml +++ b/modules/nexus/PageCompRegistry.qml @@ -11,6 +11,7 @@ QtObject { readonly property list pageComps: [ // Appearance Component { + // Wallpaper & style StackPage { Component { WallpaperAndStyle {} @@ -25,6 +26,16 @@ QtObject { ColourSelect {} } } + }, + + // Connectivity + Component { + // Network + StackPage { + Component { + NetworkPage {} + } + } } ] } diff --git a/modules/nexus/common/ToggleRow.qml b/modules/nexus/common/ToggleRow.qml index d968b62e..6ac0a897 100644 --- a/modules/nexus/common/ToggleRow.qml +++ b/modules/nexus/common/ToggleRow.qml @@ -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 } diff --git a/modules/nexus/pages/NetworkPage.qml b/modules/nexus/pages/NetworkPage.qml new file mode 100644 index 00000000..8c7b0b5a --- /dev/null +++ b/modules/nexus/pages/NetworkPage.qml @@ -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 + } + } + } + } +}