diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml index 8b853306bd..52f4f9624f 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml @@ -1,26 +1,12 @@ import QtQuick 2.3 import "../../../../../imports" -Rectangle { +ImageLoader { property int chatVerticalPadding: 12 property int chatHorizontalPadding: 12 - property int imageWidth: 250 property string imageSource: "data:image/jpeg;base64,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" - id: imageChatBox - height: imageMessage.height + imageChatBox.chatVerticalPadding - width: imageMessage.width + 2 * chatHorizontalPadding - radius: 16 - visible: isImage - color: "transparent" - - - ImageLoader { - id: imageMessage - verticalPadding: imageChatBox.chatVerticalPadding - anchors.top: parent.top - anchors.topMargin: imageChatBox.chatVerticalPadding - source: imageSource - imageWidth: imageChatBox.imageWidth - } + id: imageMessage + verticalPadding: chatVerticalPadding + source: imageSource } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml index c8481cfcd0..f88903ed7d 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml @@ -2,61 +2,71 @@ import QtQuick 2.3 import "../../../../../shared" import "../../../../../imports" -Rectangle { - property alias textField: lblReplyMessage +Loader { + property int textFieldWidth: item ? item.textField.width : 0 property bool longReply: false property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText - id: chatReply - visible: responseTo != "" && replyMessageIndex > -1 - // childrenRect.height shows a binding loop for soem reason, so we use heights instead - height: this.visible ? lblReplyAuthor.height + ((repliedMessageType === Constants.imageType ? imgReplyImage.height : lblReplyMessage.height) + 5 + 8) : 0 - color: Style.current.transparent + id: root + active: responseTo != "" && replyMessageIndex > -1 - StyledTextEdit { - id: lblReplyAuthor - text: "↳" + repliedMessageAuthor - color: chatReply.elementsColor - readOnly: true - selectByMouse: true - wrapMode: Text.Wrap - anchors.left: parent.left - anchors.right: parent.right - } + sourceComponent: Component { + Rectangle { + property alias textField: lblReplyMessage - ChatImage { - id: imgReplyImage - visible: repliedMessageType == Constants.imageType - imageWidth: 50 - imageSource: repliedMessageImage - anchors.top: lblReplyAuthor.bottom - anchors.topMargin: 5 - anchors.left: parent.left - chatHorizontalPadding: 0 - } + id: chatReply + visible: responseTo != "" && replyMessageIndex > -1 + // childrenRect.height shows a binding loop for soem reason, so we use heights instead + height: this.visible ? lblReplyAuthor.height + ((repliedMessageType === Constants.imageType ? imgReplyImage.height : lblReplyMessage.height) + 5 + 8) : 0 + color: Style.current.transparent - StyledTextEdit { - id: lblReplyMessage - visible: repliedMessageType != Constants.imageType - anchors.top: lblReplyAuthor.bottom - anchors.topMargin: 5 - text: Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), "26x26"); - textFormat: Text.RichText - color: chatReply.elementsColor - readOnly: true - selectByMouse: true - wrapMode: Text.Wrap - anchors.left: parent.left - anchors.right: chatReply.longReply ? parent.right : undefined - z: 51 - } + StyledTextEdit { + id: lblReplyAuthor + text: "↳" + repliedMessageAuthor + color: root.elementsColor + readOnly: true + selectByMouse: true + wrapMode: Text.Wrap + anchors.left: parent.left + anchors.right: parent.right + } - Separator { - anchors.top: repliedMessageType == Constants.imageType ? imgReplyImage.bottom : lblReplyMessage.bottom - anchors.topMargin: repliedMessageType == Constants.imageType ? 15 : 8 - anchors.left: lblReplyMessage.left - anchors.right: lblReplyMessage.right - anchors.rightMargin: chatTextItem.chatHorizontalPadding - color: chatReply.elementsColor + ChatImage { + id: imgReplyImage + visible: repliedMessageType == Constants.imageType + imageWidth: 50 + imageSource: repliedMessageImage + anchors.top: lblReplyAuthor.bottom + anchors.topMargin: 5 + anchors.left: parent.left + chatHorizontalPadding: 0 + } + + StyledTextEdit { + id: lblReplyMessage + visible: repliedMessageType != Constants.imageType + anchors.top: lblReplyAuthor.bottom + anchors.topMargin: 5 + text: Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), "26x26"); + textFormat: Text.RichText + color: root.elementsColor + readOnly: true + selectByMouse: true + wrapMode: Text.Wrap + anchors.left: parent.left + anchors.right: root.longReply ? parent.right : undefined + z: 51 + } + + Separator { + anchors.top: repliedMessageType == Constants.imageType ? imgReplyImage.bottom : lblReplyMessage.bottom + anchors.topMargin: repliedMessageType == Constants.imageType ? 15 : 8 + anchors.left: lblReplyMessage.left + anchors.right: lblReplyMessage.right + anchors.rightMargin: chatTextItem.chatHorizontalPadding + color: root.elementsColor + } + } } } + diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml index 582b460eab..f4b9586a75 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml @@ -159,7 +159,7 @@ Item { active: emojiReactions !== "" anchors.top: chatText.bottom anchors.left: chatText.left - anchors.topMargin: 2 + anchors.topMargin: active ? 2 : 0 sourceComponent: Component { EmojiReactions {} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml index 129aadd101..2532e3e5bb 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml @@ -61,7 +61,7 @@ Item { return h; } width: { - switch(contentType){ + switch(contentType) { case Constants.stickerType: return stickerId.width + (2 * chatBox.chatHorizontalPadding); case Constants.imageType: @@ -71,8 +71,8 @@ Item { return 400; } let baseWidth = chatText.width; - if (chatReply.visible && chatText.width < chatReply.textField.width) { - baseWidth = chatReply.textField.width + if (chatReply.visible && chatText.width < chatReply.textFieldWidth) { + baseWidth = chatReply.textFieldWidth } return baseWidth + 2 * chatHorizontalPadding } @@ -113,15 +113,22 @@ Item { Loader { id: chatImageContent - active: isImage - sourceComponent: chatImageComponent - } + active: isImage && !!image + anchors.top: parent.top + anchors.topMargin: Style.current.smallPadding + anchors.left: parent.left + anchors.leftMargin: chatBox.chatHorizontalPadding - Component { - id: chatImageComponent - ChatImage { - imageSource: image - imageWidth: 250 + sourceComponent: Component { + Item { + width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding + height: chatImageComponent.height + ChatImage { + id: chatImageComponent + imageSource: image + imageWidth: 250 + } + } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml index 6ac6f1c6a2..363f402608 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml @@ -2,31 +2,37 @@ import QtQuick 2.3 import "../../../../../shared" import "../../../../../imports" -Rectangle { - id: chatImage - visible: isMessage && authorCurrentMsg != authorPrevMsg - width: identiconImage.width - height: identiconImage.height - border.width: 1 - border.color: Style.current.border - radius: 50 +Loader { + active: isMessage && authorCurrentMsg !== authorPrevMsg + height: active ? item.height : 0 - Image { - id: identiconImage - width: 36 - height: chatImage.visible ? 36 : 0 - fillMode: Image.PreserveAspectFit - source: !isCurrentUser ? identicon : profileModel.profile.identicon - mipmap: true - smooth: false - antialiasing: true + sourceComponent: Component { + Rectangle { + id: chatImage + width: identiconImage.width + height: identiconImage.height + border.width: 1 + border.color: Style.current.border + radius: 50 - MouseArea { - cursorShape: Qt.PointingHandCursor - acceptedButtons: Qt.LeftButton | Qt.RightButton - anchors.fill: parent - onClicked: { - clickMessage(true) + Image { + id: identiconImage + width: 36 + height: 36 + fillMode: Image.PreserveAspectFit + source: !isCurrentUser ? identicon : profileModel.profile.identicon + mipmap: true + smooth: false + antialiasing: true + + MouseArea { + cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton + anchors.fill: parent + onClicked: { + clickMessage(true) + } + } } } }