controlcenter: collapsiblegroups animation and styling tweaked

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 {

components/controls/CollapsibleSection.qml

@@ -15,28 +15,26 @@ 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
-            anchors.left: parent.left
-            anchors.right: parent.right
-            spacing: Appearance.spacing.small
 
         RowLayout {
-                Layout.fillWidth: true
+            id: titleRow
-                spacing: Appearance.spacing.small
+            anchors.left: parent.left
+            anchors.right: parent.right
+            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.pointSize: Appearance.font.size.normal
                 font.weight: 500
             }
 
@@ -47,39 +45,66 @@ ColumnLayout {
             MaterialIcon {
                 text: "expand_more"
                 rotation: root.expanded ? 180 : 0
-                    color: Colours.palette.m3onSurface
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.normal
                 Behavior on rotation {
-                        Anim {}
+                    Anim {
+                        duration: Appearance.anim.durations.short
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
                 }
             }
         }
 
         StateLayer {
             anchors.fill: parent
-                anchors.leftMargin: -Appearance.padding.normal
+            color: Colours.palette.m3onSurface
-                anchors.rightMargin: -Appearance.padding.normal
+            radius: Appearance.rounding.normal
+            showHoverBackground: false
             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
-            }
+        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 {
+    Item {
-        id: contentColumn
+        id: contentWrapper
         Layout.fillWidth: true
-        visible: root.expanded
+        Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
-        spacing: Appearance.spacing.small / 2
+        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
+        }
     }
 }
 

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