feat: introduce StatusImageModal component

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -143,7 +143,7 @@ StackLayout {
             }
        }
 
-        ImagePopup {
+        StatusImageModal {
             id: imagePopup
         }
 

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

@@ -1,39 +0,0 @@
-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
-    }
-}

ui/shared/status/StatusImageModal.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.13
+import QtQuick.Window 2.2
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../../imports"
+import "../../shared"
+
+Popup {
+    id: root
+    modal: true
+    Overlay.modal: Rectangle {
+        color: "#40000000"
+    }
+    parent: Overlay.overlay
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    x: Math.round(((parent ? parent.width : 0) - width) / 2)
+    y: Math.round(((parent ? parent.height : 0) - height) / 2)
+    background: Rectangle {
+        color: "transparent"
+    }
+    padding: 0
+
+    function setPopupData(image) {
+        messageImage.source = image;
+
+        let maxHeight = applicationWindow.height - 80
+        let maxWidth = applicationWindow.width - 80
+
+        if (messageImage.sourceSize.width >= maxWidth || messageImage.sourceSize.height >= maxHeight) {
+            this.width = maxWidth
+            this.height = maxHeight
+        } else {
+            this.width = messageImage.sourceSize.width
+            this.height = messageImage.sourceSize.height
+        }
+    }
+
+    function openPopup(image) {
+        setPopupData(image);
+        root.open();
+    }
+
+    contentItem: Image {
+        id: messageImage
+        asynchronous: true
+        fillMode: Image.PreserveAspectFit
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        mipmap: true
+        smooth: false
+    }
+}