Skip to content

UI Controls: add wifi settings button to status bar #2845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ybott-qinetic wants to merge 2 commits into
base: main
Choose a base branch
from
Open

UI Controls: add wifi settings button to status bar #2845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
739ebac
UI Controls: change wifi status icon to clickable button
ybott-qinetic Feb 20, 2026
a2f612b
UI Controls: change gsm status icon to clickable button
ybott-qinetic Feb 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 30 additions & 22 deletions components/StatusBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ FocusScope {
signal leftButtonClicked()
signal rightButtonClicked()
signal auxButtonClicked()
signal wifiButtonClicked()
signal gsmButtonClicked()
// PageStack.get(...) returns an Item, so the arg for 'popToPage' needs to be 'Item'. If we make it a 'Page', it works fine on the desktop,
// but shows an unusual failure on the device. There is an error message about "passing incompatible arguments to signals is not supported",
// and the page stack pops 1 too many pages.
Expand Down Expand Up @@ -204,7 +206,7 @@ FocusScope {
}
}

KeyNavigation.right: notificationButton
KeyNavigation.right: wifiButton

Connections {
target: root.pageStack
Expand Down Expand Up @@ -235,24 +237,19 @@ FocusScope {
visible: !breadcrumbs.visible
spacing: Theme.geometry_statusBar_spacing

CP.IconImage {
anchors.verticalCenter: parent.verticalCenter
color: Theme.color_font_primary
source: {
if (!signalStrength.valid) {
return ""
} else if (signalStrength.value > 75) {
return "qrc:/images/icon_WiFi_4_32.svg"
} else if (signalStrength.value > 50) {
return "qrc:/images/icon_WiFi_3_32.svg"
} else if (signalStrength.value > 25) {
return "qrc:/images/icon_WiFi_2_32.svg"
} else if (signalStrength.value > 0) {
return "qrc:/images/icon_WiFi_1_32.svg"
} else {
return "qrc:/images/icon_WiFi_noconnection_32.svg"
}
}
StatusBarButton {
Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the app is showing one of the main pages, after 6 seconds it goes into "idle" mode where the top buttons fade out. Previously the Wifi and GSM indicators remained visible in this idle mode, but now they fade out of view.

Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the wifi icon is now coloured blue, and there's a bit too much space between the icons now:

Before:

Image

After:

Image

id: wifiButton

icon.source: !signalStrength.valid ? ""
: signalStrength.value > 75 ? "qrc:/images/icon_WiFi_4_32.svg"
: signalStrength.value > 50 ? "qrc:/images/icon_WiFi_3_32.svg"
: signalStrength.value > 25 ? "qrc:/images/icon_WiFi_2_32.svg"
: signalStrength.value > 0 ? "qrc:/images/icon_WiFi_1_32.svg"
: "qrc:/images/icon_WiFi_noconnection_32.svg"

KeyNavigation.right: gsmButton

onClicked: root.wifiButtonClicked()

VeQuickItem {
id: signalStrength
Expand All @@ -261,9 +258,20 @@ FocusScope {
}
}

GsmStatusIcon {
height: Theme.geometry_status_bar_gsmModem_icon_height
anchors.verticalCenter: parent.verticalCenter
StatusBarButton {
id: gsmButton

visible: gsmIcon.valid

KeyNavigation.right: notificationButton

onClicked: root.gsmButtonClicked()

GsmStatusIcon {
id: gsmIcon
height: Theme.geometry_status_bar_gsmModem_icon_height
anchors.centerIn: parent
}
}
}

Expand Down
10 changes: 10 additions & 0 deletions pages/MainView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,16 @@ FocusScope {
}
}

onWifiButtonClicked: {
Global.pageManager.pushPage("/pages/settings/PageSettingsWifi.qml",
{"title": qsTrId("pagesettingsconnectivity_wifi")})
Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For maintenance, move the pagesettingsconnectivity_wifi translation id to CommonWords. Otherwise if the original pagesettingsconnectivity_wifi translation source is removed, it's not obvious that the translation will disappear from as well. Eventually we will probably get rid of CommonWords, but since we're using translation ids, we'll have to do this for now.

Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(This comment is irrelevant if you push the pages from the settings pages instead, as per the comments below)

}
Copy link
Contributor Author

@ybott-qinetic ybott-qinetic Feb 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The breadcrumbs do not show the "Settings" root element.

Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to preserve the Settings > Connectivity breadcrumb chain. You could put a couple of functions in SettingsPage.qml and PageSettingsConnectivity.qml to get them to push the appropriate pages, and then you wouldn't need to duplicate the "Wifi" and "Mobile network" translation ids as you could reference the text from the list items directly within those pages.

Copy link
Contributor

@blammit blammit Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The buttons are visible when the Control/Switch panes are open, so currently when those are open, it's possible to click the WiFi/GSM buttons and open the settings pages below.

You'll need something like goToNotificationsPage() in MainView.qml, which pops all pages and closes the card loader before going to the notifications page.


onGsmButtonClicked: {
Global.pageManager.pushPage("/pages/settings/PageSettingsGsm.qml",
{"title": qsTrId("pagesettingsconnectivity_mobile_network")})
}

onPopToPage: function(toPage) {
pageManager.popPage(toPage)
}
Expand Down