WifiPanel: Improved look and functionalities

This commit is contained in:
LemmyCook 2025-08-25 15:28:13 -04:00
parent 54c39ab8a3
commit 5f00266df7
2 changed files with 62 additions and 34 deletions

View file

@ -13,6 +13,7 @@ Singleton {
*/
// Font size
property real fontSizeXXS: 8
property real fontSizeXS: 9
property real fontSizeS: 10
property real fontSizeM: 11

View file

@ -46,6 +46,7 @@ NPanel {
font.weight: Style.fontWeightBold
color: Color.mOnSurface
Layout.fillWidth: true
Layout.leftMargin: Style.marginS * scaling
}
NIconButton {
@ -72,6 +73,16 @@ NPanel {
Layout.fillWidth: true
}
// Show errors at the very top
NText {
visible: NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0
text: NetworkService.connectError
color: Color.mError
font.pointSize: Style.fontSizeXS * scaling
wrapMode: Text.Wrap
Layout.fillWidth: true
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
@ -127,69 +138,65 @@ NPanel {
// Network list
ListView {
id: networkList
anchors.fill: parent
visible: Settings.data.network.wifiEnabled && !NetworkService.isLoading
model: Object.values(NetworkService.networks)
spacing: Style.marginM * scaling
spacing: Style.marginS * scaling
clip: true
delegate: Item {
width: parent ? parent.width : 0
height: modelData.ssid === passwordPromptSsid
&& showPasswordPrompt ? 108 * scaling : Style.baseWidgetSize * 1.5 * scaling
&& showPasswordPrompt ? 130 * scaling : Style.baseWidgetSize * 1.75 * scaling
ColumnLayout {
anchors.fill: parent
spacing: 0
Rectangle {
id: rect
Layout.fillWidth: true
Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling
Layout.fillHeight: true
radius: Style.radiusS * scaling
color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent)
color: networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent
border.color: modelData.connected ? Color.mPrimary : Color.transparent
border.width: Math.max(1, Style.borderM * scaling)
RowLayout {
anchors.fill: parent
anchors.margins: Style.marginS * scaling
anchors {
fill: parent
leftMargin: Style.marginL * scaling
rightMargin: Style.marginL * scaling
}
spacing: Style.marginS * scaling
NIcon {
text: NetworkService.signalIcon(modelData.signal)
font.pointSize: Style.fontSizeXXL * scaling
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
}
ColumnLayout {
Layout.fillWidth: true
spacing: Style.marginXS * scaling
Layout.alignment: Qt.AlignVCenter
spacing: 0
// SSID
NText {
Layout.fillWidth: true
text: modelData.ssid || "Unknown Network"
font.pointSize: Style.fontSizeNormal * scaling
elide: Text.ElideRight
Layout.fillWidth: true
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
}
// Security Protocol
NText {
text: modelData.security && modelData.security !== "--" ? modelData.security : "Open"
font.pointSize: Style.fontSizeXS * scaling
elide: Text.ElideRight
Layout.fillWidth: true
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
}
NText {
visible: NetworkService.connectStatusSsid === modelData.ssid
&& NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0
text: NetworkService.connectError
color: Color.mError
font.pointSize: Style.fontSizeXS * scaling
font.pointSize: Style.fontSizeXXS * scaling
elide: Text.ElideRight
Layout.fillWidth: true
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
}
}
@ -203,17 +210,25 @@ NPanel {
NBusyIndicator {
visible: NetworkService.connectingSsid === modelData.ssid
running: NetworkService.connectingSsid === modelData.ssid
color: Color.mPrimary
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
anchors.centerIn: parent
size: Style.baseWidgetSize * 0.7 * scaling
}
}
NText {
RowLayout {
visible: modelData.connected
text: "connected"
font.pointSize: Style.fontSizeXS * scaling
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
NText {
text: "Connected"
font.pointSize: Style.fontSizeXS * scaling
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
Layout.alignment: Qt.AlignVCenter
}
NIcon {
text: "check"
font.pointSize: Style.fontSizeXXL * scaling
color: networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
}
}
}
@ -224,6 +239,7 @@ NPanel {
onClicked: {
if (modelData.connected) {
NetworkService.disconnectNetwork(modelData.ssid)
showPasswordPrompt = false
} else if (NetworkService.isSecured(modelData.security) && !modelData.existing) {
passwordPromptSsid = modelData.ssid
showPasswordPrompt = true
@ -240,11 +256,11 @@ NPanel {
// Password prompt section
Rectangle {
id: passwordPromptSection
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
Layout.fillWidth: true
Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0
Layout.margins: Style.marginS * scaling
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
color: Color.mSurfaceVariant
radius: Style.radiusS * scaling
@ -280,8 +296,10 @@ NPanel {
echoMode: TextInput.Password
onTextChanged: passwordInput = text
onAccepted: {
NetworkService.submitPassword(passwordPromptSsid, passwordInput)
showPasswordPrompt = false
if (passwordInput !== "") {
NetworkService.submitPassword(passwordPromptSsid, passwordInput)
showPasswordPrompt = false
}
}
MouseArea {
@ -315,8 +333,10 @@ NPanel {
MouseArea {
anchors.fill: parent
onClicked: {
NetworkService.submitPassword(passwordPromptSsid, passwordInput)
showPasswordPrompt = false
if (passwordInput !== "") {
NetworkService.submitPassword(passwordPromptSsid, passwordInput)
showPasswordPrompt = false
}
}
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
@ -324,6 +344,13 @@ NPanel {
onExited: parent.color = Color.mPrimary
}
}
NIconButton {
icon: "close"
onClicked: {
showPasswordPrompt = false
}
}
}
}
}