Add drawer on the left.

imports/Spectral/Page/Room.qml

@@ -1,63 +0,0 @@
-import QtQuick 2.9
-
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
-
-import Spectral.Panel 2.0
-import Spectral.Component 2.0
-import Spectral.Effect 2.0
-
-import Spectral 0.1
-import Spectral.Setting 0.1
-
-Page {
-    property alias connection: roomListModel.connection
-    property alias enteredRoom: roomListForm.enteredRoom
-    property alias filter: roomListForm.filter
-
-    id: page
-
-    RoomListModel {
-        id: roomListModel
-
-        onNewMessage: if (!window.active) spectralController.postNotification(roomId, eventId, roomName, senderName, text, icon, iconPath)
-    }
-
-    SplitView {
-        anchors.fill: parent
-
-        RoomListPanel {
-            width: page.width * 0.35
-            Layout.minimumWidth: 64
-
-            id: roomListForm
-
-            clip: true
-
-            listModel: roomListModel
-
-            onWidthChanged: {
-                if (width < 240) width = 64
-            }
-
-            onLeaveRoom: roomForm.saveReadMarker(room)
-        }
-
-        RoomPanel {
-            Layout.fillWidth: true
-            Layout.minimumWidth: 480
-
-            id: roomForm
-
-            clip: true
-
-            currentRoom: roomListForm.enteredRoom
-        }
-    }
-
-    function goToEvent(eventID) {
-        roomForm.goToEvent(eventID)
-    }
-}

imports/Spectral/Page/Setting.qml

@@ -1,5 +0,0 @@
-import QtQuick 2.9
-
-SettingForm {
-    addAccountButton.onClicked: stackView.push(loginPage)
-}

imports/Spectral/Page/SettingAccountDelegate.qml

@@ -1,110 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-
-import Spectral.Component 2.0
-
-import Spectral 0.1
-import Spectral.Setting 0.1
-
-Column {
-    property bool expanded: false
-
-    spacing: 8
-
-    ItemDelegate {
-        width: accountSettingsListView.width
-        height: 64
-
-        Row {
-            anchors.fill: parent
-            anchors.margins: 8
-
-            spacing: 8
-
-            ImageItem {
-                width: parent.height
-                height: parent.height
-
-                hint: user.displayName
-                source: user.paintable
-            }
-
-            ColumnLayout {
-                Label {
-                    text: user.displayName
-                }
-                Label {
-                    text: user.id
-                }
-            }
-        }
-
-        onClicked: expanded = !expanded
-    }
-
-    ColumnLayout {
-        width: parent.width - 32
-        height: expanded ? implicitHeight : 0
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        spacing: 0
-
-        clip: true
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            Label {
-                text: "Homeserver:"
-            }
-            AutoTextField {
-                Layout.fillWidth: true
-
-                text: connection.homeserver
-                readOnly: true
-            }
-        }
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            spacing: 16
-
-            Label {
-                text: "Device ID:"
-            }
-            AutoTextField {
-                Layout.fillWidth: true
-
-                text: connection.deviceId
-                readOnly: true
-            }
-        }
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            spacing: 16
-
-            Label {
-                text: "Access Token:"
-            }
-            AutoTextField {
-                Layout.fillWidth: true
-
-                text: connection.accessToken
-                readOnly: true
-            }
-        }
-
-        Button {
-            Layout.fillWidth: true
-
-            highlighted: true
-            text: "Logout"
-
-            onClicked: spectralController.logout(connection)
-        }
-    }
-}

imports/Spectral/Page/SettingCategoryDelegate.qml

@@ -1,11 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-ItemDelegate {
-    text: category
-
-    onClicked: {
-        settingStackView.clear()
-        settingStackView.push([accountForm, generalForm, appearanceForm, aboutForm][form])
-    }
-}

imports/Spectral/Page/SettingForm.ui.qml

