Rewrite MessageDelegate.

2018-09-04 14:58:41 +08:00
parent 0301590b44
commit 2f080f21ce
18 changed files with 272 additions and 323 deletions
--- a/qml/component/AudioBubble.qml
+++ b/qml/component/AudioBubble.qml
@@ -1,50 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-import QtMultimedia 5.9
-import Qt.labs.platform 1.0
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    property bool playOnFinished: false
-
-    id: messageRow
-
-    DownloadableContent {
-        id: downloadable
-
-        width: downloadDelegate.width
-        height: downloadDelegate.height
-
-        TextDelegate {
-            id: downloadDelegate
-
-            maximumWidth: messageListView.width
-            highlighted: !sentByMe
-            timeLabelVisible: false
-            authorLabelVisible: false
-
-            displayText: content.info.duration / 1000 + '"'
-
-            MouseArea {
-                anchors.fill: parent
-
-                propagateComposedEvents: true
-
-                onClicked: {
-                    if (downloadable.downloaded)
-                        matriqueController.playAudio(progressInfo.localPath)
-                    else
-                    {
-                        playOnFinished = true
-                        currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + ".tmp")
-                    }
-                }
-            }
-        }
-        onDownloadedChanged: downloaded && playOnFinished ? matriqueController.playAudio(progressInfo.localPath) : {}
-    }
-
-}
--- a/qml/component/AutoLabel.qml
+++ b/qml/component/AutoLabel.qml
@@ -0,0 +1,15 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Label {
+    property bool coloredBackground
+
+    color: coloredBackground ? "white": Material.foreground
+
+    wrapMode: Label.Wrap
+    linkColor: coloredBackground ? "white" : Material.accent
+    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
+    onLinkActivated: Qt.openUrlExternally(link)
+}
--- a/qml/component/AvatarContainer.qml
+++ b/qml/component/AvatarContainer.qml
@@ -1,26 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-Row {
-    readonly property bool avatarVisible: !(sentByMe || (aboveAuthor === author && section === aboveSection))
-
-    spacing: 6
-
-    ImageStatus {
-        id: avatar
-
-        width: height
-        height: 40
-        round: false
-        visible: avatarVisible
-        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
-        displayText: author.displayName
-    }
-
-    Rectangle {
-        width: height
-        height: 40
-        color: "transparent"
-        visible: !avatarVisible
-    }
-}
--- a/qml/component/FileBubble.qml
+++ b/qml/component/FileBubble.qml
@@ -1,28 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    id: messageRow
-
-    DownloadableContent {
-        id: downloadable
-
-        width: downloadDelegate.width
-        height: downloadDelegate.height
-
-        TextDelegate {
-            id: downloadDelegate
-
-            maximumWidth: messageListView.width
-            highlighted: !sentByMe
-            timeLabelVisible: false
-            authorLabelVisible: false
-
-            displayText: "<b>File: </b>" + content.body
-        }
-    }
-}
--- a/qml/component/GenericBubble.qml
+++ b/qml/component/GenericBubble.qml
@@ -0,0 +1,24 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Control {
+    property bool highlighted: false
+    property bool colored: false
+
+    readonly property bool darkBackground: highlighted  ? true : MSettings.darkTheme
+    readonly property color backgroundColor: MSettings.darkTheme ? "#242424" : "lightgrey"
+
+    padding: 12
+
+    background: Rectangle {
+        color: colored ? Material.accent : highlighted ? Material.primary : backgroundColor
+    }
+
+    AutoMouseArea {
+        anchors.fill: parent
+
+        onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/MessageContextMenu.qml").createObject(this)
+    }
+}
--- a/qml/component/ImageBubble.qml
+++ b/qml/component/ImageBubble.qml
@@ -1,34 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property var downloadAndOpen: downloadable.downloadAndOpen
-    readonly property var saveFileAs: downloadable.saveFileAs
-
-    Rectangle {
-        id: messageRect
-
-        width: messageImage.width + 24
-        height: messageImage.height + 24
-
-        color: sentByMe ? background : Material.primary
-
-        DownloadableContent {
-            id: downloadable
-
-            width: messageImage.width
-            height: messageImage.height
-            anchors.centerIn: parent
-
-            AutoImage {
-                id: messageImage
-                z: -4
-                sourceSize: 128
-                source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
-
-                onClicked: downloadAndOpen()
-            }
-        }
-    }
-}
--- a/qml/component/MessageBubble.qml
+++ b/qml/component/MessageBubble.qml
@@ -1,20 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.2
-
-AvatarContainer {
-    readonly property bool isNotice: eventType === "notice"
-
-    id: messageRow
-
-    TextDelegate {
-        maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
-        flat: isNotice
-        highlighted: !sentByMe
-        timeLabelVisible: Math.abs(time - aboveTime) > 600000 || index == 0
-        authorLabelVisible: messageRow.avatarVisible
-
-        displayText: display
-    }
-}
--- a/qml/component/MessageDelegate.qml
+++ b/qml/component/MessageDelegate.qml
@@ -1,53 +1,184 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import Matrique 0.1
 import Matrique.Settings 0.1

