First UI redesign.

qml/Room.qml

@@ -18,16 +18,22 @@ Page {
         onNewMessage: if (!window.active) matriqueController.showMessage(roomName, content, icon)
     }
 
+    Rectangle {
+        anchors.fill: parent
+
+        color: MSettings.darkTheme ? "#363636" : "#f3f3f3"
+
         RowLayout {
             anchors.fill: parent
+
             spacing: 0
 
             RoomListForm {
                 id: roomListForm
 
                 Layout.fillHeight: true
-            Layout.preferredWidth: MSettings.miniMode ? 80 : page.width * 0.35
+                Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35
-            Layout.minimumWidth: 80
+                Layout.minimumWidth: 64
                 Layout.maximumWidth: 360
 
                 listModel:  roomListModel
@@ -43,3 +49,4 @@ Page {
             }
         }
     }
+}

qml/component/SideNavButton.qml

@@ -3,31 +3,21 @@ 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 {
-        id: buttonDelegate
-        anchors.fill: parent
-
     onClicked: {
         if(page && stackView.currentItem !== page) {
             if(stackView.depth === 1) {
@@ -37,7 +27,5 @@ Item {
                 stackView.push(page)
             }
         }
-            sideNavButton.clicked()
-        }
     }
 }

qml/component/TextDelegate.qml

