internal: use existing button controls

Instead of SimpleButton
This commit is contained in:
2 * r + 2 * t 2025-11-15 17:15:02 +11:00
parent 19fb58d249
commit 6a92f985d8
9 changed files with 122 additions and 242 deletions

View file

@ -2,6 +2,7 @@ import ".."
import qs.services import qs.services
import qs.config import qs.config
import QtQuick import QtQuick
import QtQuick.Layouts
StyledRect { StyledRect {
id: root id: root
@ -53,7 +54,7 @@ StyledRect {
} }
} }
Row { RowLayout {
id: row id: row
anchors.centerIn: parent anchors.centerIn: parent
@ -62,7 +63,8 @@ StyledRect {
MaterialIcon { MaterialIcon {
id: iconLabel id: iconLabel
anchors.verticalCenter: parent.verticalCenter Layout.alignment: Qt.AlignVCenter
Layout.topMargin: Math.round(fontInfo.pointSize * 0.0575)
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
fill: root.internalChecked ? 1 : 0 fill: root.internalChecked ? 1 : 0
@ -74,7 +76,8 @@ StyledRect {
StyledText { StyledText {
id: label id: label
anchors.verticalCenter: parent.verticalCenter Layout.alignment: Qt.AlignVCenter
Layout.topMargin: -Math.round(iconLabel.fontInfo.pointSize * 0.0575)
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
} }
} }

View file

@ -105,17 +105,16 @@ Item {
} }
} }
SimpleButton { IconTextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Appearance.spacing.normal
color: Colours.palette.m3primaryContainer inactiveColour: Colours.palette.m3primaryContainer
onColor: Colours.palette.m3onPrimaryContainer inactiveOnColour: Colours.palette.m3onPrimaryContainer
verticalPadding: Appearance.padding.small
text: qsTr("Open settings") text: qsTr("Open settings")
icon: "settings" icon: "settings"
onClicked: { onClicked: root.wrapper.detach("audio")
root.wrapper.detach("audio");
}
} }
} }
} }

View file