@@ -1,185 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-import QtQuick.Layouts 1.3
-
-import Spectral.Component 2.0
-import Spectral.Effect 2.0
-
-import Spectral 0.1
-import Spectral.Setting 0.1
-
-Page {
-    property alias listModel: accountSettingsListView.model
-
-    property alias addAccountButton: addAccountButton
-
-    implicitWidth: 400
-    implicitHeight: 300
-
-    Page {
-        id: accountForm
-
-        parent: null
-
-        padding: 64
-
-        ColumnLayout {
-            anchors.fill: parent
-
-            AutoListView {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                id: accountSettingsListView
-
-                boundsBehavior: Flickable.DragOverBounds
-
-                clip: true
-
-                delegate: SettingAccountDelegate {}
-            }
-
-            Button {
-                Layout.fillWidth: true
-
-                id: addAccountButton
-
-                text: "Add Account"
-                flat: true
-                highlighted: true
-            }
-        }
-    }
-
-    Page {
-        id: generalForm
-
-        parent: null
-
-        padding: 64
-
-        Column {
-            Switch {
-                text: "Use press and hold instead of right click"
-                checked: MSettings.pressAndHold
-
-                onCheckedChanged: MSettings.pressAndHold = checked
-            }
-
-            Switch {
-                text: "Show tray icon"
-                checked: MSettings.showTray
-
-                onCheckedChanged: MSettings.showTray = checked
-            }
-
-            Switch {
-                text: "Confirm on Exit"
-                checked: MSettings.confirmOnExit
-
-                onCheckedChanged: MSettings.confirmOnExit = checked
-            }
-        }
-    }
-
-    Page {
-        id: appearanceForm
-
-        parent: null
-
-        padding: 64
-
-        Column {
-            Switch {
-                text: "Dark theme"
-                checked: MSettings.darkTheme
-
-                onCheckedChanged: MSettings.darkTheme = checked
-            }
-        }
-    }
-
-    Page {
-        id: aboutForm
-
-        parent: null
-
-        padding: 64
-
-        ColumnLayout {
-            spacing: 16
-            Image {
-                Layout.preferredWidth: 64
-                Layout.preferredHeight: 64
-
-                source: "qrc:/assets/img/icon.png"
-            }
-            Label {
-                text: "Spectral, an IM client for the Matrix protocol."
-            }
-            Label {
-                text: "Released under GNU General Public License, version 3."
-            }
-        }
-    }
-
-    Rectangle {
-        width: 240
-        height: parent.height
-        z: 10
-
-        id: settingDrawer
-
-        color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
-
-        layer.enabled: true
-        layer.effect: ElevationEffect {
-            elevation: 4
-        }
-
-        Column {
-            anchors.fill: parent
-
-            Repeater {
-                model: ListModel {
-                    ListElement {
-                        category: "Accounts"
-                        form: 0
-                    }
-                    ListElement {
-                        category: "General"
-                        form: 1
-                    }
-                    ListElement {
-                        category: "Appearance"
-                        form: 2
-                    }
-                    ListElement {
-                        category: "About"
-                        form: 3
-                    }
-                }
-
-                delegate: SettingCategoryDelegate {
-                    width: parent.width
-                }
-            }
-        }
-    }
-
-    StackView {
-        anchors.fill: parent
-        anchors.leftMargin: settingDrawer.width
-
-        id: settingStackView
-
-        initialItem: aboutForm
-    }
-}
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
- ##^##*/

imports/Spectral/Panel/RoomListPanel.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls.Material 2.2
 
 import Spectral.Component 2.0
 import Spectral.Menu 2.0
