dcontent: anim pane changes

2 files changed, 44 insertions, 1 deletions

diff --git a/modules/detachedcontent/bluetooth/BtPane.qml b/modules/detachedcontent/bluetooth/BtPane.qml
index 1428540..bd48c7d 100644
--- a/modules/detachedcontent/bluetooth/BtPane.qml
+++ b/modules/detachedcontent/bluetooth/BtPane.qml
@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
 import ".."
 import qs.widgets
 import qs.config
+import Quickshell.Bluetooth
 import QtQuick
 import QtQuick.Layouts
 
@@ -38,13 +39,47 @@ RowLayout {
         Layout.fillHeight: true
 
         Loader {
+            id: loader
+
+            property bool pane: root.session.bt.active
+
             anchors.fill: parent
             anchors.margins: Appearance.padding.large * 2 + Appearance.padding.normal
             anchors.leftMargin: Appearance.padding.large * 2
             anchors.rightMargin: Appearance.padding.large * 2 + Appearance.padding.normal / 2
 
             asynchronous: true
-            sourceComponent: root.session.bt.active ? details : settings
+            sourceComponent: pane ? details : settings
+
+            Behavior on pane {
+                SequentialAnimation {
+                    ParallelAnimation {
+                        Anim {
+                            property: "opacity"
+                            to: 0
+                            easing.bezierCurve: Appearance.anim.curves.standardAccel
+                        }
+                        Anim {
+                            property: "scale"
+                            to: 0.7
+                            easing.bezierCurve: Appearance.anim.curves.standardAccel
+                        }
+                    }
+                    PropertyAction {}
+                    ParallelAnimation {
+                        Anim {
+                            property: "opacity"
+                            to: 1
+                            easing.bezierCurve: Appearance.anim.curves.standardDecel
+                        }
+                        Anim {
+                            property: "scale"
+                            to: 1
+                            easing.bezierCurve: Appearance.anim.curves.standardDecel
+                        }
+                    }
+                }
+            }
         }
 
         InnerBorder {
@@ -76,4 +111,10 @@ RowLayout {
             }
         }
     }
+
+    component Anim: NumberAnimation {
+        target: loader
+        duration: Appearance.anim.durations.normal / 2
+        easing.type: Easing.BezierSpline
+    }
 }
diff --git a/modules/detachedcontent/bluetooth/Details.qml b/modules/detachedcontent/bluetooth/Details.qml
index a93bae2..6e77d2d 100644
--- a/modules/detachedcontent/bluetooth/Details.qml
+++ b/modules/detachedcontent/bluetooth/Details.qml
@@ -30,6 +30,7 @@ Item {
 
             MaterialIcon {
                 Layout.alignment: Qt.AlignHCenter
+                animate: true
                 text: Icons.getBluetoothIcon(root.device.icon)
                 font.pointSize: Appearance.font.size.extraLarge * 3
                 font.bold: true
@@ -37,6 +38,7 @@ Item {
 
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
+                animate: true
                 text: root.device.name
                 font.pointSize: Appearance.font.size.large
                 font.bold: true