Clean up MessageDelegate.

Include a generic component for text bubbles.
Fixes #11.

qml/component/FileBubble.qml

@@ -3,20 +3,23 @@ import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 
 AvatarContainer {
+    readonly property var downloadAndOpen: downloadable.downloadAndOpen
+    readonly property var saveFileAs: downloadable.saveFileAs
+
     DownloadableContent {
         id: downloadable
 
-        width: downloadButton.width
+        width: downloadDelegate.width
-        height: downloadButton.height
+        height: downloadDelegate.height
 
-        Button {
+        TextDelegate {
-            id: downloadButton
+            id: downloadDelegate
 
-            text: content.body
+            maximumWidth: messageListView.width
             highlighted: !sentByMe
-            flat: true
+            timeLabelVisible: false
 
-            onClicked: downloadable.saveFileAs()
+            displayText: "<b>File: </b>" + content.body
         }
     }
 }

qml/component/MessageBubble.qml

@@ -8,49 +8,12 @@ AvatarContainer {
 
     id: messageRow
 
-    Rectangle {
+    TextDelegate {
-        id: messageRect
+        maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
+        flat: isNotice
+        highlighted: !sentByMe
+        timeLabelVisible: Math.abs(time - aboveTime) > 600000 || index == 0
 
-        width: Math.min(Math.max(messageText.implicitWidth, (timeText.visible ? timeText.implicitWidth : 0)) + 24, messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0))
+        displayText: display
-        height: messageText.implicitHeight + (timeText.visible ? timeText.implicitHeight : 0) + 24
-
-        color: isNotice ? "transparent" : !sentByMe ? Material.accent : background
-        border.color: Material.accent
-        border.width: isNotice ? 2 : 0
-
-        ColumnLayout {
-            id: messageColumn
-
-            anchors.fill: parent
-            anchors.margins: 12
-            spacing: 0
-
-            Label {
-                id: messageText
-                Layout.maximumWidth: parent.width
-                text: display
-                color: isNotice || sentByMe ? Material.foreground : "white"
-
-                wrapMode: Label.Wrap
-                linkColor: isNotice || sentByMe ? Material.accent : "white"
-                //            textFormat: contentType === "text/html" ? Text.RichText : Text.StyledText
-                textFormat: Text.StyledText
-                onLinkActivated: Qt.openUrlExternally(link)
-            }
-
-            Label {
-                id: timeText
-                visible: Math.abs(time - aboveTime) > 600000 || index == 0
-                Layout.alignment: Qt.AlignRight
-                text: Qt.formatTime(time, "hh:mm")
-                color: isNotice || sentByMe ? "grey" : "white"
-                font.pointSize: 8
-
-//                Component.onCompleted: {
-//                    console.log("Difference: " + Math.abs(time - aboveTime))
-//                    console.log("Index: " + index)
-//                }
-            }
-        }
     }
 }

qml/component/StateBubble.qml

@@ -2,25 +2,10 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 
-Rectangle {
+TextDelegate {
-    readonly property bool isEmote: eventType === "emote"
+    maximumWidth: messageListView.width
+    highlighted: eventType === "emote"
+    timeLabelVisible: false
 
-    id: stateRect
+    displayText: "<b>" + author.displayName + "</b> " + display
-
-    width: Math.min(stateText.implicitWidth + 24, messageListView.width)
-    height: stateText.implicitHeight + 24
-
-    color: isEmote ? Material.accent : background
-
-    Label {
-        id: stateText
-        text: "<b>" + author.displayName + "</b> " + display
-        color: isEmote ? "white" : Material.foreground
-        linkColor: isEmote || darkTheme ? "white" : Material.accent
-        anchors.fill: parent
-        anchors.margins: 12
-        wrapMode: Label.Wrap
-        textFormat: Text.StyledText
-        onLinkActivated: Qt.openUrlExternally(link)
-    }
 }

qml/component/TextDelegate.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import QtQuick.Layouts 1.3
+
+Rectangle {
+    property bool flat: false
+    property bool highlighted: false
+    property string displayText
+    property alias timeLabelVisible: timeText.visible
+
+    property int maximumWidth
+
+    readonly property bool darkBackground: highlighted && !flat
+
+    id: messageRect
+
+    width: Math.min(Math.max(messageText.implicitWidth, (timeText.visible ? timeText.implicitWidth : 0)) + 24, maximumWidth)
+    height: messageText.implicitHeight + (timeText.visible ? timeText.implicitHeight : 0) + 24
+
+    color: flat ? "transparent" : highlighted ? Material.accent : background
+    border.color: Material.accent
+    border.width: flat ? 2 : 0
+
+    ColumnLayout {
+        id: messageColumn
+
+        anchors.fill: parent
+        anchors.margins: 12
+        spacing: 0
+
+        Label {
+            id: messageText
+            Layout.maximumWidth: parent.width
+            text: displayText
+            color: darkBackground ? "white": Material.foreground
+
+            wrapMode: Label.Wrap
+            linkColor: darkBackground ? "white" : Material.accent
+            textFormat: 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
+        }
+    }
+}

res.qrc

@@ -29,5 +29,6 @@
         <file>qml/Setting.qml</file>
         <file>qml/form/SettingAccountForm.qml</file>
         <file>qml/form/SettingAppearanceForm.qml</file>
+        <file>qml/component/TextDelegate.qml</file>
     </qresource>
 </RCC>