status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@desktop/chat) Reply to image doest show image in reply box 

Added component to show both an image/sticker in the reply area.
Moved some components from app to shared folder so that they can be reused

fixes #3272
This commit is contained in:
Khushboo Mehta 2021-08-30 14:42:11 +02:00 committed by Iuri Matias
parent 21059919b1
commit d8817a468e
13 changed files with 72 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/AppLayouts/Chat/ChatColumn.qml
View File

@ -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) {

9
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml
View File

@ -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)
}
}
}
}

8
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -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)
}
}
}
}

4
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml
View File

@ -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

9
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -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 {

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml
View File

@ -82,7 +82,7 @@ MouseArea {
z: 51
sourceComponent: Component {
ChatImage {
StatusChatImage {
imageSource: image
imageWidth: 200
onClicked: root.clickMessage(false, false, true, image)

6
ui/nim-status-client.pro
View File

@ -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)

3
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml → ui/shared/status/StatusChatImage.qml
View File

@ -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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"

4
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml → ui/shared/status/StatusChatImageLoader.qml
View File

@ -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

5
ui/shared/status/StatusChatInput.qml
View File

@ -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();
}

32
ui/shared/status/StatusChatInputReplyArea.qml
View File

@ -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

8
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml → ui/shared/status/StatusSticker.qml
View File

@ -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

3
ui/shared/status/qmldir
View File

@ -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