More UI tweaking.

qml/Setting.qml

@@ -28,7 +28,13 @@ Page {
 
                 id: accountSettingsListView
 
+                boundsBehavior: Flickable.DragOverBounds
+
+                clip: true
+
                 delegate: Column {
+                    property bool expanded: false
+
                     spacing: 16
 
                     SwipeDelegate {
@@ -79,23 +85,25 @@ Page {
                             SwipeDelegate.onClicked: matriqueController.logout(connection)
                         }
 
-                        onClicked: accountSettingsListView.currentIndex == index ? accountSettingsListView.currentIndex = -1 : accountSettingsListView.currentIndex = index
+                        onClicked: expanded = !expanded
                     }
 
                     ColumnLayout {
-                        visible: accountSettingsListView.currentIndex == index
                         width: parent.width - 32
+                        height: expanded ? implicitHeight : 0
                         anchors.horizontalCenter: parent.horizontalCenter
 
                         spacing: 0
 
+                        clip: true
+
                         ListView {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 32
 
                             orientation: ListView.Horizontal
 
-                            model: ["#498882", "#2196F3"]
+                            model: ["#498882", "#42a5f5", "#5c6bc0", "#7e57c2", "#ab47bc", "#ff7043"]
 
                             delegate: Rectangle {
                                 width: parent.height
@@ -155,6 +163,10 @@ Page {
                                 readOnly: true
                             }
                         }
+
+                        Behavior on height {
+                            PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
+                        }
                     }
                 }
             }

qml/component/SideNavButton.qml

@@ -8,12 +8,13 @@ import "qrc:/js/util.js" as Util
 ItemDelegate {
     property var page
     readonly property bool selected: stackView.currentItem === page
+    property color highlightColor: Material.accent
 
     Rectangle {
         width: selected ? 4 : 0
         height: parent.height
 
-        color: Material.accent
+        color: highlightColor
 
         Behavior on width {
             PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }

qml/main.qml

@@ -117,6 +117,8 @@ ApplicationWindow {
 
                     spacing: 0
 
+                    clip: true
+
                     delegate: SideNavButton {
                         width: parent.width
                         height: width
@@ -130,6 +132,8 @@ ApplicationWindow {
                             defaultColor: Material.accent
                         }
 
+                        highlightColor: matriqueController.color(user.id)
+
                         page: roomPage
 
                         onClicked: accountListView.currentConnection = connection