prepare code for message bubbles and dynamic message layout

resources/qml/TimelineRow.qml

@@ -71,27 +71,39 @@ Item {
         gesturePolicy: TapHandler.ReleaseWithinBounds
     }
 
-    RowLayout {
+    Item {
         id: row
 
         anchors.rightMargin: 1
         anchors.leftMargin: Nheko.avatarSize + 16
         anchors.left: parent.left
         anchors.right: parent.right
-
+        height: msg.height+reactionRow.height+2
-        Column {
+        GridLayout {
-            Layout.fillWidth: true
+            id: msg
-            Layout.alignment: Qt.AlignTop
+            anchors {
-            spacing: 4
+                right: parent.right
-            Layout.topMargin: 1
+                left: parent.left
-            Layout.bottomMargin: 1
+                top: parent.top
+                topMargin: 1
+                bottomMargin: 1
+            }
+            rowSpacing: 0
+            columnSpacing: 0
+            columns: 2
+            rows: 2
 
             // fancy reply, if this is a reply
             Reply {
+                Layout.row: 0
+                Layout.column: 0
+                Layout.fillWidth: true
+                Layout.margins: 0
+                id: reply
+
                 function fromModel(role) {
                     return replyTo != "" ? room.dataById(replyTo, role, r.eventId) : null;
                 }
-
                 visible: replyTo
                 userColor: r.relatedEventCacheBuster, TimelineManager.userColor(userId, Nheko.colors.base)
                 blurhash: r.relatedEventCacheBuster, fromModel(Room.Blurhash) ?? ""
@@ -118,9 +130,12 @@ Item {
 
             // actual message content
             MessageDelegate {
+                Layout.row: 1
+                Layout.column: 0
+                Layout.fillWidth: true
+                Layout.margins: 2
                 id: contentItem
 
-                width: parent.width
                 blurhash: r.blurhash
                 body: r.body
                 formattedBody: r.formattedBody
@@ -144,14 +159,11 @@ Item {
                 isReply: false
             }
 
-            Reactions {
+            RowLayout {
-                id: reactionRow
+                Layout.column: 1
-
+                Layout.row: 0
-                reactions: r.reactions
+                Layout.rowSpan: 2
-                eventId: r.eventId
+                Layout.alignment: Qt.AlignTop | Qt.AlignRight
-            }
-
-        }
 
                 StatusIndicator {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
@@ -204,7 +216,19 @@ Item {
                     }
 
                 }
+            }
+        }
 
+        Reactions {
+            anchors {
+                top: msg.bottom
+                left: parent.left
             }
 
+            id: reactionRow
+
+            reactions: r.reactions
+            eventId: r.eventId
+        }
+    }
 }

resources/qml/delegates/MessageDelegate.qml

@@ -13,7 +13,7 @@ Item {
 
     required property bool isReply
     property alias child: chooser.child
-    property real implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
+//    property real implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
     required property double proportionalHeight
     required property int type
     required property string typeString
@@ -35,14 +35,17 @@ Item {
     required property int encryptionError
     required property int relatedEventCacheBuster
 
-    height: chooser.child ? chooser.child.height : Nheko.paddingLarge
+    Layout.preferredHeight: chooser.child ? chooser.child.height : Nheko.paddingLarge
 
     DelegateChooser {
         id: chooser
 
         //role: "type" //< not supported in our custom implementation, have to use roleValue
         roleValue: type
-        anchors.fill: parent
+        //anchors.fill: parent
+
+        anchors.left: parent.left
+        anchors.right: parent.right
 
         DelegateChoice {
             roleValue: MtxEvent.UnknownMessage

resources/qml/delegates/Placeholder.qml

@@ -10,6 +10,6 @@ MatrixText {
     required property string typeString
 
     text: qsTr("unimplemented event: ") + typeString
-    width: parent.width
+//    width: parent.width
     color: Nheko.inactiveColors.text
 }

resources/qml/delegates/Reply.qml

@@ -35,7 +35,7 @@ Item {
     property int encryptionError
     property int relatedEventCacheBuster
 
-    width: parent.width
+    Layout.preferredHeight: replyContainer.height
     height: replyContainer.height
 
     CursorShape {
@@ -52,12 +52,12 @@ Item {
         color: TimelineManager.userColor(userId, Nheko.colors.base)
     }
 
-    Column {
+    ColumnLayout {
         id: replyContainer
 
         anchors.left: colorLine.right
-        anchors.leftMargin: 4
         width: parent.width - 8
+        spacing: 0
 
         TapHandler {
             acceptedButtons: Qt.LeftButton
@@ -80,6 +80,7 @@ Item {
         }
 
         Text {
+            Layout.leftMargin: 4
             id: userName_
 
             text: TimelineManager.escapeEmoji(userName)
@@ -94,8 +95,8 @@ Item {
         }
 
         MessageDelegate {
+            Layout.leftMargin: 4
             id: reply
-
             blurhash: r.blurhash
             body: r.body
             formattedBody: r.formattedBody
@@ -118,7 +119,7 @@ Item {
             encryptionError: r.encryptionError
             // This is disabled so that left clicking the reply goes to its location
             enabled: false
-            width: parent.width
+            Layout.fillWidth: true
             isReply: true
         }
 
@@ -128,8 +129,7 @@ Item {
         id: backgroundItem
 
         z: -1
-        height: replyContainer.height
+        anchors.fill: replyContainer
-        width: Math.min(Math.max(reply.implicitWidth, userName_.implicitWidth) + 8 + 4, parent.width)
         color: Qt.rgba(userColor.r, userColor.g, userColor.b, 0.1)
     }
 

resources/qml/delegates/TextMessage.qml

@@ -33,8 +33,8 @@ MatrixText {
     blockquote { margin-left: 1em; }
     </style>
     " + formatted.replace("<pre>", "<pre style='white-space: pre-wrap; background-color: " + Nheko.colors.alternateBase + "'>").replace("<del>", "<s>").replace("</del>", "</s>").replace("<strike>", "<s>").replace("</strike>", "</s>")
-    width: parent.width
+//    width: parent.width
-    height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : undefined
+    //height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : undefined
     clip: isReply
     selectByMouse: !Settings.mobileMode && !isReply
     font.pointSize: (Settings.enlargeEmojiOnlyMessages && isOnlyEmoji > 0 && isOnlyEmoji < 4) ? Settings.fontSize * 3 : Settings.fontSize