From 9f9bad2fa3dbc7a6cae4c3d1bf3307f7cb396d4e Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Fri, 25 Sep 2020 15:44:40 -0400 Subject: [PATCH] feat: add a read more button and crop text when message is too long --- .../Chat/ChatColumn/ChatMessages.qml | 13 +- .../ChatColumn/MessageComponents/ChatText.qml | 156 ++++++++++++------ .../MessageComponents/NormalMessage.qml | 5 +- .../AppLayouts/Profile/Sections/Ens/List.qml | 2 - ui/imports/Constants.qml | 3 + 5 files changed, 115 insertions(+), 64 deletions(-) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml index 06ab5c7d9e..873fa0242d 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml @@ -83,12 +83,13 @@ ScrollView { } } MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: newMessagesBox - onClicked: { - newMessagesBox.state = "hidden" - chatLogView.scrollToBottom(true) - } + enabled: newMessagesBox.visible + cursorShape: enabled ? Qt.PointingHandCursor : undefined + anchors.fill: newMessagesBox + onClicked: { + newMessagesBox.state = "hidden" + chatLogView.scrollToBottom(true) + } } onAtYEndChanged: { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml index 8e8e3c8fe2..8b8e972a3d 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml @@ -2,64 +2,112 @@ import QtQuick 2.3 import "../../../../../shared" import "../../../../../imports" -StyledTextEdit { - id: chatText +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 - textFormat: Text.RichText - horizontalAlignment: Text.AlignLeft - wrapMode: Text.Wrap - font.pixelSize: 15 - readOnly: true - selectByMouse: true - color: Style.current.textColor z: 51 - onLinkActivated: function (link) { - if(link.startsWith("#")){ - chatsModel.joinChat(link.substring(1), Constants.chatTypePublic); - return; - } + height: childrenRect.height + width: longChatText ? undefined : chatText.width - if (link.startsWith('//')) { - let pk = link.replace("//", ""); - profilePopup.openPopup(chatsModel.userNameOrAlias(pk), pk, chatsModel.generateIdenticon(pk)) - return; - } + StyledTextEdit { + id: chatText + textFormat: Text.RichText + horizontalAlignment: Text.AlignLeft + wrapMode: Text.Wrap + font.pixelSize: 15 + readOnly: true + selectByMouse: true + color: Style.current.textColor + 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); + return; + } - Qt.openUrlExternally(link) - } - text: { - if(contentType === Constants.stickerType) return ""; - let msg = Utils.linkifyAndXSS(message); - if(isEmoji){ - return Emoji.parse(msg, "72x72"); - } else { - return ``+ - ``+ - ``+ - ``+ - ``+ - `${Emoji.parse(msg, "26x26")}`+ - ``+ - ``; + if (link.startsWith('//')) { + let pk = link.replace("//", ""); + profilePopup.openPopup(chatsModel.userNameOrAlias(pk), pk, chatsModel.generateIdenticon(pk)) + return; + } + + Qt.openUrlExternally(link) + } + text: { + if(contentType === Constants.stickerType) return ""; + let msg = Utils.linkifyAndXSS(message); + if(isEmoji) { + return Emoji.parse(msg, "72x72"); + } else { + return ``+ + ``+ + ``+ + ``+ + ``+ + `${Emoji.parse(msg, "26x26")}`+ + ``+ + ``; + } } } + + 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 + } + } + } + } + + } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml index e9eece9010..aca8b9227c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml +++ b/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 - color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor + textField.horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight + textField.color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor } Loader { diff --git a/ui/app/AppLayouts/Profile/Sections/Ens/List.qml b/ui/app/AppLayouts/Profile/Sections/Ens/List.qml index 01420b64ed..902a1cfa6a 100644 --- a/ui/app/AppLayouts/Profile/Sections/Ens/List.qml +++ b/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 {} diff --git a/ui/imports/Constants.qml b/ui/imports/Constants.qml index b9e3d121c3..ef45af8acc 100644 --- a/ui/imports/Constants.qml +++ b/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