-Item {
-    readonly property bool hidden: marks === EventStatus.Redacted || marks === EventStatus.Hidden
-    readonly property color background: MSettings.darkTheme ? "#242424" : "lightgrey"
+RowLayout {
+    readonly property bool avatarVisible: !(sentByMe || (aboveAuthor === author && section === aboveSection))
+    readonly property bool highlighted: !sentByMe
    readonly property bool sentByMe: author === currentRoom.localUser
-    readonly property bool isState: eventType === "state" || eventType === "emote"
+    readonly property bool isText: eventType === "notice" || eventType === "message"

-    id: messageDelegate
+    signal saveFileAs()
+    signal openExternally()
+
+    id: messageRow

    z: -5
-    width: delegateLoader.width
-    height: delegateLoader.height

-    anchors.right: !isState && sentByMe ? parent.right : undefined
-    anchors.horizontalCenter: isState ? parent.horizontalCenter : undefined
+    Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft

-    AutoMouseArea {
-        anchors.fill: parent
+    spacing: 6

-        onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/MessageContextMenu.qml").createObject(this)
+    ImageStatus {
+        Layout.preferredWidth: 40
+        Layout.preferredHeight: 40
+        Layout.alignment: Qt.AlignTop
+
+        round: false
+        visible: avatarVisible
+        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
+        displayText: author.displayName
    }

-    Loader {
-        id: delegateLoader
+    Rectangle {
+        Layout.preferredWidth: 40
+        Layout.preferredHeight: 40
+        Layout.alignment: Qt.AlignTop

-        asynchronous: MSettings.asyncMessageDelegate
+        color: "transparent"
+        visible: !(sentByMe || avatarVisible)
+    }

-        source: {
-            if (eventType == "redaction" || hidden) return ""
-            switch (eventType) {
-            case "state":
-            case "emote":
-                return "StateBubble.qml"
-            case "message":
-            case "notice":
-                return "MessageBubble.qml"
-            case "image":
-                return "ImageBubble.qml"
-            case "audio":
-                return "AudioBubble.qml"
-            case "video":
-            case "file":
-                return "FileBubble.qml"
+    GenericBubble {
+        Layout.maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
+
+        id: genericBubble
+
+        highlighted: !sentByMe
+        colored: highlighted && eventType === "notice"
+
+        contentItem: ColumnLayout {
+            id: messageColumn
+
+            spacing: 0
+
+            AutoLabel {
+                visible: messageRow.avatarVisible
+                text: author.displayName
+                Material.foreground: Material.accent
+                coloredBackground: highlighted
+                font.bold: true
+            }
+
+            AutoLabel {
+                Layout.fillWidth: true
+
+                text: display
+                visible: isText
+                coloredBackground: highlighted
+            }
+
+            Loader {
+                sourceComponent: {
+                    switch (eventType) {
+                    case "image":
+                        return imageComponent
+                    case "file":
+                        return fileComponent
+                    case "audio":
+                        return audioComponent
+                    }
+                }
+
+                active: eventType === "image" || eventType === "file" || eventType === "audio"
+            }
+
+            AutoLabel {
+                Layout.alignment: Qt.AlignRight
+                visible: Math.abs(time - aboveTime) > 600000 || index == 0
+                text: Qt.formatTime(time, "hh:mm")
+                coloredBackground: highlighted
+                Material.foreground: "grey"
+                font.pointSize: 8
+            }
+        }
+
+        Component {
+            id: imageComponent
+
+            DownloadableContent {
+                id: downloadable
+
+                width: messageImage.width
+                height: messageImage.height
+
+                AutoImage {
+                    id: messageImage
+                    z: -4
+                    sourceSize: 128
+                    source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
+
+                    onClicked: downloadAndOpen()
+                }
+
+                Component.onCompleted: {
+                    messageRow.saveFileAs.connect(saveFileAs)
+                    messageRow.openExternally.connect(downloadAndOpen)
+                }
+            }
+        }
+
+        Component {
+            id: fileComponent
+
+            AutoLabel {
+                Layout.fillWidth: true
+
+                id: downloadDelegate
+
+                text: "<b>File: </b>" + content.body
+                coloredBackground: highlighted
+
+                background: DownloadableContent {
+                    id: downloadable
+
+                    Component.onCompleted: {
+                        messageRow.saveFileAs.connect(saveFileAs)
+                        messageRow.openExternally.connect(downloadAndOpen)
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: audioComponent
+
+            AutoLabel {
+                id: downloadDelegate
+
+                text: content.info.duration / 1000 + '"'
+                coloredBackground: highlighted
+
+                MouseArea {
+                    anchors.fill: parent
+
+                    propagateComposedEvents: true
+
+                    onClicked: {
+                        if (downloadable.downloaded)
+                            matriqueController.playAudio(progressInfo.localPath)
+                        else
+                        {
+                            playOnFinished = true
+                            currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + ".tmp")
+                        }
+                    }
+                }
+
+                background: DownloadableContent {
+                    id: downloadable
+
+                    onDownloadedChanged: downloaded && playOnFinished ? matriqueController.playAudio(progressInfo.localPath) : {}
+
+                    Component.onCompleted: {
+                        messageRow.saveFileAs.connect(saveFileAs)
+                        messageRow.openExternally.connect(downloadAndOpen)
+                    }
+                }
            }
-            return ""
        }
    }
 }
--- a/qml/component/StateBubble.qml
+++ b/qml/component/StateBubble.qml
@@ -1,12 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-
-TextDelegate {
-    maximumWidth: messageListView.width
-    highlighted: eventType === "emote"
-    timeLabelVisible: false
-    authorLabelVisible: false
-
-    displayText: "<b>" + author.displayName + "</b> " + display
-}
--- a/qml/component/StateDelegate.qml
+++ b/qml/component/StateDelegate.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import QtQuick.Controls.Material 2.2
+import Matrique.Settings 0.1
+
+Label {
+    Layout.alignment: Qt.AlignHCenter
+
+    text: "<b>" + author.displayName + "</b> " + display
+    color: "white"
+
+    padding: 8
+
+    wrapMode: Label.Wrap
+    linkColor: "white"
+    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
+    onLinkActivated: Qt.openUrlExternally(link)
+
+    background: Rectangle {
+        color: MSettings.darkTheme ? "#484848" : "grey"
+    }
+}
--- a/qml/component/TextDelegate.qml
+++ b/qml/component/TextDelegate.qml
@@ -1,61 +0,0 @@
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Controls.Material 2.2
-import QtQuick.Layouts 1.3
-import Matrique.Settings 0.1
-
-Rectangle {
-    property bool flat: false
-    property bool highlighted: false
-    property string displayText: ""
-    property alias timeLabelVisible: timeText.visible
-    property alias authorLabelVisible: authorText.visible
-
-    property int maximumWidth
-
-    readonly property bool darkBackground: highlighted && !flat
-
-    id: messageRect
-
-    width: Math.min(Math.max(messageText.implicitWidth, (timeText.visible ? timeText.implicitWidth : 0), (authorLabelVisible ? authorText.implicitWidth : 0)) + 24, maximumWidth)
-    height: (authorText.visible ? authorText.implicitHeight : 0) + messageText.implicitHeight + (timeText.visible ? timeText.implicitHeight : 0) + 24
-
-    color: flat ? "transparent" : highlighted ? Material.primary : background
-    border.color: Material.primary
-    border.width: flat ? 2 : 0
-
-    ColumnLayout {
-        id: messageColumn
-
-        anchors.fill: parent
-        anchors.margins: 12
-        spacing: 0
-
-        Label {
-            id: authorText
-            text: author.displayName
-            color: darkBackground ? "white" : Material.accent
-            font.bold: true
-        }
-
-        Label {
-            id: messageText
-            Layout.maximumWidth: parent.width
-            text: displayText
-            color: darkBackground ? "white": Material.foreground
-
-            wrapMode: Label.Wrap
-            linkColor: darkBackground ? "white" : Material.accent
-            textFormat: MSettings.richText ? Text.RichText : Text.StyledText
-            onLinkActivated: Qt.openUrlExternally(link)
-        }
-
-        Label {
-            id: timeText
-            Layout.alignment: Qt.AlignRight
-            text: Qt.formatTime(time, "hh:mm")
-            color: darkBackground ? "white" : "grey"
-            font.pointSize: 8
-        }
-    }
-}