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): Emoji reaction Menu is incorrect 

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

fixes #2385
This commit is contained in:
Khushboo Mehta 2021-08-25 22:31:00 +02:00 committed by Iuri Matias
parent 8f1ffd96a1
commit f4baf7c738
14 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

12
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

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

16
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml
View File

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

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

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

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

@ -197,7 +197,7 @@ Column {
source: linkData.thumbnailUrl
imageWidth: 300
isCurrentUser: root.isCurrentUser
onClicked: clickMessage(false, false, true, linkImage.imageAlias)
onClicked: imageClick(linkImage.imageAlias)
}
}
}

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

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

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

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

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

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

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

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

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

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

4
ui/app/AppLayouts/Chat/ChatColumn/User.qml
View File

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

10
ui/app/AppLayouts/Chat/components/MessageContextMenu.qml
View File

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

2
ui/app/AppLayouts/Timeline/TimelineLayout.qml
View File

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

4
ui/shared/status/StatusChatImageLoader.qml
View File

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