dms: Material Animation Refactor

- Thanks Google for Material 3 Expressive stuffs - Thanks Caelestia shell for pushing qml limits to showcase the blueprint
2026-04-13 17:22:08 -04:00 · 2026-02-08 20:24:37 -05:00
parent d775974a90
commit 37cc4ab197
16 changed files with 442 additions and 34 deletions
--- a/quickshell/Widgets/DankCollapsibleSection.qml
+++ b/quickshell/Widgets/DankCollapsibleSection.qml
@@ -0,0 +1,130 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Common
+import qs.Widgets
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    property string description: ""
+    property bool expanded: false
+    property bool showBackground: false
+    property alias headerColor: headerRect.color
+
+    signal toggleRequested
+
+    spacing: Theme.spacingS
+    Layout.fillWidth: true
+
+    Rectangle {
+        id: headerRect
+        Layout.fillWidth: true
+        Layout.preferredHeight: Math.max(titleRow.implicitHeight + Theme.paddingM * 2, 48)
+        radius: Theme.cornerRadius
+        color: "transparent"
+
+        RowLayout {
+            id: titleRow
+            anchors.fill: parent
+            anchors.leftMargin: Theme.paddingM
+            anchors.rightMargin: Theme.paddingM
+            spacing: Theme.spacingM
+
+            StyledText {
+                text: root.title
+                font.pixelSize: Theme.fontSizeLarge
+                font.weight: Font.Medium
+                Layout.fillWidth: true
+            }
+
+            DankIcon {
+                name: "expand_more"
+                size: Theme.iconSizeSmall
+                rotation: root.expanded ? 180 : 0
+
+                Behavior on rotation {
+                    enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
+                    DankAnim {
+                        duration: Theme.shortDuration
+                        easing.bezierCurve: Theme.expressiveCurves.standard
+                    }
+                }
+            }
+        }
+
+        StateLayer {
+            anchors.fill: parent
+            onClicked: {
+                root.toggleRequested();
+                root.expanded = !root.expanded;
+            }
+        }
+    }
+
+    default property alias content: contentColumn.data
+
+    Item {
+        id: contentWrapper
+        Layout.fillWidth: true
+        Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Theme.spacingS * 2) : 0
+        clip: true
+
+        Behavior on Layout.preferredHeight {
+            enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
+            DankAnim {
+                duration: Theme.expressiveDurations.expressiveDefaultSpatial
+                easing.bezierCurve: Theme.expressiveCurves.standard
+            }
+        }
+
+        Rectangle {
+            id: backgroundRect
+            anchors.fill: parent
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainer
+            opacity: root.showBackground && root.expanded ? 1.0 : 0.0
+            visible: root.showBackground
+
+            Behavior on opacity {
+                enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
+                DankAnim {
+                    duration: Theme.shortDuration
+                    easing.bezierCurve: Theme.expressiveCurves.standard
+                }
+            }
+        }
+
+        ColumnLayout {
+            id: contentColumn
+            anchors.left: parent.left
+            anchors.right: parent.right
+            y: Theme.spacingS
+            anchors.leftMargin: Theme.paddingM
+            anchors.rightMargin: Theme.paddingM
+            anchors.bottomMargin: Theme.spacingS
+            spacing: Theme.spacingS
+            opacity: root.expanded ? 1.0 : 0.0
+
+            Behavior on opacity {
+                enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
+                DankAnim {
+                    duration: Theme.shortDuration
+                    easing.bezierCurve: Theme.expressiveCurves.standard
+                }
+            }
+
+            StyledText {
+                id: descriptionText
+                Layout.fillWidth: true
+                Layout.topMargin: root.description !== "" ? Theme.spacingXS : 0
+                Layout.bottomMargin: root.description !== "" ? Theme.spacingS : 0
+                visible: root.description !== ""
+                text: root.description
+                color: Theme.surfaceTextSecondary
+                font.pixelSize: Theme.fontSizeSmall
+                wrapMode: Text.Wrap
+            }
+        }
+    }
+}