qs: network

modules/user/modules/quickshell/shell/bar/connections/Connections.qml

@@ -15,6 +15,11 @@ BarWidgetInner {
 			margins: 5
 		}
 
+		Network {
+			Layout.fillWidth: true
+			bar: root.bar
+		}
+
 		Bluetooth {
 			Layout.fillWidth: true
 			bar: root.bar

modules/user/modules/quickshell/shell/bar/connections/Network.qml

@@ -0,0 +1,132 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Networking
+import qs
+import qs.bar
+
+ClickableIcon {
+	id: root
+	required property var bar;
+	readonly property NetworkDevice adapter: Networking.devices.values[0]
+	readonly property bool connected: adapter.connected
+	readonly property WifiNetwork activeNetwork: adapter.networks.values.find(network => network.connected)
+
+	property bool showMenu: false
+
+	onPressed: event => {
+		event.accepted = true;
+		if (event.button === Qt.RightButton) {
+			showMenu = !showMenu;
+		}
+	}
+
+	onClicked: event => {
+		if (event.button === Qt.LeftButton) {
+			Networking.wifiEnabled = !Networking.wifiEnabled;
+		}
+	}
+
+	showPressed: showMenu || (pressedButtons & ~Qt.RightButton)
+
+	implicitHeight: width
+	fillWindowWidth: true
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	image: Networking.wifiEnabled
+		? (connected ? `root:/icons/wifi-${Math.round(root.activeNetwork.signalStrength * 3)}.svg` : "root:/icons/wifi-x.svg")
+		: "root:/icons/wifi-slash.svg"
+
+	property var tooltip: TooltipItem {
+		tooltip: bar.tooltip
+		owner: root
+		show: root.containsMouse
+
+		Label { text: "Network" }
+	}
+
+	property var rightclickMenu: TooltipItem {
+		id: rightclickMenu
+		tooltip: bar.tooltip
+		owner: root
+
+		isMenu: true
+		show: root.showMenu
+		onClose: root.showMenu = false
+
+		Loader {
+			width: 400
+			active: root.showMenu || rightclickMenu.visible
+
+			sourceComponent: Column {
+				spacing: 5
+
+				move: Transition {
+					SmoothedAnimation { property: "y"; velocity: 350 }
+				}
+
+				RowLayout {
+					width: parent.width
+
+					ClickableIcon {
+						image: root.image
+						implicitHeight: 40
+						implicitWidth: height
+						onClicked: root.adapter.enabled = !root.adapter.enabled
+					}
+
+					Label {
+						text: `Wifi (${root.adapter.name})`
+					}
+
+					Item { Layout.fillWidth: true }
+
+					ClickableIcon {
+						image: Networking.wifiEnabled ? "root:/icons/wifi-slash.svg" : "root:/icons/wifi-x.svg"
+						implicitHeight: 24
+						implicitWidth: height
+						onClicked: Networking.wifiEnabled = !Networking.wifiEnabled
+					}
+
+					ActivityButton {
+						image: "root:/icons/binoculars.svg"
+						implicitHeight: 24
+						implicitWidth: height
+						onClicked: root.adapter.scannerEnabled = !root.adapter.scannerEnabled
+						showAction: root.adapter.scannerEnabled
+						Layout.rightMargin: 4
+					}
+				}
+
+				Rectangle {
+					width: parent.width
+					implicitHeight: 1
+					visible: root.adapter.networks.values.length > 0
+
+					color: ShellGlobals.colors.separator
+				}
+
+				Repeater {
+					model: ScriptModel {
+						values: [...root.adapter.networks.values].sort((a, b) => {
+							if (a.connected && !b.connected) return -1;
+							if (b.connected && !a.connected) return 1;
+							if (a.bonded && !b.bonded) return -1;
+							if (b.bonded && !a.bonded) return 1;
+							return b.name - a.name;
+						})
+					}
+
+					delegate: NetworkDelegate {
+						required property var modelData
+						device: root.adapter
+						network: modelData
+						width: parent.width
+					}
+				}
+			}
+		}
+	}
+}

modules/user/modules/quickshell/shell/bar/connections/NetworkDelegate.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Networking
+import qs
+import qs.bar
+
+WrapperMouseArea {
+	id: root
+	required property NetworkDevice device
+	required property WifiNetwork network
+	property bool menuOpen: false
+	readonly property bool showBg: false
+	hoverEnabled: true
+
+	onClicked: menuOpen = !menuOpen
+
+	WrapperRectangle {
+		color: root.showBg ? ShellGlobals.colors.widget : "transparent"
+		border.width: 1
+		border.color: root.showBg ? ShellGlobals.colors.widgetOutline : "transparent"
+		radius: 4
+		rightMargin: 2
+
+		ColumnLayout {
+			RowLayout {
+				ClickableIcon {
+					image: `root:/icons/wifi-${Math.round(root.network.signalStrength * 3)}`
+					implicitHeight: 40
+					implicitWidth: height
+				}
+
+				Label {
+					text: root.network.name
+				}
+
+				Item { Layout.fillWidth: true }
+
+				ActivityButton {
+					image: root.network.connected ? "root:/icons/plugs-connected.svg" : "root:/icons/plugs.svg"
+					implicitHeight: 24
+					implicitWidth: height
+					showAction: root.network.stateChanging
+					onClicked: {
+						if (showAction) return;
+						else if (root.network.connected) root.device.disconnect();
+						else root.network.connect();
+					}
+				}
+
+				ClickableIcon {
+					image: "root:/icons/trash.svg"
+					implicitHeight: 24
+					implicitWidth: height
+					visible: root.network.known
+					onClicked: root.network.forget()
+				}
+			}
+		}
+	}
+}