More modern design.

qml/Room.qml

@@ -6,6 +6,7 @@ import Spectral 0.1
 import Spectral.Settings 0.1
 
 import "form"
+import "component"
 
 Page {
     property alias connection: roomListModel.connection
@@ -16,15 +17,9 @@ Page {
     RoomListModel {
         id: roomListModel
 
-        onRoomAdded: room.getPreviousContent(20)
         onNewMessage: if (!window.active) spectralController.showMessage(roomName, content, icon)
     }
 
-    Rectangle {
-        anchors.fill: parent
-
-        color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
-
     RowLayout {
         anchors.fill: parent
 
@@ -39,13 +34,11 @@ Page {
             id: roomListForm
 
             listModel:  roomListModel
+
+            layer.enabled: true
+            layer.effect: ElevationEffect {
+                elevation: 2
             }
-
-            Rectangle {
-                Layout.preferredWidth: 1
-                Layout.fillHeight: true
-
-                color: MSettings.darkTheme ? "#363636" : "#ececec"
         }
 
         RoomForm {
@@ -58,4 +51,3 @@ Page {
         }
     }
 }
-}

qml/Setting.qml

@@ -41,8 +41,6 @@ Page {
                         width: accountSettingsListView.width
                         height: 64
 
-                        clip: true
-
                         Row {
                             anchors.fill: parent
                             anchors.margins: 8
@@ -239,11 +237,17 @@ Page {
     Rectangle {
         width: 240
         height: parent.height
+        z: 10
 
         id: settingDrawer
 
         color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
 
+        layer.enabled: true
+        layer.effect: ElevationEffect {
+            elevation: 4
+        }
+
         Column {
             anchors.fill: parent
 

qml/component/ElevationEffect.qml

@@ -0,0 +1,145 @@
+import QtQuick 2.9
+import QtGraphicalEffects 1.0
+
+/*!
+   An effect for standard Material Design elevation shadows
+ */
+Item {
+    id: effect
+
+    property variant source
+
+    property int elevation: 0
+
+    // Shadow details follow Material Design (taken from Angular Material)
+    readonly property var _shadows: [
+        [{offset: 0, blur: 0, spread: 0},
+         {offset: 0, blur: 0, spread: 0},
+         {offset: 0, blur: 0, spread: 0}],
+
+        [{offset: 1, blur: 3, spread: 0},
+         {offset: 1, blur: 1, spread: 0},
+         {offset: 2, blur: 1, spread: -1}],
+
+        [{offset: 1, blur: 5, spread: 0},
+         {offset: 2, blur: 2, spread: 0},
+         {offset: 3, blur: 1, spread: -2}],
+
+        [{offset: 1, blur: 8, spread: 0},
+         {offset: 3, blur: 4, spread: 0},
+         {offset: 3, blur: 3, spread: -2}],
+
+        [{offset: 2, blur: 4, spread: -1},
+         {offset: 4, blur: 5, spread: 0},
+         {offset: 1, blur: 10, spread: 0}],
+
+        [{offset: 3, blur: 5, spread: -1},
+         {offset: 5, blur: 8, spread: 0},
+         {offset: 1, blur: 14, spread: 0}],
+
+        [{offset: 3, blur: 5, spread: -1},
+         {offset: 6, blur: 10, spread: 0},
+         {offset: 1, blur: 18, spread: 0}],
+
+        [{offset: 4, blur: 5, spread: -2},
+         {offset: 7, blur: 10, spread: 1},
+         {offset: 2, blur: 16, spread: 1}],
+
+        [{offset: 5, blur: 5, spread: -3},
+         {offset: 8, blur: 10, spread: 1},
+         {offset: 3, blur: 14, spread: 2}],
+
+        [{offset: 5, blur: 6, spread: -3},
+         {offset: 9, blur: 12, spread: 1},
+         {offset: 3, blur: 16, spread: 2}],
+
+        [{offset: 6, blur: 6, spread: -3},
+         {offset: 10, blur: 14, spread: 1},
+         {offset: 4, blur: 18, spread: 3}],
+
+        [{offset: 6, blur: 7, spread: -4},
+         {offset: 11, blur: 15, spread: 1},
+         {offset: 4, blur: 20, spread: 3}],
+
+        [{offset: 7, blur: 8, spread: -4},
+         {offset: 12, blur: 17, spread: 2},
+         {offset: 5, blur: 22, spread: 4}],
+
+        [{offset: 7, blur: 8, spread: -4},
+         {offset: 13, blur: 19, spread: 2},
+         {offset: 5, blur: 24, spread: 4}],
+
+        [{offset: 7, blur: 9, spread: -4},
+         {offset: 14, blur: 21, spread: 2},
+         {offset: 5, blur: 26, spread: 4}],
+
+        [{offset: 8, blur: 9, spread: -5},
+         {offset: 15, blur: 22, spread: 2},
+         {offset: 6, blur: 28, spread: 5}],
+
+        [{offset: 8, blur: 10, spread: -5},
+         {offset: 16, blur: 24, spread: 2},
+         {offset: 6, blur: 30, spread: 5}],
+
+        [{offset: 8, blur: 11, spread: -5},
+         {offset: 17, blur: 26, spread: 2},
+         {offset: 6, blur: 32, spread: 5}],
+
+        [{offset: 9, blur: 11, spread: -5},
+         {offset: 18, blur: 28, spread: 2},
+         {offset: 7, blur: 34, spread: 6}],
+
+        [{offset: 9, blur: 12, spread: -6},
+         {offset: 19, blur: 29, spread: 2},
+         {offset: 7, blur: 36, spread: 6}],
+
+        [{offset: 10, blur: 13, spread: -6},
+         {offset: 20, blur: 31, spread: 3},
+         {offset: 8, blur: 38, spread: 7}],
+
+        [{offset: 10, blur: 13, spread: -6},
+         {offset: 21, blur: 33, spread: 3},
+         {offset: 8, blur: 40, spread: 7}],
+
+        [{offset: 10, blur: 14, spread: -6},
+         {offset: 22, blur: 35, spread: 3},
+         {offset: 8, blur: 42, spread: 7}],
+
+        [{offset: 11, blur: 14, spread: -7},
+         {offset: 23, blur: 36, spread: 3},
+         {offset: 9, blur: 44, spread: 8}],
+
+        [{offset: 11, blur: 15, spread: -7},
+         {offset: 24, blur: 38, spread: 3},
+         {offset: 9, blur: 46, spread: 8}]
+    ]
+
+    readonly property var _shadowColors: [
+        Qt.rgba(0,0,0, 0.2),
+        Qt.rgba(0,0,0, 0.14),
+        Qt.rgba(0,0,0, 0.12)
+    ]
+
+    Repeater {
+        model: _shadows[elevation]
+
+        delegate: RectangularGlow {
+            anchors {
+                centerIn: parent
+                verticalCenterOffset: modelData.offset
+            }
+
+            width: parent.width + 2 * modelData.spread
+            height: parent.height + 2 * modelData.spread
+            glowRadius: modelData.blur/2
+            spread: 0.05
+            color: _shadowColors[index]
+            cornerRadius: modelData.blur + (effect.source.radius || 0)
+        }
+    }
+
+    ShaderEffect {
+        anchors.fill: parent
+        property alias source: effect.source;
+    }
+}

qml/component/GenericBubble.qml

@@ -8,7 +8,6 @@ Control {
     property bool colored: false
 
     readonly property bool darkBackground: highlighted  ? true : MSettings.darkTheme
-    readonly property color backgroundColor: MSettings.darkTheme ? "#242424" : "lightgrey"
 
     padding: 12
 
@@ -22,5 +21,12 @@ Control {
         }
     }
 
-    background: Rectangle { color: colored ? Material.accent : highlighted ? Material.primary : backgroundColor }
+    background: Rectangle {
+        color: colored ? Material.accent : highlighted ? Material.primary : Material.background
+
+        layer.enabled: true
+        layer.effect: ElevationEffect {
+            elevation: 2
+        }
+    }
 }

qml/component/RoomDrawer.qml

@@ -101,6 +101,8 @@ Drawer {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            id: userListView
+
             clip: true
 
             boundsBehavior: Flickable.DragOverBounds
@@ -109,8 +111,11 @@ Drawer {
                 room: roomDrawer.room
             }
 
-            delegate: SwipeDelegate {
+            delegate: Column {
-                width: parent.width
+                property bool expanded: false
+
+                ItemDelegate {
+                    width: userListView.width
                     height: 48
 
                     RowLayout {
@@ -133,24 +138,31 @@ Drawer {
                         }
                     }
 
-                swipe.right: Rectangle {
+                    onClicked: expanded = !expanded
-                    width: parent.height
-                    height: parent.height
-                    anchors.right: parent.right
-
-                    color: Material.accent
-
-                    MaterialIcon {
-                        anchors.fill: parent
-
-                        icon: "\ue8fb"
-                        color: "white"
                 }
 
-                    SwipeDelegate.onClicked: room.kickMember(userId)
+                ColumnLayout {
+                    width: parent.width - 32
+                    height: expanded ? implicitHeight : 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    spacing: 0
+
+                    clip: true
+
+                    Button {
+                        Layout.fillWidth: true
+
+                        text: "Kick"
+                        highlighted: true
+
+                        onClicked: room.kickMember(userId)
                     }
 
-                onClicked: inputField.insert(inputField.cursorPosition, name)
+                    Behavior on height {
+                        PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
+                    }
+                }
             }
 
             ScrollBar.vertical: ScrollBar {}

qml/form/RoomForm.qml

@@ -5,9 +5,10 @@ import QtQuick.Controls.Material 2.2
 import QtGraphicalEffects 1.0
 import Spectral 0.1
 import Spectral.Settings 0.1
+import SortFilterProxyModel 0.2
 
-import "qrc:/qml/component"
+import "../component"
-import "qrc:/qml/menu"
+import "../menu"
 import "qrc:/js/md.js" as Markdown
 import "qrc:/js/util.js" as Util
 
@@ -16,6 +17,11 @@ Item {
 
     id: item
 
+    MessageEventModel {
+        id: messageEventModel
+        room: currentRoom
+    }
+
     RoomDrawer {
         width: Math.min(item.width * 0.7, 480)
         height: item.height
@@ -25,7 +31,7 @@ Item {
         room: currentRoom
     }
 
-    Pane {
+    Control {
         anchors.fill: parent
         padding: 0
 
@@ -47,6 +53,11 @@ Item {
 
                 color: Material.accent
 
+                layer.enabled: true
+                layer.effect: ElevationEffect {
+                    elevation: 2
+                }
+
                 ItemDelegate {
                     anchors.fill: parent
 
@@ -69,7 +80,6 @@ Item {
                         ColumnLayout {
                             Layout.fillWidth: true
                             Layout.fillHeight: true
-                            Layout.alignment: Qt.AlignHCenter
 
                             visible: parent.width > 64
 
@@ -113,7 +123,6 @@ Item {
 
                     id: messageListView
 
-                    clip: true
                     displayMarginBeginning: 40
                     displayMarginEnd: 40
                     verticalLayoutDirection: ListView.BottomToTop
@@ -124,26 +133,27 @@ Item {
 
                     cacheBuffer: 200
 
-                    model: MessageEventModel {
+                    model: SortFilterProxyModel {
-                        id: messageEventModel
+                        id: sortedRoomListModel
-                        room: currentRoom
+
+                        sourceModel: messageEventModel
+
+                        filters: ExpressionFilter {
+                            expression: marks !== 0x08 && marks !== 0x10
+                        }
                     }
 
                     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
 
                         Label {
                             Layout.alignment: Qt.AlignHCenter
 
-                            visible: section !== aboveSection && !hidden
+                            visible: section !== aboveSection
 
                             text: section
                             color: "white"
@@ -316,10 +326,33 @@ Item {
                 }
             }
 
-            RowLayout {
+            Item {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 48
+                Layout.preferredHeight: 40
-                Layout.margins: 16
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 40
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                color: Material.background
+
+                Rectangle {
+                    anchors.verticalCenter: parent.top
+                    width:  parent.width
+                    height: 48
+
+                    color: MSettings.darkTheme ? "#303030" : "#fafafa"
+
+                    layer.enabled: true
+                    layer.effect: ElevationEffect {
+                        elevation: 2
+                    }
+
+                    RowLayout {
+                        anchors.fill: parent
 
                         spacing: 0
 
@@ -355,14 +388,14 @@ Item {
 
                                 text: currentRoom ? currentRoom.cachedInput : ""
 
+                                background: Item {}
+
                                 onTextChanged: {
                                     timeoutTimer.restart()
                                     repeatTimer.start()
                                     currentRoom.cachedInput = text
                                 }
 
-                        background: Rectangle { color: MSettings.darkTheme ? "#282828" : "#eaeaea" }
-
                                 ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
                                 ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
 
@@ -460,8 +493,6 @@ Item {
 
                             contentItem: MaterialIcon { icon: "\ue24e" }
 
-                    background: Rectangle { color: MSettings.darkTheme ? "#282828" : "#eaeaea" }
-
                             onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open()
 
                             EmojiPicker {
@@ -484,3 +515,5 @@ Item {
                 }
             }
         }
+    }
+}

qml/form/RoomListForm.qml

@@ -8,18 +8,18 @@ import Spectral 0.1
 import SortFilterProxyModel 0.2
 import Spectral.Settings 0.1
 
-import "qrc:/qml/component"
+import "../component"
-import "qrc:/qml/menu"
+import "../menu"
 import "qrc:/js/util.js" as Util
 
-Item {
+Rectangle {
     property alias listModel: sortedRoomListModel.sourceModel
     property int filter: 0
     property var enteredRoom: null
 
-    Label {
+    color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
-        z: 10
 
+    Label {
         text: MSettings.miniMode ? "Empty" : "Here? No, not here."
         anchors.centerIn: parent
         visible: listView.count === 0
@@ -41,7 +41,13 @@ Item {
             bottomPadding: 0
             placeholderText: "Search..."
 
-            background: Rectangle { color: MSettings.darkTheme ? "#303030" : "#fafafa" }
+            background: Rectangle {
+                color: MSettings.darkTheme ? "#303030" : "#fafafa"
+                layer.enabled: true
+                layer.effect: ElevationEffect {
+                    elevation: searchField.focus ? 2 : 1
+                }
+            }
 
             Shortcut {
                 sequence: StandardKey.Find

res.qrc

@@ -30,5 +30,6 @@
         <file>qml/component/AutoLabel.qml</file>
         <file>qml/component/RoomDrawer.qml</file>
         <file>js/util.js</file>
+        <file>qml/component/ElevationEffect.qml</file>
     </qresource>
 </RCC>

src/messageeventmodel.cpp

@@ -13,6 +13,10 @@
 #include <QtCore/QDebug>
 #include <QtQml>  // for qmlRegisterType()
 
+static QString parseAvatarUrl(QUrl url) {
+  return url.host() + "/" + url.path();
+}
+
 QHash<int, QByteArray> MessageEventModel::roleNames() const {
   QHash<int, QByteArray> roles = QAbstractItemModel::roleNames();
   roles[EventTypeRole] = "eventType";
@@ -330,11 +334,12 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
 
           if (e.hasTextContent() && e.mimeType().name() != "text/plain") {
             static const QRegExp userPillRegExp(
-                "<a (href=\"https://matrix.to/#/@.*:.*\")>(.*)</a>");
+                "<a href=\"https://matrix.to/#/@.*:.*\">(.*)</a>");
-            static const QRegExp replyToRegExp(
+            QString formattedStr(
-                "<a href=\"https://matrix.to/#/!.*:.*/\\$.*:.*\">In reply to</a>");
+                static_cast<const TextContent*>(e.content())->body);
-            return QString(static_cast<const TextContent*>(e.content())->body)
+            formattedStr.replace(userPillRegExp,
-                .replace(userPillRegExp, "<b class=\"user-pill\" \\1>\\2</b>").replace(replyToRegExp, "");
+                                 "<b class=\"user-pill\">\\1</b>");
+            return formattedStr;
           }
           if (e.hasFileContent()) {
             auto fileCaption = e.content()->fileInfo()->originalName;