diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index 0cd6a8b32b..e8c2632bad 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -128,42 +128,8 @@ StackLayout { id: reactionModel } - PopupMenu { + MessageContextMenu { id: messageContextMenu - width: emojiRow.width - - Row { - id: emojiRow - spacing: Style.current.smallPadding - leftPadding: Style.current.smallPadding - rightPadding: Style.current.smallPadding - bottomPadding: Style.current.padding - - Repeater { - model: reactionModel - delegate: EmojiReaction { - source: "../../img/" + filename - emojiId: model.emojiId - } - } - } - - Separator { - anchors.topMargin: 0 - anchors.top: emojiRow.bottom - } - - Action { - id: viewProfileAction - //% "View profile" - text: qsTrId("view-profile") - onTriggered: profilePopup.open() - } - Action { - //% "Reply to" - text: qsTrId("reply-to") - onTriggered: showReplyArea() - } } ListModel { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index e0ecfa136a..6a30edcefb 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -55,9 +55,12 @@ Item { } } - function clickMessage() { - SelectedMessage.set(messageId, fromAuthor); + function clickMessage(isProfileClick) { + if (!isProfileClick) { + SelectedMessage.set(messageId, fromAuthor); + } profileClick(userName, fromAuthor, identicon); + messageContextMenu.isProfile = !!isProfileClick messageContextMenu.popup() // Position the center of the menu where the mouse is messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2 diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml index 24bb782fd2..6ac6f1c6a2 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml @@ -23,9 +23,10 @@ Rectangle { MouseArea { cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton anchors.fill: parent onClicked: { - clickMessage() + clickMessage(true) } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml index 8b11ee098c..fb1082ef02 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml @@ -15,9 +15,10 @@ StyledTextEdit { selectByMouse: true MouseArea { cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton anchors.fill: parent onClicked: { - clickMessage() + clickMessage(true) } } } diff --git a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml new file mode 100644 index 0000000000..085681673e --- /dev/null +++ b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml @@ -0,0 +1,109 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import QtQml.Models 2.3 +import "../../../../imports" +import "../../../../shared" +import "./" + +PopupMenu { + property bool isProfile: false + + id: messageContextMenu + width: messageContextMenu.isProfile ? profileHeader.width : emojiContainer.width + + Item { + id: emojiContainer + visible: !messageContextMenu.isProfile + width: emojiRow.width + height: visible ? emojiRow.height : 0 + + Row { + id: emojiRow + spacing: Style.current.smallPadding + leftPadding: Style.current.smallPadding + rightPadding: Style.current.smallPadding + bottomPadding: Style.current.padding + + Repeater { + model: reactionModel + delegate: EmojiReaction { + source: "../../../img/" + filename + emojiId: model.emojiId + } + } + } + } + + Rectangle { + property bool hovered: false + + id: profileHeader + visible: messageContextMenu.isProfile + width: 200 + height: visible ? profileImage.height + username.height + Style.current.padding : 0 + color: hovered ? Style.current.secondaryBackground : Style.current.transparent + + Identicon { + id: profileImage + source: profilePopup.identicon + anchors.top: parent.top + anchors.topMargin: 4 + anchors.horizontalCenter: parent.horizontalCenter + } + + StyledText { + id: username + text: profilePopup.userName + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + anchors.top: profileImage.bottom + anchors.topMargin: 4 + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + anchors.right: parent.right + anchors.rightMargin: Style.current.smallPadding + font.weight: Font.Medium + font.pixelSize: 15 + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + hoverEnabled: true + onEntered: { + profileHeader.hovered = true + } + onExited: { + profileHeader.hovered = false + } + onClicked: { + profilePopup.open() + } + } + } + + Separator { + anchors.bottom: viewProfileAction.top + } + + Action { + id: viewProfileAction + //% "View profile" + text: qsTrId("view-profile") + onTriggered: profilePopup.open() + icon.source: "../../../img/profileActive.svg" + icon.width: 13 + icon.height: 13 + } + Action { + text: messageContextMenu.isProfile ? + qsTr("Send message") : + //% "Reply to" + qsTrId("reply-to") + onTriggered: messageContextMenu.isProfile ? chatsModel.joinChat(profilePopup.fromAuthor, Constants.chatTypeOneToOne) : showReplyArea() + icon.source: "../../../img/messageActive.svg" + icon.width: 13 + icon.height: 13 + } +} diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 96361947dc..ce141cc5ac 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -139,6 +139,7 @@ DISTFILES += \ app/AppLayouts/Chat/components/EmojiReaction.qml \ app/AppLayouts/Chat/components/EmojiSection.qml \ app/AppLayouts/Chat/components/InviteFriendsPopup.qml \ + app/AppLayouts/Chat/components/MessageContextMenu.qml \ app/AppLayouts/Profile/LeftTab/Constants.js \ app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \ app/AppLayouts/Chat/data/EmojiReactions.qml \