From a42335aed2cc44591fa836a0911eaef07e345250 Mon Sep 17 00:00:00 2001 From: Malte E <97891689+maltee1@users.noreply.github.com> Date: Sun, 20 Mar 2022 05:12:41 +0100 Subject: [PATCH] elide usernames in timeline (#997) * Use advanceWidth to get the with of the original text Co-authored-by: Nicolas Werner --- resources/qml/ElidedLabel.qml | 1 + resources/qml/MessageView.qml | 13 ++++++++++--- resources/qml/TimelineRow.qml | 9 ++++----- resources/qml/delegates/Reply.qml | 13 ++++++++----- 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) }