Use AutoTextField.

Fix #81.

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -60,7 +60,7 @@ RowLayout {
 
             spacing: 0
 
-            AutoLabel {
+            TimelineLabel {
                 id: authorLabel
 
                 visible: messageRow.avatarVisible
@@ -71,6 +71,7 @@ RowLayout {
 
                 MouseArea {
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: inputField.insert(inputField.cursorPosition, author.displayName)
                 }
             }
@@ -123,7 +124,7 @@ RowLayout {
 
                 spacing: 4
 
-                AutoLabel {
+                TimelineLabel {
                     visible: userMarker.length > 5
                     text: userMarker.length - 5 + "+"
                     coloredBackground: highlighted
@@ -140,10 +141,21 @@ RowLayout {
 
                         hint: modelData.displayName
                         image: modelData.avatar
+
+                        MouseArea {
+                            anchors.fill: parent
+
+                            cursorShape: Qt.PointingHandCursor
+
+                            onClicked: {
+                                readMarkerDialog.listModel = userMarker
+                                readMarkerDialog.open()
+                            }
+                        }
                     }
                 }
 
-                AutoLabel {
+                TimelineLabel {
                     id: timeLabel
 
                     visible: Math.abs(time - aboveTime) > 600000 || index == 0
@@ -164,7 +176,7 @@ RowLayout {
 
                 id: downloadable
 
-                AutoImage {
+                TimelineImage {
                     z: -4
 
                     id: messageImage
@@ -185,7 +197,7 @@ RowLayout {
         Component {
             id: fileComponent
 
-            AutoLabel {
+            TimelineLabel {
                 Layout.fillWidth: true
 
                 id: downloadDelegate
@@ -207,7 +219,7 @@ RowLayout {
         Component {
             id: audioComponent
 
-            AutoLabel {
+            TimelineLabel {
                 id: downloadDelegate
 
                 text: content.info.duration / 1000 + '"'

imports/Spectral/Component/Timeline/TimelineImage.qml

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,17 @@
+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)
+}