elide usernames in timeline (#997)

* Use advanceWidth to get the with of the original text

Co-authored-by: Nicolas Werner <nicolas.werner@hotmail.de>

4 files changed, 23 insertions, 13 deletions

diff --git a/resources/qml/ElidedLabel.qml b/resources/qml/ElidedLabel.qml

index 0e892aeb..11df479a 100644
--- a/resources/qml/ElidedLabel.qml
+++ b/resources/qml/ElidedLabel.qml
@@ -12,6 +12,7 @@ Label {
 
     property alias fullText: metrics.text
     property alias elideWidth: metrics.elideWidth
+    property int fullTextWidth: Math.ceil(metrics.advanceWidth)
 
     color: Nheko.colors.text
     text: (textFormat == Text.PlainText) ? metrics.elidedText : TimelineManager.escapeEmoji(TimelineManager.htmlEscape(metrics.elidedText))
diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml

index a9a142b9..4fce9a75 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -285,6 +285,7 @@ Item {
                     height: userName_.height
                     spacing: 8
                     visible: !isStateEvent && (!isSender || !Settings.bubbles)
+                    id: userInfo
 
                     Avatar {
                         id: messageUserAvatar
@@ -311,17 +312,23 @@ Item {
 
                         target: chat.model
                     }
+                    property int remainingWidth: chat.delegateMaxWidth - spacing - messageUserAvatar.width
                     AbstractButton {
-                        contentItem: Label {
+                        contentItem: ElidedLabel {
                             id: userName_
-                            text: TimelineManager.escapeEmoji(userName)
+                            fullText: userName
                             color: TimelineManager.userColor(userId, Nheko.colors.base)
                             textFormat: Text.RichText
+                            elideWidth: Math.min(userInfo.remainingWidth-Math.min(statusMsg.implicitWidth,userInfo.remainingWidth/3), userName_.fullTextWidth)
                         }
                         ToolTip.visible: hovered
                         ToolTip.delay: Nheko.tooltipDelay
                         ToolTip.text: userId
                         onClicked: chat.model.openUserProfile(userId)
+                        leftInset: 0
+                        rightInset: 0
+                        leftPadding: 0
+                        rightPadding: 0
 
                         CursorShape {
                             anchors.fill: parent
@@ -336,7 +343,7 @@ Item {
                         text: Presence.userStatus(userId)
                         textFormat: Text.PlainText
                         elide: Text.ElideRight
-                        width: chat.delegateMaxWidth - parent.spacing * 2 - userName.implicitWidth - Nheko.avatarSize
+                        width: userInfo.remainingWidth - userName_.width - parent.spacing
                         font.italic: true
 
                         Connections {
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml

index a3040412..bb6514d1 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -71,17 +71,16 @@ Item {
     Control {
         id: row
         property bool bubbleOnRight : isSender && Settings.bubbles
-        property int bubblePadding: (parent.width-(Settings.smallAvatars? 0 : Nheko.avatarSize+8))/10
-        anchors.rightMargin: isStateEvent? 0 : (isSender || !Settings.bubbles? 0 : bubblePadding)
-        anchors.leftMargin: isStateEvent? 0 :((Settings.smallAvatars? 0 : Nheko.avatarSize+8) + (bubbleOnRight? bubblePadding : 0)) // align bubble with section header
+        anchors.leftMargin: isStateEvent || Settings.smallAvatars? 0 : Nheko.avatarSize+8 // align bubble with section header
         anchors.left: isStateEvent? undefined : (bubbleOnRight? undefined : parent.left)
         anchors.right: isStateEvent? undefined: (bubbleOnRight? parent.right : undefined)
         anchors.horizontalCenter: isStateEvent? parent.horizontalCenter : undefined
-        property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
+        property int maxWidth: (parent.width-(Settings.smallAvatars || isStateEvent? 0 : Nheko.avatarSize+8))*(Settings.bubbles && !isStateEvent? 0.9 : 1)
         width: Settings.bubbles? Math.min(maxWidth,Math.max(reply.implicitWidth+8,contentItem.implicitWidth+metadata.width+20)) : maxWidth
+
         leftPadding: 4
         rightPadding: (Settings.bubbles && !isStateEvent)? 4: 2
-        topPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        topPadding: rightPadding
         bottomPadding: topPadding
         background: Rectangle {
             property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml

index f5756390..513b7c0b 100644
--- a/resources/qml/delegates/Reply.qml
+++ b/resources/qml/delegates/Reply.qml
@@ -9,6 +9,7 @@ import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.2
 import QtQuick.Window 2.13
 import im.nheko 1.0
+import "../"
 
 Item {
     id: r
@@ -39,7 +40,7 @@ Item {
 
     height: replyContainer.height
     implicitHeight: replyContainer.height
-    implicitWidth: visible? colorLine.width+replyContainer.implicitWidth : 0
+    implicitWidth: visible? colorLine.width+Math.max(replyContainer.implicitWidth,userName_.fullTextWidth) : 0 // visible? seems to be causing issues
 
     CursorShape {
         anchors.fill: parent
@@ -83,13 +84,15 @@ Item {
         }
 
         AbstractButton {
-            id: userName_
             Layout.leftMargin: 4
-            contentItem: Text {
-
-                text: TimelineManager.escapeEmoji(userName)
+            Layout.fillWidth: true
+            contentItem: ElidedLabel {
+                id: userName_
+                fullText: userName
                 color: r.userColor
                 textFormat: Text.RichText
+                width: parent.width
+                elideWidth: width
             }
             onClicked: room.openUserProfile(userId)
         }