Merge branch 'redesign' into 'master'

Redesign

See merge request b0/matrique!16

matrique.pro

@@ -1,7 +1,9 @@
 QT += quick widgets multimedia
 CONFIG += c++14
 CONFIG += object_parallel_to_source
-CONFIG += qtquickcompiler
+
+# Enable this to use QtQuick Compiler.
+#CONFIG += qtquickcompiler
 
 TARGET = matrique
 
@@ -75,10 +77,9 @@ DISTFILES += \
     ButtonDelegate.qml \
     SideNav.qml \
     RoomListForm.qml \
-    RoomDetailForm.qml \
     Room.qml \
     Setting.qml \
-    qml/js/md.js
+    qml/js/md.js \
 
 HEADERS += \
     src/controller.h \

qml/Login.qml

@@ -57,17 +57,19 @@ Page {
         Pane {
             width: parent.width / 2
             height: parent.height
+
             padding: 64
 
             ColumnLayout {
-                id: mainCol
                 width: parent.width
 
-                TextField {
+                id: mainCol
-                    id: serverField
 
+                TextField {
                     Layout.fillWidth: true
 
+                    id: serverField
+
                     leftPadding: 16
                     topPadding: 0
                     bottomPadding: 0
@@ -85,10 +87,10 @@ Page {
                 }
 
                 TextField {
-                    id: usernameField
-
                     Layout.fillWidth: true
 
+                    id: usernameField
+
                     leftPadding: 16
                     topPadding: 0
                     bottomPadding: 0
@@ -105,10 +107,10 @@ Page {
                 }
 
                 TextField {
-                    id: passwordField
-
                     Layout.fillWidth: true
 
+                    id: passwordField
+
                     leftPadding: 16
                     topPadding: 0
                     bottomPadding: 0
@@ -126,10 +128,10 @@ Page {
                 }
 
                 Button {
-                    id: loginButton
-
                     Layout.fillWidth: true
 
+                    id: loginButton
+
                     text: "LOGIN"
                     highlighted: true
 

qml/MatriqueSettings.qml

@@ -4,7 +4,6 @@ import Qt.labs.settings 1.0
 
 Settings {
     property bool lazyLoad: true
-    property bool asyncMessageDelegate
     property bool richText
     property bool pressAndHold
     property bool rearrangeByActivity

qml/Room.qml

@@ -18,28 +18,42 @@ Page {
         onNewMessage: if (!window.active) matriqueController.showMessage(roomName, content, icon)
     }
 
-    RowLayout {
+    Rectangle {
         anchors.fill: parent
-        spacing: 0
 
-        RoomListForm {
+        color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
-            id: roomListForm
 
-            Layout.fillHeight: true
+        RowLayout {
-            Layout.preferredWidth: MSettings.miniMode ? 80 : page.width * 0.35
+            anchors.fill: parent
-            Layout.minimumWidth: 80
-            Layout.maximumWidth: 360
 
-            listModel:  roomListModel
+            spacing: 0
-        }
 
-        RoomForm {
+            RoomListForm {
-            id: roomForm
+                Layout.fillHeight: true
+                Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35
+                Layout.minimumWidth: 64
+                Layout.maximumWidth: 360
 
-            Layout.fillWidth: true
+                id: roomListForm
-            Layout.fillHeight: true
 
-            currentRoom: roomListForm.enteredRoom
+                listModel:  roomListModel
+            }
+
+            Rectangle {
+                Layout.preferredWidth: 1
+                Layout.fillHeight: true
+
+                color: MSettings.darkTheme ? "#363636" : "#ececec"
+            }
+
+            RoomForm {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                id: roomForm
+
+                currentRoom: roomListForm.enteredRoom
+            }
         }
     }
 }

qml/Setting.qml

@@ -58,57 +58,59 @@ Page {
 
     Page {
         id: generalForm
+
         parent: null
+
         Column {
             Switch {
                 text: "Lazy load at initial sync"
                 checked: MSettings.lazyLoad
+
                 onCheckedChanged: MSettings.lazyLoad = checked
             }
-            Switch {
+
-                text: "Force loading message delegates asynchronously"
-                checked: MSettings.asyncMessageDelegate
-                onCheckedChanged: MSettings.asyncMessageDelegate = checked
-            }
             Switch {
                 text: "Use RichText instead of StyledText"
                 checked: MSettings.richText
+
                 onCheckedChanged: MSettings.richText = checked
             }
+
             Switch {
                 text: "Use press and hold instead of right click"
                 checked: MSettings.pressAndHold
-                onCheckedChanged: MSettings.pressAndHold = checked
-            }
-            Switch {
-                text: "Rearrange rooms by activity"
-                checked: MSettings.rearrangeByActivity
-                onCheckedChanged: MSettings.rearrangeByActivity = checked
-            }
 
-            Button {
+                onCheckedChanged: MSettings.pressAndHold = checked
-                text: "Invoke GC"
-                highlighted: true
-                onClicked: gc()
             }
         }
     }
 
     Page {
         id: appearanceForm
+
         parent: null
+
         Column {
             Switch {
                 text: "Dark theme"
                 checked: MSettings.darkTheme
+
                 onCheckedChanged: MSettings.darkTheme = checked
             }
 
             Switch {
                 text: "Mini Room List"
                 checked: MSettings.miniMode
+
                 onCheckedChanged: MSettings.miniMode = checked
             }
+
+            Switch {
+                text: "Rearrange rooms by activity"
+                checked: MSettings.rearrangeByActivity
+
+                onCheckedChanged: MSettings.rearrangeByActivity = checked
+            }
         }
     }
 
@@ -126,12 +128,8 @@ Page {
 
                 source: "qrc:/asset/img/icon.png"
             }
-            Label {
+            Label { text: "Matrique, an IM client for the Matrix protocol." }
-                text: "Matrique, an IM client for the Matrix protocol."
+            Label { text: "Released under GNU General Public License, version 3." }
-            }
-            Label {
-                text: "Released under GNU General Public License, version 3."
-            }
         }
     }
 

qml/component/AudioBubble.qml

@@ -1,50 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-import QtMultimedia 5.9
-import Qt.labs.platform 1.0
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    property bool playOnFinished: false
-
-    id: messageRow
-
-    DownloadableContent {
-        id: downloadable
-
-        width: downloadDelegate.width
-        height: downloadDelegate.height
-
-        TextDelegate {
-            id: downloadDelegate
-
-            maximumWidth: messageListView.width
-            highlighted: !sentByMe
-            timeLabelVisible: false
-            authorLabelVisible: false
-
-            displayText: content.info.duration / 1000 + '"'
-
-            MouseArea {
-                anchors.fill: parent
-
-                propagateComposedEvents: true
-
-                onClicked: {
-                    if (downloadable.downloaded)
-                        matriqueController.playAudio(progressInfo.localPath)
-                    else
-                    {
-                        playOnFinished = true
-                        currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + ".tmp")
-                    }
-                }
-            }
-        }
-        onDownloadedChanged: downloaded && playOnFinished ? matriqueController.playAudio(progressInfo.localPath) : {}
-    }
-
-}

qml/component/AutoImage.qml

@@ -6,22 +6,22 @@ Item {
     property alias sourceSize: baseImage.sourceSize.width
 
     readonly property bool loading: baseImage.status == Image.Loading
-    signal clicked()
 
-    id: rekt
+    signal clicked()
 
     width: loading ? 128 : baseImage.implicitWidth
     height: loading ? progressBar.height : baseImage.implicitHeight
 
-    Image {
+    id: rekt
-        id: baseImage
+
-    }
+    Image { id: baseImage }
 
     ProgressBar {
-        id: progressBar
         width: parent.width
         visible: loading
 
+        id: progressBar
+
         indeterminate: true
     }
 

qml/component/AutoLabel.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Label {
+    property bool coloredBackground
+
+    color: coloredBackground ? "white": Material.foreground
+
+    wrapMode: Label.Wrap
+    linkColor: coloredBackground ? "white" : Material.accent
+    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
+
+    onLinkActivated: Qt.openUrlExternally(link)
+}

qml/component/AutoMouseArea.qml

@@ -6,6 +6,7 @@ MouseArea {
     signal secondaryClicked()
 
     acceptedButtons: MSettings.pressAndHold ? Qt.LeftButton : (Qt.LeftButton | Qt.RightButton)
+
     onClicked: mouse.button == Qt.RightButton ? secondaryClicked() : primaryClicked()
     onPressAndHold: MSettings.pressAndHold ? secondaryClicked() : {}
 }

qml/component/AvatarContainer.qml

@@ -1,26 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-Row {
-    readonly property bool avatarVisible: !(sentByMe || (aboveAuthor === author && section === aboveSection))
-
-    spacing: 6
-
-    ImageStatus {
-        id: avatar
-
-        width: height
-        height: 40
-        round: false
-        visible: avatarVisible
-        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
-        displayText: author.displayName
-    }
-
-    Rectangle {
-        width: height
-        height: 40
-        color: "transparent"
-        visible: !avatarVisible
-    }
-}

qml/component/DownloadableContent.qml

@@ -11,20 +11,18 @@ Item {
         z: -2
         height: parent.height
         width: progressInfo.active && !progressInfo.completed ? progressInfo.progress / progressInfo.total * parent.width : 0
+
         color: Material.accent
         opacity: 0.4
     }
 
-    onDownloadedChanged: downloaded && openOnFinished ? openSavedFile() : {}
+    onDownloadedChanged: if (downloaded && openOnFinished) openSavedFile()
 
-    function saveFileAs() {
+    function saveFileAs() { currentRoom.saveFileAs(eventId) }
-        currentRoom.saveFileAs(eventId)
-    }
 
     function downloadAndOpen()
     {
-        if (downloaded)
+        if (downloaded) openSavedFile()
-            openSavedFile()
         else
         {
             openOnFinished = true
@@ -34,10 +32,7 @@ Item {
 
     function openSavedFile()
     {
-        if (Qt.openUrlExternally(progressInfo.localPath))
+        if (Qt.openUrlExternally(progressInfo.localPath)) return;
-            return;
+        if (Qt.openUrlExternally(progressInfo.localDir)) return;
-
-        if (Qt.openUrlExternally(progressInfo.localDir))
-            return;
     }
 }

qml/component/EmojiPicker.qml

@@ -52,6 +52,7 @@ Popup {
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 2
+
             color: Material.accent
         }
 

qml/component/FileBubble.qml

@@ -1,28 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    id: messageRow
-
-    DownloadableContent {
-        id: downloadable
-
-        width: downloadDelegate.width
-        height: downloadDelegate.height
-
-        TextDelegate {
-            id: downloadDelegate
-
-            maximumWidth: messageListView.width
-            highlighted: !sentByMe
-            timeLabelVisible: false
-            authorLabelVisible: false
-
-            displayText: "<b>File: </b>" + content.body
-        }
-    }
-}

qml/component/GenericBubble.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Control {
+    property bool highlighted: false
+    property bool colored: false
+
+    readonly property bool darkBackground: highlighted  ? true : MSettings.darkTheme
+    readonly property color backgroundColor: MSettings.darkTheme ? "#242424" : "lightgrey"
+
+    padding: 12
+
+    AutoMouseArea {
+        anchors.fill: parent
+
+        onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/MessageContextMenu.qml").createObject(this)
+    }
+
+    background: Rectangle { color: colored ? Material.accent : highlighted ? Material.primary : backgroundColor }
+}

qml/component/ImageBubble.qml

@@ -1,34 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    Rectangle {
-        id: messageRect
-
-        width: messageImage.width + 24
-        height: messageImage.height + 24
-
-        color: sentByMe ? background : Material.accent
-
-        DownloadableContent {
-            id: downloadable
-
-            width: messageImage.width
-            height: messageImage.height
-            anchors.centerIn: parent
-
-            AutoImage {
-                id: messageImage
-                z: -4
-                sourceSize: 128
-                source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
-
-                onClicked: downloadAndOpen()
-            }
-        }
-    }
-}

qml/component/ImageStatus.qml

@@ -13,9 +13,11 @@ Item {
     id: item
 
     Image {
-        id: avatar
         width: item.width
         height: item.width
+
+        id: avatar
+
         visible: showImage
         source: item.source
 
@@ -40,6 +42,7 @@ Item {
 
     Label {
         anchors.fill: parent
+
         color: "white"
         visible: showInitial
         text: showInitial ? getInitials(displayText)[0] : ""

qml/component/MaterialIcon.qml

@@ -10,8 +10,9 @@ Item {
     id: item
 
     Text {
-        id: iconText
         anchors.fill: parent
+
+        id: iconText
         font.pointSize: 16
         font.family: materialFont.name
         color: item.color

qml/component/MessageBubble.qml

@@ -1,20 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property bool isNotice: eventType === "notice"
-
-    id: messageRow
-
-    TextDelegate {
-        maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
-        flat: isNotice
-        highlighted: !sentByMe
-        timeLabelVisible: Math.abs(time - aboveTime) > 600000 || index == 0
-        authorLabelVisible: messageRow.avatarVisible
-
-        displayText: display
-    }
-}

qml/component/MessageDelegate.qml

@@ -1,53 +1,186 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import Matrique 0.1
 import Matrique.Settings 0.1
 
-Item {
+RowLayout {
-    readonly property bool hidden: marks === EventStatus.Redacted || marks === EventStatus.Hidden
+    readonly property bool avatarVisible: !(sentByMe || (aboveAuthor === author && section === aboveSection))
-    readonly property color background: MSettings.darkTheme ? "#242424" : "lightgrey"
+    readonly property bool highlighted: !sentByMe
     readonly property bool sentByMe: author === currentRoom.localUser
-    readonly property bool isState: eventType === "state" || eventType === "emote"
+    readonly property bool isText: eventType === "notice" || eventType === "message"
 
-    id: messageDelegate
+    signal saveFileAs()
+    signal openExternally()
 
     z: -5
-    width: delegateLoader.width
-    height: delegateLoader.height
 
-    anchors.right: !isState && sentByMe ? parent.right : undefined
+    id: messageRow
-    anchors.horizontalCenter: isState ? parent.horizontalCenter : undefined
 
-    AutoMouseArea {
+    Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-        anchors.fill: parent
 
-        onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/MessageContextMenu.qml").createObject(this)
+    spacing: 6
+
+    ImageStatus {
+        Layout.preferredWidth: 40
+        Layout.preferredHeight: 40
+        Layout.alignment: Qt.AlignTop
+
+        round: false
+        visible: avatarVisible
+        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
+        displayText: author.displayName
     }
 
-    Loader {
+    Rectangle {
-        id: delegateLoader
+        Layout.preferredWidth: 40
+        Layout.preferredHeight: 40
+        Layout.alignment: Qt.AlignTop
 
-        asynchronous: MSettings.asyncMessageDelegate
+        color: "transparent"
+        visible: !(sentByMe || avatarVisible)
+    }
 
-        source: {
+    GenericBubble {
-            if (eventType == "redaction" || hidden) return ""
+        Layout.maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
-            switch (eventType) {
+
-            case "state":
+        id: genericBubble
-            case "emote":
+
-                return "StateBubble.qml"
+        highlighted: !sentByMe
-            case "message":
+        colored: highlighted && eventType === "notice"
-            case "notice":
+
-                return "MessageBubble.qml"
+        contentItem: ColumnLayout {
-            case "image":
+            id: messageColumn
-                return "ImageBubble.qml"
+
-            case "audio":
+            spacing: 0
-                return "AudioBubble.qml"
+
-            case "video":
+            AutoLabel {
-            case "file":
+                visible: messageRow.avatarVisible
-                return "FileBubble.qml"
+                text: author.displayName
+                Material.foreground: Material.accent
+                coloredBackground: highlighted
+                font.bold: true
+            }
+
+            AutoLabel {
+                Layout.fillWidth: true
+
+                text: display
+                visible: isText
+                coloredBackground: highlighted
+            }
+
+            Loader {
+                sourceComponent: {
+                    switch (eventType) {
+                    case "image":
+                        return imageComponent
+                    case "file":
+                        return fileComponent
+                    case "audio":
+                        return audioComponent
+                    }
+                }
+
+                active: eventType === "image" || eventType === "file" || eventType === "audio"
+            }
+
+            AutoLabel {
+                Layout.alignment: Qt.AlignRight
+                visible: Math.abs(time - aboveTime) > 600000 || index == 0
+                text: Qt.formatTime(time, "hh:mm")
+                coloredBackground: highlighted
+                Material.foreground: "grey"
+                font.pointSize: 8
+            }
+        }
+
+        Component {
+            id: imageComponent
+
+            DownloadableContent {
+                width: messageImage.width
+                height: messageImage.height
+
+                id: downloadable
+
+                AutoImage {
+                    z: -4
+
+                    id: messageImage
+
+                    sourceSize: 128
+                    source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
+
+                    onClicked: downloadAndOpen()
+                }
+
+                Component.onCompleted: {
+                    messageRow.saveFileAs.connect(saveFileAs)
+                    messageRow.openExternally.connect(downloadAndOpen)
+                }
+            }
+        }
+
+        Component {
+            id: fileComponent
+
+            AutoLabel {
+                Layout.fillWidth: true
+
+                id: downloadDelegate
+
+                text: "<b>File: </b>" + content.body
+                coloredBackground: highlighted
+
+                background: DownloadableContent {
+                    id: downloadable
+
+                    Component.onCompleted: {
+                        messageRow.saveFileAs.connect(saveFileAs)
+                        messageRow.openExternally.connect(downloadAndOpen)
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: audioComponent
+
+            AutoLabel {
+                id: downloadDelegate
+
+                text: content.info.duration / 1000 + '"'
+                coloredBackground: highlighted
+
+                MouseArea {
+                    anchors.fill: parent
+
+                    propagateComposedEvents: true
+
+                    onClicked: {
+                        if (downloadable.downloaded)
+                            matriqueController.playAudio(progressInfo.localPath)
+                        else
+                        {
+                            playOnFinished = true
+                            currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + ".tmp")
+                        }
+                    }
+                }
+
+                background: DownloadableContent {
+                    id: downloadable
+
+                    onDownloadedChanged: downloaded && playOnFinished ? matriqueController.playAudio(progressInfo.localPath) : {}
+
+                    Component.onCompleted: {
+                        messageRow.saveFileAs.connect(saveFileAs)
+                        messageRow.openExternally.connect(downloadAndOpen)
+                    }
+                }
             }
-            return ""
         }
     }
 }

qml/component/SideNavButton.qml

@@ -3,41 +3,29 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 
-Item {
+ItemDelegate {
     property var page
-    property alias contentItem: buttonDelegate.contentItem
+    readonly property bool selected: stackView.currentItem === page
-    signal clicked
-
-    id: sideNavButton
-
-    Layout.fillWidth: true
-    Layout.preferredHeight: width
 
     Rectangle {
-        width: stackView.currentItem === page ?  parent.width : 0
+        width: selected ? 4 : 0
         height: parent.height
-        anchors.bottom:  buttonDelegate.bottom
+
-        color: Qt.lighter(Material.accent)
+        color: Material.accent
 
         Behavior on width {
             PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
         }
     }
 
-    ItemDelegate {
+    onClicked: {
-        id: buttonDelegate
+        if(page && stackView.currentItem !== page) {
-        anchors.fill: parent
+            if(stackView.depth === 1) {
-
+                stackView.replace(page)
-        onClicked: {
+            } else {
-            if(page && stackView.currentItem !== page) {
+                stackView.clear()
-                if(stackView.depth === 1) {
+                stackView.push(page)
-                    stackView.replace(page)
-                } else {
-                    stackView.clear()
-                    stackView.push(page)
-                }
             }
-            sideNavButton.clicked()
         }
     }
 }

qml/component/StateBubble.qml

@@ -1,12 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-TextDelegate {
-    maximumWidth: messageListView.width
-    highlighted: eventType === "emote"
-    timeLabelVisible: false
-    authorLabelVisible: false
-
-    displayText: "<b>" + author.displayName + "</b> " + display
-}

qml/component/StateDelegate.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Label {
+    Layout.alignment: Qt.AlignHCenter
+
+    text: "<b>" + author.displayName + "</b> " + display
+    color: "white"
+
+    padding: 8
+
+    wrapMode: Label.Wrap
+    linkColor: "white"
+    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
+    onLinkActivated: Qt.openUrlExternally(link)
+
+    background: Rectangle {
+        color: MSettings.darkTheme ? "#484848" : "grey"
+    }
+}

qml/component/TextDelegate.qml

@@ -1,61 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-import QtQuick.Layouts 1.3
-import Matrique.Settings 0.1
-
-Rectangle {
-    property bool flat: false
-    property bool highlighted: false
-    property string displayText: ""
-    property alias timeLabelVisible: timeText.visible
-    property alias authorLabelVisible: authorText.visible
-
-    property int maximumWidth
-
-    readonly property bool darkBackground: highlighted && !flat
-
-    id: messageRect
-
-    width: Math.min(Math.max(messageText.implicitWidth, (timeText.visible ? timeText.implicitWidth : 0), (authorLabelVisible ? authorText.implicitWidth : 0)) + 24, maximumWidth)
-    height: (authorText.visible ? authorText.implicitHeight : 0) + messageText.implicitHeight + (timeText.visible ? timeText.implicitHeight : 0) + 24
-
-    color: flat ? "transparent" : highlighted ? Material.accent : background
-    border.color: Material.accent
-    border.width: flat ? 2 : 0
-
-    ColumnLayout {
-        id: messageColumn
-
-        anchors.fill: parent
-        anchors.margins: 12
-        spacing: 0
-
-        Label {
-            id: authorText
-            text: author.displayName
-            color: darkBackground ? "white" : Material.accent
-            font.bold: true
-        }
-
-        Label {
-            id: messageText
-            Layout.maximumWidth: parent.width
-            text: displayText
-            color: darkBackground ? "white": Material.foreground
-
-            wrapMode: Label.Wrap
-            linkColor: darkBackground ? "white" : Material.accent
-            textFormat: MSettings.richText ? Text.RichText : Text.StyledText
-            onLinkActivated: Qt.openUrlExternally(link)
-        }
-
-        Label {
-            id: timeText
-            Layout.alignment: Qt.AlignRight
-            text: Qt.formatTime(time, "hh:mm")
-            color: darkBackground ? "white" : "grey"
-            font.pointSize: 8
-        }
-    }
-}

qml/form/RoomForm.qml

@@ -22,11 +22,11 @@ Item {
     }
 
     Drawer {
-        id: roomDrawer
-
         width: Math.min(item.width * 0.7, 480)
         height: item.height
 
+        id: roomDrawer
+
         edge: Qt.RightEdge
         interactive: false
 
@@ -39,7 +39,6 @@ Item {
         ColumnLayout {
             anchors.fill: parent
             anchors.margins: 32
-            spacing: 16
 
             ImageStatus {
                 Layout.preferredWidth: 64
@@ -52,12 +51,14 @@ Item {
 
             Label {
                 Layout.fillWidth: true
+
                 horizontalAlignment: Text.AlignHCenter
                 text: currentRoom && currentRoom.id ? currentRoom.id : ""
             }
 
             Label {
                 Layout.fillWidth: true
+
                 horizontalAlignment: Text.AlignHCenter
                 text: currentRoom && currentRoom.canonicalAlias ? currentRoom.canonicalAlias : "No Canonical Alias"
             }
@@ -66,8 +67,9 @@ Item {
                 Layout.fillWidth: true
 
                 TextField {
-                    id: roomNameField
                     Layout.fillWidth: true
+
+                    id: roomNameField
                     text: currentRoom && currentRoom.name ? currentRoom.name : ""
                 }
 
@@ -85,9 +87,10 @@ Item {
                 Layout.fillWidth: true
 
                 TextField {
+                    Layout.fillWidth: true
+
                     id: roomTopicField
 
-                    Layout.fillWidth: true
                     text: currentRoom && currentRoom.topic ? currentRoom.topic : ""
                 }
 
@@ -116,7 +119,7 @@ Item {
                     RowLayout {
                         anchors.fill: parent
                         anchors.margins: 8
-                        spacing: 16
+                        spacing: 12
 
                         ImageStatus {
                             Layout.preferredWidth: height
@@ -159,9 +162,9 @@ Item {
 
             Rectangle {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 80
+                Layout.preferredHeight: 64
 
-                color: MSettings.darkTheme ? "#242424" : "#eaeaea"
+                color: Material.accent
 
                 ItemDelegate {
                     anchors.fill: parent
@@ -170,13 +173,14 @@ Item {
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 16
+                        anchors.margins: 12
 
-                        spacing: 16
+                        spacing: 12
 
                         ImageStatus {
                             Layout.preferredWidth: height
                             Layout.fillHeight: true
+
                             source: currentRoom && currentRoom.avatarUrl != "" ? "image://mxc/" + currentRoom.avatarUrl : null
                             displayText: currentRoom ? currentRoom.displayName : ""
                         }
@@ -186,14 +190,15 @@ Item {
                             Layout.fillHeight: true
                             Layout.alignment: Qt.AlignHCenter
 
-                            visible: parent.width > 80
+                            visible: parent.width > 64
 
                             Label {
                                 Layout.fillWidth: true
                                 Layout.fillHeight: true
 
                                 text: currentRoom ? currentRoom.displayName : ""
-                                font.pointSize: 16
+                                color: "white"
+                                font.pointSize: 12
                                 elide: Text.ElideRight
                                 wrapMode: Text.NoWrap
                             }
@@ -203,6 +208,7 @@ Item {
                                 Layout.fillHeight: true
 
                                 text: currentRoom ? currentRoom.topic : ""
+                                color: "white"
                                 elide: Text.ElideRight
                                 wrapMode: Text.NoWrap
                             }
@@ -221,80 +227,79 @@ Item {
                 spacing: 0
 
                 ListView {
-                    id: messageListView
-
                     Layout.fillWidth: true
                     Layout.fillHeight: true
+
+                    id: messageListView
+
+                    clip: true
                     displayMarginBeginning: 40
                     displayMarginEnd: 40
                     verticalLayoutDirection: ListView.BottomToTop
                     spacing: 8
 
                     boundsBehavior: Flickable.DragOverBounds
+                    maximumFlickVelocity: 2048
 
                     model: MessageEventModel {
                         id: messageEventModel
                         room: currentRoom
                     }
 
-                    delegate: Column {
+                    delegate: ColumnLayout {
                         readonly property bool hidden: marks === EventStatus.Redacted || marks === EventStatus.Hidden
 
                         width: parent.width
                         height: hidden ? -8 : undefined
+
+                        id: delegateColumn
+
+                        clip: true
                         spacing: 8
 
-                        RowLayout {
+                        Label {
-                            width: parent.width * 0.8
+                            Layout.alignment: Qt.AlignHCenter
+
                             visible: section !== aboveSection && !hidden
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            spacing: 8
 
-                            Rectangle {
+                            text: section
-                                Layout.fillWidth: true
+                            color: "white"
-                                height:2
+                            verticalAlignment: Text.AlignVCenter
-                                color: Material.accent
+                            leftPadding: 8
-                            }
+                            rightPadding: 8
+                            topPadding: 4
+                            bottomPadding: 4
 
-                            Label {
+                            background: Rectangle {
-                                text: section
+                                color: MSettings.darkTheme ? "#484848" : "grey"
-                                color: Material.accent
-                                verticalAlignment: Text.AlignVCenter
-                            }
-
-                            Rectangle {
-                                Layout.fillWidth: true
-                                height:2
-                                color: Material.accent
                             }
                         }
 
-                        RowLayout {
+                        Label {
-                            width: parent.width * 0.8
+                            Layout.alignment: Qt.AlignHCenter
+
                             visible: readMarker === true && index !== 0
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            spacing: 8
 
-                            Rectangle {
+                            text: "And Now"
-                                Layout.fillWidth: true
+                            color: "white"
-                                height:2
+                            verticalAlignment: Text.AlignVCenter
-                                color: Material.accent
+                            leftPadding: 8
-                            }
+                            rightPadding: 8
+                            topPadding: 4
+                            bottomPadding: 4
 
-                            Label {
+                            background: Rectangle { color: MSettings.darkTheme ? "#484848" : "grey" }
-                                text: "And Now"
-                                color: Material.accent
-                                verticalAlignment: Text.AlignVCenter
-                            }
-
-                            Rectangle {
-                                Layout.fillWidth: true
-                                height:2
-                                color: Material.accent
-                            }
                         }
 
-                        MessageDelegate {}
+                        MessageDelegate {
+                            visible: eventType === "notice" || eventType === "message" || eventType === "image" || eventType === "video" || eventType === "audio" || eventType === "file"
+                        }
+
+                        StateDelegate {
+                            Layout.maximumWidth: messageListView.width * 0.8
+
+                            visible: eventType === "emote" || eventType === "state"
+                        }
                     }
 
                     ScrollBar.vertical: messageListViewScrollBar
@@ -303,9 +308,11 @@ Item {
                     onAtYEndChanged: atYEnd && currentRoom ? currentRoom.markAllMessagesAsRead() : {}
 
                     RoundButton {
-                        id: goTopFab
+                        width: 64
-                        width: height
                         height: 64
+
+                        id: goTopFab
+
                         visible: !parent.atYEnd
 
                         anchors.right: parent.right
@@ -313,12 +320,12 @@ Item {
 
                         contentItem: MaterialIcon {
                             anchors.fill: parent
+
                             icon: "\ue313"
                             color: "white"
                         }
 
-                        opacity: pressed ? 1 : hovered ? 0.7 : 0.4
+                        Material.background: Material.accent
-                        Material.background: Qt.lighter(Material.accent)
 
                         onClicked: parent.positionViewAtBeginning()
 
@@ -327,159 +334,158 @@ Item {
                 }
 
                 ScrollBar {
-                    id: messageListViewScrollBar
-
                     Layout.preferredWidth: 16
                     Layout.fillHeight: true
+
+                    id: messageListViewScrollBar
                 }
             }
 
-            Pane {
+            RowLayout {
-                padding: 16
-
                 Layout.fillWidth: true
-                Layout.preferredHeight: 80
+                Layout.preferredHeight: 48
+                Layout.margins: 16
 
-                Timer {
+                spacing: 0
-                    id: timeoutTimer
 
-                    repeat: false
+                ItemDelegate {
-                    interval: 2000
+                    Layout.preferredWidth: 48
-                    onTriggered: {
+                    Layout.preferredHeight: 48
-                        repeatTimer.stop()
+
-                        currentRoom.sendTypingNotification(false)
+                    contentItem: MaterialIcon { icon: "\ue226" }
+
+                    onClicked: currentRoom.chooseAndUploadFile()
+                }
+
+                TextField {
+                    property real progress: 0
+
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 48
+
+                    id: inputField
+
+                    placeholderText: "Send a Message"
+                    leftPadding: 16
+                    topPadding: 0
+                    bottomPadding: 0
+                    selectByMouse: true
+
+                    text: currentRoom ? currentRoom.cachedInput : ""
+
+                    onTextChanged: {
+                        timeoutTimer.restart()
+                        repeatTimer.start()
+                        currentRoom.cachedInput = text
+                    }
+
+                    Keys.onReturnPressed: {
+                        if (inputField.text) {
+                            inputField.postMessage(inputField.text)
+                            inputField.text = ""
+                        }
+                    }
+
+                    background: Rectangle {
+                        color: MSettings.darkTheme ? "#282828" : "#eaeaea"
+                    }
+
+                    ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
+                    ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
+
+                    Timer {
+                        id: timeoutTimer
+
+                        repeat: false
+                        interval: 2000
+                        onTriggered: {
+                            repeatTimer.stop()
+                            currentRoom.sendTypingNotification(false)
+                        }
+                    }
+
+                    Timer {
+                        id: repeatTimer
+
+                        repeat: true
+                        interval: 5000
+                        triggeredOnStart: true
+                        onTriggered: currentRoom.sendTypingNotification(true)
+                    }
+
+                    function postMessage(text) {
+                        if (text.trim().length === 0) { return }
+                        if(!currentRoom) { return }
+
+                        var PREFIX_ME = '/me '
+                        var PREFIX_NOTICE = '/notice '
+                        var PREFIX_RAINBOW = '/rainbow '
+                        var PREFIX_HTML = '/html '
+                        var PREFIX_MARKDOWN = '/md '
+
+                        if (text.indexOf(PREFIX_ME) === 0) {
+                            text = text.substr(PREFIX_ME.length)
+                            currentRoom.postMessage(text, RoomMessageEvent.Emote)
+                            return
+                        }
+                        if (text.indexOf(PREFIX_NOTICE) === 0) {
+                            text = text.substr(PREFIX_NOTICE.length)
+                            currentRoom.postMessage(text, RoomMessageEvent.Notice)
+                            return
+                        }
+                        if (text.indexOf(PREFIX_RAINBOW) === 0) {
+                            text = text.substr(PREFIX_RAINBOW.length)
+
+                            var parsedText = ""
+                            var rainbowColor = ["#ff2b00", "#ff5500", "#ff8000", "#ffaa00", "#ffd500", "#ffff00", "#d4ff00", "#aaff00", "#80ff00", "#55ff00", "#2bff00", "#00ff00", "#00ff2b", "#00ff55", "#00ff80", "#00ffaa", "#00ffd5", "#00ffff", "#00d4ff", "#00aaff", "#007fff", "#0055ff", "#002bff", "#0000ff", "#2a00ff", "#5500ff", "#7f00ff", "#aa00ff", "#d400ff", "#ff00ff", "#ff00d4", "#ff00aa", "#ff0080", "#ff0055", "#ff002b", "#ff0000"]
+                            for (var i = 0; i < text.length; i++) {
+                                parsedText = parsedText + "<font color='" + rainbowColor[i % rainbowColor.length] + "'>" + text.charAt(i) + "</font>"
+                            }
+                            currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text)
+                            return
+                        }
+                        if (text.indexOf(PREFIX_HTML) === 0) {
+                            text = text.substr(PREFIX_HTML.length)
+                            var re = new RegExp("<.*?>")
+                            var plainText = text.replace(re, "")
+                            currentRoom.postHtmlMessage(plainText, text, RoomMessageEvent.Text)
+                            return
+                        }
+                        if (text.indexOf(PREFIX_MARKDOWN) === 0) {
+                            text = text.substr(PREFIX_MARKDOWN.length)
+                            var parsedText = Markdown.markdown_parser(text)
+                            currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text)
+                            return
+                        }
+
+                        currentRoom.postPlainText(text)
                     }
                 }
 
-                Timer {
+                ItemDelegate {
-                    id: repeatTimer
+                    Layout.preferredWidth: 48
+                    Layout.preferredHeight: 48
 
-                    repeat: true
+                    id: emojiButton
-                    interval: 5000
-                    triggeredOnStart: true
-                    onTriggered: currentRoom.sendTypingNotification(true)
-                }
 
-                RowLayout {
+                    contentItem: MaterialIcon { icon: "\ue24e" }
-                    anchors.fill: parent
-                    spacing: 0
 
-                    ItemDelegate {
+                    background: Rectangle { color: MSettings.darkTheme ? "#282828" : "#eaeaea" }
-                        Layout.preferredWidth: height
-                        Layout.fillHeight: true
 
-                        contentItem: MaterialIcon { icon: "\ue226" }
+                    onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open()
 
-                        onClicked: currentRoom.chooseAndUploadFile()
+                    EmojiPicker {
-                    }
+                        x: window.width - 370
+                        y: window.height - 440
 
-                    TextField {
+                        width: 360
-                        property real progress: 0
+                        height: 360
 
-                        id: inputField
+                        id: emojiPicker
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        placeholderText: "Send a Message"
-                        leftPadding: 16
-                        topPadding: 0
-                        bottomPadding: 0
-                        selectByMouse: true
 
-                        text: currentRoom ? currentRoom.cachedInput : ""
+                        parent: ApplicationWindow.overlay
-                        onTextChanged: {
-                            timeoutTimer.restart()
-                            repeatTimer.start()
-                            currentRoom.cachedInput = text
-                        }
 
-                        Keys.onReturnPressed: {
+                        textArea: inputField
-                            if (inputField.text) {
-                                inputField.postMessage(inputField.text)
-                                inputField.text = ""
-                            }
-                        }
-
-                        background: Rectangle {
-                            color: MSettings.darkTheme ? "#242424" : "#eaeaea"
-                        }
-
-                        ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
-                        ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
-
-                        function postMessage(text) {
-                            if (text.trim().length === 0) { return }
-                            if(!currentRoom) { return }
-
-                            var PREFIX_ME = '/me '
-                            var PREFIX_NOTICE = '/notice '
-                            var PREFIX_RAINBOW = '/rainbow '
-                            var PREFIX_HTML = '/html '
-                            var PREFIX_MARKDOWN = '/md '
-
-                            if (text.indexOf(PREFIX_ME) === 0) {
-                                text = text.substr(PREFIX_ME.length)
-                                currentRoom.postMessage(text, RoomMessageEvent.Emote)
-                                return
-                            }
-                            if (text.indexOf(PREFIX_NOTICE) === 0) {
-                                text = text.substr(PREFIX_NOTICE.length)
-                                currentRoom.postMessage(text, RoomMessageEvent.Notice)
-                                return
-                            }
-                            if (text.indexOf(PREFIX_RAINBOW) === 0) {
-                                text = text.substr(PREFIX_RAINBOW.length)
-
-                                var parsedText = ""
-                                var rainbowColor = ["#ff2b00", "#ff5500", "#ff8000", "#ffaa00", "#ffd500", "#ffff00", "#d4ff00", "#aaff00", "#80ff00", "#55ff00", "#2bff00", "#00ff00", "#00ff2b", "#00ff55", "#00ff80", "#00ffaa", "#00ffd5", "#00ffff", "#00d4ff", "#00aaff", "#007fff", "#0055ff", "#002bff", "#0000ff", "#2a00ff", "#5500ff", "#7f00ff", "#aa00ff", "#d400ff", "#ff00ff", "#ff00d4", "#ff00aa", "#ff0080", "#ff0055", "#ff002b", "#ff0000"]
-                                for (var i = 0; i < text.length; i++) {
-                                    parsedText = parsedText + "<font color='" + rainbowColor[i % rainbowColor.length] + "'>" + text.charAt(i) + "</font>"
-                                }
-                                currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text)
-                                return
-                            }
-                            if (text.indexOf(PREFIX_HTML) === 0) {
-                                text = text.substr(PREFIX_HTML.length)
-                                var re = new RegExp("<.*?>")
-                                var plainText = text.replace(re, "")
-                                currentRoom.postHtmlMessage(plainText, text, RoomMessageEvent.Text)
-                                return
-                            }
-                            if (text.indexOf(PREFIX_MARKDOWN) === 0) {
-                                text = text.substr(PREFIX_MARKDOWN.length)
-                                var parsedText = Markdown.markdown_parser(text)
-                                currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text)
-                                return
-                            }
-
-                            currentRoom.postPlainText(text)
-                        }
-                    }
-
-                    ItemDelegate {
-                        id: emojiButton
-
-                        Layout.preferredWidth: height
-                        Layout.fillHeight: true
-
-                        contentItem: MaterialIcon { icon: "\ue24e" }
-
-                        background: Rectangle { color: MSettings.darkTheme ? "#242424" : "#eaeaea" }
-
-                        onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open()
-
-                        EmojiPicker {
-                            id: emojiPicker
-
-                            parent: ApplicationWindow.overlay
-
-                            x: window.width - 370
-                            y: window.height - 440
-
-                            width: 360
-                            height: 360
-
-                            textArea: inputField
-                        }
                     }
                 }
             }

qml/form/RoomListForm.qml

@@ -14,215 +14,201 @@ Item {
     property alias listModel: roomListProxyModel.sourceModel
     property var enteredRoom: null
 
+    Label {
+        z: 10
+
+        text: MSettings.miniMode ? "Empty" : "Here? No, not here."
+        anchors.centerIn: parent
+        visible: listView.count === 0
+    }
+
     ColumnLayout {
         anchors.fill: parent
         spacing: 0
 
-        Rectangle {
+        TextField {
-            z: 10
             Layout.fillWidth: true
-            Layout.preferredHeight: 80
+            Layout.preferredHeight: 40
-            color: Qt.tint(Material.accent, "#20FFFFFF")
+            Layout.margins: 12
 
-            TextField {
+            id: searchField
-                id: searchField
-                width: parent.width - 18
-                height: 36
-                color: "white"
-                leftPadding: MSettings.miniMode ? 4 : 32
-                topPadding: 0
-                bottomPadding: 0
-                anchors.centerIn: parent
 
-                background: Row {
+            leftPadding: MSettings.miniMode ? 4 : 32
-                    visible: !parent.text
+            topPadding: 0
+            bottomPadding: 0
+            placeholderText: "Search..."
 
-                    MaterialIcon {
+            background: Rectangle { color: MSettings.darkTheme ? "#282828" : "#fafafa" }
-                        icon: "\ue8b6"
-                        color: "white"
 
-                        width: MSettings.miniMode ? parent.width : parent.height
+            Shortcut {
-                        height: parent.height
+                sequence: StandardKey.Find
-                    }
+                onActivated: searchField.forceActiveFocus()
-
-                    Label {
-                        height: parent.height
-                        visible: !MSettings.miniMode
-                        text: "Search"
-                        color: "white"
-                        font.pointSize: 12
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                    }
-                }
-
-                Shortcut {
-                    sequence: StandardKey.Find
-                    onActivated: searchField.forceActiveFocus()
-                }
             }
         }
 
-        Rectangle {
+        SortFilterProxyModel {
+            id: roomListProxyModel
+
+            filters: RegExpFilter {
+                roleName: "name"
+                pattern: searchField.text
+                caseSensitivity: Qt.CaseInsensitive
+            }
+            proxyRoles: ExpressionRole {
+                name: "display"
+                expression: {
+                    switch (category) {
+                    case 1: return "Invited"
+                    case 2: return "Favorites"
+                    case 3: return "Rooms"
+                    case 4: return "People"
+                    case 5: return "Low Priorities"
+                    }
+                }
+            }
+
+            sorters: [
+                RoleSorter { roleName: "category" },
+                RoleSorter {
+                    enabled: MSettings.rearrangeByActivity
+                    roleName: "unreadCount"
+                    sortOrder: Qt.DescendingOrder
+                },
+                StringSorter { roleName: "name" }
+            ]
+        }
+
+        ListView {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            color: MSettings.darkTheme ? "#242424" : "#eaeaea"
+            id: listView
 
-            Label {
+            spacing: 1
-                z: 10
+            clip: true
-                text: MSettings.miniMode ? "Empty" : "Here? No, not here."
-                anchors.centerIn: parent
-                visible: listView.count === 0
-            }
 
-            SortFilterProxyModel {
+            model: roomListProxyModel
-                id: roomListProxyModel
+
-                filters: RegExpFilter {
+            currentIndex: -1
-                    roleName: "name"
+
-                    pattern: searchField.text
+            highlightFollowsCurrentItem: true
-                    caseSensitivity: Qt.CaseInsensitive
+
-                }
+            highlightMoveDuration: 200
-                proxyRoles: ExpressionRole {
+            highlightResizeDuration: 0
-                    name: "display"
+
-                    expression: {
+            boundsBehavior: Flickable.DragOverBounds
-                        switch (category) {
+
-                        case 1: return "Invited"
+            ScrollBar.vertical: ScrollBar {}
-                        case 2: return "Favorites"
+
-                        case 3: return "Rooms"
+            delegate: Rectangle {
-                        case 4: return "People"
+                readonly property bool highlighted: currentRoom === enteredRoom
-                        case 5: return "Low Priorities"
+
-                        }
+                width: parent.width
-                    }
+                height: 64
+
+                color: MSettings.darkTheme ? "#282828" : "#fafafa"
+
+                AutoMouseArea {
+                    anchors.fill: parent
+
+                    hoverEnabled: MSettings.miniMode
+
+                    onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/RoomContextMenu.qml").createObject(this)
+                    onPrimaryClicked: category === RoomType.Invited ? inviteDialog.open() : enteredRoom = currentRoom
+
+                    ToolTip.visible: MSettings.miniMode && containsMouse
+                    ToolTip.text: name
                 }
 
-                sorters: [
+                Rectangle {
-                    RoleSorter { roleName: "category" },
+                    anchors.fill: parent
-                    RoleSorter {
-                        enabled: MSettings.rearrangeByActivity
-                        roleName: "unreadCount"
-                        sortOrder: Qt.DescendingOrder
-                    },
-                    StringSorter { roleName: "name" }
-                ]
-            }
 
-            ListView {
+                    visible: highlighted
-                id: listView
+                    color: Material.accent
-                anchors.fill: parent
+                    opacity: 0.1
+                }
 
-                model: roomListProxyModel
+                Rectangle {
+                    width: 4
+                    height: parent.height
 
-                currentIndex: -1
+                    color: Material.accent
+                    visible: unreadCount > 0 || highlighted
+                }
 
-                boundsBehavior: Flickable.DragOverBounds
+                RowLayout {
+                    anchors.fill: parent
+                    anchors.margins: 12
 
-                ScrollBar.vertical: ScrollBar { id: scrollBar }
+                    spacing: 12
 
-                delegate: Rectangle {
+                    ImageStatus {
-                    readonly property bool highlighted: currentRoom === enteredRoom
+                        Layout.preferredWidth: height
+                        Layout.fillHeight: true
 
-                    id: swipeDelegate
+                        source: avatar ? "image://mxc/" + avatar : ""
-                    width: parent.width
+                        displayText: name
-                    height: 80
-
-                    color: highlighted ? Material.background : "transparent"
-
-                    AutoMouseArea {
-                        anchors.fill: parent
-
-                        hoverEnabled: MSettings.miniMode
-
-                        onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/RoomContextMenu.qml").createObject(this)
-                        onPrimaryClicked: category === RoomType.Invited ? inviteDialog.open() : enteredRoom = currentRoom
-
-                        ToolTip.visible: MSettings.miniMode && containsMouse
-                        ToolTip.text: name
                     }
 
-                    Rectangle {
+                    ColumnLayout {
-                        width: 4
+                        Layout.fillWidth: true
-                        height: parent.height
+                        Layout.fillHeight: true
-                        color: Qt.tint(Material.accent, "#20FFFFFF")
+                        Layout.alignment: Qt.AlignHCenter
-                        visible: unreadCount > 0 || highlighted
-                    }
 
-                    RowLayout {
+                        visible: parent.width > 64
-                        anchors.fill: parent
-                        anchors.margins: 16
-                        spacing: 16
 
-                        ImageStatus {
+                        Label {
-                            Layout.preferredWidth: height
-                            Layout.fillHeight: true
-
-                            source: avatar ? "image://mxc/" + avatar : ""
-                            displayText: name
-                        }
-
-                        ColumnLayout {
                             Layout.fillWidth: true
                             Layout.fillHeight: true
-                            Layout.alignment: Qt.AlignHCenter
 
-                            visible: parent.width > 80
+                            text: name || "No Name"
+                            font.pointSize: 12
+                            elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
+                        }
 
-                            Label {
+                        Label {
-                                Layout.fillWidth: true
+                            Layout.fillWidth: true
-                                Layout.fillHeight: true
+                            Layout.fillHeight: true
 
-                                text: name || "No Name"
+                            text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm,"");
-                                font.pointSize: 16
+                            elide: Text.ElideRight
-                                elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
-                                wrapMode: Text.NoWrap
-                            }
-
-                            Label {
-                                Layout.fillWidth: true
-                                Layout.fillHeight: true
-
-                                text: lastEvent || topic
-                                elide: Text.ElideRight
-                                wrapMode: Text.NoWrap
-                            }
                         }
                     }
                 }
+            }
 
-                section.property: "display"
+            section.property: "display"
-                section.criteria: ViewSection.FullString
+            section.criteria: ViewSection.FullString
-                section.delegate: Label {
+            section.delegate: Label {
-                    width: parent.width
+                width: parent.width
-                    height: 24
+                height: 24
-                    text: section
-                    color: "grey"
-                    leftPadding: MSettings.miniMode ? undefined : 16
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined
-                    background: Rectangle {
-                        anchors.fill: parent
-                        color: MSettings.darkTheme ? "#363636" : "#dbdbdb"
-                    }
-                }
 
-                Dialog {
+                text: section
-                    id: inviteDialog
+                color: "grey"
-                    parent: ApplicationWindow.overlay
+                leftPadding: MSettings.miniMode ? undefined : 16
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined
+            }
 
-                    x: (window.width - width) / 2
+            Dialog {
-                    y: (window.height - height) / 2
+                id: inviteDialog
-                    width: 360
+                parent: ApplicationWindow.overlay
 
-                    title: "Action Required"
+                x: (window.width - width) / 2
-                    modal: true
+                y: (window.height - height) / 2
-                    standardButtons: Dialog.Ok | Dialog.Cancel
+                width: 360
 
-                    contentItem: Label { text: "Accept this invitation?" }
+                title: "Action Required"
+                modal: true
+                standardButtons: Dialog.Ok | Dialog.Cancel
 
-                    onAccepted: currentRoom.acceptInvitation()
+                contentItem: Label { text: "Accept this invitation?" }
-                    onRejected: currentRoom.forget()
+
-                }
+                onAccepted: currentRoom.acceptInvitation()
+                onRejected: currentRoom.forget()
             }
         }
     }

qml/main.qml

@@ -13,12 +13,14 @@ import "form"
 ApplicationWindow {
     readonly property var connection: matriqueController.connection
 
-    id: window
-    visible: true
     width: 960
     height: 640
     minimumWidth: 800
     minimumHeight: 480
+
+    id: window
+
+    visible: true
     title: qsTr("Matrique")
 
     Material.theme: MSettings.darkTheme ? Material.Dark : Material.Light
@@ -40,10 +42,11 @@ ApplicationWindow {
     Popup {
         property bool busy: matriqueController.busy
 
-        id: busyPopup
-
         x: (window.width - width) / 2
         y: (window.height - height) / 2
+
+        id: busyPopup
+
         modal: true
         focus: true
 
@@ -65,7 +68,7 @@ ApplicationWindow {
 
         parent: null
 
-        connection: matriqueController.isLogin ? window.connection : null
+        connection: window.connection
     }
 
     Setting {
@@ -81,20 +84,24 @@ ApplicationWindow {
         spacing: 0
 
         Rectangle {
-            id: sideNav
+            Layout.preferredWidth: 64
-            Layout.preferredWidth: 80
             Layout.fillHeight: true
-            color: Material.accent
+
+            id: sideNav
+
+            color: Material.primary
 
             ColumnLayout {
                 anchors.fill: parent
                 spacing: 0
 
                 SideNavButton {
-                    id: statusNavButton
+                    Layout.fillWidth: true
-                    contentItem: ImageStatus {
+                    Layout.preferredHeight: width
+
+                    ImageStatus {
                         anchors.fill: parent
-                        anchors.margins: 15
+                        anchors.margins: 12
 
                         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 : ""
@@ -104,16 +111,27 @@ ApplicationWindow {
                 }
 
                 Rectangle {
-                    color: "transparent"
                     Layout.fillHeight: true
+
+                    color: "transparent"
                 }
 
                 SideNavButton {
-                    contentItem: MaterialIcon { icon: "\ue145"; color: "white" }
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width
+
+                    MaterialIcon {
+                        anchors.fill: parent
+
+                        icon: "\ue145"
+                        color:  "white"
+                    }
+
                     onClicked: addRoomMenu.popup()
 
                     Menu {
                         id: addRoomMenu
+
                         MenuItem {
                             text:"New Room"
                             onTriggered: addRoomDialog.open()
@@ -132,14 +150,17 @@ ApplicationWindow {
 
                                 contentItem: Column {
                                     TextField {
-                                        id: addRoomDialogNameTextField
                                         width: parent.width
 
+                                        id: addRoomDialogNameTextField
+
                                         placeholderText: "Name"
                                     }
                                     TextField {
-                                        id: addRoomDialogTopicTextField
                                         width: parent.width
+
+                                        id: addRoomDialogTopicTextField
+
                                         placeholderText: "Topic"
                                     }
                                 }
@@ -149,16 +170,18 @@ ApplicationWindow {
                         }
                         MenuItem {
                             text: "Join Room"
+
                             onTriggered: joinRoomDialog.open()
 
                             Dialog {
-                                id: joinRoomDialog
-                                parent: ApplicationWindow.overlay
-
                                 x: (window.width - width) / 2
                                 y: (window.height - height) / 2
                                 width: 360
 
+                                id: joinRoomDialog
+
+                                parent: ApplicationWindow.overlay
+
                                 title: "Input Room Alias or ID"
                                 modal: true
                                 standardButtons: Dialog.Ok | Dialog.Cancel
@@ -171,18 +194,21 @@ ApplicationWindow {
                                 onAccepted: matriqueController.joinRoom(joinRoomDialogTextField.text)
                             }
                         }
+
                         MenuItem {
                             text: "Direct Chat"
+
                             onTriggered: directChatDialog.open()
 
                             Dialog {
-                                id: directChatDialog
-                                parent: ApplicationWindow.overlay
-
                                 x: (window.width - width) / 2
                                 y: (window.height - height) / 2
                                 width: 360
 
+                                id: directChatDialog
+
+                                parent: ApplicationWindow.overlay
+
                                 title: "Input User ID"
                                 modal: true
                                 standardButtons: Dialog.Ok | Dialog.Cancel
@@ -199,23 +225,41 @@ ApplicationWindow {
                 }
 
                 SideNavButton {
-                    contentItem: MaterialIcon { icon: "\ue8b8"; color: "white" }
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width
+
+                    MaterialIcon {
+                        anchors.fill: parent
+
+                        icon: "\ue8b8"
+                        color: parent.highlighted ? Material.accent : "white"
+                    }
                     page: settingPage
                 }
 
                 SideNavButton {
-                    contentItem: MaterialIcon { icon: "\ue879"; color: "white" }
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width
+
+                    MaterialIcon {
+                        anchors.fill: parent
+
+                        icon: "\ue879"
+                        color: "white"
+                    }
+
                     onClicked: Qt.quit()
                 }
             }
         }
 
         StackView {
-            id: stackView
-            initialItem: roomPage
-
             Layout.fillWidth: true
             Layout.fillHeight: true
+
+            id: stackView
+
+            initialItem: roomPage
         }
     }
 

qml/menu/MessageContextMenu.qml

@@ -8,28 +8,33 @@ Menu {
 
     MenuItem {
         text: "Copy"
+
         onTriggered: matriqueController.copyToClipboard(plainText)
     }
     MenuItem {
         text: "Copy Source"
+
         onTriggered: matriqueController.copyToClipboard(toolTip)
     }
     MenuItem {
         visible: isFile
         height: visible ? undefined : 0
         text: "Open Externally"
-        onTriggered: delegateLoader.item.downloadAndOpen()
+
+        onTriggered: messageRow.openExternally()
     }
     MenuItem {
         visible: isFile
         height: visible ? undefined : 0
         text: "Save As"
-        onTriggered: delegateLoader.item.saveFileAs()
+
+        onTriggered: messageRow.saveFileAs()
     }
     MenuItem {
         visible: sentByMe
         height: visible ? undefined : 0
         text: "Redact"
+
         onTriggered: currentRoom.redactEvent(eventId)
     }
 

qml/menu/RoomContextMenu.qml

@@ -8,21 +8,25 @@ Menu {
         text: "Favourite"
         checkable: true
         checked: currentRoom && currentRoom.isFavourite
+
         onTriggered: currentRoom.isFavourite ? currentRoom.removeTag("m.favourite") : currentRoom.addTag("m.favourite", "1")
     }
     MenuItem {
         text: "Deprioritize"
         checkable: true
         checked: currentRoom && currentRoom.isLowPriority
+
         onTriggered: currentRoom.isLowPriority ? currentRoom.removeTag("m.lowpriority") : currentRoom.addTag("m.lowpriority", "1")
     }
     MenuSeparator {}
     MenuItem {
         text: "Mark as Read"
+
         onTriggered: currentRoom.markAllMessagesAsRead()
     }
     MenuItem {
         text: "Leave Room"
+
         onTriggered: currentRoom.forget()
     }
 

qtquickcontrols2.conf

@@ -7,9 +7,7 @@ Style=Material
 
 [Material]
 Theme=Light
-Primary=#00695c
+Primary=#344955
-Accent=#00695c
+Accent=#498882
-;Primary=#1565c0
-;Accent=#1565c0
 ;Foreground=Black
 ;Background=#161616

res.qrc

@@ -14,16 +14,9 @@
         <file>asset/img/icon.png</file>
         <file>js/md.js</file>
         <file>qml/component/MessageDelegate.qml</file>
-        <file>qml/component/MessageBubble.qml</file>
-        <file>qml/component/ImageBubble.qml</file>
-        <file>qml/component/StateBubble.qml</file>
         <file>qml/component/DownloadableContent.qml</file>
-        <file>qml/component/FileBubble.qml</file>
-        <file>qml/component/AvatarContainer.qml</file>
         <file>qml/form/RoomListForm.qml</file>
-        <file>qml/component/AudioBubble.qml</file>
         <file>qml/Setting.qml</file>
-        <file>qml/component/TextDelegate.qml</file>
         <file>qml/component/EmojiPicker.qml</file>
         <file>qml/component/EmojiButton.qml</file>
         <file>qml/component/AutoImage.qml</file>
@@ -33,5 +26,8 @@
         <file>qml/MatriqueSettings.qml</file>
         <file>qml/menu/MessageContextMenu.qml</file>
         <file>qml/menu/RoomContextMenu.qml</file>
+        <file>qml/component/GenericBubble.qml</file>
+        <file>qml/component/StateDelegate.qml</file>
+        <file>qml/component/AutoLabel.qml</file>
     </qresource>
 </RCC>

src/matriqueroom.cpp

@@ -83,6 +83,7 @@ void MatriqueRoom::sendTypingNotification(bool isTyping) {
 QString MatriqueRoom::lastEvent() {
   if (timelineSize() == 0) return "";
   const RoomEvent* lastEvent = messageEvents().rbegin()->get();
+  if (lastEvent->contentJson().value("body").toString() == "") return "";
   return user(lastEvent->senderId())->displayname() + ": " +
          lastEvent->contentJson().value("body").toString();
 }