From 0f511ebc60c66a23fca17874abb67f2e41fdfc39 Mon Sep 17 00:00:00 2001
From: mishkarogachev <mishkarogachev@gmail.com>
Date: Wed, 4 May 2022 13:35:15 +0300
Subject: [PATCH] fix(StatusListItem): Make text always fit boundaries

---
 sandbox/controls/ListItems.qml            | 10 ++++--
 src/StatusQ/Components/StatusListItem.qml | 38 ++++++++++++++---------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml
index a68cec88..cf60105d 100644
--- a/sandbox/controls/ListItems.qml
+++ b/sandbox/controls/ListItems.qml
@@ -26,7 +26,7 @@ GridLayout {
         badge.value: 1
     }
     StatusNavigationListItem {
-        title: "Menu Item (selected)"
+        title: "Menu Item (selected) with very long text"
         selected: true
         icon.name: "info"
         badge.value: 1
@@ -420,10 +420,16 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
     }
 
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+    }
+
     StatusMemberListItem {
         nickName: "This girl I know from work"
         userName: "annabelle"
-        isOnline: true        
+        isOnline: true
     }
 
     StatusMemberListItem {
diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml
index ec32035c..2c51edc9 100644
--- a/src/StatusQ/Components/StatusListItem.qml
+++ b/src/StatusQ/Components/StatusListItem.qml
@@ -14,13 +14,13 @@ Rectangle {
     property string title: ""
     property string titleAsideText: ""
     property string subTitle: ""
-    property string tertiaryTitle: ""    
+    property string tertiaryTitle: ""
     property string label: ""
     property real leftPadding: 16
     property real rightPadding: 16
     property bool enabled: true
     property bool highlighted: false
-    property bool propagateTitleClicks: true 
+    property bool propagateTitleClicks: true
     property int type: StatusListItem.Type.Primary
     property list<Item> components
     property var bottomModel: []
@@ -169,26 +169,34 @@ Rectangle {
                 text: statusListItem.title
                 font.pixelSize: 15
                 height: visible ? contentHeight : 0
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                elide: Text.ElideRight
                 anchors.left: parent.left
-                anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
                 anchors.top: bottomModel.length === 0 ? undefined:  parent.top
                 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
+                width: Math.min(implicitWidth, parent.width)
                 color: {
-                  if (!statusListItem.enabled) {
-                    return Theme.palette.baseColor1
-                  }
-                  switch (statusListItem.type) {
-                      case StatusListItem.Type.Primary:
-                          return Theme.palette.directColor1
-                      case StatusListItem.Type.Secondary:
-                          return Theme.palette.primaryColor1
-                      case StatusListItem.Type.Danger:
-                          return Theme.palette.dangerColor1
-                  }
+                    if (!statusListItem.enabled) {
+                        return Theme.palette.baseColor1
+                    }
+                    switch (statusListItem.type) {
+                        case StatusListItem.Type.Primary:
+                            return Theme.palette.directColor1
+                        case StatusListItem.Type.Secondary:
+                            return Theme.palette.primaryColor1
+                        case StatusListItem.Type.Danger:
+                            return Theme.palette.dangerColor1
+                    }
+                }
+
+                StatusToolTip {
+                    id: statusListItemTitleTooltip
+                    text: statusListItemTitle.text
+                    delay: 0
+                    visible: statusListItemTitle.truncated && statusListItemTitleMouseArea.containsMouse
                 }
 
                 MouseArea {
+                    id: statusListItemTitleMouseArea
                     anchors.fill: parent
                     enabled: statusListItem.enabled
                     cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor