From 6c1765c2e1f642e7d5abdb8362ea2f0f007b2d70 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Wed, 28 Jan 2026 19:20:12 +1100 Subject: controlcenter: remove qt5compat dep --- modules/controlcenter/network/VpnDetails.qml | 123 ++++++++++++++--------- modules/controlcenter/network/VpnList.qml | 140 +++++++++++++++++---------- 2 files changed, 166 insertions(+), 97 deletions(-) (limited to 'modules/controlcenter') diff --git a/modules/controlcenter/network/VpnDetails.qml b/modules/controlcenter/network/VpnDetails.qml index 76a9b17..1c71cd7 100644 --- a/modules/controlcenter/network/VpnDetails.qml +++ b/modules/controlcenter/network/VpnDetails.qml @@ -12,7 +12,6 @@ import qs.utils import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Qt5Compat.GraphicalEffects DeviceDetails { id: root @@ -20,11 +19,12 @@ DeviceDetails { required property Session session readonly property var vpnProvider: root.session.vpn.active readonly property bool providerEnabled: { - if (!vpnProvider || vpnProvider.index === undefined) return false; + if (!vpnProvider || vpnProvider.index === undefined) + return false; const provider = Config.utilities.vpn.provider[vpnProvider.index]; return provider && typeof provider === "object" && provider.enabled === true; } - + device: vpnProvider headerComponent: Component { @@ -49,10 +49,11 @@ DeviceDetails { label: qsTr("Enable this provider") checked: root.providerEnabled toggle.onToggled: { - if (!root.vpnProvider) return; + if (!root.vpnProvider) + return; const providers = []; const index = root.vpnProvider.index; - + // Copy providers and update enabled state for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { const p = Config.utilities.vpn.provider[i]; @@ -62,7 +63,7 @@ DeviceDetails { displayName: p.displayName, interface: p.interface }; - + if (checked) { // Enable this one, disable others newProvider.enabled = (i === index); @@ -70,13 +71,13 @@ DeviceDetails { // Just disable this one newProvider.enabled = (i === index) ? false : (p.enabled !== false); } - + providers.push(newProvider); } else { providers.push(p); } } - + Config.utilities.vpn.provider = providers; Config.save(); } @@ -86,7 +87,7 @@ DeviceDetails { Layout.fillWidth: true Layout.topMargin: Appearance.spacing.normal spacing: Appearance.spacing.normal - + TextButton { Layout.fillWidth: true Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 @@ -171,9 +172,12 @@ DeviceDetails { showTopMargin: true label: qsTr("Status") value: { - if (!root.providerEnabled) return qsTr("Disabled"); - if (VPN.connecting) return qsTr("Connecting..."); - if (VPN.connected) return qsTr("Connected"); + if (!root.providerEnabled) + return qsTr("Disabled"); + if (VPN.connecting) + return qsTr("Connecting..."); + if (VPN.connected) + return qsTr("Connected"); return qsTr("Enabled (Not connected)"); } } @@ -191,62 +195,80 @@ DeviceDetails { // Edit VPN Dialog Popup { id: editVpnDialog - + property int editIndex: -1 property string providerName: "" property string displayName: "" property string interfaceName: "" - + parent: Overlay.overlay anchors.centerIn: parent width: Math.min(400, parent.width - Appearance.padding.large * 2) padding: Appearance.padding.large * 1.5 - + modal: true closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside - + opacity: 0 scale: 0.7 - + enter: Transition { - ParallelAnimation { - NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } - NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } + Anim { + property: "opacity" + from: 0 + to: 1 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + Anim { + property: "scale" + from: 0.7 + to: 1 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } } exit: Transition { - ParallelAnimation { - NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } - NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } + Anim { + property: "opacity" + from: 1 + to: 0 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + Anim { + property: "scale" + from: 1 + to: 0.7 + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } } - + function closeWithAnimation(): void { close(); } - + Overlay.modal: Rectangle { color: Qt.rgba(0, 0, 0, 0.4 * editVpnDialog.opacity) } - - + background: StyledRect { color: Colours.palette.m3surfaceContainerHigh radius: Appearance.rounding.large - layer.enabled: true - layer.effect: DropShadow { - color: Qt.rgba(0, 0, 0, 0.3) - radius: 16 - samples: 33 - verticalOffset: 4 + Elevation { + anchors.fill: parent + radius: parent.radius + level: 3 + z: -1 } } - + contentItem: ColumnLayout { spacing: Appearance.spacing.normal - + StyledText { text: qsTr("Edit VPN Provider") font.pointSize: Appearance.font.size.large @@ -271,8 +293,12 @@ DeviceDetails { border.width: 1 border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) - Behavior on color { CAnim {} } - Behavior on border.color { CAnim {} } + Behavior on color { + CAnim {} + } + Behavior on border.color { + CAnim {} + } StyledTextField { id: displayNameField @@ -303,8 +329,12 @@ DeviceDetails { border.width: 1 border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) - Behavior on color { CAnim {} } - Behavior on border.color { CAnim {} } + Behavior on color { + CAnim {} + } + Behavior on border.color { + CAnim {} + } StyledTextField { id: interfaceNameField @@ -316,13 +346,12 @@ DeviceDetails { } } } - - Item { Layout.preferredHeight: Appearance.spacing.normal } - + RowLayout { + Layout.topMargin: Appearance.spacing.normal Layout.fillWidth: true spacing: Appearance.spacing.normal - + TextButton { Layout.fillWidth: true text: qsTr("Cancel") @@ -330,19 +359,19 @@ DeviceDetails { inactiveOnColour: Colours.palette.m3onSurface onClicked: editVpnDialog.closeWithAnimation() } - + TextButton { Layout.fillWidth: true text: qsTr("Save") enabled: editVpnDialog.interfaceName.length > 0 inactiveColour: Colours.palette.m3primaryContainer inactiveOnColour: Colours.palette.m3onPrimaryContainer - + onClicked: { const providers = []; const oldProvider = Config.utilities.vpn.provider[editVpnDialog.editIndex]; const wasEnabled = typeof oldProvider === "object" ? (oldProvider.enabled !== false) : true; - + for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { if (i === editVpnDialog.editIndex) { providers.push({ @@ -355,7 +384,7 @@ DeviceDetails { providers.push(Config.utilities.vpn.provider[i]); } } - + Config.utilities.vpn.provider = providers; Config.save(); editVpnDialog.closeWithAnimation(); diff --git a/modules/controlcenter/network/VpnList.qml b/modules/controlcenter/network/VpnList.qml index 665f8cc..81f4a45 100644 --- a/modules/controlcenter/network/VpnList.qml +++ b/modules/controlcenter/network/VpnList.qml @@ -3,16 +3,13 @@ pragma ComponentBehavior: Bound import ".." import qs.components import qs.components.controls -import qs.components.containers import qs.components.effects import qs.services import qs.config -import qs.utils import Quickshell import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Qt5Compat.GraphicalEffects ColumnLayout { id: root @@ -29,7 +26,7 @@ ColumnLayout { if (!VPN.connected && root.pendingSwitchIndex >= 0) { const targetIndex = root.pendingSwitchIndex; root.pendingSwitchIndex = -1; - + const providers = []; for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { const p = Config.utilities.vpn.provider[i]; @@ -47,8 +44,8 @@ ColumnLayout { } Config.utilities.vpn.provider = providers; Config.save(); - - Qt.callLater(function() { + + Qt.callLater(function () { VPN.toggle(); }); } @@ -82,7 +79,7 @@ ColumnLayout { const displayName = isObject ? (provider.displayName || name) : name; const iface = isObject ? (provider.interface || "") : ""; const enabled = isObject ? (provider.enabled === true) : false; - + return { index: index, name: name, @@ -160,9 +157,12 @@ ColumnLayout { StyledText { Layout.fillWidth: true text: { - if (modelData.enabled && VPN.connected) return qsTr("Connected"); - if (modelData.enabled && VPN.connecting) return qsTr("Connecting..."); - if (modelData.enabled) return qsTr("Enabled"); + if (modelData.enabled && VPN.connected) + return qsTr("Connected"); + if (modelData.enabled && VPN.connecting) + return qsTr("Connecting..."); + if (modelData.enabled) + return qsTr("Enabled"); return qsTr("Disabled"); } color: modelData.enabled ? (VPN.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface) : Colours.palette.m3outline @@ -210,7 +210,7 @@ ColumnLayout { Config.utilities.vpn.provider = providers; Config.save(); - Qt.callLater(function() { + Qt.callLater(function () { VPN.toggle(); }); } @@ -261,7 +261,7 @@ ColumnLayout { } } } - + Popup { id: vpnDialog @@ -279,21 +279,45 @@ ColumnLayout { modal: true closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside - + opacity: 0 scale: 0.7 enter: Transition { ParallelAnimation { - NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized } - NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized } + Anim { + property: "opacity" + from: 0 + to: 1 + duration: Appearance.anim.durations.normal + easing.bezierCurve: Appearance.anim.curves.emphasized + } + Anim { + property: "scale" + from: 0.7 + to: 1 + duration: Appearance.anim.durations.normal + easing.bezierCurve: Appearance.anim.curves.emphasized + } } } exit: Transition { ParallelAnimation { - NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized } - NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized } + Anim { + property: "opacity" + from: 1 + to: 0 + duration: Appearance.anim.durations.small + easing.bezierCurve: Appearance.anim.curves.emphasized + } + Anim { + property: "scale" + from: 1 + to: 0.7 + duration: Appearance.anim.durations.small + easing.bezierCurve: Appearance.anim.curves.emphasized + } } } @@ -346,7 +370,7 @@ ColumnLayout { id: transitionToForm ParallelAnimation { - NumberAnimation { + Anim { target: selectionContent property: "opacity" to: 0 @@ -362,7 +386,7 @@ ColumnLayout { } ParallelAnimation { - NumberAnimation { + Anim { target: formContent property: "opacity" to: 1 @@ -376,16 +400,15 @@ ColumnLayout { color: Colours.palette.m3surfaceContainerHigh radius: Appearance.rounding.large - layer.enabled: true - layer.effect: DropShadow { - color: Qt.rgba(0, 0, 0, 0.3) - radius: 16 - samples: 33 - verticalOffset: 4 + Elevation { + anchors.fill: parent + radius: parent.radius + level: 3 + z: -1 } Behavior on implicitHeight { - NumberAnimation { + Anim { duration: Appearance.anim.durations.normal easing.bezierCurve: Appearance.anim.curves.emphasized } @@ -396,7 +419,7 @@ ColumnLayout { implicitHeight: vpnDialog.currentState === "selection" ? selectionContent.implicitHeight : formContent.implicitHeight Behavior on implicitHeight { - NumberAnimation { + Anim { duration: Appearance.anim.durations.normal easing.bezierCurve: Appearance.anim.curves.emphasized } @@ -404,19 +427,19 @@ ColumnLayout { ColumnLayout { id: selectionContent - + anchors.fill: parent spacing: Appearance.spacing.normal visible: vpnDialog.currentState === "selection" opacity: vpnDialog.currentState === "selection" ? 1 : 0 Behavior on opacity { - NumberAnimation { + Anim { duration: Appearance.anim.durations.small easing.bezierCurve: Appearance.anim.curves.emphasized } } - + StyledText { text: qsTr("Add VPN Provider") font.pointSize: Appearance.font.size.large @@ -431,9 +454,8 @@ ColumnLayout { font.pointSize: Appearance.font.size.small } - Item { Layout.preferredHeight: Appearance.spacing.small } - TextButton { + Layout.topMargin: Appearance.spacing.normal Layout.fillWidth: true text: qsTr("NetBird") inactiveColour: Colours.tPalette.m3surfaceContainerHigh @@ -443,13 +465,17 @@ ColumnLayout { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { providers.push(Config.utilities.vpn.provider[i]); } - providers.push({ name: "netbird", displayName: "NetBird", interface: "wt0" }); + providers.push({ + name: "netbird", + displayName: "NetBird", + interface: "wt0" + }); Config.utilities.vpn.provider = providers; Config.save(); vpnDialog.closeWithAnimation(); } } - + TextButton { Layout.fillWidth: true text: qsTr("Tailscale") @@ -460,13 +486,17 @@ ColumnLayout { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { providers.push(Config.utilities.vpn.provider[i]); } - providers.push({ name: "tailscale", displayName: "Tailscale", interface: "tailscale0" }); + providers.push({ + name: "tailscale", + displayName: "Tailscale", + interface: "tailscale0" + }); Config.utilities.vpn.provider = providers; Config.save(); vpnDialog.closeWithAnimation(); } } - + TextButton { Layout.fillWidth: true text: qsTr("Cloudflare WARP") @@ -477,13 +507,17 @@ ColumnLayout { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { providers.push(Config.utilities.vpn.provider[i]); } - providers.push({ name: "warp", displayName: "Cloudflare WARP", interface: "CloudflareWARP" }); + providers.push({ + name: "warp", + displayName: "Cloudflare WARP", + interface: "CloudflareWARP" + }); Config.utilities.vpn.provider = providers; Config.save(); vpnDialog.closeWithAnimation(); } } - + TextButton { Layout.fillWidth: true text: qsTr("WireGuard (Custom)") @@ -494,9 +528,8 @@ ColumnLayout { } } - Item { Layout.preferredHeight: Appearance.spacing.small } - TextButton { + Layout.topMargin: Appearance.spacing.normal Layout.fillWidth: true text: qsTr("Cancel") inactiveColour: Colours.palette.m3secondaryContainer @@ -507,19 +540,19 @@ ColumnLayout { ColumnLayout { id: formContent - + anchors.fill: parent spacing: Appearance.spacing.normal visible: vpnDialog.currentState === "form" opacity: vpnDialog.currentState === "form" ? 1 : 0 Behavior on opacity { - NumberAnimation { + Anim { duration: Appearance.anim.durations.small easing.bezierCurve: Appearance.anim.curves.emphasized } } - + StyledText { text: vpnDialog.editIndex >= 0 ? qsTr("Edit VPN Provider") : qsTr("Add %1 VPN").arg(vpnDialog.displayName) font.pointSize: Appearance.font.size.large @@ -544,8 +577,12 @@ ColumnLayout { border.width: 1 border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) - Behavior on color { CAnim {} } - Behavior on border.color { CAnim {} } + Behavior on color { + CAnim {} + } + Behavior on border.color { + CAnim {} + } StyledTextField { id: displayNameField @@ -576,8 +613,12 @@ ColumnLayout { border.width: 1 border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) - Behavior on color { CAnim {} } - Behavior on border.color { CAnim {} } + Behavior on color { + CAnim {} + } + Behavior on border.color { + CAnim {} + } StyledTextField { id: interfaceNameField @@ -590,9 +631,8 @@ ColumnLayout { } } - Item { Layout.preferredHeight: Appearance.spacing.normal } - RowLayout { + Layout.topMargin: Appearance.spacing.normal Layout.fillWidth: true spacing: Appearance.spacing.normal @@ -633,7 +673,7 @@ ColumnLayout { } providers.push(newProvider); } - + Config.utilities.vpn.provider = providers; Config.save(); vpnDialog.closeWithAnimation(); -- cgit v1.2.3-freya