From 5db7ec7f037338e45de3dc02767e42484ca292bc Mon Sep 17 00:00:00 2001
From: Malte E <malte.e@mailbox.org>
Date: Wed, 9 Feb 2022 17:53:02 +0100
Subject: [PATCH] Variable width bubbles (still has binding loop)

---
 resources/qml/TimelineRow.qml               | 17 +++++++++++------
 resources/qml/delegates/Encrypted.qml       |  2 ++
 resources/qml/delegates/MessageDelegate.qml |  2 +-
 resources/qml/delegates/Reply.qml           |  1 +
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index b91d08d2..51275f4e 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -78,7 +78,9 @@ Item {
         anchors.rightMargin: 1
         anchors.leftMargin: Nheko.avatarSize + 12 // align bubble with section header
         anchors.left: parent.left
-        anchors.right: parent.right
+        //anchors.right: parent.right
+        property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
+        width: Math.min(maxWidth,msg.implicitWidth)
         height: msg.height
         topInset: -4
         bottomInset: -4
@@ -100,7 +102,7 @@ Item {
                 left: parent.left
                 top: parent.top
             }
-            property bool narrowLayout: (row.width < 350) && Settings.bubbles
+            property bool narrowLayout: (r.width < 500) && Settings.bubbles
             rowSpacing: 0
             columnSpacing: 2
             columns: narrowLayout? 1 : 2
@@ -174,18 +176,21 @@ Item {
             }
 
             RowLayout {
+                id: metadata
                 Layout.column: msg.narrowLayout? 0 : 1
                 Layout.row: msg.narrowLayout? 2 : 0
                 Layout.rowSpan: msg.narrowLayout? 1 : 2
                 Layout.bottomMargin: msg.narrowLayout? -4 : 0
                 Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.preferredWidth: implicitWidth
                 visible: !isStateEvent
 
                 property double scaling: msg.narrowLayout? 0.75 : 1
+
                 StatusIndicator {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
                     Layout.preferredHeight: 16*parent.scaling
-                    width: 16*parent.scaling
+                    Layout.preferredWidth: 16*parent.scaling
                     status: r.status
                     eventId: r.eventId
                 }
@@ -195,8 +200,6 @@ Item {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
                     Layout.preferredHeight: 16*parent.scaling
                     Layout.preferredWidth: 16*parent.scaling
-                    height: 16*parent.scaling
-                    width: 16*parent.scaling
                     sourceSize.width: 16 * Screen.devicePixelRatio*parent.scaling
                     sourceSize.height: 16 * Screen.devicePixelRatio*parent.scaling
                     source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
@@ -217,12 +220,14 @@ Item {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
                     Layout.preferredHeight: 16*parent.scaling
                     Layout.preferredWidth: 16*parent.scaling
+                    sourceSize.width: 16 * Screen.devicePixelRatio*parent.scaling
+                    sourceSize.height: 16 * Screen.devicePixelRatio*parent.scaling
                 }
 
                 Label {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.preferredWidth: implicitWidth
                     text: timestamp.toLocaleTimeString(Locale.ShortFormat)
-                    width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
                     color: Nheko.inactiveColors.text
                     ToolTip.visible: ma.hovered
                     ToolTip.delay: Nheko.tooltipDelay
diff --git a/resources/qml/delegates/Encrypted.qml b/resources/qml/delegates/Encrypted.qml
index 6840c955..d82f027b 100644
--- a/resources/qml/delegates/Encrypted.qml
+++ b/resources/qml/delegates/Encrypted.qml
@@ -17,6 +17,7 @@ Rectangle {
 
     radius: fontMetrics.lineSpacing / 2 + Nheko.paddingMedium
     width: parent.width
+    implicitWidth: encryptedText.implicitWidth+24+Nheko.paddingMedium*3 // Column doesn't provide a useful implicitWidth, should be replaced by ColumnLayout
     height: contents.implicitHeight + Nheko.paddingMedium * 2
     color: Nheko.colors.alternateBase
 
@@ -39,6 +40,7 @@ Rectangle {
             Layout.fillWidth: true
 
             MatrixText {
+                id: encryptedText
                 text: {
                     switch (encryptionError) {
                     case Olm.MissingSession:
diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml
index 58f12c91..0cec51bc 100644
--- a/resources/qml/delegates/MessageDelegate.qml
+++ b/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
+    implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
     required property double proportionalHeight
     required property int type
     required property string typeString
diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml
index 96fa410e..7c8bccce 100644
--- a/resources/qml/delegates/Reply.qml
+++ b/resources/qml/delegates/Reply.qml
@@ -38,6 +38,7 @@ Item {
 
     Layout.preferredHeight: replyContainer.height
     height: replyContainer.height
+    implicitWidth: visible? colorLine.width+replyContainer.implicitWidth : 0
 
     CursorShape {
         anchors.fill: parent