diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index 9425291ba8..d505a35130 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -120,6 +120,11 @@ Item { } } + MessageContextMenu { + id: contextmenu + reactionModel: EmojiReactions { } + } + StackLayout { anchors.fill: parent currentIndex: chatsModel.channelView.activeChannelIndex > -1 && chatGroupsListViewCount > 0 ? 0 : 1 @@ -131,10 +136,10 @@ Item { imagePopup.close() } else if(button === Qt.RightButton) { - messageContextMenu.imageSource = imagePopup.imageSource - messageContextMenu.hideEmojiPicker = true - messageContextMenu.isRightClickOnImage = true; - messageContextMenu.show() + contextmenu.imageSource = imagePopup.imageSource + contextmenu.hideEmojiPicker = true + contextmenu.isRightClickOnImage = true; + contextmenu.show() } } } @@ -295,9 +300,7 @@ Item { sourceComponent: ChatMessages { id: chatMessages messageList: messages - messageContextMenuInst: MessageContextMenu { - reactionModel: EmojiReactions { } - } + messageContextMenuInst: contextmenu Component.onCompleted: { chatColumnLayout.userList = chatMessages.messageList.userList; } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index 622c537f3c..613a9a0400 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -191,16 +191,10 @@ Item { return } - if (isImage && !isRightClickOnImage) { - imageClick(image); - return; - } - if (!isProfileClick) { SelectedMessage.set(messageId, fromAuthor); } - messageContextMenu.parent = root messageContextMenu.messageId = root.messageId messageContextMenu.contentType = root.contentType messageContextMenu.linkUrls = root.linkUrls; @@ -224,10 +218,8 @@ Item { messageContextMenu.show(userName, fromAuthor, root.profileImageSource || identicon, plainText, nickname, emojiReactionsModel); } - // Position the center of the menu where the mouse is - if (messageContextMenu.x + messageContextMenu.width + Style.current.padding < root.width) { - messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2; - } + messageContextMenu.x = messageContextMenu.setXPosition() + messageContextMenu.y = messageContextMenu.setYPosition() } Loader { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml index e91266de8a..271b671f56 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml @@ -65,13 +65,11 @@ Rectangle { height: 32 onClicked: { setMessageActive(messageId, true) + // Set parent, X & Y positions for the messageContextMenu + buttonsContainer.messageContextMenu.parent = buttonsContainer + buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - buttonsContainer.messageContextMenu.emojiContainer.width))} + buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)} clickMessage(false, false, false, null, true) - if (!forceHoverHandler) { - buttonsContainer.messageContextMenu.x = buttonsContainer.x + buttonsContainer.width - buttonsContainer.messageContextMenu.width - - // The Math.max is to make sure that the menu is rendered - buttonsContainer.messageContextMenu.y -= Math.max(buttonsContainer.messageContextMenu.emojiContainer.height, 56) + Style.current.padding - } } onHoveredChanged: { buttonsContainer.hoverChanged(this.hovered) @@ -140,9 +138,11 @@ Rectangle { if (typeof isMessageActive !== "undefined") { setMessageActive(messageId, true) } + // Set parent, X & Y positions for the messageContextMenu + buttonsContainer.messageContextMenu.parent = buttonsContainer + buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - 176))} + buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)} clickMessage(false, isSticker, false, null, false, true); - buttonsContainer.messageContextMenu.x = buttonsContainer.x + buttonsContainer.width - buttonsContainer.messageContextMenu.width - messageContextMenu.y = parent.height/2 + Style.current.smallPadding } onHoveredChanged: { buttonsContainer.hoverChanged(this.hovered) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml index 994537a0b4..a5270c73c4 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml @@ -310,10 +310,14 @@ Item { imageSource: image imageWidth: 200 onClicked: { - if (button === Qt.LeftButton) { - root.clickMessage(false, false, true, image) + if (mouse.button === Qt.LeftButton) { + imageClick(image) } - else if (button === Qt.RightButton) { + else if (mouse.button === Qt.RightButton) { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = root + messageContextMenu.setXPosition = function() { return (mouse.x)} + messageContextMenu.setYPosition = function() { return (mouse.y)} root.clickMessage(false, false, true, image, false, true, false, true, imageSource) } } @@ -453,11 +457,14 @@ Item { sourceComponent: Component { EmojiReactions { + id: emojiRect onHoverChanged: setHovered(messageId, hovered) onAddEmojiClicked: { root.addEmoji(false, false, false, null, true, false); - messageContextMenu.x = (messageContainer.chatText.textField.leftPadding + 4); - messageContextMenu.y -= (56 + Style.current.padding); + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = emojiReactionLoader + messageContextMenu.setXPosition = function() { return (messageContextMenu.parent.x + 4)} + messageContextMenu.setYPosition = function() { return (-messageContextMenu.height - 4)} } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml index 686169e8c8..64a7af3b3c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml @@ -197,7 +197,7 @@ Column { source: linkData.thumbnailUrl imageWidth: 300 isCurrentUser: root.isCurrentUser - onClicked: clickMessage(false, false, true, linkImage.imageAlias) + onClicked: imageClick(linkImage.imageAlias) } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml index a59d729ac3..2b85dd3376 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml @@ -12,6 +12,10 @@ MouseArea { return clickMessage(false, isSticker, false) } if(mouse.button === Qt.RightButton) { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = root + messageContextMenu.setXPosition = function() { return (mouse.x)} + messageContextMenu.setYPosition = function() { return (mouse.y)} clickMessage(false, isSticker, false) if (typeof isMessageActive !== "undefined") { setMessageActive(messageId, true) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml index 7928cffeb8..3588f8225f 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml @@ -171,7 +171,7 @@ Item { imageSource: image imageWidth: 250 isCurrentUser: root.isCurrentUser - onClicked: root.clickMessage(false, false, true, image) + onClicked: imageClick(image) container: root.container } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml index 0514d77e2f..026d161e62 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml @@ -85,7 +85,7 @@ MouseArea { StatusChatImage { imageSource: image imageWidth: 200 - onClicked: root.clickMessage(false, false, true, image) + onClicked: imageClick(image) container: root.container } } @@ -105,6 +105,10 @@ MouseArea { icon.width: 20 icon.height: 20 onClicked: { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = emojiBtn + messageContextMenu.setXPosition = function() { return -messageContextMenu.width + emojiBtn.width} + messageContextMenu.setYPosition = function() { return -messageContextMenu.height - 4} root.clickMessage(false, false, false, null, true) } } @@ -134,8 +138,10 @@ MouseArea { EmojiReactions { onAddEmojiClicked: { root.addEmoji(false, false, false, null, true, false); - messageContextMenu.x = (chatText.textField.leftPadding + 4); - messageContextMenu.y -= (56 + Style.current.padding); + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = emojiReactionLoader + messageContextMenu.setXPosition = function() { return (messageContextMenu.parent.x + 4)} + messageContextMenu.setYPosition = function() { return (-messageContextMenu.height - 4)} } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml index 37723082f8..171d60717c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml @@ -40,6 +40,10 @@ Loader { acceptedButtons: Qt.LeftButton | Qt.RightButton anchors.fill: parent onClicked: { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = root + messageContextMenu.setXPosition = function() { return root.width + 4} + messageContextMenu.setYPosition = function() { return root.height/2 + 4} clickMessage(true, false, false, null, false, false, isReplyImage) } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml index 7a1a7cd972..125884babf 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml @@ -32,6 +32,10 @@ Item { root.isHovered = false } onClicked: { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = root + messageContextMenu.setXPosition = function() { return 0} + messageContextMenu.setYPosition = function() { return root.height + 4} clickMessage(true) } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/User.qml b/ui/app/AppLayouts/Chat/ChatColumn/User.qml index 2bbea060ea..70cdb65582 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/User.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/User.qml @@ -116,6 +116,10 @@ Item { openProfilePopup(wrapper.name, wrapper.publicKey, (wrapper.profileImage || wrapper.identicon), "", appMain.getUserNickname(wrapper.publicKey)); } else if (mouse.button === Qt.RightButton) { + // Set parent, X & Y positions for the messageContextMenu + messageContextMenu.parent = rectangle + messageContextMenu.setXPosition = function() { return 0} + messageContextMenu.setYPosition = function() { return rectangle.height} messageContextMenu.isProfile = true; messageContextMenu.show(wrapper.name, wrapper.publicKey, (wrapper.profileImage || wrapper.identicon), "", appMain.getUserNickname(wrapper.publicKey)) } diff --git a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml index c838366c14..9b2967f994 100644 --- a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml +++ b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml @@ -37,11 +37,21 @@ StatusPopupMenu { property var onClickEdit: function(){} property var reactionModel property string imageSource: "" + property var setXPosition: function() {return 0} + property var setYPosition: function() {return 0} property bool canPin: { const nbPinnedMessages = chatsModel.messageView.pinnedMessagesList.count return nbPinnedMessages < Constants.maxNumberOfPins } + onHeightChanged: { + messageContextMenu.y = setYPosition() + } + + onWidthChanged: { + messageContextMenu.x = setXPosition() + } + signal shouldCloseParentPopup function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam, emojiReactionsModel) { diff --git a/ui/app/AppLayouts/Timeline/TimelineLayout.qml b/ui/app/AppLayouts/Timeline/TimelineLayout.qml index 0481d56675..2785d83331 100644 --- a/ui/app/AppLayouts/Timeline/TimelineLayout.qml +++ b/ui/app/AppLayouts/Timeline/TimelineLayout.qml @@ -38,7 +38,7 @@ ScrollView { StatusImageModal { id: imagePopup onClicked: { - root.close() + close() } } diff --git a/ui/shared/status/StatusChatImageLoader.qml b/ui/shared/status/StatusChatImageLoader.qml index b7900e0fd6..24c532711f 100644 --- a/ui/shared/status/StatusChatImageLoader.qml +++ b/ui/shared/status/StatusChatImageLoader.qml @@ -10,7 +10,7 @@ Item { property url source property bool playing: applicationWindow.active property bool isAnimated: !!source && source.toString().endsWith('.gif') - signal clicked(var image, var button) + signal clicked(var image, var mouse) property var container property alias imageAlias: imageMessage property bool allCornersRounded: false @@ -113,7 +113,7 @@ Item { imageContainer.playing = !imageContainer.playing return } - imageContainer.clicked(imageMessage, mouse.button) + imageContainer.clicked(imageMessage, mouse) } } }