Init Qt 5.12.

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -75,7 +75,6 @@ ColumnLayout {
 
             source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
             sourceSize.width: Math.min(256, messageListView.width)
-            sourceSize.height: 256
 
             layer.enabled: true
             layer.effect: OpacityMask {

imports/Spectral/Component/Timeline/qmldir

@@ -2,3 +2,4 @@ module Spectral.Component.Timeline
 MessageDelegate 2.0 MessageDelegate.qml
 StateDelegate 2.0 StateDelegate.qml
 SectionDelegate 2.0 SectionDelegate.qml
+ImageDelegate 2.0 ImageDelegate.qml

imports/Spectral/Panel/RoomPanel.qml

@@ -2,6 +2,7 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
+import Qt.labs.qmlmodels 1.0
 
 import Spectral.Component 2.0
 import Spectral.Component.Emoji 2.0
@@ -69,6 +70,36 @@ 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
@@ -121,69 +152,7 @@ Item {
                 }
             }
 
-            delegate: ColumnLayout {
+            delegate: delegateChooser
-                width: parent.width
-                implicitHeight: 32
-
-                id: delegateColumn
-
-                spacing: 4
-
-                SectionDelegate {
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.margins: 4
-
-                    visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
-                }
-
-                Loader {
-                    Layout.maximumWidth: delegateColumn.width
-                    Layout.alignment: item ? item.alignment : 0
-
-                    source: {
-                        switch (eventType) {
-                        case "message":
-                        case "notice":
-                            return "qrc:/imports/Spectral/Component/Timeline/MessageDelegate.qml"
-                        case "emote":
-                        case "state":
-                            return "qrc:/imports/Spectral/Component/Timeline/StateDelegate.qml"
-                        case "image":
-                            return "qrc:/imports/Spectral/Component/Timeline/ImageDelegate.qml"
-                        default:
-                            return ""
-                        }
-                    }
-                }
-
-                // Read marker
-                RowLayout {
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignHCenter
-
-                    visible: readMarker === true
-
-                    Rectangle {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 2
-
-                        color: Material.accent
-                    }
-
-                    Label {
-                        text: "And Now"
-                        color: Material.accent
-                        verticalAlignment: Text.AlignVCenter
-                    }
-
-                    Rectangle {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 2
-
-                        color: Material.accent
-                    }
-                }
-            }
 
             RoundButton {
                 width: 64
@@ -236,21 +205,19 @@ Item {
             Popup {
                 property string sourceText
 
-                x: (window.width - width) / 2
+                anchors.centerIn: parent
-                y: (window.height - height) / 2
                 width: 480
 
                 id: sourceDialog
 
                 parent: ApplicationWindow.overlay
 
-                modal: true
-
                 padding: 16
 
                 closePolicy: Dialog.CloseOnEscape | Dialog.CloseOnPressOutside
 
                 contentItem: ScrollView {
+                    clip: true
                     TextArea {
                         readOnly: true
                         selectByMouse: true