controlcenter: minor adjustments of accordion menu

1 files changed, 142 insertions, 113 deletions

diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml
index cf6e85a..616d479 100644
--- a/modules/controlcenter/audio/AudioPane.qml
+++ b/modules/controlcenter/audio/AudioPane.qml
@@ -24,166 +24,195 @@ RowLayout {
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        ColumnLayout {
+        StyledFlickable {
             anchors.fill: parent
             anchors.margins: Appearance.padding.large + Appearance.padding.normal
             anchors.leftMargin: Appearance.padding.large
             anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+            flickableDirection: Flickable.VerticalFlick
+            contentHeight: leftContent.height
 
-            spacing: Appearance.spacing.small
+            ColumnLayout {
+                id: leftContent
 
-            RowLayout {
-                spacing: Appearance.spacing.smaller
+                anchors.left: parent.left
+                anchors.right: parent.right
+                spacing: Appearance.spacing.normal
 
-                StyledText {
-                    text: qsTr("Settings")
-                    font.pointSize: Appearance.font.size.large
-                    font.weight: 500
+                // Settings header above the collapsible sections
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: Appearance.spacing.smaller
+
+                    StyledText {
+                        text: qsTr("Settings")
+                        font.pointSize: Appearance.font.size.large
+                        font.weight: 500
+                    }
+
+                    Item {
+                        Layout.fillWidth: true
+                    }
                 }
 
-                Item {
+                CollapsibleSection {
+                    id: outputDevicesSection
+
                     Layout.fillWidth: true
-                }
-            }
+                    title: qsTr("Output devices")
+                    expanded: true
 
-            StyledText {
-                text: qsTr("Output devices (%1)").arg(Audio.sinks.length)
-                font.pointSize: Appearance.font.size.normal
-                font.weight: 500
-            }
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        spacing: Appearance.spacing.small
 
-            StyledText {
-                text: qsTr("All available output devices")
-                color: Colours.palette.m3outline
-            }
+                        RowLayout {
+                            Layout.fillWidth: true
+                            spacing: Appearance.spacing.small
 
-            StyledListView {
-                id: outputView
+                            StyledText {
+                                text: qsTr("Devices (%1)").arg(Audio.sinks.length)
+                                font.pointSize: Appearance.font.size.normal
+                                font.weight: 500
+                            }
+                        }
 
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+                        StyledText {
+                            Layout.fillWidth: true
+                            text: qsTr("All available output devices")
+                            color: Colours.palette.m3outline
+                        }
 
-                model: Audio.sinks
-                spacing: Appearance.spacing.small / 2
-                clip: true
+                        Repeater {
+                            Layout.fillWidth: true
+                            model: Audio.sinks
 
-                StyledScrollBar.vertical: StyledScrollBar {
-                    flickable: outputView
-                }
+                            delegate: StyledRect {
+                                required property var modelData
 
-                delegate: StyledRect {
-                    required property var modelData
+                                Layout.fillWidth: true
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
+                                color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.sink?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
+                                radius: Appearance.rounding.normal
+                                border.width: Audio.sink?.id === modelData.id ? 1 : 0
+                                border.color: Colours.palette.m3primary
 
-                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.sink?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
-                    radius: Appearance.rounding.normal
-                    border.width: Audio.sink?.id === modelData.id ? 1 : 0
-                    border.color: Colours.palette.m3primary
+                                StateLayer {
+                                    function onClicked(): void {
+                                        Audio.setAudioSink(modelData);
+                                    }
+                                }
 
-                    StateLayer {
-                        function onClicked(): void {
-                            Audio.setAudioSink(modelData);
-                        }
-                    }
+                                RowLayout {
+                                    id: outputRowLayout
 
-                    RowLayout {
-                        id: outputRowLayout
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.margins: Appearance.padding.normal
 
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.margins: Appearance.padding.normal
+                                    spacing: Appearance.spacing.normal
 
-                        spacing: Appearance.spacing.normal
+                                    MaterialIcon {
+                                        text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
+                                        font.pointSize: Appearance.font.size.large
+                                        fill: Audio.sink?.id === modelData.id ? 1 : 0
+                                    }
 
-                        MaterialIcon {
-                            text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
-                            font.pointSize: Appearance.font.size.large
-                            fill: Audio.sink?.id === modelData.id ? 1 : 0
-                        }
+                                    StyledText {
+                                        Layout.fillWidth: true
+                                        elide: Text.ElideRight
+                                        maximumLineCount: 1
 
-                        StyledText {
-                            Layout.fillWidth: true
+                                        text: modelData.description || qsTr("Unknown")
+                                        font.weight: Audio.sink?.id === modelData.id ? 500 : 400
+                                    }
+                                }
 
-                            text: modelData.description || qsTr("Unknown")
-                            font.weight: Audio.sink?.id === modelData.id ? 500 : 400
+                                implicitHeight: outputRowLayout.implicitHeight + Appearance.padding.normal * 2
+                            }
                         }
                     }
-
-                    implicitHeight: outputRowLayout.implicitHeight + Appearance.padding.normal * 2
                 }
-            }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                text: qsTr("Input devices (%1)").arg(Audio.sources.length)
-                font.pointSize: Appearance.font.size.normal
-                font.weight: 500
-            }
+                CollapsibleSection {
+                    id: inputDevicesSection
 
-            StyledText {
-                text: qsTr("All available input devices")
-                color: Colours.palette.m3outline
-            }
+                    Layout.fillWidth: true
+                    title: qsTr("Input devices")
+                    expanded: true
 
-            StyledListView {
-                id: inputView
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        spacing: Appearance.spacing.small
 
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+                        RowLayout {
+                            Layout.fillWidth: true
+                            spacing: Appearance.spacing.small
+
+                            StyledText {
+                                text: qsTr("Devices (%1)").arg(Audio.sources.length)
+                                font.pointSize: Appearance.font.size.normal
+                                font.weight: 500
+                            }
+                        }
 
-                model: Audio.sources
-                spacing: Appearance.spacing.small / 2
-                clip: true
+                        StyledText {
+                            Layout.fillWidth: true
+                            text: qsTr("All available input devices")
+                            color: Colours.palette.m3outline
+                        }
 
-                StyledScrollBar.vertical: StyledScrollBar {
-                    flickable: inputView
-                }
+                        Repeater {
+                            Layout.fillWidth: true
+                            model: Audio.sources
 
-                delegate: StyledRect {
-                    required property var modelData
+                            delegate: StyledRect {
+                                required property var modelData
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
+                                Layout.fillWidth: true
 
-                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.source?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
-                    radius: Appearance.rounding.normal
-                    border.width: Audio.source?.id === modelData.id ? 1 : 0
-                    border.color: Colours.palette.m3primary
+                                color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.source?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
+                                radius: Appearance.rounding.normal
+                                border.width: Audio.source?.id === modelData.id ? 1 : 0
+                                border.color: Colours.palette.m3primary
 
-                    StateLayer {
-                        function onClicked(): void {
-                            Audio.setAudioSource(modelData);
-                        }
-                    }
+                                StateLayer {
+                                    function onClicked(): void {
+                                        Audio.setAudioSource(modelData);
+                                    }
+                                }
 
-                    RowLayout {
-                        id: inputRowLayout
+                                RowLayout {
+                                    id: inputRowLayout
 
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.margins: Appearance.padding.normal
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.margins: Appearance.padding.normal
 
-                        spacing: Appearance.spacing.normal
+                                    spacing: Appearance.spacing.normal
 
-                        MaterialIcon {
-                            text: Audio.source?.id === modelData.id ? "mic" : "mic_external_on"
-                            font.pointSize: Appearance.font.size.large
-                            fill: Audio.source?.id === modelData.id ? 1 : 0
-                        }
+                                    MaterialIcon {
+                                        text: "mic"
+                                        font.pointSize: Appearance.font.size.large
+                                        fill: Audio.source?.id === modelData.id ? 1 : 0
+                                    }
 
-                        StyledText {
-                            Layout.fillWidth: true
+                                    StyledText {
+                                        Layout.fillWidth: true
+                                        elide: Text.ElideRight
+                                        maximumLineCount: 1
+
+                                        text: modelData.description || qsTr("Unknown")
+                                        font.weight: Audio.source?.id === modelData.id ? 500 : 400
+                                    }
+                                }
 
-                            text: modelData.description || qsTr("Unknown")
-                            font.weight: Audio.source?.id === modelData.id ? 500 : 400
+                                implicitHeight: inputRowLayout.implicitHeight + Appearance.padding.normal * 2
+                            }
                         }
                     }
-
-                    implicitHeight: inputRowLayout.implicitHeight + Appearance.padding.normal * 2
                 }
             }
         }