refactor: PaneTransition now component
This commit is contained in:
parent
ad4213d45c
commit
aff01f01a8
6 changed files with 156 additions and 221 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
84
modules/controlcenter/components/PaneTransition.qml
Normal file
84
modules/controlcenter/components/PaneTransition.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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(() => {});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue