nosignal-shell/modules/bar/popouts/Network.qml
2026-04-23 03:45:22 +10:00

396 lines
13 KiB
QML

pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Quickshell
import Caelestia.Config
import qs.components
import qs.components.controls
import qs.services
import qs.utils
ColumnLayout {
id: root
required property PopoutState popouts
property string connectingToSsid: ""
property string view: "wireless" // "wireless" or "ethernet"
property var passwordNetwork: null
property bool showPasswordDialog: false
spacing: Tokens.spacing.small
width: Tokens.sizes.bar.networkWidth
// Wireless section
StyledText {
visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Tokens.padding.medium : 0
Layout.rightMargin: Tokens.padding.extraSmall
text: qsTr("Wireless")
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
}
Toggle {
visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0
label: qsTr("Enabled")
checked: Nmcli.wifiEnabled
toggle.onToggled: Nmcli.enableWifi(checked)
}
StyledText {
visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.rightMargin: Tokens.padding.extraSmall
text: qsTr("%1 networks available").arg(Nmcli.networks.length) // qmllint disable missing-property
color: Colours.palette.m3onSurfaceVariant
font: Tokens.font.body.small
}
Repeater {
visible: root.view === "wireless"
model: ScriptModel {
values: [...Nmcli.networks].sort((a, b) => {
if (a.active !== b.active)
return b.active - a.active;
return b.strength - a.strength;
}).slice(0, 8)
}
RowLayout {
id: networkItem
required property Nmcli.AccessPoint modelData
readonly property bool isConnecting: root.connectingToSsid === modelData.ssid
readonly property bool loading: networkItem.isConnecting
visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.fillWidth: true
Layout.rightMargin: Tokens.padding.extraSmall
spacing: Tokens.spacing.small
opacity: 0
scale: 0.7
Component.onCompleted: {
opacity = 1;
scale = 1;
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
Behavior on scale {
Anim {}
}
MaterialIcon {
text: Icons.getNetworkIcon(networkItem.modelData.strength)
color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
}
MaterialIcon {
visible: networkItem.modelData.isSecure
text: "lock"
fontStyle: Tokens.font.icon.small
}
StyledText {
Layout.leftMargin: Tokens.spacing.extraSmall
Layout.rightMargin: Tokens.spacing.extraSmall
Layout.fillWidth: true
text: networkItem.modelData.ssid
elide: Text.ElideRight
font: Tokens.font.body.builders.medium.weight(networkItem.modelData.active ? Font.Medium : Font.Normal).build()
color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.palette.m3onSurface
}
StyledRect {
implicitWidth: implicitHeight
implicitHeight: wirelessConnectIcon.implicitHeight + Tokens.padding.extraSmall
radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, networkItem.modelData.active ? 1 : 0)
CircularIndicator {
anchors.fill: parent
running: networkItem.loading
}
StateLayer {
color: networkItem.modelData.active ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
disabled: networkItem.loading || !Nmcli.wifiEnabled
onClicked: {
if (networkItem.modelData.active) {
Nmcli.disconnectFromNetwork();
} else {
root.connectingToSsid = networkItem.modelData.ssid;
NetworkConnection.handleConnect(networkItem.modelData, null, network => {
// Password is required - show password dialog
root.passwordNetwork = network;
root.showPasswordDialog = true;
root.popouts.currentName = "wirelesspassword";
});
// Clear connecting state if connection succeeds immediately (saved profile)
// This is handled by the onActiveChanged connection below
}
}
}
MaterialIcon {
id: wirelessConnectIcon
anchors.centerIn: parent
animate: true
text: networkItem.modelData.active ? "link_off" : "link"
color: networkItem.modelData.active ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
opacity: networkItem.loading ? 0 : 1
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
}
}
}
StyledRect {
visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.fillWidth: true
implicitHeight: rescanBtn.implicitHeight + Tokens.padding.small
radius: Tokens.rounding.full
color: Colours.palette.m3primaryContainer
StateLayer {
color: Colours.palette.m3onPrimaryContainer
disabled: Nmcli.scanning || !Nmcli.wifiEnabled
onClicked: Nmcli.rescanWifi()
}
RowLayout {
id: rescanBtn
anchors.centerIn: parent
spacing: Tokens.spacing.small
opacity: Nmcli.scanning ? 0 : 1
MaterialIcon {
id: scanIcon
Layout.topMargin: Math.round(fontInfo.pointSize * 0.0575)
animate: true
text: "wifi_find"
color: Colours.palette.m3onPrimaryContainer
}
StyledText {
Layout.topMargin: -Math.round(scanIcon.fontInfo.pointSize * 0.0575)
text: qsTr("Rescan networks")
color: Colours.palette.m3onPrimaryContainer
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
CircularIndicator {
anchors.centerIn: parent
strokeWidth: Tokens.padding.extraSmall / 2
bgColour: "transparent"
implicitSize: parent.implicitHeight - Tokens.padding.large
running: Nmcli.scanning
}
}
// Ethernet section
StyledText {
visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Tokens.padding.medium : 0
Layout.rightMargin: Tokens.padding.extraSmall
text: qsTr("Ethernet")
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
}
StyledText {
visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.rightMargin: Tokens.padding.extraSmall
text: qsTr("%1 devices available").arg(Nmcli.ethernetDevices.length)
color: Colours.palette.m3onSurfaceVariant
font: Tokens.font.body.small
}
Repeater {
visible: root.view === "ethernet"
model: ScriptModel {
values: [...Nmcli.ethernetDevices].sort((a, b) => {
if (a.connected !== b.connected)
return b.connected - a.connected;
return (a.interface || "").localeCompare(b.interface || "");
}).slice(0, 8)
}
RowLayout {
id: ethernetItem
required property var modelData
readonly property bool loading: false
visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0
Layout.fillWidth: true
Layout.rightMargin: Tokens.padding.extraSmall
spacing: Tokens.spacing.small
opacity: 0
scale: 0.7
Component.onCompleted: {
opacity = 1;
scale = 1;
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
Behavior on scale {
Anim {}
}
MaterialIcon {
text: "cable"
color: ethernetItem.modelData.connected ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
}
StyledText {
Layout.leftMargin: Tokens.spacing.extraSmall
Layout.rightMargin: Tokens.spacing.extraSmall
Layout.fillWidth: true
text: ethernetItem.modelData.interface || qsTr("Unknown")
elide: Text.ElideRight
font: Tokens.font.body.builders.medium.weight(ethernetItem.modelData.connected ? Font.Medium : Font.Normal).build()
color: ethernetItem.modelData.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface
}
StyledRect {
implicitWidth: implicitHeight
implicitHeight: connectIcon.implicitHeight + Tokens.padding.extraSmall
radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, ethernetItem.modelData.connected ? 1 : 0)
CircularIndicator {
anchors.fill: parent
running: ethernetItem.loading
}
StateLayer {
color: ethernetItem.modelData.connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
disabled: ethernetItem.loading
onClicked: {
if (ethernetItem.modelData.connected && ethernetItem.modelData.connection) {
Nmcli.disconnectEthernet(ethernetItem.modelData.connection, () => {});
} else {
Nmcli.connectEthernet(ethernetItem.modelData.connection || "", ethernetItem.modelData.interface || "", () => {});
}
}
}
MaterialIcon {
id: connectIcon
anchors.centerIn: parent
animate: true
text: ethernetItem.modelData.connected ? "link_off" : "link"
color: ethernetItem.modelData.connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
opacity: ethernetItem.loading ? 0 : 1
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
}
}
}
Connections {
function onActiveChanged(): void {
if (Nmcli.active && root.connectingToSsid === Nmcli.active.ssid) {
root.connectingToSsid = "";
// Close password dialog if we successfully connected
if (root.showPasswordDialog && root.passwordNetwork && Nmcli.active.ssid === root.passwordNetwork.ssid) {
root.showPasswordDialog = false;
root.passwordNetwork = null;
if (root.popouts.currentName === "wirelesspassword") {
root.popouts.currentName = "network";
}
}
}
}
function onScanningChanged(): void {
if (!Nmcli.scanning)
scanIcon.rotation = 0;
}
target: Nmcli
}
Connections {
function onCurrentNameChanged(): void {
// Clear password network when leaving password dialog
if (root.popouts.currentName !== "wirelesspassword" && root.showPasswordDialog) {
root.showPasswordDialog = false;
root.passwordNetwork = null;
}
}
target: root.popouts
}
component Toggle: RowLayout {
required property string label
property alias checked: toggle.checked
property alias toggle: toggle
Layout.fillWidth: true
Layout.rightMargin: Tokens.padding.extraSmall
spacing: Tokens.spacing.medium
StyledText {
Layout.fillWidth: true
text: parent.label
}
StyledSwitch {
id: toggle
}
}
}