Update QtQuick.

Add FileDelegate.

imports/Spectral/Component/AutoTextField.qml

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

imports/Spectral/Component/Avatar.qml

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

imports/Spectral/Component/Emoji/EmojiPicker.qml

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

imports/Spectral/Component/MaterialIcon.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
 
 import Spectral.Setting 0.1
 import Spectral.Font 0.1

imports/Spectral/Component/ScrollHelper.qml

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

imports/Spectral/Component/SplitView.qml

@@ -38,8 +38,8 @@
 ****************************************************************************/
 
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
 import QtQuick.Window 2.1
 import Spectral.Setting 0.1
 
@@ -89,7 +89,7 @@ Item {
 
     /*! \qmlmethod void SplitView::addItem(Item item)
         Add an item to the end of the view.
-        \since QtQuick.Controls 1.3 */
+        \since QtQuick.Controls 1.12 */
     function addItem(item) {
         d.updateLayoutGuard = true
         d.addItem_impl(item)

imports/Spectral/Component/Timeline/DownloadableContent.qml

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

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -0,0 +1,174 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls.Material 2.12
+import QtGraphicalEffects 1.0
+import Qt.labs.platform 1.0 as Platform
+
+import Spectral 0.1
+import Spectral.Setting 0.1
+
+import Spectral.Component 2.0
+import Spectral.Font 0.1
+
+ColumnLayout {
+    readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
+    readonly property bool sentByMe: author === currentRoom.localUser
+
+    property bool openOnFinished: false
+    readonly property bool downloaded: progressInfo && progressInfo.completed
+
+    id: root
+
+    spacing: 0
+
+    onDownloadedChanged: if (downloaded && openOnFinished) openSavedFile()
+
+    Label {
+        Layout.leftMargin: 48
+
+        text: author.displayName
+
+        visible: avatarVisible
+
+        font.pixelSize: 13
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout {
+        Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+
+        z: -5
+
+        id: messageRow
+
+        spacing: 4
+
+        Avatar {
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignTop
+
+            visible: avatarVisible
+            hint: author.displayName
+            source: author.avatarUrl
+        }
+
+        Label {
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignTop
+
+            visible: !(sentByMe || avatarVisible)
+
+            text: Qt.formatDateTime(time, "hh:mm")
+            color: "#5B7480"
+
+            font.pixelSize: 10
+            horizontalAlignment: Label.AlignHCenter
+            verticalAlignment: Label.AlignVCenter
+        }
+
+        Control {
+            Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
+
+            padding: 12
+
+            contentItem: RowLayout {
+                ToolButton {
+                    contentItem: MaterialIcon {
+                        icon: progressInfo.completed ? "\ue5ca" : "\ue2c4"
+                    }
+
+                    onClicked: progressInfo.completed ? openSavedFile() : saveFileAs()
+                }
+
+                ColumnLayout {
+                    Label {
+                        Layout.alignment: Qt.AlignVCenter
+
+                        text: display
+                        font.pixelSize: 18
+                        font.weight: Font.Medium
+                        font.capitalization: Font.AllUppercase
+                    }
+
+                    Label {
+                        text: progressInfo.active ? (progressInfo.progress + "/" + progressInfo.total) : content.info.size
+                        color: MPalette.lighter
+                    }
+                }
+            }
+
+            background: Rectangle {
+                color: MPalette.banner
+                radius: 18
+
+                AutoMouseArea {
+                    anchors.fill: parent
+
+                    id: messageMouseArea
+
+                    onSecondaryClicked: messageContextMenu.popup()
+
+                    Menu {
+                        id: messageContextMenu
+
+                        MenuItem {
+                            text: "View Source"
+
+                            onTriggered: {
+                                sourceDialog.sourceText = toolTip
+                                sourceDialog.open()
+                            }
+                        }
+                        MenuItem {
+                            text: "Open Externally"
+
+                            onTriggered: downloadAndOpen()
+                        }
+                        MenuItem {
+                            text: "Save As"
+
+                            onTriggered: saveFileAs()
+                        }
+                        MenuItem {
+                            text: "Reply"
+
+                            onTriggered: {
+                                roomPanelInput.replyUser = author
+                                roomPanelInput.replyEventID = eventId
+                                roomPanelInput.replyContent = message
+                                roomPanelInput.isReply = true
+                                roomPanelInput.focus()
+                            }
+                        }
+                        MenuItem {
+                            text: "Redact"
+
+                            onTriggered: currentRoom.redactEvent(eventId)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    function saveFileAs() { currentRoom.saveFileAs(eventId) }
+
+    function downloadAndOpen()
+    {
+        if (downloaded) openSavedFile()
+        else
+        {
+            openOnFinished = true
+            currentRoom.downloadFile(eventId, Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + (message || ".tmp"))
+        }
+    }
+
+    function openSavedFile()
+    {
+        if (Qt.openUrlExternally(progressInfo.localPath)) return;
+        if (Qt.openUrlExternally(progressInfo.localDir)) return;
+    }
+}

imports/Spectral/Component/Timeline/ImageDelegate.qml

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

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.4
+import QtQuick.Controls.Material 2.12
 
 import Spectral 0.1
 import Spectral.Setting 0.1
@@ -147,6 +147,7 @@ ColumnLayout {
                             Layout.alignment: Qt.AlignTop
 
                             source: replyAuthor ? replyAuthor.avatarUrl : ""
+                            hint: replyAuthor ? replyAuthor.displayName : "H"
                         }
 
                         ColumnLayout {

imports/Spectral/Component/Timeline/SectionDelegate.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
 import Spectral.Setting 0.1
 
 Label {

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -1,28 +1,27 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.4
+import QtQuick.Controls.Material 2.12
 
 import Spectral.Setting 0.1
 
 Label {
     text: "<b>" + author.displayName + "</b> " + display
-    color: Material.accent
+    color: MPalette.foreground
+    font.pixelSize: 13
+    font.weight: Font.Medium
 
     topPadding: 8
     bottomPadding: 8
-    leftPadding: 16
+    leftPadding: 24
-    rightPadding: 16
+    rightPadding: 24
 
     wrapMode: Label.Wrap
-    linkColor: Material.accent
     textFormat: MSettings.richText ? Text.RichText : Text.StyledText
     onLinkActivated: Qt.openUrlExternally(link)
 
     background: Rectangle {
-        color: "transparent"
+        color: MPalette.banner
-        border.color: Material.accent
+        radius: 4
-        border.width: 2
-        radius: 18
     }
 }

imports/Spectral/Component/Timeline/qmldir

@@ -3,3 +3,4 @@ MessageDelegate 2.0 MessageDelegate.qml
 StateDelegate 2.0 StateDelegate.qml
 SectionDelegate 2.0 SectionDelegate.qml
 ImageDelegate 2.0 ImageDelegate.qml
+FileDelegate 2.0 FileDelegate.qml

imports/Spectral/Effect/RippleEffect.qml

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

imports/Spectral/Font/CommonFont.qml

@@ -1,5 +1,5 @@
 pragma Singleton
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
 
 Label {}

imports/Spectral/Panel/RoomDrawer.qml

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

imports/Spectral/Panel/RoomHeader.qml

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

imports/Spectral/Panel/RoomListPanel.qml

@@ -1,8 +1,8 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
 
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.4
+import QtQuick.Controls.Material 2.12
 
 import Spectral.Component 2.0
 import Spectral.Effect 2.0

imports/Spectral/Panel/RoomPanel.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.4
+import QtQuick.Controls.Material 2.12
 import Qt.labs.qmlmodels 1.0
 
 import Spectral.Component 2.0
@@ -132,7 +132,7 @@ Item {
 
                         SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.margins: 4
+                            Layout.margins: 16
 
                             visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
                         }
@@ -152,7 +152,7 @@ Item {
 
                         SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.margins: 4
+                            Layout.margins: 16
 
                             visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
                         }
@@ -172,7 +172,7 @@ Item {
 
                         SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.margins: 4
+                            Layout.margins: 16
 
                             visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
                         }
@@ -190,7 +190,7 @@ Item {
 
                         SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.margins: 4
+                            Layout.margins: 16
 
                             visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
                         }
@@ -208,14 +208,32 @@ Item {
 
                         SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.margins: 4
+                            Layout.margins: 16
 
                             visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
                         }
 
                         ImageDelegate {
                             Layout.maximumWidth: parent.width
+                        }
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "file"
+                    delegate: ColumnLayout {
+                        width: messageListView.width
+                        spacing: 4
+
+                        SectionDelegate {
                             Layout.alignment: Qt.AlignHCenter
+                            Layout.margins: 16
+
+                            visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
+                        }
+
+                        FileDelegate {
+                            Layout.maximumWidth: parent.width
                         }
                     }
                 }

imports/Spectral/Panel/RoomPanelInput.qml

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

imports/Spectral/Setting/Palette.qml

@@ -1,6 +1,6 @@
 pragma Singleton
 import QtQuick 2.12
-import QtQuick.Controls.Material 2.3
+import QtQuick.Controls.Material 2.12
 
 QtObject {
     readonly property int theme: MSettings.darkTheme ? Material.Dark : Material.Light
@@ -10,4 +10,5 @@ QtObject {
     readonly property color foreground: MSettings.darkTheme ? "#FFFFFF" : "#1D333E"
     readonly property color background: MSettings.darkTheme ? "#303030" : "#FFFFFF"
     readonly property color lighter: MSettings.darkTheme ? "#FFFFFF" : "#5B7480"
+    readonly property color banner: MSettings.darkTheme ? "#404040" : "#F2F3F4"
 }

qml/main.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.4
+import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.4
+import QtQuick.Controls.Material 2.12
 import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as Platform
 
@@ -76,7 +76,6 @@ ApplicationWindow {
         property bool busy: false
 
         width: 360
-        height: 300
         x: (window.width - width) / 2
         y: (window.height - height) / 2
 
@@ -86,9 +85,9 @@ ApplicationWindow {
 
         title: "Login"
 
-        contentItem: ColumnLayout {
+        contentItem: Column {
             AutoTextField {
-                Layout.fillWidth: true
+                width: parent.width
 
                 id: serverField
 
@@ -97,7 +96,7 @@ ApplicationWindow {
             }
 
             AutoTextField {
-                Layout.fillWidth: true
+                width: parent.width
 
                 id: usernameField
 
@@ -105,7 +104,7 @@ ApplicationWindow {
             }
 
             AutoTextField {
-                Layout.fillWidth: true
+                width: parent.width
 
                 id: passwordField
 

res.qrc

@@ -43,5 +43,6 @@
         <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>
     </qresource>
 </RCC>