WiFi: cleaner look, similar to BT.

This commit is contained in:
LemmyCook 2025-09-05 00:55:47 -04:00
parent 9ae78eda45
commit 35283a6923
3 changed files with 184 additions and 211 deletions

View file

@ -13,7 +13,6 @@ NPanel {
panelWidth: 380 * scaling panelWidth: 380 * scaling
panelHeight: 500 * scaling panelHeight: 500 * scaling
panelAnchorRight: true
panelContent: Rectangle { panelContent: Rectangle {
color: Color.transparent color: Color.transparent

View file

@ -12,7 +12,6 @@ NPanel {
panelWidth: 380 * scaling panelWidth: 380 * scaling
panelHeight: 500 * scaling panelHeight: 500 * scaling
panelAnchorRight: true
// Enable keyboard focus for WiFi panel (needed for password input) // Enable keyboard focus for WiFi panel (needed for password input)
panelKeyboardFocus: true panelKeyboardFocus: true
@ -29,14 +28,16 @@ NPanel {
panelContent: Rectangle { panelContent: Rectangle {
color: Color.transparent color: Color.transparent
anchors.fill: parent
anchors.margins: Style.marginL * scaling
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginL * scaling
spacing: Style.marginM * scaling
// Header // Header
RowLayout { RowLayout {
Layout.fillWidth: true
NIcon { NIcon {
text: "wifi" text: "wifi"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXL * scaling
@ -76,6 +77,18 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
} }
ScrollView {
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
clip: true
contentWidth: availableWidth
ColumnLayout {
width: parent.width
spacing: Style.marginS * scaling
// Show errors at the very top // Show errors at the very top
NText { NText {
visible: NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0 visible: NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0
@ -86,13 +99,10 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
} }
Item { // Scanning... - Now properly centered
Layout.fillWidth: true
Layout.fillHeight: true
// Loading indicator
ColumnLayout { ColumnLayout {
anchors.centerIn: parent Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
visible: Settings.data.network.wifiEnabled && NetworkService.isLoading visible: Settings.data.network.wifiEnabled && NetworkService.isLoading
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
@ -113,7 +123,8 @@ NPanel {
// WiFi disabled message // WiFi disabled message
ColumnLayout { ColumnLayout {
anchors.centerIn: parent Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
visible: !Settings.data.network.wifiEnabled visible: !Settings.data.network.wifiEnabled
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
@ -140,43 +151,32 @@ NPanel {
} }
// Network list // Network list
ListView { Repeater {
anchors.fill: parent model: Settings.data.network.wifiEnabled && !NetworkService.isLoading ? Object.values(
visible: Settings.data.network.wifiEnabled && !NetworkService.isLoading NetworkService.networks) : []
model: Object.values(NetworkService.networks)
spacing: Style.marginS * scaling
clip: true
delegate: Item {
width: parent ? parent.width : 0
height: modelData.ssid === passwordPromptSsid
&& showPasswordPrompt ? 130 * scaling : Style.baseWidgetSize * 1.75 * scaling
ColumnLayout {
anchors.fill: parent
spacing: 0
Rectangle { Rectangle {
id: rect
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.preferredHeight: networkLayout.implicitHeight + (Style.marginM * scaling * 2)
radius: Style.radiusS * scaling radius: Style.radiusM * scaling
color: networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent color: Color.mSurface
border.color: modelData.connected ? Color.mPrimary : Color.transparent border.width: Math.max(1, Style.borderS * scaling)
border.width: Math.max(1, Style.borderM * scaling) border.color: modelData.connected ? Color.mOnSurface : Color.mOutline
ColumnLayout {
id: networkLayout
anchors.fill: parent
anchors.margins: Style.marginM * scaling
spacing: 0
RowLayout { RowLayout {
anchors { Layout.fillWidth: true
fill: parent
leftMargin: Style.marginL * scaling
rightMargin: Style.marginL * scaling
}
spacing: Style.marginS * scaling spacing: Style.marginS * scaling
NIcon { NIcon {
text: NetworkService.signalIcon(modelData.signal) text: NetworkService.signalIcon(modelData.signal)
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: Color.mOnSurface
} }
ColumnLayout { ColumnLayout {
@ -190,7 +190,7 @@ NPanel {
text: modelData.ssid || "Unknown Network" text: modelData.ssid || "Unknown Network"
font.pointSize: Style.fontSizeNormal * scaling font.pointSize: Style.fontSizeNormal * scaling
elide: Text.ElideRight elide: Text.ElideRight
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: Color.mOnSurface
} }
// Security Protocol // Security Protocol
@ -199,7 +199,7 @@ NPanel {
font.pointSize: Style.fontSizeXXS * scaling font.pointSize: Style.fontSizeXXS * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: Color.mOnSurfaceVariant
} }
} }
@ -213,43 +213,46 @@ NPanel {
NBusyIndicator { NBusyIndicator {
visible: NetworkService.connectingSsid === modelData.ssid visible: NetworkService.connectingSsid === modelData.ssid
running: NetworkService.connectingSsid === modelData.ssid running: NetworkService.connectingSsid === modelData.ssid
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: Color.mOnSurface
anchors.centerIn: parent anchors.centerIn: parent
size: Style.baseWidgetSize * 0.7 * scaling size: Style.baseWidgetSize * 0.7 * scaling
} }
} }
// Call to action
RowLayout { NButton {
visible: modelData.connected id: button
NText { outlined: !button.hovered
text: "Connected" fontSize: Style.fontSizeXS * scaling
font.pointSize: Style.fontSizeXS * scaling fontWeight: Style.fontWeightMedium
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface backgroundColor: {
Layout.alignment: Qt.AlignVCenter if (modelData.connected) {
return Color.mError
} }
NIcon { return Color.mPrimary
text: "check"
font.pointSize: Style.fontSizeXXL * scaling
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
} }
text: {
if (modelData.connected) {
return "Disconnect"
} }
if (modelData.existing) {
return "Connect"
} }
return ""
MouseArea { }
id: networkMouseArea icon: (modelData.connected ? "cancel" : "wifi")
anchors.fill: parent
hoverEnabled: true
onClicked: { onClicked: {
if (modelData.connected) { if (modelData.connected) {
NetworkService.disconnectNetwork(modelData.ssid) NetworkService.disconnectNetwork(modelData.ssid)
showPasswordPrompt = false showPasswordPrompt = false
} else if (NetworkService.isSecured(modelData.security) && !modelData.existing) { } else if (NetworkService.isSecured(modelData.security) && !modelData.existing) {
showPasswordPrompt = !showPasswordPrompt
if (showPasswordPrompt) {
passwordPromptSsid = modelData.ssid passwordPromptSsid = modelData.ssid
showPasswordPrompt = true
passwordInput = "" // Clear previous input passwordInput = "" // Clear previous input
Qt.callLater(function () { Qt.callLater(function () {
passwordInputField.forceActiveFocus() passwordInputField.forceActiveFocus()
}) })
}
} else { } else {
NetworkService.connectNetwork(modelData.ssid, modelData.security) NetworkService.connectNetwork(modelData.ssid, modelData.security)
} }
@ -261,7 +264,7 @@ NPanel {
Rectangle { Rectangle {
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0 Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 * scaling : 0
Layout.margins: Style.marginS * scaling Layout.margins: Style.marginS * scaling
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
@ -304,54 +307,26 @@ NPanel {
showPasswordPrompt = false showPasswordPrompt = false
} }
} }
MouseArea {
id: passwordInputMouseArea
anchors.fill: parent
onClicked: passwordInputField.forceActiveFocus()
}
} }
} }
} }
Rectangle { // Connect button
Layout.preferredWidth: Style.baseWidgetSize * 2.5 * scaling NButton {
Layout.preferredHeight: Math.round(Style.barHeight * scaling) id: connectButton
radius: Style.radiusM * scaling outlined: !connectButton.hovered
color: Color.mPrimary fontSize: Style.fontSizeXS * scaling
fontWeight: Style.fontWeightMedium
Behavior on color { backgroundColor: Color.mPrimary
ColorAnimation {
duration: Style.animationFast
}
}
NText {
anchors.centerIn: parent
text: "Connect" text: "Connect"
color: Color.mSurface icon: "check"
font.pointSize: Style.fontSizeXS * scaling enabled: passwordInput !== ""
}
MouseArea {
anchors.fill: parent
onClicked: { onClicked: {
if (passwordInput !== "") { if (passwordInput !== "") {
NetworkService.submitPassword(passwordPromptSsid, passwordInput) NetworkService.submitPassword(passwordPromptSsid, passwordInput)
showPasswordPrompt = false showPasswordPrompt = false
} }
} }
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: parent.color = Qt.darker(Color.mPrimary, 1.1)
onExited: parent.color = Color.mPrimary
}
}
NIconButton {
icon: "close"
onClicked: {
showPasswordPrompt = false
} }
} }
} }

View file

@ -255,7 +255,6 @@ Singleton {
root.connectStatus = "" root.connectStatus = ""
root.connectStatusSsid = "" root.connectStatusSsid = ""
root.connectError = "" root.connectError = ""
root.refreshNetworks()
} }
} }
} }