status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Jonathan Rainville 2020-09-25 15:44:40 -04:00 committed by Iuri Matias
parent 2068e85e47
commit 9f9bad2fa3
5 changed files with 115 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
View File

@ -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: {

156
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
View File

@ -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 `<html>`+
`<head>`+
`<style type="text/css">`+
`code {`+
`background-color: #1a356b;`+
`color: #FFFFFF;`+
`white-space: pre;`+
`}`+
`p {`+
`white-space: pre-wrap;`+
`}`+
`a {`+
`color: ${isCurrentUser && !appSettings.compactMode ? Style.current.white : Style.current.textColor};`+
`}`+
`a.mention {`+
`color: ${isCurrentUser ? Style.current.cyan : Style.current.turquoise};`+
`}`+
`blockquote {`+
`margin: 0;`+
`padding: 0;`+
`}`+
`</style>`+
`</head>`+
`<body>`+
`${Emoji.parse(msg, "26x26")}`+
`</body>`+
`</html>`;
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 `<html>`+
`<head>`+
`<style type="text/css">`+
`code {`+
`background-color: #1a356b;`+
`color: #FFFFFF;`+
`white-space: pre;`+
`}`+
`p {`+
`white-space: pre-wrap;`+
`}`+
`a {`+
`color: ${isCurrentUser && !appSettings.compactMode ? Style.current.white : Style.current.textColor};`+
`}`+
`a.mention {`+
`color: ${isCurrentUser ? Style.current.cyan : Style.current.turquoise};`+
`}`+
`blockquote {`+
`margin: 0;`+
`padding: 0;`+
`}`+
`</style>`+
`</head>`+
`<body>`+
`${Emoji.parse(msg, "26x26")}`+
`</body>`+
`</html>`;
}
}
}
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
}
}
}
}
}

5
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -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 {

2
ui/app/AppLayouts/Profile/Sections/Ens/List.qml
View File

@ -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 {}

3
ui/imports/Constants.qml
View File

@ -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