controlcenter: remove qt5compat dep

This commit is contained in:
2 * r + 2 * t 2026-01-28 19:20:12 +11:00
parent 7097cdcab8
commit 6c1765c2e1
2 changed files with 166 additions and 97 deletions

View file

@ -12,7 +12,6 @@ import qs.utils
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
DeviceDetails { DeviceDetails {
id: root id: root
@ -20,7 +19,8 @@ DeviceDetails {
required property Session session required property Session session
readonly property var vpnProvider: root.session.vpn.active readonly property var vpnProvider: root.session.vpn.active
readonly property bool providerEnabled: { 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]; const provider = Config.utilities.vpn.provider[vpnProvider.index];
return provider && typeof provider === "object" && provider.enabled === true; return provider && typeof provider === "object" && provider.enabled === true;
} }
@ -49,7 +49,8 @@ DeviceDetails {
label: qsTr("Enable this provider") label: qsTr("Enable this provider")
checked: root.providerEnabled checked: root.providerEnabled
toggle.onToggled: { toggle.onToggled: {
if (!root.vpnProvider) return; if (!root.vpnProvider)
return;
const providers = []; const providers = [];
const index = root.vpnProvider.index; const index = root.vpnProvider.index;
@ -171,9 +172,12 @@ DeviceDetails {
showTopMargin: true showTopMargin: true
label: qsTr("Status") label: qsTr("Status")
value: { value: {
if (!root.providerEnabled) return qsTr("Disabled"); if (!root.providerEnabled)
if (VPN.connecting) return qsTr("Connecting..."); return qsTr("Disabled");
if (VPN.connected) return qsTr("Connected"); if (VPN.connecting)
return qsTr("Connecting...");
if (VPN.connected)
return qsTr("Connected");
return qsTr("Enabled (Not connected)"); return qsTr("Enabled (Not connected)");
} }
} }
@ -209,16 +213,36 @@ DeviceDetails {
scale: 0.7 scale: 0.7
enter: Transition { enter: Transition {
ParallelAnimation { Anim {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } property: "opacity"
NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } 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 { exit: Transition {
ParallelAnimation { Anim {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } property: "opacity"
NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } 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
} }
} }
@ -230,17 +254,15 @@ DeviceDetails {
color: Qt.rgba(0, 0, 0, 0.4 * editVpnDialog.opacity) color: Qt.rgba(0, 0, 0, 0.4 * editVpnDialog.opacity)
} }
background: StyledRect { background: StyledRect {
color: Colours.palette.m3surfaceContainerHigh color: Colours.palette.m3surfaceContainerHigh
radius: Appearance.rounding.large radius: Appearance.rounding.large
layer.enabled: true Elevation {
layer.effect: DropShadow { anchors.fill: parent
color: Qt.rgba(0, 0, 0, 0.3) radius: parent.radius
radius: 16 level: 3
samples: 33 z: -1
verticalOffset: 4
} }
} }
@ -271,8 +293,12 @@ DeviceDetails {
border.width: 1 border.width: 1
border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} } Behavior on color {
Behavior on border.color { CAnim {} } CAnim {}
}
Behavior on border.color {
CAnim {}
}
StyledTextField { StyledTextField {
id: displayNameField id: displayNameField
@ -303,8 +329,12 @@ DeviceDetails {
border.width: 1 border.width: 1
border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} } Behavior on color {
Behavior on border.color { CAnim {} } CAnim {}
}
Behavior on border.color {
CAnim {}
}
StyledTextField { StyledTextField {
id: interfaceNameField id: interfaceNameField
@ -317,9 +347,8 @@ DeviceDetails {
} }
} }
Item { Layout.preferredHeight: Appearance.spacing.normal }
RowLayout { RowLayout {
Layout.topMargin: Appearance.spacing.normal
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal

View file

@ -3,16 +3,13 @@ pragma ComponentBehavior: Bound
import ".." import ".."
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.components.containers
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import qs.config
import qs.utils
import Quickshell import Quickshell
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
ColumnLayout { ColumnLayout {
id: root id: root
@ -160,9 +157,12 @@ ColumnLayout {
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true
text: { text: {
if (modelData.enabled && VPN.connected) return qsTr("Connected"); if (modelData.enabled && VPN.connected)
if (modelData.enabled && VPN.connecting) return qsTr("Connecting..."); return qsTr("Connected");
if (modelData.enabled) return qsTr("Enabled"); if (modelData.enabled && VPN.connecting)
return qsTr("Connecting...");
if (modelData.enabled)
return qsTr("Enabled");
return qsTr("Disabled"); return qsTr("Disabled");
} }
color: modelData.enabled ? (VPN.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface) : Colours.palette.m3outline color: modelData.enabled ? (VPN.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface) : Colours.palette.m3outline
@ -285,15 +285,39 @@ ColumnLayout {
enter: Transition { enter: Transition {
ParallelAnimation { ParallelAnimation {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized } Anim {
NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized } 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 { exit: Transition {
ParallelAnimation { ParallelAnimation {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized } Anim {
NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized } 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 id: transitionToForm
ParallelAnimation { ParallelAnimation {
NumberAnimation { Anim {
target: selectionContent target: selectionContent
property: "opacity" property: "opacity"
to: 0 to: 0
@ -362,7 +386,7 @@ ColumnLayout {
} }
ParallelAnimation { ParallelAnimation {
NumberAnimation { Anim {
target: formContent target: formContent
property: "opacity" property: "opacity"
to: 1 to: 1
@ -376,16 +400,15 @@ ColumnLayout {
color: Colours.palette.m3surfaceContainerHigh color: Colours.palette.m3surfaceContainerHigh
radius: Appearance.rounding.large radius: Appearance.rounding.large
layer.enabled: true Elevation {
layer.effect: DropShadow { anchors.fill: parent
color: Qt.rgba(0, 0, 0, 0.3) radius: parent.radius
radius: 16 level: 3
samples: 33 z: -1
verticalOffset: 4
} }
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { Anim {
duration: Appearance.anim.durations.normal duration: Appearance.anim.durations.normal
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.emphasized
} }
@ -396,7 +419,7 @@ ColumnLayout {
implicitHeight: vpnDialog.currentState === "selection" ? selectionContent.implicitHeight : formContent.implicitHeight implicitHeight: vpnDialog.currentState === "selection" ? selectionContent.implicitHeight : formContent.implicitHeight
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { Anim {
duration: Appearance.anim.durations.normal duration: Appearance.anim.durations.normal
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.emphasized
} }
@ -411,7 +434,7 @@ ColumnLayout {
opacity: vpnDialog.currentState === "selection" ? 1 : 0 opacity: vpnDialog.currentState === "selection" ? 1 : 0
Behavior on opacity { Behavior on opacity {
NumberAnimation { Anim {
duration: Appearance.anim.durations.small duration: Appearance.anim.durations.small
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.emphasized
} }
@ -431,9 +454,8 @@ ColumnLayout {
font.pointSize: Appearance.font.size.small font.pointSize: Appearance.font.size.small
} }
Item { Layout.preferredHeight: Appearance.spacing.small }
TextButton { TextButton {
Layout.topMargin: Appearance.spacing.normal
Layout.fillWidth: true Layout.fillWidth: true
text: qsTr("NetBird") text: qsTr("NetBird")
inactiveColour: Colours.tPalette.m3surfaceContainerHigh inactiveColour: Colours.tPalette.m3surfaceContainerHigh
@ -443,7 +465,11 @@ ColumnLayout {
for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
providers.push(Config.utilities.vpn.provider[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.utilities.vpn.provider = providers;
Config.save(); Config.save();
vpnDialog.closeWithAnimation(); vpnDialog.closeWithAnimation();
@ -460,7 +486,11 @@ ColumnLayout {
for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
providers.push(Config.utilities.vpn.provider[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.utilities.vpn.provider = providers;
Config.save(); Config.save();
vpnDialog.closeWithAnimation(); vpnDialog.closeWithAnimation();
@ -477,7 +507,11 @@ ColumnLayout {
for (let i = 0; i < Config.utilities.vpn.provider.length; i++) { for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
providers.push(Config.utilities.vpn.provider[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.utilities.vpn.provider = providers;
Config.save(); Config.save();
vpnDialog.closeWithAnimation(); vpnDialog.closeWithAnimation();
@ -494,9 +528,8 @@ ColumnLayout {
} }
} }
Item { Layout.preferredHeight: Appearance.spacing.small }
TextButton { TextButton {
Layout.topMargin: Appearance.spacing.normal
Layout.fillWidth: true Layout.fillWidth: true
text: qsTr("Cancel") text: qsTr("Cancel")
inactiveColour: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
@ -514,7 +547,7 @@ ColumnLayout {
opacity: vpnDialog.currentState === "form" ? 1 : 0 opacity: vpnDialog.currentState === "form" ? 1 : 0
Behavior on opacity { Behavior on opacity {
NumberAnimation { Anim {
duration: Appearance.anim.durations.small duration: Appearance.anim.durations.small
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.emphasized
} }
@ -544,8 +577,12 @@ ColumnLayout {
border.width: 1 border.width: 1
border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} } Behavior on color {
Behavior on border.color { CAnim {} } CAnim {}
}
Behavior on border.color {
CAnim {}
}
StyledTextField { StyledTextField {
id: displayNameField id: displayNameField
@ -576,8 +613,12 @@ ColumnLayout {
border.width: 1 border.width: 1
border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} } Behavior on color {
Behavior on border.color { CAnim {} } CAnim {}
}
Behavior on border.color {
CAnim {}
}
StyledTextField { StyledTextField {
id: interfaceNameField id: interfaceNameField
@ -590,9 +631,8 @@ ColumnLayout {
} }
} }
Item { Layout.preferredHeight: Appearance.spacing.normal }
RowLayout { RowLayout {
Layout.topMargin: Appearance.spacing.normal
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal