status-desktop/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml

180 lines
6.8 KiB
QML
Raw Normal View History

import QtQuick 2.14
import QtQuick.Shapes 1.13
import QtGraphicalEffects 1.13
import "../../../../../shared"
import "../../../../../shared/status"
import "../../../../../imports"
Loader {
property int textFieldWidth: item ? item.textField.width : 0
property int textFieldImplicitWidth: 0
property int authorWidth: item ? item.authorMetrics.width : 0
property bool longReply: false
2020-09-22 14:30:49 +00:00
property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText
property var container
feat: whitelist gifs (no url extension needed) Fixes #1377. Fixes #1479. Two sites have been added to the whitelist: giphy.com and tenor.com. `imageUrls` in its entirety has been removed and instead all links are being handle through the message `linkUrls`. This prevents double-handling of urls that may or may not be images. The logic to automatically show links previews works like this: 1. If the setting "display chat images" is enabled, all links that *contain* ".png", ".jpg", ".jpeg", ".svg", ".gif" will be automatically shown. If the URL doesn't contain the extension, we are not downloading it. This was meant to be somewhat of a security compromise as we do not want to download each and every link posted in a message just to find out its true content type. 2. If the above setting is *disabled*, then we follow the whitelist settings for tenor and giphy. This allows us to preview gifs that do not have a file extension in their url. feat: bump status-go to the commit that supports the new whitelist (https://github.com/status-im/status-go/pull/2094), and also lets us get link preview data from urls in the whitelist. NOTE: this commit was branched off status-go `develop`, so once it is merged, and we update this PR to the new commit, we will effectively be getting status-go develop changes. We *could* base that status-go PR off of master if it makes things easier. fix: height on settings update issue feat: move date/time of message below links fix: layout issues when changing setting `neverAskAboutUnfurlingAgain` feat: Add MessageBorder component to aid in showing rounded corners with different radius
2020-12-11 00:53:44 +00:00
property int chatHorizontalPadding
property int nameMargin: 6
id: root
active: responseTo !== "" && replyMessageIndex > -1 && !activityCenterMessage
sourceComponent: Component {
Item {
property alias textField: lblReplyMessage
property alias authorMetrics: txtAuthorMetrics
id: chatReply
// childrenRect.height shows a binding loop for some reason, so we use heights instead
height: {
const h = userImage.height + 4
if (repliedMessageType === Constants.imageType) {
return h + imgReplyImage.height
}
if (repliedMessageType === Constants.stickerType) {
return h + stickerLoader.height
}
return h + lblReplyMessage.height
}
width: parent.width
clip: true
TextMetrics {
id: txtAuthorMetrics
font: lblReplyAuthor.font
text: lblReplyAuthor.text
}
Shape {
id: replyCorner
anchors.left: parent.left
anchors.leftMargin: 20 - 1
anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding
width: 20
height: parent.height - anchors.topMargin
asynchronous: true
antialiasing: true
ShapePath {
id: capTest
strokeColor: Utils.setColorAlpha(root.elementsColor, 0.4)
strokeWidth: 3
fillColor: "transparent"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
startX: 20
startY: 0
PathLine { x: 10; y: 0 }
PathArc {
x: 0; y: 10
radiusX: 13
radiusY: 13
direction: PathArc.Counterclockwise
}
PathLine { x: 0; y: chatReply.height - replyCorner.anchors.topMargin }
}
}
UserImage {
id: userImage
imageHeight: 20
imageWidth: 20
active: true
anchors.left: replyCorner.right
anchors.leftMargin: Style.current.halfPadding
identiconImageSource: repliedMessageUserIdenticon
isReplyImage: true
profileImage: repliedMessageUserImage
}
2021-06-29 14:49:32 +00:00
Connections {
target: chatsModel.messageView
onMessageEdited: {
if (responseTo === editedMessageId){
lblReplyMessage.text = Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(editedMessageContent + Constants.editLabel), Emoji.size.small), isCurrentUser, appSettings.useCompactMode)
}
}
}
StyledTextEdit {
id: lblReplyAuthor
text: repliedMessageAuthor
color: root.elementsColor
readOnly: true
font.pixelSize: Style.current.secondaryTextFontSize
selectByMouse: true
font.weight: Font.Medium
anchors.verticalCenter: userImage.verticalCenter
anchors.left: userImage.right
anchors.leftMargin: 5
}
StatusChatImage {
id: imgReplyImage
visible: repliedMessageType === Constants.imageType
imageWidth: 50
imageSource: repliedMessageImage
anchors.top: lblReplyAuthor.bottom
anchors.topMargin: nameMargin
anchors.left: userImage.left
chatHorizontalPadding: 0
container: root.container
allCornersRounded: true
}
Loader {
id: stickerLoader
active: repliedMessageType === Constants.stickerType
anchors.top: lblReplyAuthor.bottom
anchors.topMargin: nameMargin
anchors.left: userImage.left
sourceComponent: Component {
StatusSticker {
id: stickerId
imageHeight: 56
imageWidth: 56
stickerData: chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "sticker")
contentType: repliedMessageType
onLoaded: {
scrollToBottom(true, root.container)
}
}
}
}
StyledTextEdit {
id: lblReplyMessage
visible: repliedMessageType !== Constants.imageType && repliedMessageType !== Constants.stickerType
Component.onCompleted: textFieldImplicitWidth = implicitWidth
anchors.top: lblReplyAuthor.bottom
anchors.topMargin: nameMargin
2021-06-29 14:49:32 +00:00
text: {
if (repliedMessageIsEdited){
let index = repliedMessageContent.length - 4
return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent.slice(0, index) + Constants.editLabel + repliedMessageContent.slice(index)), Emoji.size.small), isCurrentUser, appSettings.useCompactMode)
} else {
return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), Emoji.size.small), isCurrentUser, appSettings.useCompactMode)
}
}
textFormat: Text.RichText
color: root.elementsColor
readOnly: true
selectByMouse: true
font.pixelSize: Style.current.additionalTextSize
font.weight: Font.Medium
anchors.left: userImage.left
width: root.longReply ? parent.width : implicitWidth
height: 20
clip: true
z: 51
}
}
}
}