From b479dba0015c5cb868ec598555a971a9235fbc30 Mon Sep 17 00:00:00 2001
From: hydr063n <hydr063n@yandex.com>
Date: Sat, 12 Sep 2020 20:22:07 +0200
Subject: [PATCH] feat: open modal when user left clicks on message containing
 image

---
 ui/app/AppLayouts/Chat/ChatColumn.qml         |  4 ++
 .../Chat/ChatColumn/ChatMessages.qml          |  1 +
 ui/app/AppLayouts/Chat/ChatColumn/Message.qml |  8 +++-
 .../MessageComponents/MessageMouseArea.qml    |  9 ++++-
 .../AppLayouts/Chat/components/ImagePopup.qml | 39 +++++++++++++++++++
 5 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 ui/app/AppLayouts/Chat/components/ImagePopup.qml

diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml
index 1d9ec1b086..6309274f3c 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn.qml
@@ -135,6 +135,10 @@ StackLayout {
             }
         }
 
+        ImagePopup {
+            id: imagePopup
+        }
+
         BlockContactConfirmationDialog {
             id: blockContactConfirmationDialog
             onBlockButtonClicked: {
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
index 9c6f6af898..fadd10c386 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
@@ -230,6 +230,7 @@ ScrollView {
             authorCurrentMsg: msgDelegate.ListView.section
             authorPrevMsg: msgDelegate.ListView.previousSection
             profileClick: profilePopup.setPopupData.bind(profilePopup)
+            imageClick: imagePopup.openPopup.bind(imagePopup)
             messageId: model.messageId
             emojiReactions: model.emojiReactions
             prevMessageIndex: {
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
index 2c3aee0d17..03c91a1101 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
@@ -42,6 +42,7 @@ Item {
     property string repliedMessageImage: replyMessageIndex > -1 ? chatsModel.messageList.getMessageData(replyMessageIndex, "image") : "";
 
     property var profileClick: function () {}
+    property var imageClick: function () {}
     property var scrollToBottom: function () {}
     property var appSettings
 
@@ -56,7 +57,12 @@ Item {
         }
     }
 
-    function clickMessage(isProfileClick, isSticker = false) {
+    function clickMessage(isProfileClick, isSticker = false, isImage = false, image = null) {
+        if (isImage) {
+            imageClick(image);
+            return;
+        }
+
         if (!isProfileClick) {
             SelectedMessage.set(messageId, fromAuthor);
         }
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml
index 6db5e5f0df..117043872b 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml
@@ -4,11 +4,16 @@ import "../../../../../imports"
 
 MouseArea {
     cursorShape: chatText.hoveredLink ? Qt.PointingHandCursor : undefined
-    acceptedButtons: Qt.RightButton
+    acceptedButtons: Qt.RightButton | Qt.LeftButton
     z: 50
     onClicked: {
         if(mouse.button & Qt.RightButton) {
-            clickMessage(false, isSticker)
+            clickMessage(false, isSticker, false);
+            return;
+        }
+        if (mouse.button & Qt.LeftButton) {
+            if (isImage && !isSticker)
+                clickMessage(false, false, isImage, image);
             return;
         }
     }
diff --git a/ui/app/AppLayouts/Chat/components/ImagePopup.qml b/ui/app/AppLayouts/Chat/components/ImagePopup.qml
new file mode 100644
index 0000000000..0dc8038b8f
--- /dev/null
+++ b/ui/app/AppLayouts/Chat/components/ImagePopup.qml
@@ -0,0 +1,39 @@
+import QtQuick 2.13
+import QtQuick.Window 2.2
+import "../../../../imports"
+import "../../../../shared"
+import "./"
+
+ModalPopup {
+    id: popup
+    width: 500
+    height: 500
+
+    function setPopupData(image) {
+        messageImage.source = image;
+        if (Screen.desktopAvailableWidth <= messageImage.sourceSize.width || Screen.desktopAvailableHeight <= messageImage.sourceSize.height) {
+            this.width = Screen.desktopAvailableWidth - 100;
+            this.height = Screen.desktopAvailableHeight - 100;
+            return;
+        }
+        this.width = messageImage.sourceSize.width;
+        this.height = messageImage.sourceSize.height;
+    }
+
+    function openPopup(image) {
+        setPopupData(image);
+        popup.open();
+    }
+
+    Image {
+        id: messageImage
+        asynchronous: true
+        fillMode: Image.PreserveAspectFit
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        height: parent.height - Style.current.padding
+        width: parent.width - Style.current.padding
+        mipmap: true
+        smooth: false
+    }
+}