@@ -20,8 +20,8 @@ Rectangle {
     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
+    color: flat ? "transparent" : highlighted ? Material.primary : background
-    border.color: Material.accent
+    border.color: Material.primary
     border.width: flat ? 2 : 0
 
     ColumnLayout {

qml/form/RoomForm.qml

@@ -39,7 +39,6 @@ Item {
         ColumnLayout {
             anchors.fill: parent
             anchors.margins: 32
-            spacing: 16
 
             ImageStatus {
                 Layout.preferredWidth: 64
@@ -116,7 +115,7 @@ Item {
                     RowLayout {
                         anchors.fill: parent
                         anchors.margins: 8
-                        spacing: 16
+                        spacing: 12
 
                         ImageStatus {
                             Layout.preferredWidth: height
@@ -159,9 +158,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,9 +169,9 @@ Item {
 
                     RowLayout {
                         anchors.fill: parent
-                        anchors.margins: 16
+                        anchors.margins: 12
 
-                        spacing: 16
+                        spacing: 12
 
                         ImageStatus {
                             Layout.preferredWidth: height
@@ -186,14 +185,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 +203,7 @@ Item {
                                 Layout.fillHeight: true
 
                                 text: currentRoom ? currentRoom.topic : ""
+                                color: "white"
                                 elide: Text.ElideRight
                                 wrapMode: Text.NoWrap
                             }
@@ -304,7 +305,7 @@ Item {
 
                     RoundButton {
                         id: goTopFab
-                        width: height
+                        width: 64
                         height: 64
                         visible: !parent.atYEnd
 
@@ -313,12 +314,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()
 
@@ -334,11 +335,55 @@ Item {
                 }
             }
 
-            Pane {
+            RowLayout {
-                padding: 16
-
                 Layout.fillWidth: true
-                Layout.preferredHeight: 80
+                Layout.preferredHeight: 48
+                Layout.margins: 16
+
+                spacing: 0
+
+                ItemDelegate {
+                    Layout.preferredWidth: 48
+                    Layout.preferredHeight: 48
+
+                    contentItem: MaterialIcon { icon: "\ue226" }
+
+                    onClicked: currentRoom.chooseAndUploadFile()
+                }
+
+                TextField {
+                    property real progress: 0
+
+                    id: inputField
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 48
+                    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 ? "#242424" : "#eaeaea"
+                    }
+
+                    ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
+                    ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
 
                     Timer {
                         id: timeoutTimer
@@ -360,52 +405,6 @@ Item {
                         onTriggered: currentRoom.sendTypingNotification(true)
                     }
 
-                RowLayout {
-                    anchors.fill: parent
-                    spacing: 0
-
-                    ItemDelegate {
-                        Layout.preferredWidth: height
-                        Layout.fillHeight: true
-
-                        contentItem: MaterialIcon { icon: "\ue226" }
-
-                        onClicked: currentRoom.chooseAndUploadFile()
-                    }
-
-                    TextField {
-                        property real progress: 0
-
-                        id: inputField
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        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 ? "#242424" : "#eaeaea"
-                        }
-
-                        ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
-                        ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
-
                     function postMessage(text) {
                         if (text.trim().length === 0) { return }
                         if(!currentRoom) { return }
@@ -458,8 +457,8 @@ Item {
                 ItemDelegate {
                     id: emojiButton
 
-                        Layout.preferredWidth: height
+                    Layout.preferredWidth: 48
-                        Layout.fillHeight: true
+                    Layout.preferredHeight: 48
 
                     contentItem: MaterialIcon { icon: "\ue24e" }
 
@@ -484,7 +483,6 @@ Item {
             }
         }
     }
-    }
 
     onCurrentRoomChanged: if (currentRoom && currentRoom.timelineSize === 0) currentRoom.getPreviousContent(20)
 }

qml/form/RoomListForm.qml

@@ -14,46 +14,29 @@ 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 {
-            z: 10
-            Layout.fillWidth: true
-            Layout.preferredHeight: 80
-            color: Qt.tint(Material.accent, "#20FFFFFF")
-
         TextField {
             id: searchField
-                width: parent.width - 18
+            Layout.fillWidth: true
-                height: 36
+            Layout.preferredHeight: 40
-                color: "white"
+            Layout.margins: 12
             leftPadding: MSettings.miniMode ? 4 : 32
             topPadding: 0
             bottomPadding: 0
-                anchors.centerIn: parent
+            placeholderText: "Search..."
 
-                background: Row {
+            background: Rectangle {
-                    visible: !parent.text
+                color: MSettings.darkTheme ? "#242424" : "#fafafa"
-
-                    MaterialIcon {
-                        icon: "\ue8b6"
-                        color: "white"
-
-                        width: MSettings.miniMode ? parent.width : parent.height
-                        height: parent.height
-                    }
-
-                    Label {
-                        height: parent.height
-                        visible: !MSettings.miniMode
-                        text: "Search"
-                        color: "white"
-                        font.pointSize: 12
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                    }
             }
 
             Shortcut {
@@ -61,20 +44,6 @@ Item {
                 onActivated: searchField.forceActiveFocus()
             }
         }
-        }
-
-        Rectangle {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            color: MSettings.darkTheme ? "#242424" : "#eaeaea"
-
-            Label {
-                z: 10
-                text: MSettings.miniMode ? "Empty" : "Here? No, not here."
-                anchors.centerIn: parent
-                visible: listView.count === 0
-            }
 
         SortFilterProxyModel {
             id: roomListProxyModel
@@ -108,8 +77,13 @@ Item {
         }
 
         ListView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
             id: listView
-                anchors.fill: parent
+
+            spacing: 1
+            clip: true
 
             model: roomListProxyModel
 
@@ -117,16 +91,15 @@ Item {
 
             boundsBehavior: Flickable.DragOverBounds
 
-                ScrollBar.vertical: ScrollBar { id: scrollBar }
+            ScrollBar.vertical: ScrollBar {}
 
             delegate: Rectangle {
                 readonly property bool highlighted: currentRoom === enteredRoom
 
-                    id: swipeDelegate
                 width: parent.width
-                    height: 80
+                height: 64
 
-                    color: highlighted ? Material.background : "transparent"
+                color: "#fafafa"
 
                 AutoMouseArea {
                     anchors.fill: parent
@@ -143,14 +116,14 @@ Item {
                 Rectangle {
                     width: 4
                     height: parent.height
-                        color: Qt.tint(Material.accent, "#20FFFFFF")
+                    color: Material.accent
                     visible: unreadCount > 0 || highlighted
                 }
 
                 RowLayout {
                     anchors.fill: parent
-                        anchors.margins: 16
+                    anchors.margins: 12
-                        spacing: 16
+                    spacing: 12
 
                     ImageStatus {
                         Layout.preferredWidth: height
@@ -165,14 +138,14 @@ Item {
                         Layout.fillHeight: true
                         Layout.alignment: Qt.AlignHCenter
 
-                            visible: parent.width > 80
+                        visible: parent.width > 64
 
                         Label {
                             Layout.fillWidth: true
                             Layout.fillHeight: true
 
                             text: name || "No Name"
-                                font.pointSize: 16
+                            font.pointSize: 12
                             elide: Text.ElideRight
                             wrapMode: Text.NoWrap
                         }
@@ -181,7 +154,7 @@ Item {
                             Layout.fillWidth: true
                             Layout.fillHeight: true
 
-                                text: lastEvent || topic
+                            text: (lastEvent || topic).replace(/(\r\n\t|\n|\r\t)/gm,"");
                             elide: Text.ElideRight
                             wrapMode: Text.NoWrap
                         }
@@ -200,10 +173,6 @@ Item {
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined
-                    background: Rectangle {
-                        anchors.fill: parent
-                        color: MSettings.darkTheme ? "#363636" : "#dbdbdb"
-                    }
             }
 
             Dialog {
@@ -226,4 +195,3 @@ Item {
         }
     }
 }
-}

qml/main.qml

@@ -82,19 +82,21 @@ ApplicationWindow {
 
         Rectangle {
             id: sideNav
-            Layout.preferredWidth: 80
+            Layout.preferredWidth: 64
             Layout.fillHeight: true
-            color: Material.accent
+            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 : ""
@@ -109,7 +111,16 @@ ApplicationWindow {
                 }
 
                 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 {
@@ -171,6 +182,7 @@ ApplicationWindow {
                                 onAccepted: matriqueController.joinRoom(joinRoomDialogTextField.text)
                             }
                         }
+
                         MenuItem {
                             text: "Direct Chat"
                             onTriggered: directChatDialog.open()
@@ -199,12 +211,29 @@ 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()
                 }
             }

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