387 lines
15 KiB
QML
387 lines
15 KiB
QML
import QtQuick 2.13
|
|
import shared 1.0
|
|
import shared.status 1.0
|
|
|
|
import utils 1.0
|
|
|
|
import "../panels"
|
|
import "../views"
|
|
import "../controls"
|
|
|
|
Item {
|
|
id: root
|
|
anchors.top: parent.top
|
|
anchors.topMargin: authorCurrentMsg !== authorPrevMsg ? Style.current.smallPadding : 0
|
|
height: childrenRect.height + this.anchors.topMargin + (dateGroupLbl.visible ? dateGroupLbl.height : 0)
|
|
width: parent.width
|
|
|
|
property var store
|
|
property var messageStore
|
|
property string linkUrls: ""
|
|
property bool isCurrentUser: false
|
|
property int contentType: 2
|
|
property var container
|
|
property bool headerRepeatCondition: (authorCurrentMsg !== authorPrevMsg
|
|
|| shouldRepeatHeader || dateGroupLbl.visible)
|
|
|
|
DateGroup {
|
|
id: dateGroupLbl
|
|
previousMessageIndex: prevMessageIndex
|
|
previousMessageTimestamp: prevMsgTimestamp
|
|
messageTimestamp: timestamp
|
|
isActivityCenterMessage: activityCenterMessage
|
|
}
|
|
|
|
UserImage {
|
|
id: chatImage
|
|
active: root.store.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Style.current.padding
|
|
anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
|
|
anchors.topMargin: 20
|
|
// isCurrentUser: root.messageStore.isCurrentUser
|
|
// profileImage: root.messageStore.profileImageSource
|
|
// isMessage: root.messageStore.isMessage
|
|
// identiconImageSource: root.messageStore.identicon
|
|
onClickMessage: {
|
|
root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
|
|
}
|
|
}
|
|
|
|
UsernameLabel {
|
|
id: chatName
|
|
visible: root.store.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
|
|
anchors.leftMargin: 20
|
|
anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
|
|
anchors.topMargin: 0
|
|
anchors.left: chatImage.right
|
|
// isCurrentUser: root.messageStore.isCurrentUser
|
|
// userName: root.messageStore.userName
|
|
// localName: root.messageStore.localName
|
|
// displayUserName: root.messageStore.displayUserName
|
|
onClickMessage: {
|
|
root.parent.clickMessage(true, false, false, null, false, false, false);
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
readonly property int defaultMessageWidth: 400
|
|
readonly property int defaultMaxMessageChars: 54
|
|
readonly property int messageWidth: Math.max(defaultMessageWidth, parent.width / 1.4)
|
|
readonly property int maxMessageChars: (defaultMaxMessageChars * messageWidth) / defaultMessageWidth
|
|
property int chatVerticalPadding: isImage ? 4 : 6
|
|
property int chatHorizontalPadding: isImage ? 0 : 12
|
|
property bool longReply: chatReply.active && repliedMessageContent.length > maxMessageChars
|
|
property bool longChatText: root.store.chatsModelInst.plainText(root.messageStore.message).split('\n').some(function (messagePart) {
|
|
return messagePart.length > maxMessageChars
|
|
})
|
|
|
|
id: chatBox
|
|
color: {
|
|
if (isSticker) {
|
|
return Style.current.background
|
|
}
|
|
if (isImage) {
|
|
return "transparent"
|
|
}
|
|
return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground
|
|
}
|
|
border.color: isSticker ? Style.current.border : Style.current.transparent
|
|
border.width: 1
|
|
height: {
|
|
let h = (3 * chatVerticalPadding)
|
|
switch(contentType){
|
|
case Constants.stickerType:
|
|
h += stickerId.height;
|
|
break;
|
|
case Constants.audioType:
|
|
h += audioPlayerLoader.height;
|
|
break;
|
|
default:
|
|
if (!chatImageContent.active && !chatReply.active) {
|
|
h -= chatVerticalPadding
|
|
}
|
|
|
|
h += chatText.visible ? chatText.height : 0;
|
|
h += chatImageContent.active ? chatImageContent.height: 0;
|
|
h += chatReply.active ? chatReply.height : 0;
|
|
}
|
|
return h;
|
|
}
|
|
width: {
|
|
switch(contentType) {
|
|
case Constants.stickerType:
|
|
return stickerId.width + (2 * chatBox.chatHorizontalPadding);
|
|
case Constants.imageType:
|
|
return chatImageContent.width
|
|
default:
|
|
if (longChatText || longReply) {
|
|
return messageWidth;
|
|
}
|
|
let baseWidth = chatText.width;
|
|
if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {
|
|
baseWidth = chatReply.textFieldWidth
|
|
}
|
|
|
|
if (chatReply.visible && chatText.width < chatReply.authorWidth) {
|
|
if(chatReply.authorWidth > baseWidth){
|
|
baseWidth = chatReply.authorWidth + 20
|
|
}
|
|
}
|
|
|
|
return baseWidth + 2 * chatHorizontalPadding
|
|
}
|
|
}
|
|
|
|
radius: 16
|
|
anchors.left: !root.isCurrentUser ? chatImage.right : undefined
|
|
anchors.leftMargin: !root.isCurrentUser ? 8 : 0
|
|
anchors.right: !root.isCurrentUser ? undefined : parent.right
|
|
anchors.rightMargin: !root.isCurrentUser ? 0 : Style.current.padding
|
|
anchors.top: headerRepeatCondition && !root.isCurrentUser ? chatImage.top : (dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top)
|
|
anchors.topMargin: 0
|
|
visible: isMessage && contentType !== Constants.transactionType
|
|
|
|
ChatReplyPanel {
|
|
id: chatReply
|
|
longReply: chatBox.longReply
|
|
anchors.top: parent.top
|
|
anchors.topMargin: chatReply.visible ? chatBox.chatVerticalPadding : 0
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Style.current.padding
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: chatBox.chatHorizontalPadding
|
|
container: root.container
|
|
chatHorizontalPadding: chatBox.chatHorizontalPadding
|
|
stickerData: root.store.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "sticker")
|
|
active: responseTo !== "" && replyMessageIndex > -1 && !activityCenterMessage
|
|
// To-Do move to store later?
|
|
// isCurrentUser: root.messageStore.isCurrentUser
|
|
// repliedMessageType: root.messageStore.repliedMessageType
|
|
// repliedMessageImage: root.messageStore.repliedMessageImage
|
|
// repliedMessageUserIdenticon: root.messageStore.repliedMessageUserIdenticon
|
|
// repliedMessageIsEdited: root.messageStore.repliedMessageIsEdited
|
|
// repliedMessageUserImage: root.messageStore.repliedMessageUserImage
|
|
// repliedMessageAuthor: root.messageStore.repliedMessageAuthor
|
|
// repliedMessageContent: root.messageStore.repliedMessageContent
|
|
// responseTo: root.messageStore.responseTo
|
|
// onScrollToBottom: {
|
|
// root.messageStore.scrollToBottom(isit, container);
|
|
// }
|
|
onClickMessage: {
|
|
root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
|
|
}
|
|
}
|
|
|
|
|
|
Connections {
|
|
target: root.store.chatsModelInst.messageView
|
|
onMessageEdited: {
|
|
if(chatReply.item)
|
|
chatReply.item.messageEdited(editedMessageId, editedMessageContent)
|
|
}
|
|
}
|
|
|
|
ChatTextView {
|
|
id: chatText
|
|
longChatText: chatBox.longChatText
|
|
anchors.top: chatReply.bottom
|
|
anchors.topMargin: chatReply.active ? chatBox.chatVerticalPadding : 0
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: chatBox.chatHorizontalPadding
|
|
anchors.right: chatBox.longChatText ? parent.right : undefined
|
|
anchors.rightMargin: chatBox.longChatText ? chatBox.chatHorizontalPadding : 0
|
|
store: root.store
|
|
messageStore: root.store.messageStore
|
|
textField.color: !root.isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
|
|
Connections {
|
|
target: appSettings.useCompactMode ? null : chatBox
|
|
onLongChatTextChanged: {
|
|
chatText.setWidths()
|
|
}
|
|
}
|
|
|
|
onLinkActivated: {
|
|
if (root.messageStore.activityCenterMessage) {
|
|
clickMessage(false, root.messageStore.isSticker, false)
|
|
}
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: chatImageContent
|
|
active: root.messageStore.isImage && !!image
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Style.current.smallPadding
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: chatBox.chatHorizontalPadding
|
|
z: 51
|
|
|
|
sourceComponent: Component {
|
|
Item {
|
|
width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding
|
|
height: chatImageComponent.height
|
|
|
|
StatusChatImage {
|
|
id: chatImageComponent
|
|
imageSource: image
|
|
imageWidth: 250
|
|
isCurrentUser: root.isCurrentUser
|
|
onClicked: imageClick(image)
|
|
container: root.container
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: audioPlayerLoader
|
|
active: root.messageStore.isAudio
|
|
sourceComponent: audioPlayer
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
|
|
Component {
|
|
id: audioPlayer
|
|
AudioPlayerPanel {
|
|
audioSource: audio
|
|
}
|
|
}
|
|
|
|
StatusSticker {
|
|
id: stickerId
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: chatBox.chatHorizontalPadding
|
|
anchors.top: parent.top
|
|
anchors.topMargin: chatBox.chatVerticalPadding
|
|
color: Style.current.transparent
|
|
contentType: root.contentType
|
|
stickerData: root.messageStore.sticker
|
|
onLoaded: {
|
|
root.messageStore.scrollToBottom(true, root.container)
|
|
}
|
|
}
|
|
|
|
MessageMouseArea {
|
|
anchors.fill: parent
|
|
enabled: !chatText.linkHovered
|
|
isActivityCenterMessage: root.messageStore.activityCenterMessage
|
|
onClickMessage: {
|
|
root.parent.clickMessage(isProfileClick, root.messageStore.isSticker, root.messageStore.isImage)
|
|
}
|
|
onSetMessageActive: {
|
|
root.messageStore.setMessageActive(root.messageStore.messageId, active);
|
|
}
|
|
}
|
|
|
|
RectangleCorner {
|
|
// TODO find a way to show the corner for stickers since they have a border
|
|
visible: root.messageStore.isMessage
|
|
isCurrentUser: root.isCurrentUser
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: transactionBubbleLoader
|
|
active: contentType === Constants.transactionType
|
|
anchors.left: !isCurrentUser ? chatImage.right : undefined
|
|
anchors.leftMargin: isCurrentUser ? 0 : Style.current.halfPadding
|
|
anchors.right: isCurrentUser ? parent.right : undefined
|
|
anchors.rightMargin: Style.current.padding
|
|
sourceComponent: Component {
|
|
TransactionBubbleView {
|
|
store: root.store
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: dateTimeBackground
|
|
visible: isImage
|
|
height: visible ? chatTime.height + Style.current.halfPadding : 0
|
|
width: chatTime.width + 2 * chatTime.anchors.rightMargin +
|
|
(retry.visible ? retry.width + retry.anchors.rightMargin : sentMessage.width + sentMessage.anchors.rightMargin)
|
|
color: Utils.setColorAlpha(Style.current.black, 0.66)
|
|
radius: Style.current.radius
|
|
anchors.bottom: chatBox.bottom
|
|
anchors.bottomMargin: Style.current.halfPadding
|
|
anchors.right: chatBox.right
|
|
anchors.rightMargin: 6
|
|
}
|
|
|
|
ChatTimePanel {
|
|
id: chatTime
|
|
visible: root.messageStore.isMessage && !emojiReactionLoader.active
|
|
anchors.top: isImage ? undefined : (linksLoader.active ? linksLoader.bottom : chatBox.bottom)
|
|
anchors.topMargin: isImage ? 0 : 4
|
|
anchors.verticalCenter: isImage ? dateTimeBackground.verticalCenter : undefined
|
|
anchors.right: isImage ? dateTimeBackground.right : (linksLoader.active ? linksLoader.right : chatBox.right)
|
|
anchors.rightMargin: isImage ? 6 : (root.isCurrentUser ? 5 : Style.current.padding)
|
|
//timestamp: root.messageStore.timestamp
|
|
}
|
|
|
|
SentMessage {
|
|
id: sentMessage
|
|
visible: root.isCurrentUser && !root.messageStore.timeout && !root.messageStore.isExpired
|
|
&& root.messageStore.isMessage && root.messageStore.outgoingStatus === "sent"
|
|
anchors.verticalCenter: chatTime.verticalCenter
|
|
anchors.right: chatTime.left
|
|
anchors.rightMargin: 5
|
|
}
|
|
|
|
Retry {
|
|
id: retry
|
|
anchors.verticalCenter: chatTime.verticalCenter
|
|
anchors.right: chatTime.left
|
|
anchors.rightMargin: 5
|
|
isCurrentUser: root.isCurrentUser
|
|
onClicked: {
|
|
root.store.chatsModelInst.messageView.resendMessage(chatId, messageId)
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: linksLoader
|
|
active: !!root.linkUrls
|
|
anchors.left: !root.isCurrentUser ? chatImage.right : undefined
|
|
anchors.leftMargin: !root.isCurrentUser ? 8 : 0
|
|
anchors.right: !root.isCurrentUser ? undefined : parent.right
|
|
anchors.rightMargin: !root.isCurrentUser ? 0 : Style.current.padding
|
|
anchors.top: chatBox.bottom
|
|
anchors.topMargin: Style.current.halfPadding
|
|
anchors.bottomMargin: Style.current.halfPadding
|
|
|
|
sourceComponent: Component {
|
|
LinksMessageView {
|
|
store: root.store
|
|
linkUrls: root.linkUrls
|
|
container: root.container
|
|
isCurrentUser: root.isCurrentUser
|
|
}
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: emojiReactionLoader
|
|
active: emojiReactions !== ""
|
|
sourceComponent: emojiReactionsComponent
|
|
anchors.left: root.isCurrentUser ? undefined : chatBox.left
|
|
anchors.right: root.isCurrentUser ? chatBox.right : undefined
|
|
anchors.leftMargin: root.isCurrentUser ? Style.current.halfPadding : 1
|
|
anchors.top: chatBox.bottom
|
|
anchors.topMargin: 2
|
|
}
|
|
|
|
Component {
|
|
id: emojiReactionsComponent
|
|
EmojiReactionsPanel {
|
|
// isMessageActive: root.store.messageStore.isMessageActive
|
|
// emojiReactionsModel: root.store.messageStore.emojiReactionsModel
|
|
onSetMessageActive: {
|
|
root.store.messageStore.setMessageActive(messageId, active);;
|
|
}
|
|
onToggleReaction: root.store.chatsModelInst.toggleReaction(messageId, emojiID)
|
|
}
|
|
}
|
|
}
|