feat: add profile section to the context menu

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 {

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -55,9 +55,12 @@ Item {
         }
     }
 
-    function clickMessage() {
+    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

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

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

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

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 \