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 { MouseArea {
cursorShape: Qt.PointingHandCursor enabled: newMessagesBox.visible
anchors.fill: newMessagesBox cursorShape: enabled ? Qt.PointingHandCursor : undefined
onClicked: { anchors.fill: newMessagesBox
newMessagesBox.state = "hidden" onClicked: {
chatLogView.scrollToBottom(true) newMessagesBox.state = "hidden"
} chatLogView.scrollToBottom(true)
}
} }
onAtYEndChanged: { onAtYEndChanged: {

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

@ -2,64 +2,112 @@ import QtQuick 2.3
import "../../../../../shared" import "../../../../../shared"
import "../../../../../imports" import "../../../../../imports"
StyledTextEdit { Item {
id: chatText 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 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 z: 51
onLinkActivated: function (link) { height: childrenRect.height
if(link.startsWith("#")){ width: longChatText ? undefined : chatText.width
chatsModel.joinChat(link.substring(1), Constants.chatTypePublic);
return;
}
if (link.startsWith('//')) { StyledTextEdit {
let pk = link.replace("//", ""); id: chatText
profilePopup.openPopup(chatsModel.userNameOrAlias(pk), pk, chatsModel.generateIdenticon(pk)) textFormat: Text.RichText
return; 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) if (link.startsWith('//')) {
} let pk = link.replace("//", "");
text: { profilePopup.openPopup(chatsModel.userNameOrAlias(pk), pk, chatsModel.generateIdenticon(pk))
if(contentType === Constants.stickerType) return ""; return;
let msg = Utils.linkifyAndXSS(message); }
if(isEmoji){
return Emoji.parse(msg, "72x72"); Qt.openUrlExternally(link)
} else { }
return `<html>`+ text: {
`<head>`+ if(contentType === Constants.stickerType) return "";
`<style type="text/css">`+ let msg = Utils.linkifyAndXSS(message);
`code {`+ if(isEmoji) {
`background-color: #1a356b;`+ return Emoji.parse(msg, "72x72");
`color: #FFFFFF;`+ } else {
`white-space: pre;`+ return `<html>`+
`}`+ `<head>`+
`p {`+ `<style type="text/css">`+
`white-space: pre-wrap;`+ `code {`+
`}`+ `background-color: #1a356b;`+
`a {`+ `color: #FFFFFF;`+
`color: ${isCurrentUser && !appSettings.compactMode ? Style.current.white : Style.current.textColor};`+ `white-space: pre;`+
`}`+ `}`+
`a.mention {`+ `p {`+
`color: ${isCurrentUser ? Style.current.cyan : Style.current.turquoise};`+ `white-space: pre-wrap;`+
`}`+ `}`+
`blockquote {`+ `a {`+
`margin: 0;`+ `color: ${isCurrentUser && !appSettings.compactMode ? Style.current.white : Style.current.textColor};`+
`padding: 0;`+ `}`+
`}`+ `a.mention {`+
`</style>`+ `color: ${isCurrentUser ? Style.current.cyan : Style.current.turquoise};`+
`</head>`+ `}`+
`<body>`+ `blockquote {`+
`${Emoji.parse(msg, "26x26")}`+ `margin: 0;`+
`</body>`+ `padding: 0;`+
`</html>`; `}`+
`</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 { ChatText {
id: chatText id: chatText
longChatText: chatBox.longChatText
anchors.top: chatReply.bottom anchors.top: chatReply.bottom
anchors.topMargin: chatBox.chatVerticalPadding anchors.topMargin: chatBox.chatVerticalPadding
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: chatBox.chatHorizontalPadding anchors.leftMargin: chatBox.chatHorizontalPadding
anchors.right: chatBox.longChatText ? parent.right : undefined anchors.right: chatBox.longChatText ? parent.right : undefined
anchors.rightMargin: chatBox.longChatText ? chatBox.chatHorizontalPadding : 0 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 { Loader {

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

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

3
ui/imports/Constants.qml
View File

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