fix(@desktop/chat): Emoji reaction Menu is incorrect

Added logic to set parent ,x and y positions from the place where the menu is opened

fixes #2385

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
+                    contextmenu.imageSource = imagePopup.imageSource
-                    messageContextMenu.hideEmojiPicker = true
+                    contextmenu.hideEmojiPicker = true
-                    messageContextMenu.isRightClickOnImage = true;
+                    contextmenu.isRightClickOnImage = true;
-                    messageContextMenu.show()
+                    contextmenu.show()
                 }
             }
         }
@@ -295,9 +300,7 @@ Item {
                         sourceComponent: ChatMessages {
                             id: chatMessages
                             messageList: messages
-                            messageContextMenuInst: MessageContextMenu {
+                            messageContextMenuInst: contextmenu
-                                reactionModel: EmojiReactions { }
-                            }
                             Component.onCompleted: {
                                 chatColumnLayout.userList = chatMessages.messageList.userList;
                             }

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
+         messageContextMenu.x = messageContextMenu.setXPosition()
-        if (messageContextMenu.x + messageContextMenu.width + Style.current.padding < root.width) {
+         messageContextMenu.y = messageContextMenu.setYPosition()
-            messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2;
-        }
     }
 
     Loader {

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)

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -310,10 +310,14 @@ Item {
                         imageSource: image
                         imageWidth: 200
                         onClicked: {
-                            if (button === Qt.LeftButton) {
+                            if (mouse.button === Qt.LeftButton) {
-                                root.clickMessage(false, false, true, image)
+                                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);
+                    // Set parent, X & Y positions for the messageContextMenu
-                    messageContextMenu.y -= (56 + Style.current.padding);
+                    messageContextMenu.parent = emojiReactionLoader
+                    messageContextMenu.setXPosition = function() { return (messageContextMenu.parent.x + 4)}
+                    messageContextMenu.setYPosition = function() { return (-messageContextMenu.height - 4)}
                 }
             }
         }

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

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)

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

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);
+                    // Set parent, X & Y positions for the messageContextMenu
-                    messageContextMenu.y -= (56 + Style.current.padding);
+                    messageContextMenu.parent = emojiReactionLoader
+                    messageContextMenu.setXPosition = function() { return (messageContextMenu.parent.x + 4)}
+                    messageContextMenu.setYPosition = function() { return (-messageContextMenu.height - 4)}
                 }
             }
         }

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

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

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

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

ui/app/AppLayouts/Timeline/TimelineLayout.qml

@@ -38,7 +38,7 @@ ScrollView {
     StatusImageModal {
         id: imagePopup
         onClicked: {
-            root.close()
+            close()
         }
     }
 

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