From aff01f01a859f0d959c76d67f346b34a714cb971 Mon Sep 17 00:00:00 2001 From: ATMDA Date: Wed, 19 Nov 2025 13:10:09 -0500 Subject: refactor: PaneTransition now component --- modules/controlcenter/bluetooth/BtPane.qml | 60 +++++++--------- .../controlcenter/components/PaneTransition.qml | 84 ++++++++++++++++++++++ modules/controlcenter/launcher/LauncherPane.qml | 73 ++++++------------- modules/controlcenter/network/EthernetPane.qml | 45 ++---------- modules/controlcenter/network/NetworkingPane.qml | 70 ++++-------------- modules/controlcenter/network/WirelessPane.qml | 45 ++---------- 6 files changed, 156 insertions(+), 221 deletions(-) create mode 100644 modules/controlcenter/components/PaneTransition.qml diff --git a/modules/controlcenter/bluetooth/BtPane.qml b/modules/controlcenter/bluetooth/BtPane.qml index cacb611..9d0a4c1 100644 --- a/modules/controlcenter/bluetooth/BtPane.qml +++ b/modules/controlcenter/bluetooth/BtPane.qml @@ -33,6 +33,18 @@ Item { id: rightBtPane property BluetoothDevice pane: root.session.bt.active + property string paneId: pane ? (pane.address || "") : "" + property Component targetComponent: settings + property Component nextComponent: settings + + function getComponentForPane() { + return pane ? details : settings; + } + + Component.onCompleted: { + targetComponent = getComponentForPane(); + nextComponent = targetComponent; + } Loader { id: rightLoader @@ -41,40 +53,19 @@ Item { anchors.margins: Appearance.padding.large * 2 asynchronous: true - sourceComponent: rightBtPane.pane ? details : settings + sourceComponent: rightBtPane.targetComponent } - Behavior on pane { - SequentialAnimation { - ParallelAnimation { - Anim { - target: rightLoader - property: "opacity" - to: 0 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - Anim { - target: rightLoader - property: "scale" - to: 0.8 - easing.bezierCurve: Appearance.anim.curves.standardAccel + Behavior on paneId { + PaneTransition { + target: rightLoader + propertyActions: [ + PropertyAction { + target: rightBtPane + property: "targetComponent" + value: rightBtPane.nextComponent } - } - PropertyAction {} - ParallelAnimation { - Anim { - target: rightLoader - property: "opacity" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - Anim { - target: rightLoader - property: "scale" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - } + ] } } @@ -82,6 +73,8 @@ Item { target: root.session.bt function onActiveChanged() { rightBtPane.pane = root.session.bt.active; + rightBtPane.nextComponent = rightBtPane.getComponentForPane(); + rightBtPane.paneId = pane ? (pane.address || "") : ""; } } } @@ -118,9 +111,4 @@ Item { session: root.session } } - - component Anim: NumberAnimation { - duration: Appearance.anim.durations.normal / 2 - easing.type: Easing.BezierSpline - } } diff --git a/modules/controlcenter/components/PaneTransition.qml b/modules/controlcenter/components/PaneTransition.qml new file mode 100644 index 0000000..1da4afb --- /dev/null +++ b/modules/controlcenter/components/PaneTransition.qml @@ -0,0 +1,84 @@ +pragma ComponentBehavior: Bound + +import qs.config +import QtQuick + +// Reusable pane transition animation component +// Provides standard fade-out/scale-down → update → fade-in/scale-up animation +// Used when switching between detail/settings views in panes +SequentialAnimation { + id: root + + // The Loader element to animate + required property Item target + + // Optional list of PropertyActions to execute during the transition + // These typically update the component being displayed + property list propertyActions + + // Animation parameters (with sensible defaults) + property real scaleFrom: 1.0 + property real scaleTo: 0.8 + property real opacityFrom: 1.0 + property real opacityTo: 0.0 + + // Fade out and scale down + ParallelAnimation { + NumberAnimation { + target: root.target + property: "opacity" + from: root.opacityFrom + to: root.opacityTo + duration: Appearance.anim.durations.normal / 2 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standardAccel + } + + NumberAnimation { + target: root.target + property: "scale" + from: root.scaleFrom + to: root.scaleTo + duration: Appearance.anim.durations.normal / 2 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standardAccel + } + } + + // Execute property actions (component switching, state updates, etc.) + // This is where the component change happens while invisible + ScriptAction { + script: { + for (let i = 0; i < root.propertyActions.length; i++) { + const action = root.propertyActions[i]; + if (action.target && action.property !== undefined) { + action.target[action.property] = action.value; + } + } + } + } + + // Fade in and scale up + ParallelAnimation { + NumberAnimation { + target: root.target + property: "opacity" + from: root.opacityTo + to: root.opacityFrom + duration: Appearance.anim.durations.normal / 2 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standardDecel + } + + NumberAnimation { + target: root.target + property: "scale" + from: root.scaleTo + to: root.scaleFrom + duration: Appearance.anim.durations.normal / 2 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standardDecel + } + } +} + diff --git a/modules/controlcenter/launcher/LauncherPane.qml b/modules/controlcenter/launcher/LauncherPane.qml index 30e2953..a8c5c76 100644 --- a/modules/controlcenter/launcher/LauncherPane.qml +++ b/modules/controlcenter/launcher/LauncherPane.qml @@ -426,55 +426,30 @@ Item { } Behavior on paneId { - SequentialAnimation { - ParallelAnimation { - Anim { + PaneTransition { + target: rightLauncherLoader + propertyActions: [ + PropertyAction { + target: rightLauncherPane + property: "displayedApp" + value: rightLauncherPane.pane + }, + PropertyAction { target: rightLauncherLoader - property: "opacity" - to: 0 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - Anim { + property: "active" + value: false + }, + PropertyAction { + target: rightLauncherPane + property: "targetComponent" + value: rightLauncherPane.nextComponent + }, + PropertyAction { target: rightLauncherLoader - property: "scale" - to: 0.8 - easing.bezierCurve: Appearance.anim.curves.standardAccel + property: "active" + value: true } - } - PropertyAction { - target: rightLauncherPane - property: "displayedApp" - value: rightLauncherPane.pane - } - PropertyAction { - target: rightLauncherLoader - property: "active" - value: false - } - PropertyAction { - target: rightLauncherPane - property: "targetComponent" - value: rightLauncherPane.nextComponent - } - PropertyAction { - target: rightLauncherLoader - property: "active" - value: true - } - ParallelAnimation { - Anim { - target: rightLauncherLoader - property: "opacity" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - Anim { - target: rightLauncherLoader - property: "scale" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - } + ] } } @@ -639,10 +614,4 @@ Item { } } } - - component Anim: NumberAnimation { - target: rightLauncherLoader - duration: Appearance.anim.durations.normal / 2 - easing.type: Easing.BezierSpline - } } diff --git a/modules/controlcenter/network/EthernetPane.qml b/modules/controlcenter/network/EthernetPane.qml index 6a50cde..fc979c3 100644 --- a/modules/controlcenter/network/EthernetPane.qml +++ b/modules/controlcenter/network/EthernetPane.qml @@ -77,40 +77,15 @@ RowLayout { } Behavior on paneId { - SequentialAnimation { - ParallelAnimation { - Anim { + PaneTransition { + target: loader + propertyActions: [ + PropertyAction { target: loader - property: "opacity" - to: 0 - easing.bezierCurve: Appearance.anim.curves.standardAccel + property: "targetComponent" + value: loader.nextComponent } - Anim { - target: loader - property: "scale" - to: 0.8 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - } - PropertyAction { - target: loader - property: "targetComponent" - value: loader.nextComponent - } - ParallelAnimation { - Anim { - target: loader - property: "opacity" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - Anim { - target: loader - property: "scale" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - } + ] } } @@ -153,10 +128,4 @@ RowLayout { } } } - - component Anim: NumberAnimation { - target: loader - duration: Appearance.anim.durations.normal / 2 - easing.type: Easing.BezierSpline - } } \ No newline at end of file diff --git a/modules/controlcenter/network/NetworkingPane.qml b/modules/controlcenter/network/NetworkingPane.qml index 55c70d2..127a42a 100644 --- a/modules/controlcenter/network/NetworkingPane.qml +++ b/modules/controlcenter/network/NetworkingPane.qml @@ -447,7 +447,7 @@ Item { property var ethernetPane: root.session.ethernet.active property var wirelessPane: root.session.network.active property var pane: ethernetPane || wirelessPane - property string paneId: ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : "") + property string paneId: ethernetPane ? ("eth:" + (ethernetPane.interface || "")) : (wirelessPane ? ("wifi:" + (wirelessPane.ssid || wirelessPane.bssid || "")) : "settings") property Component targetComponent: settings property Component nextComponent: settings @@ -463,16 +463,16 @@ Item { Connections { target: root.session.ethernet function onActiveChanged() { - nextComponent = getComponentForPane(); - paneId = ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : ""); + rightPaneItem.nextComponent = rightPaneItem.getComponentForPane(); + rightPaneItem.paneId = rightPaneItem.ethernetPane ? ("eth:" + (rightPaneItem.ethernetPane.interface || "")) : (rightPaneItem.wirelessPane ? ("wifi:" + (rightPaneItem.wirelessPane.ssid || rightPaneItem.wirelessPane.bssid || "")) : "settings"); } } Connections { target: root.session.network function onActiveChanged() { - nextComponent = getComponentForPane(); - paneId = ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : ""); + rightPaneItem.nextComponent = rightPaneItem.getComponentForPane(); + rightPaneItem.paneId = rightPaneItem.ethernetPane ? ("eth:" + (rightPaneItem.ethernetPane.interface || "")) : (rightPaneItem.wirelessPane ? ("wifi:" + (rightPaneItem.wirelessPane.ssid || rightPaneItem.wirelessPane.bssid || "")) : "settings"); } } @@ -489,57 +489,18 @@ Item { asynchronous: true sourceComponent: rightPaneItem.targetComponent - - Connections { - target: rightPaneItem - function onPaneIdChanged() { - rightPaneItem.targetComponent = rightPaneItem.nextComponent; - } - } } Behavior on paneId { - SequentialAnimation { - ParallelAnimation { - Anim { - target: rightLoader - property: "opacity" - to: 0 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - Anim { - target: rightLoader - property: "scale" - to: 0.8 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - } - PropertyAction { - target: rightPaneItem - property: "targetComponent" - value: rightPaneItem.nextComponent - } - ParallelAnimation { - Anim { - target: rightLoader - property: "opacity" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - Anim { - target: rightLoader - property: "scale" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel + PaneTransition { + target: rightLoader + propertyActions: [ + PropertyAction { + target: rightPaneItem + property: "targetComponent" + value: rightPaneItem.nextComponent } - } - } - } - - Connections { - target: rightPaneItem - function onPaneIdChanged() { - rightPaneItem.targetComponent = rightPaneItem.nextComponent; + ] } } } @@ -621,11 +582,6 @@ Item { z: 1000 } - component Anim: NumberAnimation { - duration: Appearance.anim.durations.normal / 2 - easing.type: Easing.BezierSpline - } - function checkSavedProfileForNetwork(ssid: string): void { if (ssid && ssid.length > 0) { Nmcli.loadSavedConnections(() => {}); diff --git a/modules/controlcenter/network/WirelessPane.qml b/modules/controlcenter/network/WirelessPane.qml index 22364a1..0c8f0ae 100644 --- a/modules/controlcenter/network/WirelessPane.qml +++ b/modules/controlcenter/network/WirelessPane.qml @@ -76,40 +76,15 @@ RowLayout { } Behavior on paneId { - SequentialAnimation { - ParallelAnimation { - Anim { + PaneTransition { + target: loader + propertyActions: [ + PropertyAction { target: loader - property: "opacity" - to: 0 - easing.bezierCurve: Appearance.anim.curves.standardAccel + property: "targetComponent" + value: loader.nextComponent } - Anim { - target: loader - property: "scale" - to: 0.8 - easing.bezierCurve: Appearance.anim.curves.standardAccel - } - } - PropertyAction { - target: loader - property: "targetComponent" - value: loader.nextComponent - } - ParallelAnimation { - Anim { - target: loader - property: "opacity" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - Anim { - target: loader - property: "scale" - to: 1 - easing.bezierCurve: Appearance.anim.curves.standardDecel - } - } + ] } } @@ -158,10 +133,4 @@ RowLayout { session: root.session z: 1000 } - - component Anim: NumberAnimation { - target: loader - duration: Appearance.anim.durations.normal / 2 - easing.type: Easing.BezierSpline - } } \ No newline at end of file -- cgit v1.2.3-freya