diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index fc700dbfc3..9425291ba8 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -71,8 +71,11 @@ Item { let userName = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "userName") let message = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "message") let identicon = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "identicon") + let image = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "image") + let sticker = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "sticker") + let contentType = chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "contentType") - chatInput.showReplyArea(userName, message, identicon) + chatInput.showReplyArea(userName, message, identicon, contentType, image, sticker) } function requestAddressForTransaction(address, amount, tokenAddress, tokenDecimals = 18) { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml index cefc361eb9..e1a7a671d3 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml @@ -2,6 +2,7 @@ import QtQuick 2.14 import QtQuick.Shapes 1.13 import QtGraphicalEffects 1.13 import "../../../../../shared" +import "../../../../../shared/status" import "../../../../../imports" Loader { @@ -113,7 +114,7 @@ Loader { anchors.leftMargin: 5 } - ChatImage { + StatusChatImage { id: imgReplyImage visible: repliedMessageType === Constants.imageType imageWidth: 50 @@ -133,13 +134,15 @@ Loader { anchors.topMargin: nameMargin anchors.left: userImage.left sourceComponent: Component { - Sticker { + StatusSticker { id: stickerId imageHeight: 56 imageWidth: 56 stickerData: chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "sticker") contentType: repliedMessageType - container: root.container + onLoaded: { + scrollToBottom(true, root.container) + } } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml index af79ca3e06..994537a0b4 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml @@ -306,7 +306,7 @@ Item { z: 51 sourceComponent: Component { - ChatImage { + StatusChatImage { imageSource: image imageWidth: 200 onClicked: { @@ -337,14 +337,16 @@ Item { width: stickerId.width + 2 * root.chatVerticalPadding height: stickerId.height + 2 * root.chatVerticalPadding - Sticker { + StatusSticker { id: stickerId anchors.top: parent.top anchors.topMargin: root.chatVerticalPadding anchors.left: parent.left anchors.leftMargin: root.chatVerticalPadding contentType: root.contentType - container: root.container + onLoaded: { + scrollToBottom(true, root.container) + } } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml index d749999130..686169e8c8 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml @@ -190,7 +190,7 @@ Column { width: linkImage.width height: linkImage.height isCurrentUser: root.isCurrentUser - MessageComponents.ImageLoader { + StatusChatImageLoader { id: linkImage anchors.centerIn: parent container: root.container @@ -218,7 +218,7 @@ Column { height: linkImage.height + (Style.current.smallPadding * 2) + linkTitle.height + 2 + linkSite.height isCurrentUser: root.isCurrentUser - MessageComponents.ImageLoader { + StatusChatImageLoader { id: linkImage container: root.container source: linkData.thumbnailUrl diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml index 02bb0b5152..7928cffeb8 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml @@ -1,5 +1,6 @@ import QtQuick 2.13 import "../../../../../shared" +import "../../../../../shared/status" import "../../../../../imports" Item { @@ -165,7 +166,7 @@ Item { width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding height: chatImageComponent.height - ChatImage { + StatusChatImage { id: chatImageComponent imageSource: image imageWidth: 250 @@ -191,15 +192,17 @@ Item { } } - Sticker { + StatusSticker { id: stickerId anchors.left: parent.left anchors.leftMargin: chatBox.chatHorizontalPadding anchors.top: parent.top anchors.topMargin: chatBox.chatVerticalPadding color: Style.current.transparent - container: root.container contentType: root.contentType + onLoaded: { + scrollToBottom(true, root.container) + } } MessageMouseArea { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml index 69e7e54364..0514d77e2f 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml @@ -82,7 +82,7 @@ MouseArea { z: 51 sourceComponent: Component { - ChatImage { + StatusChatImage { imageSource: image imageWidth: 200 onClicked: root.clickMessage(false, false, true, image) diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 22fb00f1a7..a895d563ea 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -111,7 +111,6 @@ DISTFILES += \ app/AppLayouts/Chat/ChatColumn/CompactMessage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml \ - app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml \ @@ -119,14 +118,12 @@ DISTFILES += \ app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/DateGroup.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml \ - app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/RectangleCorner.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/SentMessage.qml \ - app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionBubble.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/AcceptTransaction.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/SendTransactionButton.qml \ @@ -429,6 +426,9 @@ DISTFILES += \ shared/status/StatusInputListPopup.qml \ shared/status/StatusRadioButtonRow.qml \ shared/status/StatusSettingsLineButton.qml \ + shared/status/StatusChatImage.qml \ + shared/status/StatusChatImageLoader.qml \ + shared/status/StatusSticker.qml \ sounds/ErrorSound.qml DISTFILES += $$files("StatusQ/*", true) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml b/ui/shared/status/StatusChatImage.qml similarity index 98% rename from ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml rename to ui/shared/status/StatusChatImage.qml index 52f4f9624f..452c7160db 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml +++ b/ui/shared/status/StatusChatImage.qml @@ -1,7 +1,6 @@ import QtQuick 2.3 -import "../../../../../imports" -ImageLoader { +StatusChatImageLoader { property int chatVerticalPadding: 12 property int chatHorizontalPadding: 12 property string imageSource: "data:image/jpeg;base64,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" diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml b/ui/shared/status/StatusChatImageLoader.qml similarity index 98% rename from ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml rename to ui/shared/status/StatusChatImageLoader.qml index 7251f67f06..b7900e0fd6 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml +++ b/ui/shared/status/StatusChatImageLoader.qml @@ -1,7 +1,7 @@ import QtQuick 2.3 import QtGraphicalEffects 1.13 -import "../../../../../shared" -import "../../../../../imports" +import "../../shared/" +import "../../imports" Item { property int verticalPadding: 0 diff --git a/ui/shared/status/StatusChatInput.qml b/ui/shared/status/StatusChatInput.qml index 24b1f54edf..91669eecab 100644 --- a/ui/shared/status/StatusChatInput.qml +++ b/ui/shared/status/StatusChatInput.qml @@ -541,11 +541,14 @@ Rectangle { control.fileUrls = imageArea.imageSource } - function showReplyArea(userName, message, identicon) { + function showReplyArea(userName, message, identicon, contentType, image, sticker) { isReply = true replyArea.userName = userName replyArea.message = message replyArea.identicon = identicon + replyArea.contentType = contentType + replyArea.image = image + replyArea.sticker = sticker messageInputField.forceActiveFocus(); } diff --git a/ui/shared/status/StatusChatInputReplyArea.qml b/ui/shared/status/StatusChatInputReplyArea.qml index 6e6f753de0..65843b3d39 100644 --- a/ui/shared/status/StatusChatInputReplyArea.qml +++ b/ui/shared/status/StatusChatInputReplyArea.qml @@ -6,7 +6,10 @@ import "../../shared" Rectangle { id: root - height: 50 + height: (root.contentType === Constants.imageType) ? + replyToUsername.height + imageThumbnail.height + Style.current.padding : + (root.contentType === Constants.stickerType) ? + replyToUsername.height + stickerThumbnail.height + Style.current.padding : 50 color: Style.current.replyBackground radius: 16 clip: true @@ -14,6 +17,9 @@ Rectangle { property string userName: "" property string message : "" property string identicon: "" + property string image: "" + property string sticker: "" + property int contentType: -1 signal closeButtonClicked() @@ -47,6 +53,7 @@ Rectangle { anchors.bottom: parent.bottom clip: true color: Style.current.transparent + visible: (root.contentType !== Constants.imageType) && (root.contentType !== Constants.stickerType) StyledText { id: replyText @@ -60,6 +67,29 @@ Rectangle { } } + StatusChatImage { + id: imageThumbnail + anchors.left: replyToUsername.left + anchors.top: replyToUsername.bottom + anchors.topMargin: 2 + imageWidth: 64 + imageSource: root.image + chatHorizontalPadding: 0 + container: root.container + visible: root.contentType === Constants.imageType + } + + StatusSticker { + id: stickerThumbnail + anchors.left: replyToUsername.left + anchors.top: replyToUsername.bottom + anchors.topMargin: 2 + imageWidth: 64 + imageHeight: 64 + color: Style.current.transparent + contentType: root.contentType + } + RoundButton { id: closeBtn implicitWidth: 20 diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml b/ui/shared/status/StatusSticker.qml similarity index 77% rename from ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml rename to ui/shared/status/StatusSticker.qml index 47c6cc59f2..978cbe0d4e 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml +++ b/ui/shared/status/StatusSticker.qml @@ -1,14 +1,14 @@ import QtQuick 2.3 -import "../../../../../shared" as Shared -import "../../../../../imports" +import "../../shared" as Shared +import "../../imports" Loader { property color color - property var container property int contentType: -1 property string stickerData: sticker property int imageHeight: 140 property int imageWidth: 140 + signal loaded() id: root active: contentType === Constants.stickerType @@ -16,7 +16,7 @@ Loader { sourceComponent: Component { Shared.ImageLoader { color: root.color - onLoaded: scrollToBottom(true, root.container) + onLoaded: root.loaded() width: imageWidth height: this.visible ? imageHeight : 0 diff --git a/ui/shared/status/qmldir b/ui/shared/status/qmldir index 8ed1818b62..f5677f5ac0 100644 --- a/ui/shared/status/qmldir +++ b/ui/shared/status/qmldir @@ -22,3 +22,6 @@ StatusStickerPackDetails 1.0 StatusStickerPackDetails.qml StatusStickerPackPurchaseModal 1.0 StatusStickerPackPurchaseModal.qml StatusStickersPopup 1.0 StatusStickersPopup.qml StatusToolTip 1.0 StatusToolTip.qml +StatusChatImage 1.0 StatusChatImage.qml +StatusChatImageLoader 1.0 StatusChatImageLoader.qml +StatusSticker 1.0 StatusSticker.qml