Improve ImageDelegate.

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -14,8 +14,8 @@ import Spectral.Menu.Timeline 2.0
 import Spectral.Effect 2.0
 import Spectral.Font 0.1
 
-ColumnLayout {
-    readonly property bool avatarVisible: !sentByMe && showAuthor
+RowLayout {
+    readonly property bool avatarVisible: showAuthor && !sentByMe
     readonly property bool sentByMe: author === currentRoom.localUser
 
     property bool openOnFinished: false
@@ -23,7 +23,9 @@ ColumnLayout {
 
     id: root
 
-    spacing: 0
+    spacing: 4
+
+    z: -5
 
     onDownloadedChanged: {
         if (downloaded && openOnFinished) {
@@ -32,24 +34,6 @@ ColumnLayout {
         }
     }
 
-    Label {
-        Layout.leftMargin: 48
-
-        text: author.displayName
-
-        visible: avatarVisible
-
-        font.pixelSize: 13
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    RowLayout {
-        z: -5
-
-        id: messageRow
-
-        spacing: 4
-
     Avatar {
         Layout.preferredWidth: 32
         Layout.preferredHeight: 32
@@ -97,7 +81,7 @@ ColumnLayout {
     }
 
     Image {
-            Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
+        Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
 
         id: img
 
@@ -115,7 +99,37 @@ ColumnLayout {
             maskSource: Rectangle {
                 width: img.width
                 height: img.height
-                    radius: 24
+                radius: 18
+            }
+        }
+
+        Control {
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+
+            horizontalPadding: 8
+            verticalPadding: 4
+
+            contentItem: RowLayout {
+                Label {
+                    text: Qt.formatDateTime(time, "hh:mm")
+                    color: "white"
+                    font.pixelSize: 12
+                }
+
+                Label {
+                    text: author.displayName
+                    color: "white"
+                    font.pixelSize: 12
+                }
+            }
+
+            background: Rectangle {
+                radius: height / 2
+                color: "black"
+                opacity: 0.3
             }
         }
 
@@ -189,7 +203,6 @@ ColumnLayout {
             }
         }
     }
-    }
 
     function saveFileAs() {
         var folderDialog = openFolderDialog.createObject(ApplicationWindow.overlay)