Update QtQuick.

imports/Spectral/Component/AutoListView.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.9
+import QtQuick 2.12
 
 ListView {
     ScrollHelper {

imports/Spectral/Component/AutoMouseArea.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.9
+import QtQuick 2.12
 
 import Spectral.Setting 0.1
 

imports/Spectral/Component/AutoTextField.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 TextField {
     selectByMouse: true

imports/Spectral/Component/Avatar.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtGraphicalEffects 1.0
 
 Item {

imports/Spectral/Component/Emoji/EmojiPicker.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral.Component 2.0
 

imports/Spectral/Component/MaterialIcon.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral.Setting 0.1
 import Spectral.Font 0.1

imports/Spectral/Component/ScrollHelper.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 MouseArea {
     id: root

imports/Spectral/Component/SplitView.qml

@@ -37,8 +37,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.1
 import Spectral.Setting 0.1

imports/Spectral/Component/Timeline/DownloadableContent.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 import Qt.labs.platform 1.0
 
 Item {

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 import QtGraphicalEffects 1.0
 
 import Spectral 0.1
@@ -11,8 +11,6 @@ import Spectral.Component 2.0
 import Spectral.Font 0.1
 
 ColumnLayout {
-    readonly property int alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-
     readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
     readonly property bool sentByMe: author === currentRoom.localUser
 

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -10,14 +10,14 @@ import Spectral.Component 2.0
 import Spectral.Font 0.1
 
 ColumnLayout {
-    readonly property int alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-
     readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
     readonly property bool sentByMe: author === currentRoom.localUser
 
     signal saveFileAs()
     signal openExternally()
 
+    Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+
     id: root
 
     spacing: 0
@@ -34,8 +34,6 @@ ColumnLayout {
     }
 
     RowLayout {
-        Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-
         z: -5
 
         id: messageRow

imports/Spectral/Component/Timeline/SectionDelegate.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 Label {
     text: section + " • " + Qt.formatTime(time, "hh:mm")

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -1,13 +1,11 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral.Setting 0.1
 
 Label {
-    readonly property int alignment: Qt.AlignHCenter
-
     text: "<b>" + author.displayName + "</b> " + display
     color: Material.accent
 

imports/Spectral/Component/Timeline/TimelineImage.qml

@@ -1,34 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-Item {
-    property alias source: baseImage.source
-    property alias sourceSize: baseImage.sourceSize.width
-
-    readonly property bool loading: baseImage.status == Image.Loading
-
-    signal clicked()
-
-    width: loading ? 128 : baseImage.implicitWidth
-    height: loading ? progressBar.height : baseImage.implicitHeight
-
-    id: rekt
-
-    Image { id: baseImage }
-
-    ProgressBar {
-        width: parent.width
-        visible: loading
-
-        id: progressBar
-
-        indeterminate: true
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        propagateComposedEvents: true
-
-        onClicked: rekt.clicked()
-    }
-}

imports/Spectral/Component/Timeline/TimelineLabel.qml

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

imports/Spectral/Effect/CircleMask.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.9
+import QtQuick 2.12
 import QtGraphicalEffects 1.0
 
 Item {

imports/Spectral/Effect/ElevationEffect.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.9
+import QtQuick 2.12
 import QtGraphicalEffects 1.0
 
 /*!

imports/Spectral/Effect/RippleEffect.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtGraphicalEffects 1.0
 
 import Spectral.Component 2.0

imports/Spectral/Font/CommonFont.qml

@@ -1,6 +1,6 @@
 pragma Singleton
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 Item {
     property alias font: materialLabel.font

imports/Spectral/Font/MaterialFont.qml

@@ -1,5 +1,5 @@
 pragma Singleton
-import QtQuick 2.9
+import QtQuick 2.12
 
 FontLoader {
     source: "qrc:/assets/font/material.ttf"

imports/Spectral/Menu/MessageContextMenu.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 Menu {
     property var root: null

imports/Spectral/Menu/RoomContextMenu.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import Spectral 0.1
 
 Menu {

imports/Spectral/Panel/RoomDrawer.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 import QtQuick.Layouts 1.3
 
 import Spectral.Component 2.0

imports/Spectral/Panel/RoomHeader.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral 0.1
 import Spectral.Effect 2.0

imports/Spectral/Panel/RoomListPanel.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral.Component 2.0
 import Spectral.Menu 2.0

imports/Spectral/Panel/RoomPanel.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 import Qt.labs.qmlmodels 1.0
 
 import Spectral.Component 2.0
@@ -70,36 +70,6 @@ Item {
             onClicked: roomDrawer.open()
         }
 
-        DelegateChooser {
-            id: delegateChooser
-
-            role: "eventType"
-            choices: [
-                DelegateChoice {
-                    roleValue: "state"
-                    delegate: StateDelegate {
-                        width: messageListView.width
-                    }
-                },
-                DelegateChoice {
-                    roleValue: "emote"
-                    delegate: StateDelegate {}
-                },
-                DelegateChoice {
-                    roleValue: "message"
-                    delegate: MessageDelegate {}
-                },
-                DelegateChoice {
-                    roleValue: "notice"
-                    delegate: MessageDelegate {}
-                },
-                DelegateChoice {
-                    roleValue: "image"
-                    delegate: ImageDelegate {}
-                }
-            ]
-        }
-
         AutoListView {
             Layout.fillWidth: true
             Layout.maximumWidth: 960
@@ -152,7 +122,105 @@ Item {
                 }
             }
 
-            delegate: delegateChooser
+            delegate: DelegateChooser {
+                role: "eventType"
+
+                DelegateChoice {
+                    roleValue: "state"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 4
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        StateDelegate {
+                            Layout.maximumWidth: parent.width
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "emote"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 4
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        StateDelegate {
+                            Layout.maximumWidth: parent.width
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "message"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 4
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        MessageDelegate {
+                        }
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "notice"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 4
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        MessageDelegate {
+                        }
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "image"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 4
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        ImageDelegate {
+                            Layout.maximumWidth: parent.width
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                }
+            }
 
             RoundButton {
                 width: 64

imports/Spectral/Panel/RoomPanelInput.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 
 import Spectral.Component 2.0
 import Spectral.Component.Emoji 2.0
@@ -167,6 +167,8 @@ Control {
             spacing: 0
 
             ToolButton {
+                Layout.preferredWidth: 48
+                Layout.preferredHeight: 48
                 Layout.alignment: Qt.AlignBottom
 
                 id: uploadButton
@@ -186,6 +188,8 @@ Control {
             }
 
             ToolButton {
+                Layout.preferredWidth: 48
+                Layout.preferredHeight: 48
                 Layout.alignment: Qt.AlignBottom
 
                 id: cancelReplyButton
@@ -364,6 +368,8 @@ Control {
             }
 
             ToolButton {
+                Layout.preferredWidth: 48
+                Layout.preferredHeight: 48
                 Layout.alignment: Qt.AlignBottom
 
                 id: emojiButton

imports/Spectral/Setting/Setting.qml

@@ -1,5 +1,5 @@
 pragma Singleton
-import QtQuick 2.9
+import QtQuick 2.12
 import Qt.labs.settings 1.0
 
 Settings {

include/libqmatrixclient

@@ -1 +1 @@
-Subproject commit 52081fe91724e5f2a82c55f0e6230d8841dd859a
+Subproject commit be7d25ed22abd07a254bfb8ff6c30de4fcc79e6a

qml/main.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.9
+import QtQuick 2.12
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material 2.4
 import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as Platform
 

qtquickcontrols2.conf

@@ -7,6 +7,7 @@ Style=Material
 
 [Material]
 Theme=Light
+Variant=Dense
 Primary=#344955
 Accent=#673AB7
 Foreground=#1D333E

res.qrc

@@ -33,8 +33,6 @@
         <file>imports/Spectral/Panel/RoomHeader.qml</file>
         <file>imports/Spectral/Component/ScrollHelper.qml</file>
         <file>imports/Spectral/Component/AutoListView.qml</file>
-        <file>imports/Spectral/Component/Timeline/TimelineImage.qml</file>
-        <file>imports/Spectral/Component/Timeline/TimelineLabel.qml</file>
         <file>imports/Spectral/Component/AutoTextField.qml</file>
         <file>imports/Spectral/Panel/RoomPanelInput.qml</file>
         <file>imports/Spectral/Component/SplitView.qml</file>