From 81c232eb205041ba8dbe1b80636d002d17541374 Mon Sep 17 00:00:00 2001 From: bbedward Date: Mon, 21 Jul 2025 15:52:10 -0400 Subject: [PATCH] Improve NetworkTab view when wifi and ethernet interfaces present --- Modules/ControlCenter/NetworkTab.qml | 489 +++++++-------------------- 1 file changed, 130 insertions(+), 359 deletions(-) diff --git a/Modules/ControlCenter/NetworkTab.qml b/Modules/ControlCenter/NetworkTab.qml index 3a521dea..925a118f 100644 --- a/Modules/ControlCenter/NetworkTab.qml +++ b/Modules/ControlCenter/NetworkTab.qml @@ -49,10 +49,15 @@ Item { // Current WiFi connection status card Rectangle { + id: wifiCard width: parent.width height: 80 radius: Theme.cornerRadius - color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5) + color: { + if (wifiPreferenceArea.containsMouse && NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "wifi") + return Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.8); + return Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5); + } border.color: NetworkService.networkStatus === "wifi" ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) border.width: NetworkService.networkStatus === "wifi" ? 2 : 1 visible: NetworkService.wifiAvailable @@ -117,73 +122,6 @@ Item { elide: Text.ElideRight } - // Force WiFi preference button - Rectangle { - width: 120 - height: 26 - color: NetworkService.networkStatus === "wifi" ? Theme.primary : Theme.surface - border.color: Theme.primary - border.width: 1 - radius: 6 - opacity: NetworkService.changingNetworkPreference ? 0.6 : 1 - visible: NetworkService.networkStatus === "ethernet" && NetworkService.wifiEnabled - - Row { - anchors.centerIn: parent - spacing: Theme.spacingXS - - DankIcon { - id: wifiPreferenceIcon - - name: NetworkService.changingNetworkPreference ? "sync" : "" - size: Theme.fontSizeSmall - 2 - color: NetworkService.networkStatus === "wifi" ? Theme.background : Theme.primary - visible: NetworkService.changingNetworkPreference || false - anchors.verticalCenter: parent.verticalCenter - rotation: NetworkService.changingNetworkPreference ? wifiPreferenceIcon.rotation : 0 - - RotationAnimation { - target: wifiPreferenceIcon - property: "rotation" - running: NetworkService.changingNetworkPreference || false - from: 0 - to: 360 - duration: 1000 - loops: Animation.Infinite - } - } - - Text { - text: NetworkService.changingNetworkPreference ? "Switching..." : "Prefer over Ethernet" - font.pixelSize: Theme.fontSizeSmall - 1 - color: NetworkService.networkStatus === "wifi" ? Theme.background : Theme.primary - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - } - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - propagateComposedEvents: false - enabled: !NetworkService.changingNetworkPreference - onClicked: { - console.log("Force WiFi preference clicked"); - if (NetworkService.networkStatus !== "wifi") - NetworkService.setNetworkPreference("wifi"); - else - NetworkService.setNetworkPreference("auto"); - } - } - - Behavior on opacity { - NumberAnimation { - duration: Theme.shortDuration - easing.type: Theme.standardEasing - } - } - } } // WiFi toggle switch @@ -200,6 +138,32 @@ Item { refreshTimer.triggered = true; } } + + // MouseArea for network preference (excluding toggle area) + MouseArea { + id: wifiPreferenceArea + anchors.fill: parent + anchors.rightMargin: 60 // Exclude toggle area + hoverEnabled: true + cursorShape: (NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "wifi") ? Qt.PointingHandCursor : Qt.ArrowCursor + enabled: NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "wifi" && !NetworkService.changingNetworkPreference + onClicked: { + if (NetworkService.ethernetConnected && NetworkService.wifiEnabled) { + console.log("WiFi card clicked for preference"); + if (NetworkService.networkStatus !== "wifi") + NetworkService.setNetworkPreference("wifi"); + else + NetworkService.setNetworkPreference("auto"); + } + } + } + + Behavior on color { + ColorAnimation { + duration: Theme.shortDuration + easing.type: Theme.standardEasing + } + } } // Connection status indicator @@ -308,236 +272,7 @@ Item { } } - // Available Networks Section with refresh button - Row { - width: parent.width - spacing: Theme.spacingS - visible: NetworkService.wifiEnabled && (NetworkService.ethernetConnected && NetworkService.networkStatus !== "ethernet") - Text { - text: "Available Networks" - font.pixelSize: Theme.fontSizeMedium - color: Theme.surfaceText - font.weight: Font.Medium - anchors.verticalCenter: parent.verticalCenter - } - - Item { - width: parent.width - 170 - height: 1 - } - - // WiFi refresh button - Rectangle { - width: 28 - height: 28 - radius: 14 - color: refreshArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : WifiService.isScanning ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06) : "transparent" - - DankIcon { - id: refreshIcon - anchors.centerIn: parent - name: "refresh" - size: Theme.iconSize - 6 - color: refreshArea.containsMouse ? Theme.primary : Theme.surfaceText - rotation: WifiService.isScanning ? refreshIcon.rotation : 0 - - RotationAnimation { - target: refreshIcon - property: "rotation" - running: WifiService.isScanning - from: 0 - to: 360 - duration: 1000 - loops: Animation.Infinite - } - - Behavior on rotation { - RotationAnimation { - duration: 200 - easing.type: Easing.OutQuad - } - } - } - - MouseArea { - id: refreshArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - if (!WifiService.isScanning) { - console.log("Manual WiFi scan triggered"); - // Immediate visual feedback - refreshIcon.rotation += 30; - WifiService.scanWifi(); - } - } - } - } - } - - // WiFi networks list (only show if WiFi is available and enabled and spanning is not needed) - Repeater { - model: (NetworkService.wifiAvailable && NetworkService.wifiEnabled && NetworkService.ethernetConnected && NetworkService.networkStatus !== "ethernet") ? WifiService.wifiNetworks : [] - - Rectangle { - width: parent.width - height: 38 - radius: Theme.cornerRadiusSmall - color: networkArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : modelData.connected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent" - border.color: modelData.connected ? Theme.primary : "transparent" - border.width: modelData.connected ? 1 : 0 - - Item { - anchors.fill: parent - anchors.margins: Theme.spacingXS - - // Signal strength icon - DankIcon { - id: signalIcon - - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - name: modelData.signalStrength === "excellent" ? "wifi" : modelData.signalStrength === "good" ? "wifi_2_bar" : modelData.signalStrength === "fair" ? "wifi_1_bar" : modelData.signalStrength === "poor" ? "wifi_calling_3" : "wifi" - size: Theme.iconSize - 2 - color: modelData.connected ? Theme.primary : Theme.surfaceText - } - - // Network info - Column { - anchors.left: signalIcon.right - anchors.leftMargin: Theme.spacingXS - anchors.right: rightIcons.left - anchors.rightMargin: Theme.spacingXS - anchors.verticalCenter: parent.verticalCenter - spacing: 2 - - Text { - width: parent.width - text: modelData.ssid - font.pixelSize: Theme.fontSizeSmall - color: modelData.connected ? Theme.primary : Theme.surfaceText - font.weight: modelData.connected ? Font.Medium : Font.Normal - elide: Text.ElideRight - } - - Text { - width: parent.width - text: { - if (modelData.connected) - return "Connected"; - if (modelData.saved) - return "Saved" + (modelData.secured ? " • Secured" : " • Open"); - return modelData.secured ? "Secured" : "Open"; - } - font.pixelSize: Theme.fontSizeSmall - 1 - color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7) - elide: Text.ElideRight - } - } - - // Right side icons - Row { - id: rightIcons - - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - spacing: Theme.spacingXS - - // Lock icon (if secured) - DankIcon { - name: "lock" - size: Theme.iconSize - 8 - color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6) - visible: modelData.secured - anchors.verticalCenter: parent.verticalCenter - } - - // Forget button (for saved networks) - Rectangle { - width: 24 - height: 24 - radius: 12 - color: forgetArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) : "transparent" - visible: modelData.saved || modelData.connected - - DankIcon { - anchors.centerIn: parent - name: "delete" - size: Theme.iconSize - 8 - color: forgetArea.containsMouse ? Theme.error : Theme.surfaceText - } - - MouseArea { - id: forgetArea - - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - WifiService.forgetWifiNetwork(modelData.ssid); - } - } - } - } - } - - MouseArea { - id: networkArea - - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - if (modelData.connected) - return; - - if (modelData.saved) { - // Saved network, connect directly - WifiService.connectToWifi(modelData.ssid); - } else if (modelData.secured) { - // Secured network, need password - use root dialog - wifiPasswordDialog.wifiPasswordSSID = modelData.ssid; - wifiPasswordDialog.wifiPasswordInput = ""; - wifiPasswordDialog.wifiPasswordDialogVisible = true; - } else { - // Open network, connect directly - WifiService.connectToWifi(modelData.ssid); - } - } - } - } - } - - // WiFi disabled message - Column { - width: parent.width - spacing: Theme.spacingM - visible: !NetworkService.wifiEnabled - anchors.horizontalCenter: parent.horizontalCenter - - DankIcon { - anchors.horizontalCenter: parent.horizontalCenter - name: "wifi_off" - size: 36 - color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.3) - } - - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: "WiFi is turned off" - font.pixelSize: Theme.fontSizeMedium - color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6) - } - - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: "Turn on WiFi to see networks" - font.pixelSize: Theme.fontSizeSmall - color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4) - } - } } ScrollBar.vertical: ScrollBar { @@ -573,10 +308,15 @@ Item { // Ethernet connection status card (matching WiFi height) Rectangle { + id: ethernetCard width: parent.width height: 80 radius: Theme.cornerRadius - color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5) + color: { + if (ethernetPreferenceArea.containsMouse && NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "ethernet") + return Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.8); + return Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5); + } border.color: NetworkService.networkStatus === "ethernet" ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) border.width: NetworkService.networkStatus === "ethernet" ? 2 : 1 @@ -629,78 +369,34 @@ Item { NetworkService.toggleNetworkConnection("ethernet"); } } - } - - // Ethernet preference button (moved below the status card) - Rectangle { - width: parent.width - height: 30 - color: NetworkService.networkStatus === "ethernet" ? Theme.primary : Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5) - border.color: Theme.primary - border.width: 1 - radius: 6 - opacity: NetworkService.changingNetworkPreference ? 0.6 : 1 - visible: NetworkService.ethernetConnected && NetworkService.networkStatus !== "ethernet" && NetworkService.wifiAvailable && NetworkService.wifiEnabled - - Row { - anchors.centerIn: parent - spacing: Theme.spacingXS - - DankIcon { - id: ethernetPreferenceIcon - - name: NetworkService.changingNetworkPreference ? "sync" : "" - size: Theme.fontSizeSmall - 2 - color: NetworkService.networkStatus === "ethernet" ? Theme.background : Theme.primary - visible: NetworkService.changingNetworkPreference || false - anchors.verticalCenter: parent.verticalCenter - rotation: NetworkService.changingNetworkPreference ? ethernetPreferenceIcon.rotation : 0 - - RotationAnimation { - target: ethernetPreferenceIcon - property: "rotation" - running: NetworkService.changingNetworkPreference || false - from: 0 - to: 360 - duration: 1000 - loops: Animation.Infinite - } - } - - Text { - text: NetworkService.changingNetworkPreference ? "Switching..." : "Prefer over WiFi" - font.pixelSize: Theme.fontSizeMedium - color: NetworkService.networkStatus === "ethernet" ? Theme.background : Theme.primary - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - } - } + // MouseArea for network preference (excluding toggle area) MouseArea { + id: ethernetPreferenceArea anchors.fill: parent + anchors.rightMargin: 60 // Exclude toggle area hoverEnabled: true - cursorShape: Qt.PointingHandCursor - propagateComposedEvents: false - enabled: !NetworkService.changingNetworkPreference + cursorShape: (NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "ethernet") ? Qt.PointingHandCursor : Qt.ArrowCursor + enabled: NetworkService.ethernetConnected && NetworkService.wifiEnabled && NetworkService.networkStatus !== "ethernet" && !NetworkService.changingNetworkPreference onClicked: { - console.log("*** ETHERNET PREFERENCE BUTTON CLICKED ***"); - if (NetworkService.networkStatus !== "ethernet") { - console.log("Setting preference to ethernet"); - NetworkService.setNetworkPreference("ethernet"); - } else { - console.log("Setting preference to auto"); - NetworkService.setNetworkPreference("auto"); + if (NetworkService.ethernetConnected && NetworkService.wifiEnabled) { + console.log("Ethernet card clicked for preference"); + if (NetworkService.networkStatus !== "ethernet") + NetworkService.setNetworkPreference("ethernet"); + else + NetworkService.setNetworkPreference("auto"); } } } - Behavior on opacity { - NumberAnimation { + Behavior on color { + ColorAnimation { duration: Theme.shortDuration easing.type: Theme.standardEasing } } } + } ScrollBar.vertical: ScrollBar { @@ -710,6 +406,44 @@ Item { } } + // WiFi disabled message spanning across both columns + Rectangle { + anchors.top: parent.top + anchors.topMargin: 100 + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + color: "transparent" + visible: !NetworkService.wifiEnabled + + Column { + anchors.centerIn: parent + spacing: Theme.spacingM + + DankIcon { + anchors.horizontalCenter: parent.horizontalCenter + name: "wifi_off" + size: 48 + color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.3) + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: "WiFi is turned off" + font.pixelSize: Theme.fontSizeLarge + color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6) + font.weight: Font.Medium + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: "Turn on WiFi to see networks" + font.pixelSize: Theme.fontSizeMedium + color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4) + } + } + } + // WiFi networks spanning across both columns when Ethernet preference button is hidden Column { anchors.top: parent.top @@ -717,7 +451,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - visible: NetworkService.wifiEnabled && !(NetworkService.ethernetConnected && NetworkService.networkStatus !== "ethernet") + visible: NetworkService.wifiEnabled spacing: Theme.spacingS // Available Networks Section with refresh button (spanning version) @@ -947,7 +681,8 @@ Item { property bool triggered: false onTriggered: { NetworkService.refreshNetworkStatus(); - if (NetworkService.wifiEnabled) { + if (NetworkService.wifiEnabled && !WifiService.isScanning) { + console.log("RefreshTimer: Scanning WiFi after toggle"); WifiService.scanWifi(); } triggered = false; @@ -960,7 +695,43 @@ Item { function onWifiEnabledChanged() { if (NetworkService.wifiEnabled && visible) { // When WiFi is enabled, scan and update info (only if tab is visible) - WifiService.scanWifi(); + // Add a small delay to ensure WiFi service is ready + wifiScanDelayTimer.start(); + } + } + } + + // Delayed WiFi scan timer to ensure service is ready + Timer { + id: wifiScanDelayTimer + interval: 1500 + running: false + repeat: false + onTriggered: { + if (NetworkService.wifiEnabled && visible) { + console.log("Delayed WiFi scan triggered after enabling WiFi"); + if (!WifiService.isScanning) { + WifiService.scanWifi(); + } else { + // If still scanning, try again in a bit + wifiRetryTimer.start(); + } + } + } + } + + // Retry timer for when WiFi is still scanning + Timer { + id: wifiRetryTimer + interval: 2000 + running: false + repeat: false + onTriggered: { + if (NetworkService.wifiEnabled && visible && WifiService.wifiNetworks.length === 0) { + console.log("Retry WiFi scan - no networks found yet"); + if (!WifiService.isScanning) { + WifiService.scanWifi(); + } } } }