controlcenter: collapsiblegroups animation and styling tweaked

3 files changed, 70 insertions, 64 deletions

diff --git a/components/StateLayer.qml b/components/StateLayer.qml
index d86e782..a20e266 100644
--- a/components/StateLayer.qml
+++ b/components/StateLayer.qml
@@ -6,6 +6,7 @@ MouseArea {
     id: root
 
     property bool disabled
+    property bool showHoverBackground: true
     property color color: Colours.palette.m3onSurface
     property real radius: parent?.radius ?? 0
     property alias rect: hoverLayer
@@ -75,7 +76,7 @@ MouseArea {
 
         anchors.fill: parent
 
-        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.12 : (root.showHoverBackground && root.containsMouse) ? 0.08 : 0)
         radius: root.radius
 
         StyledRect {
diff --git a/components/controls/CollapsibleSection.qml b/components/controls/CollapsibleSection.qml
index cb6e62a..a22ad99 100644
--- a/components/controls/CollapsibleSection.qml
+++ b/components/controls/CollapsibleSection.qml
@@ -15,71 +15,96 @@ ColumnLayout {
 
     signal toggleRequested
 
-    spacing: Appearance.spacing.small / 2
+    spacing: 0
     Layout.fillWidth: true
 
     Item {
         id: sectionHeaderItem
         Layout.fillWidth: true
-        Layout.preferredHeight: sectionHeader.implicitHeight
+        Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
 
-        ColumnLayout {
-            id: sectionHeader
+        RowLayout {
+            id: titleRow
             anchors.left: parent.left
             anchors.right: parent.right
-            spacing: Appearance.spacing.small
-
-            RowLayout {
-                Layout.fillWidth: true
-                spacing: Appearance.spacing.small
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: Appearance.padding.normal
+            anchors.rightMargin: Appearance.padding.normal
+            spacing: Appearance.spacing.normal
 
-                StyledText {
-                    Layout.topMargin: Appearance.spacing.large
-                    text: root.title
-                    font.pointSize: Appearance.font.size.larger
-                    font.weight: 500
-                }
+            StyledText {
+                text: root.title
+                font.pointSize: Appearance.font.size.normal
+                font.weight: 500
+            }
 
-                Item {
-                    Layout.fillWidth: true
-                }
+            Item {
+                Layout.fillWidth: true
+            }
 
-                MaterialIcon {
-                    text: "expand_more"
-                    rotation: root.expanded ? 180 : 0
-                    color: Colours.palette.m3onSurface
-                    Behavior on rotation {
-                        Anim {}
+            MaterialIcon {
+                text: "expand_more"
+                rotation: root.expanded ? 180 : 0
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.normal
+                Behavior on rotation {
+                    Anim {
+                        duration: Appearance.anim.durations.short
+                        easing.bezierCurve: Appearance.anim.curves.standard
                     }
                 }
             }
+        }
 
-            StateLayer {
-                anchors.fill: parent
-                anchors.leftMargin: -Appearance.padding.normal
-                anchors.rightMargin: -Appearance.padding.normal
-                function onClicked(): void {
-                    root.toggleRequested();
-                    root.expanded = !root.expanded;
-                }
-            }
-
-            StyledText {
-                visible: root.expanded && root.description !== ""
-                text: root.description
-                color: Colours.palette.m3outline
-                Layout.fillWidth: true
+        StateLayer {
+            anchors.fill: parent
+            color: Colours.palette.m3onSurface
+            radius: Appearance.rounding.normal
+            showHoverBackground: false
+            function onClicked(): void {
+                root.toggleRequested();
+                root.expanded = !root.expanded;
             }
         }
     }
 
+    StyledText {
+        visible: root.expanded && root.description !== ""
+        Layout.fillWidth: true
+        Layout.leftMargin: Appearance.padding.normal
+        Layout.rightMargin: Appearance.padding.normal
+        Layout.topMargin: Appearance.spacing.smaller
+        Layout.bottomMargin: Appearance.spacing.small
+        text: root.description
+        color: Colours.palette.m3onSurfaceVariant
+        font.pointSize: Appearance.font.size.small
+    }
+
     default property alias content: contentColumn.data
 
-    ColumnLayout {
-        id: contentColumn
+    Item {
+        id: contentWrapper
         Layout.fillWidth: true
-        visible: root.expanded
-        spacing: Appearance.spacing.small / 2
+        Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+        clip: true
+
+        Behavior on Layout.preferredHeight {
+            Anim {
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        ColumnLayout {
+            id: contentColumn
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.leftMargin: Appearance.padding.normal
+            anchors.rightMargin: Appearance.padding.normal
+            anchors.topMargin: Appearance.spacing.small
+            anchors.bottomMargin: Appearance.spacing.small
+            spacing: Appearance.spacing.small
+        }
     }
 }
 
diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index fc338f9..e4d5892 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -284,10 +284,6 @@ RowLayout {
                     Layout.fillWidth: true
                     implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0
 
-                    Behavior on implicitHeight {
-                        Anim {}
-                    }
-
                     model: M3Variants.list
                     spacing: Appearance.spacing.small / 2
                     clip: true
@@ -379,10 +375,6 @@ RowLayout {
                     Layout.fillWidth: true
                     implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0
 
-                    Behavior on implicitHeight {
-                        Anim {}
-                    }
-
                     model: Schemes.list
                     spacing: Appearance.spacing.small / 2
                     clip: true
@@ -556,10 +548,6 @@ RowLayout {
                     Layout.fillWidth: true
                     implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                    Behavior on implicitHeight {
-                        Anim {}
-                    }
-
                     model: Qt.fontFamilies()
                     spacing: Appearance.spacing.small / 2
                     clip: true
@@ -633,10 +621,6 @@ RowLayout {
                     Layout.fillWidth: true
                     implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                    Behavior on implicitHeight {
-                        Anim {}
-                    }
-
                     model: Qt.fontFamilies()
                     spacing: Appearance.spacing.small / 2
                     clip: true
@@ -710,10 +694,6 @@ RowLayout {
                     Layout.fillWidth: true
                     implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                    Behavior on implicitHeight {
-                        Anim {}
-                    }
-
                     model: Qt.fontFamilies()
                     spacing: Appearance.spacing.small / 2
                     clip: true