@ -165,17 +165,16 @@ ColumnLayout {
} }
} }
SimpleButton { IconTextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Appearance.spacing.normal
color: Colours.palette.m3primaryContainer inactiveColour: Colours.palette.m3primaryContainer
onColor: Colours.palette.m3onPrimaryContainer inactiveOnColour: Colours.palette.m3onPrimaryContainer
verticalPadding: Appearance.padding.small
text: qsTr("Open settings") text: qsTr("Open settings")
icon: "settings" icon: "settings"
onClicked: { onClicked: root.wrapper.detach("bluetooth")
root.wrapper.detach("bluetooth");
}
} }
component Toggle: RowLayout { component Toggle: RowLayout {

View file

@ -111,10 +111,8 @@ ColumnLayout {
} }
StyledRect { StyledRect {
id: connectBtn
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: wirelessConnectIcon.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.full radius: Appearance.rounding.full
color: Qt.alpha(Colours.palette.m3primary, networkItem.modelData.active ? 1 : 0) color: Qt.alpha(Colours.palette.m3primary, networkItem.modelData.active ? 1 : 0)
@ -136,7 +134,7 @@ ColumnLayout {
// Check if network is secure // Check if network is secure
if (networkItem.modelData.isSecure) { if (networkItem.modelData.isSecure) {
// Try to connect first - will show password dialog if password is needed // Try to connect first - will show password dialog if password is needed
Nmcli.connectToNetwork(networkItem.modelData.ssid, "", networkItem.modelData.bssid, (result) => { Nmcli.connectToNetwork(networkItem.modelData.ssid, "", networkItem.modelData.bssid, result => {
if (result && result.needsPassword) { if (result && result.needsPassword) {
// Password is required - show password dialog // Password is required - show password dialog
root.passwordNetwork = networkItem.modelData; root.passwordNetwork = networkItem.modelData;
@ -159,7 +157,7 @@ ColumnLayout {
} }
MaterialIcon { MaterialIcon {
id: connectIcon id: wirelessConnectIcon
anchors.centerIn: parent anchors.centerIn: parent
animate: true animate: true
@ -205,12 +203,14 @@ ColumnLayout {
MaterialIcon { MaterialIcon {
id: scanIcon id: scanIcon
Layout.topMargin: Math.round(fontInfo.pointSize * 0.0575)
animate: true animate: true
text: "wifi_find" text: "wifi_find"
color: Colours.palette.m3onPrimaryContainer color: Colours.palette.m3onPrimaryContainer
} }
StyledText { StyledText {
Layout.topMargin: -Math.round(scanIcon.fontInfo.pointSize * 0.0575)
text: qsTr("Rescan networks") text: qsTr("Rescan networks")
color: Colours.palette.m3onPrimaryContainer color: Colours.palette.m3onPrimaryContainer
} }
@ -303,8 +303,6 @@ ColumnLayout {
} }
StyledRect { StyledRect {
id: connectBtn
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
@ -354,8 +352,7 @@ ColumnLayout {
if (Nmcli.active && root.connectingToSsid === Nmcli.active.ssid) { if (Nmcli.active && root.connectingToSsid === Nmcli.active.ssid) {
root.connectingToSsid = ""; root.connectingToSsid = "";
// Close password dialog if we successfully connected // Close password dialog if we successfully connected
if (root.showPasswordDialog && root.passwordNetwork && if (root.showPasswordDialog && root.passwordNetwork && Nmcli.active.ssid === root.passwordNetwork.ssid) {
Nmcli.active.ssid === root.passwordNetwork.ssid) {
root.showPasswordDialog = false; root.showPasswordDialog = false;
root.passwordNetwork = null; root.passwordNetwork = null;
if (root.wrapper.currentName === "wirelesspassword") { if (root.wrapper.currentName === "wirelesspassword") {

View file

@ -67,9 +67,7 @@ ColumnLayout {
} }
} }
Keys.onEscapePressed: { Keys.onEscapePressed: closeDialog()
closeDialog();
}
StyledRect { StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
@ -109,7 +107,7 @@ ColumnLayout {
} }
} }
Keys.onEscapePressed: closeDialog(); Keys.onEscapePressed: root.closeDialog()
ColumnLayout { ColumnLayout {
id: content id: content
@ -265,9 +263,7 @@ ColumnLayout {
StyledRect { StyledRect {
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.normal radius: Appearance.rounding.normal
color: passwordContainer.activeFocus color: passwordContainer.activeFocus ? Qt.lighter(Colours.tPalette.m3surfaceContainer, 1.05) : Colours.tPalette.m3surfaceContainer
? Qt.lighter(Colours.tPalette.m3surfaceContainer, 1.05)
: Colours.tPalette.m3surfaceContainer
border.width: passwordContainer.activeFocus || connectButton.hasError ? 4 : (root.shouldBeVisible ? 1 : 0) border.width: passwordContainer.activeFocus || connectButton.hasError ? 4 : (root.shouldBeVisible ? 1 : 0)
border.color: { border.color: {
if (connectButton.hasError) { if (connectButton.hasError) {
@ -401,31 +397,31 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal
SimpleButton { TextButton {
id: cancelButton id: cancelButton
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
color: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
onColor: Colours.palette.m3onSecondaryContainer inactiveOnColour: Colours.palette.m3onSecondaryContainer
text: qsTr("Cancel") text: qsTr("Cancel")
onClicked: closeDialog(); onClicked: root.closeDialog()
} }
SimpleButton { TextButton {
id: connectButton id: connectButton
Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
color: Colours.palette.m3primary
onColor: Colours.palette.m3onPrimary
text: qsTr("Connect")
enabled: passwordContainer.passwordBuffer.length > 0 && !connecting
property bool connecting: false property bool connecting: false
property bool hasError: false property bool hasError: false
Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
inactiveColour: Colours.palette.m3primary
inactiveOnColour: Colours.palette.m3onPrimary
text: qsTr("Connect")
enabled: passwordContainer.passwordBuffer.length > 0 && !connecting
onClicked: { onClicked: {
if (!root.network || connecting) { if (!root.network || connecting) {
return; return;
@ -445,40 +441,35 @@ ColumnLayout {
text = qsTr("Connecting..."); text = qsTr("Connecting...");
// Connect to network // Connect to network
Nmcli.connectToNetwork( Nmcli.connectToNetwork(root.network.ssid, password, root.network.bssid || "", result => {
root.network.ssid, if (result && result.success)
password, // Connection successful, monitor will handle the rest
root.network.bssid || "", {} else if (result && result.needsPassword) {
(result) => { // Shouldn't happen since we provided password
if (result && result.success) { connectionMonitor.stop();
// Connection successful, monitor will handle the rest connecting = false;
} else if (result && result.needsPassword) { hasError = true;
// Shouldn't happen since we provided password enabled = true;
connectionMonitor.stop(); text = qsTr("Connect");
connecting = false; passwordContainer.passwordBuffer = "";
hasError = true; // Delete the failed connection
enabled = true; if (root.network && root.network.ssid) {
text = qsTr("Connect"); Nmcli.forgetNetwork(root.network.ssid);
passwordContainer.passwordBuffer = ""; }
// Delete the failed connection } else {
if (root.network && root.network.ssid) { // Connection failed immediately - show error
Nmcli.forgetNetwork(root.network.ssid, () => {}); connectionMonitor.stop();
} connecting = false;
} else { hasError = true;
// Connection failed immediately - show error enabled = true;
connectionMonitor.stop(); text = qsTr("Connect");
connecting = false; passwordContainer.passwordBuffer = "";
hasError = true; // Delete the failed connection
enabled = true; if (root.network && root.network.ssid) {
text = qsTr("Connect"); Nmcli.forgetNetwork(root.network.ssid);
passwordContainer.passwordBuffer = "";
// Delete the failed connection
if (root.network && root.network.ssid) {
Nmcli.forgetNetwork(root.network.ssid, () => {});
}
} }
} }
); });
// Start monitoring connection // Start monitoring connection
connectionMonitor.start(); connectionMonitor.start();
@ -494,8 +485,7 @@ ColumnLayout {
} }
// Check if we're connected to the target network (case-insensitive SSID comparison) // Check if we're connected to the target network (case-insensitive SSID comparison)
const isConnected = root.network && Nmcli.active && Nmcli.active.ssid && const isConnected = root.network && Nmcli.active && Nmcli.active.ssid && Nmcli.active.ssid.toLowerCase().trim() === root.network.ssid.toLowerCase().trim();
Nmcli.active.ssid.toLowerCase().trim() === root.network.ssid.toLowerCase().trim();
if (isConnected) { if (isConnected) {
// Successfully connected - give it a moment for network list to update // Successfully connected - give it a moment for network list to update
@ -530,7 +520,7 @@ ColumnLayout {
passwordContainer.passwordBuffer = ""; passwordContainer.passwordBuffer = "";
// Delete the failed connection // Delete the failed connection
if (root.network && root.network.ssid) { if (root.network && root.network.ssid) {
Nmcli.forgetNetwork(root.network.ssid, () => {}); Nmcli.forgetNetwork(root.network.ssid);
} }
} }
} }
@ -545,7 +535,7 @@ ColumnLayout {
onTriggered: { onTriggered: {
repeatCount++; repeatCount++;
checkConnectionStatus(); root.checkConnectionStatus();
} }
onRunningChanged: { onRunningChanged: {
@ -559,7 +549,7 @@ ColumnLayout {
target: Nmcli target: Nmcli
function onActiveChanged() { function onActiveChanged() {
if (root.shouldBeVisible) { if (root.shouldBeVisible) {
checkConnectionStatus(); root.checkConnectionStatus();
} }
} }
function onConnectionFailed(ssid: string) { function onConnectionFailed(ssid: string) {
@ -571,7 +561,7 @@ ColumnLayout {
connectButton.text = qsTr("Connect"); connectButton.text = qsTr("Connect");
passwordContainer.passwordBuffer = ""; passwordContainer.passwordBuffer = "";
// Delete the failed connection // Delete the failed connection
Nmcli.forgetNetwork(ssid, () => {}); Nmcli.forgetNetwork(ssid);
} }
} }
} }
@ -593,51 +583,4 @@ ColumnLayout {
root.wrapper.currentName = "network"; root.wrapper.currentName = "network";
} }
} }
component SimpleButton: StyledRect {
id: button
property color onColor: Colours.palette.m3onSurface
property alias disabled: stateLayer.disabled
property alias text: label.text
property alias enabled: stateLayer.enabled
property string icon: ""
implicitWidth: rowLayout.implicitWidth + Appearance.padding.normal * 2
implicitHeight: rowLayout.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.small
StateLayer {
id: stateLayer
color: parent.onColor
function onClicked(): void {
if (parent.enabled !== false) {
parent.clicked();
}
}
}
RowLayout {
id: rowLayout
anchors.centerIn: parent
spacing: Appearance.spacing.small
MaterialIcon {
id: iconItem
visible: button.icon.length > 0
text: button.icon
color: button.onColor
font.pointSize: Appearance.font.size.large
}
StyledText {
id: label
Layout.leftMargin: button.icon.length > 0 ? Appearance.padding.smaller : 0
color: parent.parent.onColor
}
}
signal clicked
}
} }

View file

@ -1,50 +0,0 @@
import qs.components
import qs.components.controls
import qs.components.effects
import qs.config
import QtQuick
import QtQuick.Layouts
StyledRect {
id: root
property color onColor: Colours.palette.m3onSurface
property alias disabled: stateLayer.disabled
property alias text: label.text
property alias enabled: stateLayer.enabled
property string icon: ""
implicitWidth: rowLayout.implicitWidth + Appearance.padding.normal * 2
implicitHeight: rowLayout.implicitHeight + Appearance.padding.small * 2
radius: Appearance.rounding.normal
StateLayer {
id: stateLayer
color: parent.onColor
function onClicked(): void {
if (parent.enabled !== false) {
parent.clicked();
}
}
}
RowLayout {
id: rowLayout
anchors.centerIn: parent
spacing: Appearance.spacing.small
MaterialIcon {
id: iconItem
visible: root.icon.length > 0
text: root.icon
color: root.onColor
}
StyledText {
id: label
color: parent.parent.onColor
}
}
signal clicked
}

View file

@ -69,7 +69,7 @@ Item {
if (!Nmcli.wirelessDeviceDetails || Nmcli.wirelessDeviceDetails === null) { if (!Nmcli.wirelessDeviceDetails || Nmcli.wirelessDeviceDetails === null) {
// Network is active but we don't have details yet, fetch them // Network is active but we don't have details yet, fetch them
Nmcli.getWirelessDeviceDetails("", () => { Nmcli.getWirelessDeviceDetails("", () => {
// After fetching, check if we got details - if not, timer will try again // After fetching, check if we got details - if not, timer will try again
}); });
} else { } else {
// We have details, can stop the timer // We have details, can stop the timer
@ -89,7 +89,7 @@ Item {
if (network && network.ssid) { if (network && network.ssid) {
const isActive = network.active || (Nmcli.active && Nmcli.active.ssid === network.ssid); const isActive = network.active || (Nmcli.active && Nmcli.active.ssid === network.ssid);
if (isActive) { if (isActive) {
Nmcli.getWirelessDeviceDetails("", () => {}); Nmcli.getWirelessDeviceDetails("");
} else { } else {
Nmcli.wirelessDeviceDetails = null; Nmcli.wirelessDeviceDetails = null;
} }
@ -134,14 +134,14 @@ Item {
checked: root.network?.active ?? false checked: root.network?.active ?? false
toggle.onToggled: { toggle.onToggled: {
if (checked) { if (checked) {
handleConnect(); root.handleConnect();
} else { } else {
Nmcli.disconnectFromNetwork(); Nmcli.disconnectFromNetwork();
} }
} }
} }
SimpleButton { TextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Appearance.spacing.normal
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
@ -151,8 +151,8 @@ Item {
} }
return Nmcli.hasSavedProfile(root.network.ssid); return Nmcli.hasSavedProfile(root.network.ssid);
} }
color: Colours.palette.m3errorContainer inactiveColour: Colours.palette.m3errorContainer
onColor: Colours.palette.m3onErrorContainer inactiveOnColour: Colours.palette.m3onErrorContainer
text: qsTr("Forget Network") text: qsTr("Forget Network")
onClicked: { onClicked: {
@ -160,7 +160,7 @@ Item {
if (root.network.active) { if (root.network.active) {
Nmcli.disconnectFromNetwork(); Nmcli.disconnectFromNetwork();
} }
Nmcli.forgetNetwork(root.network.ssid, () => {}); Nmcli.forgetNetwork(root.network.ssid);
} }
} }
} }
@ -214,7 +214,6 @@ Item {
deviceDetails: Nmcli.wirelessDeviceDetails deviceDetails: Nmcli.wirelessDeviceDetails
} }
} }
} }
} }
@ -236,23 +235,18 @@ Item {
if (hasSavedProfile) { if (hasSavedProfile) {
Nmcli.connectToNetwork(root.network.ssid, "", root.network.bssid, null); Nmcli.connectToNetwork(root.network.ssid, "", root.network.bssid, null);
} else { } else {
Nmcli.connectToNetworkWithPasswordCheck( Nmcli.connectToNetworkWithPasswordCheck(root.network.ssid, root.network.isSecure, result => {
root.network.ssid, if (result.needsPassword) {
root.network.isSecure, if (Nmcli.pendingConnection) {
(result) => { Nmcli.connectionCheckTimer.stop();
if (result.needsPassword) { Nmcli.immediateCheckTimer.stop();
if (Nmcli.pendingConnection) { Nmcli.immediateCheckTimer.checkCount = 0;
Nmcli.connectionCheckTimer.stop(); Nmcli.pendingConnection = null;
Nmcli.immediateCheckTimer.stop();
Nmcli.immediateCheckTimer.checkCount = 0;
Nmcli.pendingConnection = null;
}
root.session.network.showPasswordDialog = true;
root.session.network.pendingNetwork = root.network;
} }
}, root.session.network.showPasswordDialog = true;
root.network.bssid root.session.network.pendingNetwork = root.network;
); }
}, root.network.bssid);
} }
} else { } else {
Nmcli.connectToNetwork(root.network.ssid, "", root.network.bssid, null); Nmcli.connectToNetwork(root.network.ssid, "", root.network.bssid, null);

View file

@ -48,7 +48,7 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: closeDialog(); onClicked: closeDialog()
} }
} }
@ -94,7 +94,7 @@ Item {
} }
} }
Keys.onEscapePressed: closeDialog(); Keys.onEscapePressed: closeDialog()
ColumnLayout { ColumnLayout {
id: content id: content
@ -314,25 +314,25 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal
SimpleButton { TextButton {
id: cancelButton id: cancelButton
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
color: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
onColor: Colours.palette.m3onSecondaryContainer inactiveOnColour: Colours.palette.m3onSecondaryContainer
text: qsTr("Cancel") text: qsTr("Cancel")
onClicked: closeDialog(); onClicked: root.closeDialog()
} }
SimpleButton { TextButton {
id: connectButton id: connectButton
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
color: Colours.palette.m3primary inactiveColour: Colours.palette.m3primary
onColor: Colours.palette.m3onPrimary inactiveOnColour: Colours.palette.m3onPrimary
text: qsTr("Connect") text: qsTr("Connect")
enabled: passwordContainer.passwordBuffer.length > 0 && !connecting enabled: passwordContainer.passwordBuffer.length > 0 && !connecting
@ -354,24 +354,19 @@ Item {
text = qsTr("Connecting..."); text = qsTr("Connecting...");
// Connect to network // Connect to network
Nmcli.connectToNetwork( Nmcli.connectToNetwork(root.network.ssid, password, root.network.bssid || "", result => {
root.network.ssid, if (result && result.success)
password, // Connection successful, monitor will handle the rest
root.network.bssid || "", {} else if (result && result.needsPassword) {
(result) => { // Shouldn't happen since we provided password
if (result && result.success) { connectionMonitor.stop();
// Connection successful, monitor will handle the rest connecting = false;
} else if (result && result.needsPassword) { enabled = true;
// Shouldn't happen since we provided password text = qsTr("Connect");
connectionMonitor.stop(); } else
connecting = false; // Connection failed, monitor will handle timeout
enabled = true; {}
text = qsTr("Connect"); });
} else {
// Connection failed, monitor will handle timeout
}
}
);
// Start monitoring connection // Start monitoring connection
connectionMonitor.start(); connectionMonitor.start();
@ -387,8 +382,7 @@ Item {
} }
// Check if we're connected to the target network (case-insensitive SSID comparison) // Check if we're connected to the target network (case-insensitive SSID comparison)
const isConnected = root.network && Nmcli.active && Nmcli.active.ssid && const isConnected = root.network && Nmcli.active && Nmcli.active.ssid && Nmcli.active.ssid.toLowerCase().trim() === root.network.ssid.toLowerCase().trim();
Nmcli.active.ssid.toLowerCase().trim() === root.network.ssid.toLowerCase().trim();
if (isConnected) { if (isConnected) {
// Successfully connected - give it a moment for network list to update // Successfully connected - give it a moment for network list to update

View file

@ -3,6 +3,7 @@ pragma Singleton
import qs.config import qs.config
import Quickshell import Quickshell
import Quickshell.Services.Notifications import Quickshell.Services.Notifications
import QtQuick
Singleton { Singleton {
id: root id: root