Improve Kirigami

imports/Spectral/Component/Avatar.qml

@@ -1,56 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtGraphicalEffects 1.0
-
-import Spectral.Setting 0.1
-
-Item {
-    property string hint: "H"
-    property string source: ""
-    property color color: MPalette.accent
-    readonly property url realSource: source ? "image://mxc/" + source : ""
-
-    id: root
-
-    Image {
-        anchors.fill: parent
-
-        id: image
-        visible: realSource
-        source: width < 1 ? "" : realSource
-        sourceSize.width: width
-        sourceSize.height: width
-        fillMode: Image.PreserveAspectCrop
-        mipmap: true
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Rectangle {
-                width: image.width
-                height: image.width
-
-                radius: width / 2
-            }
-        }
-    }
-
-    Rectangle {
-        anchors.fill: parent
-
-        visible: !realSource || image.status != Image.Ready
-
-        radius: height / 2
-        color: root.color
-        antialiasing: true
-
-        Label {
-            anchors.centerIn: parent
-
-            color: "white"
-            text: hint[0].toUpperCase()
-            font.pixelSize: root.width / 2
-            font.weight: Font.Medium
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-}

imports/Spectral/Component/Timeline/AudioDelegate.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.12
 import QtGraphicalEffects 1.0
 import Qt.labs.platform 1.0 as Platform
 import QtMultimedia 5.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -25,14 +26,14 @@ RowLayout {
 
     z: -5
 
-    Avatar {
+    Kirigami.Avatar {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
         Layout.alignment: Qt.AlignBottom
 
         visible: avatarVisible
-        hint: author.displayName
+        name: author.displayName
-        source: author.avatarMediaId
+        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
         color: author.color
 
         Component {

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.12
 import QtQuick.Controls.Material 2.12
 import QtGraphicalEffects 1.0
 import Qt.labs.platform 1.0 as Platform
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -29,14 +30,14 @@ RowLayout {
 
     z: -5
 
-    Avatar {
+    Kirigami.Avatar {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
         Layout.alignment: Qt.AlignBottom
 
         visible: avatarVisible
-        hint: author.displayName
+        name: author.displayName
-        source: author.avatarMediaId
+        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
         color: author.color
 
         Component {

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -1,8 +1,9 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12 as Controls
 import QtQuick.Layouts 1.12
+import QtGraphicalEffects 1.12
 
-import org.kde.kirigami 2.4 as Kirigami
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -25,15 +26,15 @@ RowLayout {
 
     spacing: Kirigami.Units.largeSpacing
 
-    Avatar {
+    Kirigami.Avatar {
         Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
         Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
 
         Layout.alignment: Qt.AlignTop
 
         visible: showAuthor
-        hint: author.displayName
+        name: author.displayName
-        source: author.avatarMediaId
+        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
         color: author.color
     }
 
@@ -43,71 +44,92 @@ RowLayout {
 
         visible: !showAuthor
     }
+    
+    Item {
+        Layout.preferredWidth: column.width + 16
+		Layout.preferredHeight: column.height + 16
 
-    ColumnLayout {
+        /*RectangularGlow {
-        Layout.fillWidth: true
+            anchors.fill: messageBubble
+            glowRadius: 0.8
+            spread: 0.3
+            cornerRadius: messageBubble.radius + glowRadius
+            color: Qt.darker(messageBubble.color, 1.2)
+        }*/
+        
+        // inner area of the message bubble
+        /*Rectangle {
+            id: messageBubble
+            anchors.fill: parent
+            radius: 2
+            color: authorColor
+        }*/
 
-        id: column
 
-        spacing: Kirigami.Units.smallSpacing
+        ColumnLayout {
-
+            id: column
-        Controls.Label {
             Layout.fillWidth: true
+            anchors.centerIn: parent
+            spacing: Kirigami.Units.smallSpacing
 
-            visible: showAuthor
+            Controls.Label {
-
-            text: author.displayName
-            font.bold: true
-            color: Kirigami.Theme.activeTextColor
-            wrapMode: Text.Wrap
-        }
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            visible: replyVisible
-
-            Rectangle {
-                Layout.preferredWidth: 4
-                Layout.fillHeight: true
-
-                color: Kirigami.Theme.highlightColor
-            }
-
-            Avatar {
-                Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
-                Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
-                Layout.alignment: Qt.AlignTop
-
-                source: replyVisible ? reply.author.avatarMediaId : ""
-                hint: replyVisible ? reply.author.displayName : "H"
-                color: replyVisible ? reply.author.color : MPalette.accent
-            }
-
-            ColumnLayout {
                 Layout.fillWidth: true
 
-                Controls.Label {
+                visible: showAuthor
-                    Layout.fillWidth: true
 
-                    text: replyVisible ? reply.author.displayName : ""
+                text: author.displayName
-                    color: Kirigami.Theme.activeTextColor
+                font.bold: true
-                    wrapMode: Text.Wrap
+                color: Kirigami.Theme.activeTextColor
+                wrapMode: Text.Wrap
+            }
+
+            RowLayout {
+                Layout.fillWidth: true
+
+                visible: replyVisible
+
+                Rectangle {
+                    Layout.preferredWidth: 4
+                    Layout.fillHeight: true
+
+                    color: Kirigami.Theme.highlightColor
                 }
 
-                Text {
+                Kirigami.Avatar {
+                    Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
+                    Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
+                    Layout.alignment: Qt.AlignTop
+
+                    source: replyVisible && reply.author.avatarMediaId ? "image://mxc/" + reply.author.avatarMediaId : ""
+                    name: replyVisible ? reply.author.displayName : "H"
+                    color: replyVisible ? reply.author.color : MPalette.accent
+                }
+
+                ColumnLayout {
                     Layout.fillWidth: true
 
-                    text: "<style>pre {white-space: pre-wrap} a{color: " + color + ";} .user-pill{}</style>" + (replyVisible ? reply.display : "")
+                    Controls.Label {
+                        Layout.fillWidth: true
 
-                    color: Kirigami.Theme.textColor
+                        text: replyVisible ? reply.author.displayName : ""
-//                    selectionColor: Kirigami.Theme.highlightColor
+                        color: Kirigami.Theme.activeTextColor
-//                    selectedTextColor: Kirigami.Theme.highlightedTextColor
+                        wrapMode: Text.Wrap
+                    }
 
-//                    selectByMouse: true
+                    Text {
-//                    readOnly: true
+                        Layout.fillWidth: true
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
-                    textFormat: Text.RichText
+                        text: replyVisible ? reply.display : ""
+
+                        color: Kirigami.Theme.textColor
+    //                    selectionColor: Kirigami.Theme.highlightColor
+    //                    selectedTextColor: Kirigami.Theme.highlightedTextColor
+
+    //                    selectByMouse: true
+    //                    readOnly: true
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        textFormat: Text.RichText
+                    }
                 }
             }
         }

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -2,6 +2,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls.Material 2.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Dialog 2.0
@@ -11,11 +12,11 @@ import Spectral.Setting 0.1
 RowLayout {
     id: row
 
-    Avatar {
+    Kirigami.Avatar {
         Layout.preferredWidth: 24
         Layout.preferredHeight: 24
 
-        hint: author.displayName
+        name: author.displayName
         source: author.avatarMediaId
         color: author.color
 

imports/Spectral/Component/Timeline/TimelineContainer.qml

@@ -7,18 +7,12 @@ import org.kde.kirigami 2.4 as Kirigami
 Item {
     default property alias innerObject : column.children
 
-    readonly property int horizontalPadding: Kirigami.Units.largeSpacing
+    height: column.implicitHeight
-    readonly property int verticalPadding: Kirigami.Units.smallSpacing
-
-    height: column.implicitHeight + verticalPadding * 2
 
     ColumnLayout {
-        x: horizontalPadding
-        y: verticalPadding
-
-        width: parent.width - horizontalPadding * 2
-
         id: column
+        x: horizontalPadding
+        width: parent.width - Kirigami.Units.largeSpacing * 2
 
         SectionDelegate {
             Layout.maximumWidth: parent.width
@@ -27,10 +21,4 @@ Item {
             visible: showSection
         }
     }
-
-    Controls.ItemDelegate {
-        anchors.fill: parent
-
-        z: -1
-    }
 }

imports/Spectral/Component/Timeline/VideoDelegate.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.12
 import QtGraphicalEffects 1.0
 import QtMultimedia 5.12
 import Qt.labs.platform 1.0 as Platform
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -46,14 +47,14 @@ RowLayout {
         }
     }
 
-    Avatar {
+    Kirigami.Avatar {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
         Layout.alignment: Qt.AlignBottom
 
         visible: avatarVisible
-        hint: author.displayName
+        name: author.displayName
-        source: author.avatarMediaId
+        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
         color: author.color
 
         Component {

imports/Spectral/Component/qmldir

@@ -5,6 +5,5 @@ SideNavButton 2.0 SideNavButton.qml
 ScrollHelper 2.0 ScrollHelper.qml
 AutoListView 2.0 AutoListView.qml
 AutoTextField 2.0 AutoTextField.qml
-Avatar 2.0 Avatar.qml
 FullScreenImage 2.0 FullScreenImage.qml
 AutoRectangle 2.0 AutoRectangle.qml

imports/Spectral/Dialog/AccountDetailDialog.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0
@@ -34,12 +35,12 @@ Dialog {
                 controller: spectralController
             }
 
-            delegate: Avatar {
+            delegate: Kirigami.Avatar {
                 width: 48
                 height: 48
 
-                source: user.avatarMediaId
+                source: urser.avatarMediaId ? "image://mxc/" + user.avatarMediaId : ""
-                hint: user.displayName ?? ""
+                name: user.displayName ?? ""
 
                 Menu {
                     id: contextMenu

imports/Spectral/Dialog/InviteUserDialog.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0
@@ -86,11 +87,11 @@ Dialog {
                 contentItem: RowLayout {
                     spacing: 8
 
-                    Avatar {
+                    Kirigami.Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: avatar
+                        source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
                         hint: name
                     }
 

imports/Spectral/Dialog/JoinRoomDialog.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0
@@ -119,11 +120,11 @@ Dialog {
                 contentItem: RowLayout {
                     spacing: 8
 
-                    Avatar {
+                    Kirigami.Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: avatar
+                        source: model.avatarMediaId ? "image://mxc/" + model.avatarMediaId : ""
                         hint: name
                     }
 

imports/Spectral/Dialog/RoomSettingsDialog.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0
@@ -30,13 +31,13 @@ Dialog {
 
             spacing: 16
 
-            Avatar {
+            Kirigami.Avatar {
                 Layout.preferredWidth: 72
                 Layout.preferredHeight: 72
                 Layout.alignment: Qt.AlignTop
 
-                hint: room.displayName
+                name: room.displayName
-                source: room.avatarMediaId
+                source: room.avatarMediaId ? "image://mxc/" + room.avatarMediaId : ""
 
                 RippleEffect {
                     anchors.fill: parent

imports/Spectral/Dialog/StartChatDialog.qml

@@ -82,12 +82,12 @@ Dialog {
                 contentItem: RowLayout {
                     spacing: 8
 
-                    Avatar {
+                    Kirigami.Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
                         source: avatar
-                        hint: name
+                        name: name
                     }
 
                     ColumnLayout {

imports/Spectral/Dialog/UserDetailDialog.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0
@@ -27,12 +28,12 @@ Dialog {
 
             spacing: 16
 
-            Avatar {
+            Kirigami.Avatar {
                 Layout.preferredWidth: 72
                 Layout.preferredHeight: 72
 
-                hint: displayName
+                name: displayName
-                source: avatarMediaId
+                source: avatarMediaId ? "image://mxc/" + avatarMediaId : ""
 
                 RippleEffect {
                     anchors.fill: parent

imports/Spectral/Panel/RoomListPanel.qml

@@ -2,7 +2,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12 as Controls
 import QtQuick.Layouts 1.12
 
-import org.kde.kirigami 2.4 as Kirigami
+import org.kde.kirigami 2.13 as Kirigami
 
 import SortFilterProxyModel 0.2
 
@@ -10,20 +10,25 @@ import Spectral.Component 2.0
 import Spectral 0.1
 
 Kirigami.ScrollablePage {
+    id: page
     property var roomListModel
     property var enteredRoom
+    property var searchText
 
     signal enterRoom(var room)
     signal leaveRoom(var room)
 
     title: "Rooms"
-    actions {
+    
-        main: Kirigami.Action {
+    titleDelegate: Kirigami.SearchField {
-            iconName: "document-edit"
+        Layout.topMargin: Kirigami.Units.smallSpacing
-        }
+        Layout.bottomMargin: Kirigami.Units.smallSpacing
-        contextualActions: []
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        onTextChanged: page.searchText = text
     }
 
+    
     ListView {
         id: messageListView
 
@@ -66,6 +71,11 @@ Kirigami.ScrollablePage {
             filters: [
                 ExpressionFilter {
                     expression: joinState != "upgraded"
+                },
+                RegExpFilter {
+                    roleName: "name"
+                    pattern: searchText
+                    caseSensitivity: Qt.CaseInsensitive
                 }
             ]
         }
@@ -89,12 +99,12 @@ Kirigami.ScrollablePage {
             contentItem: RowLayout {
                 spacing: Kirigami.Units.largeSpacing
 
-                Avatar {
+                Kirigami.Avatar {
                     Layout.preferredWidth: height
                     Layout.fillHeight: true
 
-                    source: avatar
+                    source: avatar ? "image://mxc/" + avatar : ""
-                    hint: name || "No Name"
+                    name: model.name || "No Name"
                 }
 
                 ColumnLayout {
@@ -108,11 +118,17 @@ Kirigami.ScrollablePage {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
 
+                        text: name || "No Name"
+                        font.pixelSize: 16
+                        font.bold: unreadCount >= 0
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
                     }
 
                     Controls.Label {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
+                        Layout.alignment: Qt.AlignHCenter
 
                         text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm," ")
                         font.pixelSize: 13

imports/Spectral/Panel/RoomPanel.qml

@@ -1,7 +1,8 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.12 as Controls
+import QtQuick.Controls 2.12 as QQC2
 import QtQuick.Layouts 1.12
 import Qt.labs.qmlmodels 1.0
+import QtQuick.Controls.Material 2.12
 
 import org.kde.kirigami 2.4 as Kirigami
 
@@ -9,6 +10,8 @@ import SortFilterProxyModel 0.2
 
 import Spectral.Component 2.0
 import Spectral.Component.Timeline 2.0
+import Spectral.Dialog 2.0
+import Spectral.Effect 2.0
 import Spectral 0.1
 
 Kirigami.ScrollablePage {
@@ -18,18 +21,73 @@ Kirigami.ScrollablePage {
 
     title: "Messages"
 
-    actions {
-        main: Kirigami.Action {
-            iconName: "document-edit"
-        }
-        contextualActions: []
-    }
-
     MessageEventModel {
         id: messageEventModel
 
         room: currentRoom
     }
+    
+    ImageClipboard {
+        id: imageClipboard
+    }
+
+    QQC2.Popup {
+        anchors.centerIn: parent
+
+        id: attachDialog
+
+        padding: 16
+
+        contentItem: RowLayout {
+            QQC2.ToolButton {
+                Layout.preferredWidth: 160
+                Layout.fillHeight: true
+
+                icon.name: 'mail-attachment'
+
+                text: "Choose local file"
+
+                onClicked: {
+                    attachDialog.close()
+
+                    var fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
+
+                    fileDialog.chosen.connect(function(path) {
+                        if (!path) return
+
+                        roomPanelInput.attach(path)
+                    })
+
+                    fileDialog.open()
+                }
+            }
+
+            Kirigami.Separator {}
+
+            QQC2.ToolButton {
+                Layout.preferredWidth: 160
+                Layout.fillHeight: true
+
+                padding: 16
+
+                icon.name: 'insert-image'
+                text: "Clipboard image"
+                onClicked: {
+                    var localPath = StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png"
+                    if (!imageClipboard.saveImage(localPath)) return
+                    roomPanelInput.attach(localPath)
+                    attachDialog.close()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: openFileDialog
+
+        OpenFileDialog {}
+    }
+
 
     SortFilterProxyModel {
         id: sortedMessageEventModel
@@ -232,16 +290,9 @@ Kirigami.ScrollablePage {
         }
     }
 
-    footer: RowLayout {
+    footer: RoomPanelInput {
-        Controls.ToolButton {
+        id: roomPanelInput
-            contentItem: Kirigami.Icon {
+        Layout.fillWidth: true
-                source: "mail-attachment"
-            }
-        }
-
-        Controls.TextField {
-            Layout.fillWidth: true
-        }
     }
 
     background: Item {}

imports/Spectral/Panel/RoomPanelInput.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import Spectral.Component 2.0
 import Spectral.Component.Emoji 2.0
@@ -30,14 +30,20 @@ Control {
     id: root
 
     padding: 0
-
+    
     background: Rectangle {
-        color: MSettings.darkTheme ? "#303030" : "#fafafa"
+        color: Kirigami.Theme.backgroundColor
-        radius: 24
+        Kirigami.Separator {
-
+            Rectangle {
-        layer.enabled: true
+                anchors.fill: parent
-        layer.effect: ElevationEffect {
+                color: Kirigami.Theme.focusColor
-            elevation: 1
+                visible: chatTextInput.activeFocus
+            }
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
         }
     }
 
@@ -59,18 +65,13 @@ Control {
 
                 padding: 4
 
-                background: Rectangle {
-                    radius: height / 2
-                    color: replyUser ? Qt.darker(replyUser.color, 1.1) : MPalette.accent
-                }
-
                 contentItem: RowLayout {
-                    Avatar {
+                    Kirigami.Avatar {
                         Layout.preferredWidth: 24
                         Layout.preferredHeight: 24
 
-                        source: replyUser ? replyUser.avatarMediaId : ""
+                        source: replyUser ? "image://mxc/" + replyUser.avatarMediaId: ""
-                        hint: replyUser ? replyUser.displayName : "No name"
+                        name: replyUser ? replyUser.displayName : "No name"
                     }
 
                     Label {
@@ -87,7 +88,6 @@ Control {
             TextEdit {
                 Layout.fillWidth: true
 
-                color: MPalette.foreground
                 text: "<style>a{color: " + color + ";} .user-pill{}</style>" + replyContent
 
                 font.family: window.font.family
@@ -96,7 +96,6 @@ Control {
                 readOnly: true
                 wrapMode: Label.Wrap
                 selectedTextColor: "white"
-                selectionColor: MPalette.accent
                 textFormat: Text.RichText
             }
         }
@@ -159,21 +158,19 @@ Control {
                         horizontalAlignment: Text.AlignHCenter
                     }
 
-                    Avatar {
+                    Kirigami.Avatar {
                         Layout.preferredWidth: 24
                         Layout.preferredHeight: 24
 
-                        visible: !isEmoji
+                        source: modelData.avatarMediaId ? "image://mxc/" + modelData.avatarMediaId : ""
-                        source: modelData.avatarMediaId ?? null
+                        color: modelData.color ? Qt.darker(modelData.color, 1.1) : null
-                        color: modelData.color ? Qt.darker(modelData.color, 1.1) : MPalette.accent
                     }
-
                     Label {
                         Layout.fillHeight: true
 
                         visible: !isEmoji
                         text: autoCompleteText
-                        color: highlighted ? "white" : MPalette.foreground
+                        color: highlighted ? Kirigami.Theme.highlightTextColor : Kirigami.Theme.textColor
                         verticalAlignment: Text.AlignVCenter
                         rightPadding: 8
                     }
@@ -196,8 +193,6 @@ Control {
             Layout.rightMargin: 12
 
             visible: emojiPicker.visible || replyItem.visible || autoCompleteListView.visible
-
-            color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
         }
 
         RowLayout {
@@ -213,9 +208,7 @@ Control {
                 id: uploadButton
                 visible: !isReply && !hasAttachment
 
-                contentItem: MaterialIcon {
+                icon.name: "mail-attachment"
-                    icon: "\ue226"
-                }
 
                 onClicked: {
                     if (imageClipboard.hasImage) {
@@ -264,13 +257,7 @@ Control {
                 visible: hasAttachment
 
                 rightPadding: 8
-
+                
-                background: Rectangle {
-                    color: MPalette.accent
-                    radius: height / 2
-                    antialiasing: true
-                }
-
                 contentItem: RowLayout {
                     spacing: 0
 
@@ -280,15 +267,11 @@ Control {
 
                         id: cancelAttachmentButton
 
-                        contentItem: MaterialIcon {
+                        icon.name: "mail-attachement"
-                            icon: "\ue5cd"
-                            color: "white"
-                            font.pixelSize: 18
-                        }
 
                         onClicked: {
-                            hasAttachment = false
+                            hasAttachment = false;
-                            attachmentPath = ""
+                            attachmentPath = "";
                         }
                     }
 
@@ -448,19 +431,13 @@ Control {
                 }
             }
 
-            MaterialIcon {
+            ToolButton {
+                flat: true
                 Layout.alignment: Qt.AlignVCenter
 
-                icon: "\ue165"
+                icon.name: "format-text-code"
                 font.pixelSize: 16
-                color: MPalette.foreground
+                onClicked: MSettings.markdownFormatting = !MSettings.markdownFormatting
-                opacity: MSettings.markdownFormatting ? 1 : 0.3
-
-                MouseArea {
-                    anchors.fill: parent
-
-                    onClicked: MSettings.markdownFormatting = !MSettings.markdownFormatting
-                }
             }
 
             ToolButton {
@@ -469,10 +446,7 @@ Control {
                 Layout.alignment: Qt.AlignBottom
 
                 id: emojiButton
-
+                icon.name: "document-send"
-                contentItem: MaterialIcon {
-                    icon: "\ue24e"
-                }
 
                 onClicked: emojiPicker.visible = !emojiPicker.visible
             }

imports/Spectral/Panel/SpectralSidebar.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+import QtQuick.Layouts 1.12
+import Qt.labs.qmlmodels 1.0
+
+import org.kde.kirigami 2.12 as Kirigami
+
+import SortFilterProxyModel 0.2
+
+import Spectral.Component 2.0
+import Spectral.Component.Timeline 2.0
+import Spectral 0.1
+
+Kirigami.GlobalDrawer {
+    id: root
+    
+    modal: true
+    collapsible: true
+    collapsed: Kirigami.Settings.isMobile
+}

imports/Spectral/Panel/qmldir

@@ -2,3 +2,4 @@ module Spectral.Panel
 RoomPanel 2.0 RoomPanel.qml
 RoomListPanel 2.0 RoomListPanel.qml
 RoomDrawer 2.0 RoomDrawer.qml
+SpectralSidebar 2.0 SpectralSidebar.qml

qml/main.qml

@@ -2,7 +2,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12 as Controls
 import QtQuick.Layouts 1.12
 
-import org.kde.kirigami 2.4 as Kirigami
+import org.kde.kirigami 2.12 as Kirigami
 
 import Spectral 0.1
 import Spectral.Component 2.0
@@ -11,28 +11,7 @@ import Spectral.Panel 2.0
 Kirigami.ApplicationWindow {
     id: root
 
-    globalDrawer: Kirigami.GlobalDrawer {
+    globalDrawer: SpectralSidebar { }
-        title: "Hello App"
-        titleIcon: "applications-graphics"
-        actions: [
-            Kirigami.Action {
-                text: "View"
-                iconName: "view-list-icons"
-                Kirigami.Action {
-                    text: "action 1"
-                }
-                Kirigami.Action {
-                    text: "action 2"
-                }
-                Kirigami.Action {
-                    text: "action 3"
-                }
-            },
-            Kirigami.Action {
-                text: "action 3"
-            }
-        ]
-    }
 
     contextDrawer: Kirigami.ContextDrawer {
         id: contextDrawer
@@ -48,18 +27,18 @@ Kirigami.ApplicationWindow {
         onErrorOccured: showPassiveNotification(error + ": " + detail)
     }
 
-    RoomListModel {
-        id: spectralRoomListModel
-
-        connection: spectralController.connection
-    }
-
     Binding {
         target: imageProvider
         property: "connection"
         value: spectralController.connection
     }
 
+    RoomListModel {
+        id: spectralRoomListModel
+
+        connection: spectralController.connection
+    }
+
     Component {
         id: roomPanelComponent
 

res.qrc

@@ -21,6 +21,7 @@
         <file>imports/Spectral/Panel/RoomListPanel.qml</file>
         <file>imports/Spectral/Panel/RoomPanel.qml</file>
         <file>imports/Spectral/Panel/RoomHeader.qml</file>
+        <file>imports/Spectral/Panel/SpectralSidebar.qml</file>
         <file>imports/Spectral/Component/ScrollHelper.qml</file>
         <file>imports/Spectral/Component/AutoListView.qml</file>
         <file>imports/Spectral/Component/AutoTextField.qml</file>
@@ -30,7 +31,6 @@
         <file>imports/Spectral/Effect/RippleEffect.qml</file>
         <file>imports/Spectral/Effect/CircleMask.qml</file>
         <file>imports/Spectral/Component/Timeline/ImageDelegate.qml</file>
-        <file>imports/Spectral/Component/Avatar.qml</file>
         <file>imports/Spectral/Setting/Palette.qml</file>
         <file>imports/Spectral/Component/Timeline/FileDelegate.qml</file>
         <file>imports/Spectral/Component/FullScreenImage.qml</file>