feat(MessageContextMenu): Allow Copy and Download Image

Added copy and download Image functionality on right click of an image or its preview

closes #2672

src/app/chat/view.nim

@@ -274,6 +274,12 @@ QtObject:
   proc copyToClipboard*(self: ChatsView, content: string) {.slot.} =
     setClipBoardText(content)
 
+  proc copyImageToClipboard*(self: ChatsView, content: string) {.slot} =
+    setClipBoardImage(content)
+
+  proc downloadImage*(self: ChatsView, content: string, path: string) {.slot} =
+    downloadImage(content, path)
+
   proc linkPreviewDataWasReceived*(self: ChatsView, previewData: string) {.signal.}
 
   proc linkPreviewDataReceived(self: ChatsView, previewData: string) {.slot.} =

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -172,6 +172,17 @@ Item {
 
         StatusImageModal {
             id: imagePopup
+            onClicked: {
+                if (button === Qt.LeftButton) {
+                    imagePopup.close()
+                }
+                else if(button === Qt.RightButton) {
+                    messageContextMenu.imageSource = imagePopup.imageSource
+                    messageContextMenu.hideEmojiPicker = true
+                    messageContextMenu.isRightClickOnImage = true;
+                    messageContextMenu.show()
+                }
+            }
         }
 
         ColumnLayout {

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

@@ -186,12 +186,12 @@ Item {
         }
     }
 
-    property var clickMessage: function(isProfileClick, isSticker = false, isImage = false, image = null, emojiOnly = false, hideEmojiPicker = false, isReply = false) {
+    property var clickMessage: function(isProfileClick, isSticker = false, isImage = false, image = null, emojiOnly = false, hideEmojiPicker = false, isReply = false, isRightClickOnImage = false, imageSource = "") {
         if (placeholderMessage || activityCenterMessage) {
             return
         }
 
-        if (isImage) {
+        if (isImage && !isRightClickOnImage) {
             imageClick(image);
             return;
         }
@@ -212,6 +212,8 @@ Item {
         messageContextMenu.hideEmojiPicker = hideEmojiPicker;
         messageContextMenu.pinnedMessage = pinnedMessage;
         messageContextMenu.isCurrentUser = isCurrentUser;
+        messageContextMenu.isRightClickOnImage = isRightClickOnImage
+        messageContextMenu.imageSource = imageSource
 
         if (isReply) {
             let nickname = appMain.getUserNickname(repliedMessageAuthor)

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

@@ -317,7 +317,14 @@ Item {
                     ChatImage {
                         imageSource: image
                         imageWidth: 200
-                        onClicked: root.clickMessage(false, false, true, image)
+                        onClicked: {
+                            if (button === Qt.LeftButton) {
+                                root.clickMessage(false, false, true, image)
+                            }
+                            else if (button === Qt.RightButton) {
+                                root.clickMessage(false, false, true, image, false, true, false, true, imageSource)
+                            }
+                        }
                         container: root.container
                     }
                 }

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

@@ -10,7 +10,7 @@ Item {
     property url source
     property bool playing: true
     property bool isAnimated: !!source && source.toString().endsWith('.gif')
-    signal clicked(var image)
+    signal clicked(var image, var button)
     property var container
     property alias imageAlias: imageMessage
     property bool allCornersRounded: false
@@ -104,6 +104,7 @@ Item {
 
         MouseArea {
             cursorShape: Qt.PointingHandCursor
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
             anchors.fill: parent
             onClicked: {
                 if (imageContainer.isAnimated) {
@@ -112,7 +113,7 @@ Item {
                     imageContainer.playing = !imageContainer.playing
                     return
                 }
-                imageContainer.clicked(imageMessage)
+                imageContainer.clicked(imageMessage, mouse.button)
             }
         }
     }

ui/app/AppLayouts/Chat/components/MessageContextMenu.qml

@@ -2,6 +2,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 import QtQml.Models 2.3
+import QtQuick.Dialogs 1.0
 
 import StatusQ.Popups 0.1
 
@@ -24,6 +25,7 @@ StatusPopupMenu {
     property bool pinnedPopup: false
     property bool isText: false
     property bool isCurrentUser: false
+    property bool isRightClickOnImage: false
     property string linkUrls: ""
     property alias emojiContainer: emojiContainer
     property var identicon: ""
@@ -34,6 +36,7 @@ StatusPopupMenu {
     property var emojiReactionsReactedByUser: []
     property var onClickEdit: function(){}
     property var reactionModel
+    property string imageSource: ""
     property bool canPin: {
         const nbPinnedMessages = chatsModel.messageView.pinnedMessagesList.count
         return nbPinnedMessages < Constants.maxNumberOfPins
@@ -187,6 +190,28 @@ StatusPopupMenu {
     }
     */
 
+    StatusMenuItem {
+        id: copyImageAction
+        text: qsTr("Copy image")
+        onTriggered: {
+            chatsModel.copyImageToClipboard(imageSource ? imageSource : "")
+            messageContextMenu.close()
+        }
+        icon.name: "copy"
+        enabled: isRightClickOnImage
+    }
+
+    StatusMenuItem {
+        id: downloadImageAction
+        text: qsTr("Download image")
+        onTriggered: {
+            fileDialog.open()
+            messageContextMenu.close()
+        }
+        icon.name: "download"
+        enabled: isRightClickOnImage
+    }
+
     StatusMenuItem {
         id: viewProfileAction
         //% "View Profile"
@@ -217,7 +242,7 @@ StatusPopupMenu {
             messageContextMenu.close()
         }
         icon.name: "chat"
-        enabled: isProfile || (!hideEmojiPicker && !emojiOnly && !isProfile)
+        enabled: isProfile || (!hideEmojiPicker && !emojiOnly && !isProfile && !isRightClickOnImage)
     }
 
     StatusMenuItem {
@@ -228,7 +253,7 @@ StatusPopupMenu {
             onClickEdit();
         }
         icon.name: "edit"
-        enabled: isCurrentUser && !hideEmojiPicker && !emojiOnly && !isProfile
+        enabled: isCurrentUser && !hideEmojiPicker && !emojiOnly && !isProfile && !isRightClickOnImage
     }
 
     StatusMenuItem {
@@ -259,7 +284,7 @@ StatusPopupMenu {
         }
         icon.name: "pin"
         enabled: {
-            if(isProfile || emojiOnly)
+            if(isProfile || emojiOnly || isRightClickOnImage)
                 return false
 
             switch (chatsModel.channelView.activeChannel.chatType) {
@@ -280,7 +305,7 @@ StatusPopupMenu {
 
     StatusMenuItem {
         id: deleteMessageAction
-        enabled: isCurrentUser && !isProfile && !emojiOnly && !pinnedPopup &&
+        enabled: isCurrentUser && !isProfile && !emojiOnly && !pinnedPopup && !isRightClickOnImage &&
                  (contentType === Constants.messageType ||
                   contentType === Constants.stickerType ||
                   contentType === Constants.emojiType ||
@@ -324,4 +349,18 @@ StatusPopupMenu {
         }
         icon.name: "up"
     }
+
+    FileDialog {
+        id: fileDialog
+        title: qsTr("Please choose a directory")
+        selectFolder: true
+        modality: Qt.NonModal
+        onAccepted: {
+            chatsModel.downloadImage(imageSource ? imageSource : "", fileDialog.fileUrls)
+            fileDialog.close()
+        }
+        onRejected: {
+            fileDialog.close()
+        }
+    }
 }

ui/app/AppLayouts/Timeline/TimelineLayout.qml

@@ -42,6 +42,9 @@ ScrollView {
 
     StatusImageModal {
         id: imagePopup
+        onClicked: {
+            root.close()
+        }
     }
 
     EmojiReactions {

ui/shared/status/StatusImageModal.qml

@@ -8,6 +8,10 @@ import "../../shared"
 
 Popup {
     id: root
+
+    signal clicked(var button)
+    property string imageSource: messageImage.source
+
     modal: true
     Overlay.modal: Rectangle {
         color: "#40000000"
@@ -51,8 +55,11 @@ Popup {
         smooth: false
 
         MouseArea {
-            onClicked: root.close()
             anchors.fill: parent
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            onClicked: {
+                root.clicked(mouse.button)
+            }
         }
     }
 }

vendor/DOtherSide

@@ -1 +1 @@
-Subproject commit 37254b04de06d9c1461a1ba6ef3c6ab8ec012547
+Subproject commit 142968d0854a60f40e20e4577e31002b8b07904e

vendor/nimqml

@@ -1 +1 @@
-Subproject commit b3309ae7c99a5b20cfdcf4c7d9d916d99e8d8feb
+Subproject commit 03c8072f896a4751acf347a38d403754c99e182b