From 4de8c6c313158fdb514d7e6dd22a2a4d332de25c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= <michalcieslak@status.im>
Date: Thu, 1 Dec 2022 09:37:46 +0100
Subject: [PATCH] fix(MyProfileSettingsView): Temporary image cropped properly

Closes #8520
---
 .../views/profile/MyProfileSettingsView.qml   |  2 +-
 .../shared/controls/chat/ProfileHeader.qml    | 38 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml b/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml
index 462d6decc9..08fda81f0b 100644
--- a/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml
+++ b/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml
@@ -32,7 +32,7 @@ ColumnLayout {
         property string displayName: descriptionPanel.displayName.text
         property string bio: descriptionPanel.bio.text
         property bool biomentricValue: biometricsSwitch.checked
-        property url profileLargeImage: profileHeader.icon
+        property url profileLargeImage: profileHeader.previewIcon
     }
 
     readonly property bool dirty: descriptionPanel.displayName.text !== profileStore.displayName ||
diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml
index 6a42bdb70b..ed134f6bab 100644
--- a/ui/imports/shared/controls/chat/ProfileHeader.qml
+++ b/ui/imports/shared/controls/chat/ProfileHeader.qml
@@ -23,6 +23,7 @@ Item {
     property string displayName
     property string pubkey
     property string icon
+    property url previewIcon: icon
     property int trustStatus
     property bool isContact: false
     property bool isCurrentUser
@@ -42,6 +43,10 @@ Item {
     signal clicked()
     signal editClicked()
 
+    Binding on previewIcon {
+        value: icon
+    }
+
     height: visible ? contentContainer.height : 0
     implicitHeight: contentContainer.implicitHeight
 
@@ -56,6 +61,34 @@ Item {
         }
     }
 
+    Item {
+        id: tmpCroppedImageHelper
+
+        visible: false
+
+        Image {
+            id: tmpImage
+            mipmap: true
+        }
+
+        property var keepGrabResultAlive;
+
+        function setCroppedTmpIcon(source, x, y, width, height) {
+            tmpCroppedImageHelper.width = width
+            tmpCroppedImageHelper.height = height
+
+            tmpImage.x = -x
+            tmpImage.y = -y
+            tmpImage.source = source
+
+            tmpCroppedImageHelper.grabToImage(result => {
+                keepGrabResultAlive = result
+                root.previewIcon = result.url
+                tmpImage.source = ""
+            })
+        }
+    }
+
     ColumnLayout {
         id: contentContainer
 
@@ -78,7 +111,7 @@ Item {
                 objectName: "ProfileHeader_userImage"
                 name: root.displayName
                 pubkey: root.pubkey
-                image: root.icon
+                image: root.previewIcon
                 interactive: false
                 imageWidth: d.getSize(36, 64, 160)
                 imageHeight: imageWidth
@@ -110,6 +143,9 @@ Item {
                 function tempIcon(image, aX, aY, bX, bY) {
                     root.icon = image
                     root.cropRect = Qt.rect(aX, aY, bX - aX, bY - aY)
+
+                    tmpCroppedImageHelper.setCroppedTmpIcon(
+                                image, aX, aY, bX - aX, bY - aY)
                 }
             }
         }