feat: open modal when user left clicks on message containing image

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -135,6 +135,10 @@ StackLayout {
             }
         }
 
+        ImagePopup {
+            id: imagePopup
+        }
+
         BlockContactConfirmationDialog {
             id: blockContactConfirmationDialog
             onBlockButtonClicked: {

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

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

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

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