New Setting/Account page.

qml/Setting.qml

@@ -7,31 +7,84 @@ import Matrique.Settings 0.1
 
 import "component"
 import "form"
+import "qrc:/js/util.js" as Util
 
 Page {
     property alias listModel: accountSettingsListView.model
+
     Page {
         id: accountForm
+
         parent: null
 
         padding: 64
 
-        ListView {
+        ColumnLayout {
             anchors.fill: parent
 
+            ListView {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
                 id: accountSettingsListView
 
-            spacing: 0
+                delegate: SwipeDelegate {
+                    width: accountSettingsListView.width
+                    height: 64
 
-            delegate: RowLayout{
+                    clip: true
+
+                    Row {
+                        anchors.fill: parent
+                        anchors.margins: 8
+
+                        spacing: 8
+
+                        ImageItem {
+                            width: parent.height
+                            height: parent.height
+
+                            hint: name
+                            defaultColor: Util.stringToColor(name)
+                            image: avatar
+                        }
+
+                        ColumnLayout {
+                            Label {
+                                text: name
+                            }
                             Label {
                                 text: accountID
                             }
-                ItemDelegate {
-                    text: "Logout"
-                    onClicked: matriqueController.logout(connection);
                         }
                     }
+
+                    swipe.right: Rectangle {
+                        width: parent.height
+                        height: parent.height
+                        anchors.right: parent.right
+
+                        color: Material.accent
+
+                        MaterialIcon {
+                            anchors.fill: parent
+
+                            icon: "\ue879"
+                            color: "white"
+                        }
+
+                        SwipeDelegate.onClicked: matriqueController.logout(connection)
+                    }
+                }
+            }
+
+            Button {
+                text: "Add Account"
+                flat: true
+                highlighted: true
+
+                onClicked: Util.pushToStack(stackView, loginPage)
+            }
         }
     }
 
@@ -40,6 +93,8 @@ Page {
 
         parent: null
 
+        padding: 64
+
         Column {
             Switch {
                 text: "Lazy load at initial sync"
@@ -69,6 +124,8 @@ Page {
 
         parent: null
 
+        padding: 64
+
         Column {
             Switch {
                 text: "Dark theme"
@@ -95,6 +152,7 @@ Page {
 
     Page {
         id: aboutForm
+
         parent: null
 
         padding: 64
@@ -112,49 +170,53 @@ Page {
         }
     }
 
-    RowLayout {
+    Rectangle {
-        ColumnLayout {
+        width: 240
-            Layout.preferredWidth: 240
+        height: parent.height
-            Layout.fillHeight: true
 
-            spacing: 0
+        id: settingDrawer
+
+        color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
+
+        Column {
+            anchors.fill: parent
 
             ItemDelegate {
-                Layout.fillWidth: true
+                width: parent.width
 
                 text: "Account"
                 onClicked: pushToStack(accountForm)
             }
 
             ItemDelegate {
-                Layout.fillWidth: true
+                width: parent.width
 
                 text: "General"
                 onClicked: pushToStack(generalForm)
             }
 
             ItemDelegate {
-                Layout.fillWidth: true
+                width: parent.width
 
                 text: "Appearance"
                 onClicked: pushToStack(appearanceForm)
             }
 
             ItemDelegate {
-                Layout.fillWidth: true
+                width: parent.width
 
                 text: "About"
                 onClicked: pushToStack(aboutForm)
             }
         }
+    }
 
     StackView {
-            Layout.fillWidth: true
+        anchors.fill: parent
-            Layout.fillHeight: true
+        anchors.leftMargin: settingDrawer.width
 
         id: settingStackView
     }
-    }
 
     function pushToStack(item) {
         settingStackView.clear()

qml/component/ImageStatus.qml

@@ -1,79 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtGraphicalEffects 1.0
-import QtQuick.Controls.Material 2.2
-
-Item {
-    property bool round: true
-    property string source: ""
-    property string displayText: ""
-    readonly property bool showImage: source
-    readonly property bool showInitial: !showImage && displayText  || avatar.status != Image.Ready
-
-    id: item
-
-    Image {
-        width: item.width
-        height: item.width
-
-        id: avatar
-
-        visible: showImage
-        source: item.source
-
-        mipmap: true
-        layer.enabled: true
-        fillMode: Image.PreserveAspectCrop
-        sourceSize.width: item.width
-
-        layer.effect: OpacityMask {
-            maskSource: Item {
-                width: avatar.width
-                height: avatar.width
-                Rectangle {
-                    anchors.centerIn: parent
-                    width: avatar.width
-                    height: avatar.width
-                    radius: round? avatar.width / 2 : 0
-                }
-            }
-        }
-    }
-
-    Label {
-        anchors.fill: parent
-
-        color: "white"
-        visible: showInitial
-        text: showInitial ? getInitials(displayText)[0] : ""
-        font.pixelSize: 22
-        font.bold: true
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        background: Rectangle {
-            anchors.fill: parent
-            radius: round? width / 2 : 0
-            color: showInitial ? stringToColor(displayText) : Material.accent
-        }
-    }
-
-    function getInitials(text) {
-        if (!text) return "N"
-        var initial = text.toUpperCase().replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
-        if (!initial) return "N"
-        return initial
-    }
-
-    function stringToColor(str) {
-        var hash = 0;
-        for (var i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        var colour = '#';
-        for (var j = 0; j < 3; j++) {
-            var value = (hash >> (j * 8)) & 0xFF;
-            colour += ('00' + value.toString(16)).substr(-2);
-        }
-        return colour;
-    }
-}

qml/main.qml

@@ -242,19 +242,6 @@ ApplicationWindow {
                     }
                 }
 
-                SideNavButton {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: width
-
-                    MaterialIcon {
-                        anchors.fill: parent
-
-                        icon: "\ue8b8"
-                        color: "white"
-                    }
-                    page: loginPage
-                }
-
                 SideNavButton {
                     Layout.fillWidth: true
                     Layout.preferredHeight: width

res.qrc

@@ -6,7 +6,6 @@
         <file>asset/font/material.ttf</file>
         <file>qml/Login.qml</file>
         <file>qml/main.qml</file>
-        <file>qml/component/ImageStatus.qml</file>
         <file>qml/form/RoomForm.qml</file>
         <file>qml/Room.qml</file>
         <file>qml/component/SideNavButton.qml</file>

src/matriqueuser.h

@@ -17,7 +17,7 @@ class MatriqueUser : public User {
   QImage getAvatar() { return avatar(64); }
 
  signals:
-  void inheritedAvatarChanged(User* user, const Room* roomContext);
+  void inheritedAvatarChanged(User* user, const Room* roomContext); // https://bugreports.qt.io/browse/QTBUG-7684
 };
 
 #endif  // MATRIQUEUSER_H