feat: add a read more button and crop text when message is too long
This commit is contained in:
parent
2068e85e47
commit
9f9bad2fa3
|
@ -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: {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue