refactor: PaneTransition now component

This commit is contained in:
ATMDA 2025-11-19 13:10:09 -05:00
parent ad4213d45c
commit aff01f01a8
6 changed files with 156 additions and 221 deletions

View file

@ -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
Behavior on paneId {
PaneTransition {
target: rightLoader
propertyActions: [
PropertyAction {
target: rightBtPane
property: "targetComponent"
value: rightBtPane.nextComponent
}
Anim {
target: rightLoader
property: "scale"
to: 0.8
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
}
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
}
}

View file

@ -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<PropertyAction> 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
}
}
}

View file

@ -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
}
}

View file

@ -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
}
}

View file

@ -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
PaneTransition {
target: rightLoader
propertyActions: [
PropertyAction {
target: rightPaneItem
property: "targetComponent"
value: rightPaneItem.nextComponent
}
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
}
}
}
}
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(() => {});

View file

@ -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
}
}