Code cleanup && add minimum room management. #13

qml/Room.qml

@@ -15,7 +15,7 @@ Page {
 
         connection: page.connection
 
-//        onNewMessage:  trayIcon.showMessage("New message", "New message for room " + room.displayName)
+        onNewMessage:  trayIcon.showMessage("New message", "New message for room " + room.displayName)
     }
 
     RowLayout {

qml/component/AvatarContainer.qml

@@ -2,6 +2,8 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 
 Row {
+    readonly property bool avatarVisible: !sentByMe && aboveAuthor !== author || section !== aboveSection
+
     spacing: 6
 
     ImageStatus {
@@ -10,7 +12,7 @@ Row {
         width: height
         height: 40
         round: false
-        visible: !sentByMe && aboveAuthor !== author
+        visible: avatarVisible
         source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
         displayText: author.displayName
 
@@ -27,6 +29,6 @@ Row {
         width: height
         height: 40
         color: "transparent"
-        visible: !sentByMe && aboveAuthor === author
+        visible: !avatarVisible
     }
 }

qml/component/ButtonDelegate.qml

@@ -1,6 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-ItemDelegate {
-    id: itemDelegate
-}

qml/component/ImageStatus.qml

@@ -4,7 +4,6 @@ import QtGraphicalEffects 1.0
 import QtQuick.Controls.Material 2.2
 
 Item {
-    property bool opaqueBackground: false
     property bool round: true
     property string source: ""
     property string displayText: ""
@@ -13,14 +12,6 @@ Item {
 
     id: item
 
-    Rectangle {
-        width: item.width
-        height: item.width
-        radius: round ? item.width / 2 : 0
-        color: "white"
-        visible: opaqueBackground
-    }
-
     Image {
         id: avatar
         width: item.width

qml/component/SideNav.qml

@@ -3,9 +3,6 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 
-Item {
+Rectangle {
-    Rectangle {
+    color: Material.accent
-        anchors.fill: parent
-        color: Material.accent
-    }
 }

qml/component/SideNavButton.qml

@@ -24,7 +24,7 @@ Item {
         }
     }
 
-    ButtonDelegate {
+    ItemDelegate {
         id: buttonDelegate
         anchors.fill: parent
 

qml/component/TextDelegate.qml

@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3
 Rectangle {
     property bool flat: false
     property bool highlighted: false
-    property string displayText
+    property string displayText: ""
     property alias timeLabelVisible: timeText.visible
 
     property int maximumWidth

qml/form/DetailForm.qml

@@ -1,99 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
-import "qrc:/qml/component"
-
-Item {
-    ColumnLayout {
-        anchors.fill: parent
-        spacing: 0
-
-        Pane {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 250
-            padding: 32
-
-            background: Rectangle {
-                color: Material.accent
-            }
-
-            Column {
-                anchors.fill: parent
-
-                ImageStatus {
-                    z: 10
-                    width: 96
-                    height: width
-                    source: "qrc:/asset/img/avatar.png"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                Text {
-                    text: "Astolfo"
-                    color: "white"
-                    font.pointSize: 28
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                Text {
-                    text: "Rider of Black"
-                    color: "#cdcdcd"
-                    font.pointSize: 12
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                Row {
-                    height: 48
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    ItemDelegate {
-                        width: parent.height
-                        height: parent.height
-
-                        contentItem: MaterialIcon { icon: "\ue0b7" }
-                    }
-
-                    ItemDelegate {
-                        width: parent.height
-                        height: parent.height
-
-                        contentItem: MaterialIcon { icon: "\ue62e" }
-                    }
-                }
-            }
-        }
-
-        Pane {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            leftPadding: 96
-            rightPadding: 96
-
-            GridLayout {
-                width: parent.width
-                columns: 2
-                flow: GridLayout.LeftToRight
-                anchors.horizontalCenter: parent.horizontalCenter
-                columnSpacing: 32
-
-                Text {
-                    text: "Matrix ID"
-                }
-
-                Text {
-                    Layout.fillWidth: true
-                    text: "Welcome"
-                }
-
-                Text {
-                    text: "Status"
-                }
-
-                Text {
-                    text: "Overline"
-                }
-            }
-        }
-    }
-}

qml/form/RoomForm.qml

@@ -12,19 +12,89 @@ Item {
     id: item
     property var currentRoom: null
 
+    Drawer {
+        id: roomDrawer
+
+        width: Math.min(item.width * 0.7, 480)
+        height: item.height
+
+        edge: Qt.RightEdge
+        interactive: false
+
+        ToolButton {
+            contentItem: MaterialIcon { icon: "\ue5c4" }
+
+            onClicked: roomDrawer.close()
+        }
+
+        Column {
+            anchors.fill: parent
+            anchors.margins: 32
+            spacing: 16
+
+            ImageStatus {
+                width: 64
+                height: 64
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                source: currentRoom && currentRoom.avatarUrl != "" ? "image://mxc/" + currentRoom.avatarUrl : null
+                displayText: currentRoom ? currentRoom.displayName : ""
+            }
+
+            Label {
+                width: parent.width
+                text: currentRoom && currentRoom.id ? currentRoom.id : ""
+            }
+
+            RowLayout {
+                width: parent.width
+
+                TextField {
+                    id: roomNameField
+                    Layout.fillWidth: true
+                    text: currentRoom && currentRoom.name ? currentRoom.name : ""
+                }
+
+                ItemDelegate {
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+
+                    contentItem: MaterialIcon { icon: "\ue5ca" }
+
+                    onClicked: currentRoom.setName(roomNameField.text)
+                }
+            }
+
+            RowLayout {
+                width: parent.width
+
+                TextField {
+                    id: roomTopicField
+
+                    Layout.fillWidth: true
+                    text: currentRoom && currentRoom.topic ? currentRoom.topic : ""
+                }
+
+                ItemDelegate {
+                    Layout.preferredWidth: height
+                    Layout.fillHeight: true
+
+                    contentItem: MaterialIcon { icon: "\ue5ca" }
+
+                    onClicked: currentRoom.setTopic(roomTopicField.text)
+                }
+            }
+        }
+    }
+
     Pane {
         anchors.fill: parent
         padding: 0
 
-        background: Item {
+        background: Label {
-            anchors.fill: parent
+            anchors.centerIn: parent
             visible: !currentRoom
-            Pane { anchors.fill: parent }
+            text: "Please choose a room."
-
-            Label {
-                text: "Please choose a room."
-                anchors.centerIn: parent
-            }
         }
 
         ColumnLayout {
@@ -33,16 +103,16 @@ Item {
 
             visible: currentRoom
 
-            Pane {
+            Rectangle {
-                padding: 16
-
                 Layout.fillWidth: true
                 Layout.preferredHeight: 80
 
-                background: Rectangle { color: Material.theme == Material.Light ? "#eaeaea" : "#242424" }
+                color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
 
                 RowLayout {
                     anchors.fill: parent
+                    anchors.margins: 16
+
                     spacing: 16
 
                     ImageStatus {
@@ -52,12 +122,12 @@ Item {
                         displayText: currentRoom ? currentRoom.displayName : ""
                     }
 
-                    ColumnLayout {
+                    Column {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
 
                         Label {
-                            Layout.fillWidth: true
+                            width: parent.width
                             text: currentRoom ? currentRoom.displayName : ""
                             font.pointSize: 16
                             elide: Text.ElideRight
@@ -65,16 +135,21 @@ Item {
                         }
 
                         Label {
-                            Layout.fillWidth: true
+                            width: parent.width
                             text: currentRoom ? currentRoom.topic : ""
                             elide: Text.ElideRight
                             wrapMode: Text.NoWrap
                         }
                     }
+
+                    ToolButton {
+                        contentItem: MaterialIcon { icon: "\ue5d2" }
+
+                        onClicked: roomDrawer.open()
+                    }
                 }
             }
 
-
             RowLayout {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -137,7 +212,7 @@ Item {
 
                     ScrollBar.vertical: messageListViewScrollBar
 
-                    onAtYBeginningChanged: atYBeginning && currentRoom ? currentRoom.getPreviousContent(50) : {}
+                    onAtYBeginningChanged: atYBeginning && currentRoom ? currentRoom.getPreviousContent(20) : {}
                     onAtYEndChanged: atYEnd && currentRoom ? currentRoom.markAllMessagesAsRead() : {}
 
                     RoundButton {
@@ -234,7 +309,9 @@ Item {
                             }
                         }
 
-                        background: Item {
+                        background: Rectangle {
+                            color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
+
                             Rectangle {
                                 z: 5
                                 width: inputField.width * inputField.progress
@@ -242,7 +319,6 @@ Item {
                                 color: Material.accent
                                 opacity: 0.4
                             }
-                            Rectangle { anchors.fill: parent; color: Material.theme == Material.Light ? "#eaeaea" : "#242424" }
                         }
 
                         function postMessage(text) {

qml/form/RoomListForm.qml

@@ -20,78 +20,65 @@ Item {
         anchors.fill: parent
         spacing: 0
 
-        Pane {
+        Rectangle {
             z: 10
             Layout.fillWidth: true
             Layout.preferredHeight: 80
-            background: Rectangle {
+            color: Qt.tint(Material.accent, "#20FFFFFF")
-                color: Qt.tint(Material.accent, "#20FFFFFF")
-            }
 
             TextField {
                 id: searchField
-                width: parent.width
+                width: parent.width - 18
                 height: 36
                 color: "black"
                 leftPadding: mini ? 4 : 16
                 topPadding: 0
                 bottomPadding: 0
-                anchors.verticalCenter: parent.verticalCenter
+                anchors.centerIn: parent
 
-                background: Item {
+                background: Row {
-                    Row {
+                    MaterialIcon {
-                        anchors.fill: parent
+                        icon: "\ue8b6"
-
-                        MaterialIcon {
-                            icon: "\ue8b6"
-                            color: "white"
-
-                            width: mini ? parent.width : parent.height
-                            height: parent.height
-                        }
-
-                        Label {
-                            height: parent.height
-                            visible: !mini
-                            text: "Search"
-                            color: "white"
-                            font.pointSize: 12
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                        }
-                    }
-
-                    Rectangle {
-                        width: searchField.activeFocus || searchField.text ? parent.width : 0
-                        height: parent.height
                         color: "white"
 
-                        Behavior on width {
+                        width: mini ? parent.width : parent.height
-                            PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
+                        height: parent.height
-                        }
+                    }
+
+                    Label {
+                        height: parent.height
+                        visible: !mini
+                        text: "Search"
+                        color: "white"
+                        font.pointSize: 12
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                }
+
+                Rectangle {
+                    width: searchField.activeFocus || searchField.text ? parent.width : 0
+                    height: parent.height
+                    color: "white"
+
+                    Behavior on width {
+                        PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
                     }
                 }
             }
         }
 
-        Pane {
+        Rectangle {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            padding: 0
 
-            background: Item {
+            color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
-                anchors.fill: parent
-                Rectangle {
-                    anchors.fill: parent
-                    color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
-                }
 
-                Label {
+            Label {
-                    z: 10
+                z: 10
-                    text: mini ? "Empty" : "Here? No, not here."
+                text: mini ? "Empty" : "Here? No, not here."
-                    anchors.centerIn: parent
+                anchors.centerIn: parent
-                    visible: listView.count === 0
+                visible: listView.count === 0
-                }
             }
 
             SortFilterProxyModel {
@@ -116,8 +103,7 @@ Item {
 
             ListView {
                 id: listView
-                width: parent.width
+                anchors.fill: parent
-                height: parent.height
 
                 model: roomListProxyModel
 
@@ -138,8 +124,8 @@ Item {
                     width: parent.width
                     height: 80
                     onPressed: listView.currentIndex = index
-                    onClicked: enterRoom()
                     onPressAndHold: roomListMenu.popup()
+                    onClicked: enterRoom()
 
                     ToolTip.visible: mini && hovered
                     ToolTip.text: name
@@ -239,5 +225,5 @@ Item {
         }
     }
 
-    onCurrentRoomChanged: if (currentRoom && !currentRoom.timelineSize) currentRoom.getPreviousContent(50)
+    onCurrentRoomChanged: if (currentRoom && !currentRoom.timelineSize) currentRoom.getPreviousContent(20)
 }

qml/form/SettingAccountForm.qml

@@ -17,7 +17,6 @@ Page {
 
                 source: matriqueController.isLogin ? connection.localUser && connection.localUser.avatarUrl ? "image://mxc/" + connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png"
                 displayText: matriqueController.isLogin && connection.localUser.displayName ? connection.localUser.displayName : "N"
-                opaqueBackground: false
             }
 
             ColumnLayout {

qml/main.qml

@@ -115,7 +115,6 @@ ApplicationWindow {
 
                         source: matriqueController.isLogin ? connection.localUser && connection.localUser.avatarUrl ? "image://mxc/" + connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png"
                         displayText: matriqueController.isLogin && connection.localUser.displayName ? connection.localUser.displayName : "N"
-                        opaqueBackground: false
                     }
 
                     page: roomPage
@@ -183,6 +182,7 @@ ApplicationWindow {
 
                                 contentItem: TextField {
                                     id: joinRoomDialogTextField
+                                    placeholderText: "#matrix:matrix.org"
                                 }
 
                                 onAccepted: matriqueController.joinRoom(joinRoomDialogTextField.text)
@@ -206,6 +206,7 @@ ApplicationWindow {
 
                                 contentItem: TextField {
                                     id: directChatDialogTextField
+                                    placeholderText: "@bot:matrix.org"
                                 }
 
                                 onAccepted: matriqueController.createDirectChat(directChatDialogTextField.text)

res.qrc

@@ -6,12 +6,10 @@
         <file>asset/font/material.ttf</file>
         <file>qml/Login.qml</file>
         <file>qml/main.qml</file>
-        <file>qml/component/ButtonDelegate.qml</file>
         <file>qml/component/ImageStatus.qml</file>
         <file>qml/component/SideNav.qml</file>
         <file>qml/form/RoomForm.qml</file>
         <file>qml/Room.qml</file>
-        <file>qml/form/DetailForm.qml</file>
         <file>qml/component/SideNavButton.qml</file>
         <file>qml/component/MaterialIcon.qml</file>
         <file>asset/img/icon.png</file>