Moves the timestamp to the leftleft-avatar

This should help a lot on mobile, makes the timeline a bit denser and
gives additional horizontal space. Not sure I like the smaller avatars
though.

3 files changed, 35 insertions, 14 deletions

diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml
index df2bf41f..cd323a97 100644
--- a/resources/qml/ChatPage.qml
+++ b/resources/qml/ChatPage.qml
@@ -71,7 +71,7 @@ Rectangle {
         AdaptiveLayoutElement {
             id: timlineViewC
 
-            minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2* Nheko.paddingMedium
+            minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2 * Nheko.paddingMedium
 
             TimelineView {
                 id: timeline
diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index c936c638..d2948125 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -241,8 +241,11 @@ ScrollView {
                     Avatar {
                         id: messageUserAvatar
 
-                        width: Nheko.avatarSize
-                        height: Nheko.avatarSize
+                        property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.5)
+
+                        width: avatarSize
+                        height: avatarSize
+                        y: -Math.ceil(fontMetrics.lineSpacing * 0.25)
                         url: modelData ? chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/") : ""
                         displayName: modelData ? modelData.userName : ""
                         userid: modelData ? modelData.userId : ""
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index 3fa1ad8e..0bdd5f37 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -41,12 +41,16 @@ Item {
     RowLayout {
         id: row
 
+        property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.5)
+
         anchors.rightMargin: 1
-        anchors.leftMargin: Nheko.avatarSize + 16
+        anchors.leftMargin: avatarSize + Nheko.paddingMedium
         anchors.left: parent.left
         anchors.right: parent.right
 
         Column {
+            id: messageCol
+
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignTop
             spacing: 4
@@ -111,18 +115,32 @@ Item {
 
         }
 
-        Label {
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            text: model.timestamp.toLocaleTimeString(Locale.ShortFormat)
-            width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
-            color: Nheko.inactiveColors.text
-            ToolTip.visible: ma.hovered
-            ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
+    }
 
-            HoverHandler {
-                id: ma
-            }
+    Label {
+        id: ts
+
+        property int marginPadding: Math.floor((fontMetrics.font.pixelSize - smallFontMetrics.font.pixelSize) / 2)
+
+        anchors.left: parent.left
+        anchors.leftMargin: marginPadding
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: (reactionRow.height > 0 ? reactionRow.height + messageCol.spacing : 0) + marginPadding
+        text: model.timestamp.toLocaleTimeString(Locale.ShortFormat)
+        width: Math.max(implicitWidth, text.length * smallFontMetrics.maximumCharacterWidth)
+        font.pixelSize: smallFontMetrics.font.pixelSize
+        color: Nheko.inactiveColors.text
+        ToolTip.visible: ma.hovered
+        ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
+
+        FontMetrics {
+            id: smallFontMetrics
+
+            font.pixelSize: Math.ceil(fontMetrics.font.pixelSize * 0.6)
+        }
 
+        HoverHandler {
+            id: ma
         }
 
     }