+import Spectral.Effect 2.0
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -90,70 +91,205 @@ Rectangle {
 
         edge: Qt.LeftEdge
 
+        Component {
+            id: mainPage
+
+            ColumnLayout {
+                readonly property string title: "Main"
+
+                id: mainColumn
+
+                spacing: 0
+
+                Control {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 330
+
+                    padding: 24
+
+                    contentItem: ColumnLayout {
+                        spacing: 4
+
+                        ImageItem {
+                            Layout.preferredWidth: 200
+                            Layout.preferredHeight: 200
+                            Layout.margins: 12
+                            Layout.alignment: Qt.AlignHCenter
+
+                            source: root.user ? root.user.paintable : null
+                            hint: root.user ? root.user.displayName : "?"
+                        }
+
+                        Label {
+                            Layout.alignment: Qt.AlignHCenter
+
+                            text: root.user ? root.user.displayName : "No Name"
+                            color: "white"
+                            font.pointSize: 16.5
+                        }
+
+                        Label {
+                            Layout.alignment: Qt.AlignHCenter
+
+                            text: root.user ? root.user.id : "@example:matrix.org"
+                            color: "white"
+                            opacity: 0.7
+                            font.pointSize: 9.75
+                        }
+                    }
+
+                    background: Rectangle { color: Material.primary }
+
+                    ItemDelegate {
+                        anchors.fill: parent
+                    }
+                }
+
+                ScrollView {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                    ColumnLayout {
+                        width: mainColumn.width
+                        spacing: 0
+
+                        Repeater {
+                            model: AccountListModel {
+                                controller: spectralController
+                            }
+
+                            delegate: ItemDelegate {
+                                Layout.fillWidth: true
+
+                                text: user.displayName
+
+                                onClicked: {
+                                    controller.connection = connection
+                                    drawer.close()
+                                }
+                            }
+                        }
+
+                        Rectangle {
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: 1
+
+                            color: "#e7ebeb"
+                        }
+
+                        ItemDelegate {
+                            Layout.fillWidth: true
+
+                            text: "Settings"
+
+                            onClicked: stackView.push(settingsPage)
+                        }
+
+                        ItemDelegate {
+                            Layout.fillWidth: true
+
+                            text: "Exit"
+
+                            onClicked: Qt.quit()
+                        }
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: settingsPage
+
+            ScrollView {
+                readonly property string title: "Settings"
+
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                padding: 16
+
+                ColumnLayout {
+                    width: parent.width
+                    spacing: 0
+
+                    Switch {
+                        text: "Dark theme"
+                        checked: MSettings.darkTheme
+
+                        onCheckedChanged: MSettings.darkTheme = checked
+                    }
+
+                    Switch {
+                        text: "Use press and hold instead of right click"
+                        checked: MSettings.pressAndHold
+
+                        onCheckedChanged: MSettings.pressAndHold = checked
+                    }
+
+                    Switch {
+                        text: "Show tray icon"
+                        checked: MSettings.showTray
+
+                        onCheckedChanged: MSettings.showTray = checked
+                    }
+
+                    Switch {
+                        text: "Confirm on Exit"
+                        checked: MSettings.confirmOnExit
+
+                        onCheckedChanged: MSettings.confirmOnExit = checked
+                    }
+                }
+            }
+        }
+
         ColumnLayout {
-            width: parent.width
+            anchors.fill: parent
+
             spacing: 0
 
             Control {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 330
+                Layout.preferredHeight: 64
 
-                padding: 24
+                visible: stackView.depth > 1
 
-                contentItem: ColumnLayout {
+                contentItem: RowLayout {
-                    spacing: 4
+                    anchors.fill: parent
+                    ToolButton {
+                        Layout.preferredWidth: height
+                        Layout.fillHeight: true
 
-                    ImageItem {
+                        contentItem: MaterialIcon {
-                        Layout.preferredWidth: 200
+                            icon: "\ue5c4"
-                        Layout.preferredHeight: 200
+                            color: "white"
-                        Layout.margins: 12
+                        }
-                        Layout.alignment: Qt.AlignHCenter
 
-                        source: root.user ? root.user.paintable : null
+                        onClicked: stackView.pop()
-                        hint: root.user ? root.user.displayName : "?"
                     }
-
                     Label {
-                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
 
-                        text: root.user ? root.user.displayName : "No Name"
+                        text: stackView.currentItem.title
                         color: "white"
-                        font.pointSize: 16.5
+                        font.pointSize: 13.5
-                    }
+                        elide: Label.ElideRight
-
-                    Label {
-                        Layout.alignment: Qt.AlignHCenter
-
-                        text: root.user ? root.user.id : "@example:matrix.org"
-                        color: "white"
-                        opacity: 0.7
-                        font.pointSize: 9.75
                     }
                 }
 
-                background: Rectangle { color: "#455A64" }
+                background: Rectangle {
-            }
+                    color: Material.primary
-
-            Repeater {
-                model: AccountListModel {
-                    controller: spectralController
-                }
-
-                delegate: ItemDelegate {
-                    Layout.fillWidth: true
-
-                    text: user.displayName
-
-                    onClicked: controller.connection = connection
                 }
             }
 
-            ItemDelegate {
+            StackView {
                 Layout.fillWidth: true
+                Layout.fillHeight: true
 
-                text: "Exit"
+                id: stackView
 
-                onClicked: Qt.quit()
+                initialItem: mainPage
             }
         }
     }
@@ -163,9 +299,13 @@ Rectangle {
         spacing: 0
 
         Control {
+            readonly property bool isSearching: searchField.text
+
             Layout.fillWidth: true
             Layout.preferredHeight: 64
 
+            id: roomListHeader
+
             topPadding: 12
             bottomPadding: 12
             leftPadding: 12
@@ -177,13 +317,17 @@ Rectangle {
                     Layout.fillHeight: true
 
                     contentItem: MaterialIcon {
-                        icon: searchField.visible ? "\ue5cd" : "\ue8b6"
+                        icon: roomListHeader.isSearching ? "\ue5cd" : "\ue8b6"
-                        color: searchField.visible ? "#1D333E" : "#7F7F7F"
+                        color: roomListHeader.isSearching ? "#1D333E" : "7F7F7F"
                     }
 
                     onClicked: {
-                        if (searchField.visible) searchField.clear()
+                        if (searchField.focus) {
-                        searchField.visible = !searchField.visible
+                            searchField.clear()
+                            searchField.focus = false
+                        } else {
+                            searchField.focus = true
+                        }
                     }
                 }
 
@@ -193,7 +337,6 @@ Rectangle {
 
                     id: searchField
 
-                    visible: false
                     topPadding: 0
                     bottomPadding: 0
                     placeholderText: "Search..."
@@ -201,25 +344,12 @@ Rectangle {
                     background: Item {}
                 }
 
-                Label {
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    visible: !searchField.visible
-
-                    text: root.user ? root.user.displayName : "No Name"
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
-                    font.pointSize: 12
-                    color: "#7F7F7F"
-                    verticalAlignment: Text.AlignVCenter
-                }
-
                 ImageItem {
                     Layout.preferredWidth: height
                     Layout.fillHeight: true
+                    Layout.alignment: Qt.AlignRight
 
-                    visible: !searchField.visible
+                    visible: !roomListHeader.isSearching
 
                     source: root.user ? root.user.paintable : null
                     hint: root.user ? root.user.displayName : "?"
@@ -265,17 +395,17 @@ Rectangle {
                     opacity: 0.6
                     wrapMode: Text.Wrap
                 }
-                ItemDelegate {
-                    Layout.preferredHeight: 32
-                    Layout.alignment: Qt.AlignRight
-
-                    text: "Dismiss"
-                    Material.foreground: "white"
-                    onClicked: errorControl.visible = false
-                }
             }
 
-            background: Rectangle { color: "#273338" }
+            background: Rectangle {
+                color: "#273338"
+            }
+
+            ItemDelegate {
+                anchors.fill: parent
+
+                onClicked: errorControl.visible = false
+            }
         }
 
         AutoListView {

qml/main.qml

@@ -112,9 +112,9 @@ ApplicationWindow {
 
     }
 
-    Component.onCompleted: {
+//    Component.onCompleted: {
-        spectralController.initiated.connect(function() {
+//        spectralController.initiated.connect(function() {
-            if (spectralController.accountCount == 0) stackView.push(loginPage)
+//            if (spectralController.accountCount == 0) stackView.push(loginPage)
-        })
+//        })
-    }
+//    }
 }

res.qrc

@@ -21,7 +21,6 @@
         <file>imports/Spectral/Menu/RoomContextMenu.qml</file>
         <file>imports/Spectral/Page/Login.qml</file>
         <file>imports/Spectral/Page/qmldir</file>
-        <file>imports/Spectral/Page/Room.qml</file>
         <file>assets/font/material.ttf</file>
         <file>assets/img/icon.icns</file>
         <file>assets/img/icon.ico</file>
@@ -30,10 +29,6 @@
         <file>imports/Spectral/Font/MaterialFont.qml</file>
         <file>imports/Spectral/Font/qmldir</file>
         <file>imports/Spectral/Setting/qmldir</file>
-        <file>imports/Spectral/Page/Setting.qml</file>
-        <file>imports/Spectral/Page/SettingForm.ui.qml</file>
-        <file>imports/Spectral/Page/SettingCategoryDelegate.qml</file>
-        <file>imports/Spectral/Page/SettingAccountDelegate.qml</file>
         <file>imports/Spectral/Page/LoginForm.ui.qml</file>
         <file>imports/Spectral/Panel/qmldir</file>
         <file>imports/Spectral/Panel/RoomDrawer.qml</file>