WiFi: Okayish, looks good but not perfect.

This commit is contained in:
quadbyte 2025-08-11 13:29:22 -04:00
parent 1addb7d37a
commit f5cb7b183d
3 changed files with 59 additions and 43 deletions

View file

@ -25,7 +25,7 @@ NIconButton {
tooltipText: "WiFi Networks" tooltipText: "WiFi Networks"
onClicked: function () { onClicked: function () {
if (!wifiMenuLoader.active) { if (!wifiMenuLoader.active) {
wifiMenuLoader.loading = true wifiMenuLoader.isLoaded = true
} }
if (wifiMenuLoader.item) { if (wifiMenuLoader.item) {
wifiMenuLoader.item.visible = !wifiMenuLoader.item.visible wifiMenuLoader.item.visible = !wifiMenuLoader.item.visible

View file

@ -7,16 +7,26 @@ import qs.Services
import qs.Widgets import qs.Widgets
// LazyLoader for WiFi menu // LazyLoader for WiFi menu
LazyLoader { NLoader {
id: wifiMenuLoader id: root
loading: false
component: NPanel { content: Component {
id: wifiMenu NPanel {
id: wifiPanel
property string passwordPromptSsid: "" property string passwordPromptSsid: ""
property string passwordInput: "" property string passwordInput: ""
property bool showPasswordPrompt: false property bool showPasswordPrompt: false
Connections {
target: wifiPanel
ignoreUnknownSignals: true
function onDismissed() {
wifiPanel.visible = false
network.onMenuClosed()
}
}
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
Rectangle { Rectangle {
@ -48,13 +58,23 @@ LazyLoader {
} }
NText { NText {
text: "WiFi Networks" text: "WiFi"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.bold: true font.bold: true
color: Colors.textPrimary color: Colors.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
NToggle {
baseSize: Style.baseWidgetSize * 0.75
value: Settings.data.network.wifiEnabled
onToggled: function (value) {
Settings.data.network.wifiEnabled = value
// TBC: This should be done in a service
Quickshell.execDetached(["nmcli", "radio", "wifi", Settings.data.network.wifiEnabled ? "on" : "off"])
}
}
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
onClicked: function () { onClicked: function () {
@ -65,15 +85,13 @@ LazyLoader {
NIconButton { NIconButton {
icon: "close" icon: "close"
onClicked: function () { onClicked: function () {
wifiMenu.visible = false wifiPanel.visible = false
network.onMenuClosed() network.onMenuClosed()
} }
} }
} }
NDivider { NDivider {}
}
ListView { ListView {
id: networkList id: networkList
@ -96,42 +114,40 @@ LazyLoader {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 48 Layout.preferredHeight: 48
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: modelData.connected ? Qt.rgba( color: modelData.connected ? Colors.accentPrimary : (networkMouseArea.containsMouse ? Colors.highlight : "transparent")
Colors.accentPrimary.r, Colors.accentPrimary.g, Colors.accentPrimary.b,
0.44) : (networkMouseArea.containsMouse ? Colors.highlight : "transparent")
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 8 anchors.margins: Style.marginSmall * scaling
spacing: 8 spacing: Style.marginSmall * scaling
NText { NText {
text: network.signalIcon(modelData.signal) text: network.signalIcon(modelData.signal)
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : (modelData.connected ? Colors.accentPrimary : Colors.textSecondary) color: modelData.connected ? Colors.backgroundPrimary : (networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.textPrimary)
} }
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 2 spacing: Style.marginTiny * scaling
// SSID // SSID
NText { NText {
text: modelData.ssid || "Unknown Network" text: modelData.ssid || "Unknown Network"
color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : (modelData.connected ? Colors.accentPrimary : Colors.textPrimary)
font.pointSize: Style.fontSizeNormal * scaling font.pointSize: Style.fontSizeNormal * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: modelData.connected ? Colors.backgroundPrimary : (networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.textPrimary)
} }
// Security Protocol // Security Protocol
NText { NText {
text: modelData.security && modelData.security !== "--" ? modelData.security : "Open" text: modelData.security && modelData.security !== "--" ? modelData.security : "Open"
color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : (modelData.connected ? Colors.accentPrimary : Colors.textSecondary)
font.pointSize: Style.fontSizeTiny * scaling font.pointSize: Style.fontSizeTiny * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: modelData.connected ? Colors.backgroundPrimary : (networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.textPrimary)
} }
Text { Text {
@ -139,7 +155,7 @@ LazyLoader {
&& network.connectError.length > 0 && network.connectError.length > 0
text: network.connectError text: network.connectError
color: Colors.error color: Colors.error
font.pointSize: 11 * scaling font.pointSize: Style.fontSizeSmall * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -159,7 +175,8 @@ LazyLoader {
// anchors.centerIn: parent // anchors.centerIn: parent
// size: 22 // size: 22
// } // }
Text {
NText {
visible: network.connectStatus === "success" && !network.connectingSsid visible: network.connectStatus === "success" && !network.connectingSsid
text: "check_circle" text: "check_circle"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
@ -168,21 +185,21 @@ LazyLoader {
anchors.centerIn: parent anchors.centerIn: parent
} }
Text { NText {
visible: network.connectStatus === "error" && !network.connectingSsid visible: network.connectStatus === "error" && !network.connectingSsid
text: "error" text: "error"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: 18 * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.error color: Colors.error
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
Text { NText {
visible: modelData.connected visible: modelData.connected
text: "connected" text: "connected"
color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.accentPrimary color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.accentPrimary
font.pointSize: 11 * scaling font.pointSize: Style.fontSizeSmall * scaling
} }
} }
@ -215,12 +232,12 @@ LazyLoader {
Layout.margins: 8 Layout.margins: 8
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
color: Colors.surfaceVariant color: Colors.surfaceVariant
radius: 8 radius: Style.radiusSmall * scaling
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: Style.spacingSmall * scaling
spacing: 10 spacing: Style.spacingSmall * scaling
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
@ -236,9 +253,9 @@ LazyLoader {
TextInput { TextInput {
id: passwordInputField id: passwordInputField
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: Style.spacingMedium * scaling
text: passwordInput text: passwordInput
font.pointSize: 13 * scaling font.pointSize: Style.fontSizeMedium * scaling
color: Colors.textPrimary color: Colors.textPrimary
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
clip: true clip: true
@ -265,18 +282,24 @@ LazyLoader {
Rectangle { Rectangle {
Layout.preferredWidth: 80 Layout.preferredWidth: 80
Layout.preferredHeight: 36 Layout.preferredHeight: 36
radius: 18 radius: Style.radiusMedium * scaling
color: Colors.accentPrimary color: Colors.accentPrimary
border.color: Colors.accentPrimary border.color: Colors.accentPrimary
border.width: 0 border.width: 0
opacity: 1.0
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: 100 duration: Style.animationFast
} }
} }
NText {
anchors.centerIn: parent
text: "Connect"
color: Colors.backgroundPrimary
font.pointSize: Style.fontSizeSmall * scaling
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
@ -288,14 +311,6 @@ LazyLoader {
onEntered: parent.color = Qt.darker(Colors.accentPrimary, 1.1) onEntered: parent.color = Qt.darker(Colors.accentPrimary, 1.1)
onExited: parent.color = Colors.accentPrimary onExited: parent.color = Colors.accentPrimary
} }
Text {
anchors.centerIn: parent
text: "Connect"
color: Colors.backgroundPrimary
font.pointSize: 14 * scaling
font.bold: true
}
} }
} }
} }
@ -306,3 +321,4 @@ LazyLoader {
} }
} }
} }
}

View file

@ -20,7 +20,7 @@ QtObject {
return "network_wifi_2_bar" return "network_wifi_2_bar"
if (signal >= 20) if (signal >= 20)
return "network_wifi_1_bar" return "network_wifi_1_bar"
return "wifi_0_bar" return "signal_wifi_0_bar"
} }
function isSecured(security) { function isSecured(security) {