feat: add a read more button and crop text when message is too long

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -83,7 +83,8 @@ ScrollView {
             }
         }
         MouseArea {
-           cursorShape: Qt.PointingHandCursor
+            enabled: newMessagesBox.visible
+            cursorShape: enabled ? Qt.PointingHandCursor : undefined
             anchors.fill: newMessagesBox
             onClicked: {
                 newMessagesBox.state = "hidden"

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml

@@ -2,9 +2,21 @@ import QtQuick 2.3
 import "../../../../../shared"
 import "../../../../../imports"
 
+Item {
+    property bool longChatText: true
+    property bool veryLongChatText: chatsModel.plainText(message).length >
+                                    (appSettings.compactMode ? Constants.limitLongChatTextCompactMode : Constants.limitLongChatText)
+    property bool readMore: false
+    property alias textField: chatText
+
+    id: root
+    visible: contentType == Constants.messageType || isEmoji
+    z: 51
+    height: childrenRect.height
+    width: longChatText ? undefined : chatText.width
+
     StyledTextEdit {
         id: chatText
-    visible: contentType == Constants.messageType || isEmoji
         textFormat: Text.RichText
         horizontalAlignment: Text.AlignLeft
         wrapMode: Text.Wrap
@@ -12,7 +24,9 @@ StyledTextEdit {
         readOnly: true
         selectByMouse: true
         color: Style.current.textColor
-    z: 51
+        width: longChatText ? parent.width : implicitWidth
+        height: root.veryLongChatText && !root.readMore ? 200 : implicitHeight
+        clip: true
         onLinkActivated: function (link) {
             if(link.startsWith("#")) {
                 chatsModel.joinChat(link.substring(1), Constants.chatTypePublic);
@@ -63,3 +77,37 @@ StyledTextEdit {
             }
         }
     }
+
+    Loader {
+        active: root.veryLongChatText
+        sourceComponent: showMoreComponent
+        anchors.top: chatText.bottom
+        anchors.topMargin: Style.current.smallPadding
+        anchors.left: chatText.horizontalAlignment === Text.AlignLeft ? chatText.left : undefined
+        anchors.right: chatText.horizontalAlignment === Text.AlignLeft ? undefined : chatText.right
+    }
+
+    Component {
+        id: showMoreComponent
+        StyledText {
+            text: root.readMore ?
+                      qsTr("Read less") :
+                      qsTr("Read more")
+            color: chatText.color
+            font.pixelSize: 12
+            font.underline: true
+            z: 100
+
+            MouseArea {
+                z: 101
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    root.readMore = !root.readMore
+                }
+            }
+        }
+    }
+
+
+}

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml

@@ -100,14 +100,15 @@ Item {
 
         ChatText {
             id: chatText
+            longChatText: chatBox.longChatText
             anchors.top: chatReply.bottom
             anchors.topMargin: chatBox.chatVerticalPadding
             anchors.left: parent.left
             anchors.leftMargin: chatBox.chatHorizontalPadding
             anchors.right: chatBox.longChatText ? parent.right : undefined
             anchors.rightMargin: chatBox.longChatText ? chatBox.chatHorizontalPadding : 0
-            horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
+            textField.horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
-            color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
+            textField.color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
         }
 
         Loader {

ui/app/AppLayouts/Profile/Sections/Ens/List.qml

@@ -285,8 +285,6 @@ Item {
                 anchors.topMargin: chatBox.chatVerticalPadding
                 anchors.left: parent.left
                 anchors.leftMargin: chatBox.chatHorizontalPadding
-                horizontalAlignment: Text.AlignLeft
-                color: Style.current.textColor
             }
 
             RectangleCorner {}

ui/imports/Constants.qml

@@ -7,6 +7,9 @@ QtObject {
     readonly property int chatTypePublic: 2
     readonly property int chatTypePrivateGroupChat: 3
 
+    readonly property int limitLongChatText: 500
+    readonly property int limitLongChatTextCompactMode: 1000
+
     readonly property int fetchMoreMessagesButton: -2
     readonly property int chatIdentifier: -1
     readonly property int unknownContentType: 0