chore(@desktop/general): add avatar change functionality

Fixes #4669

ui/app/AppLayouts/Profile/popups/ChangeProfilePicModal.qml

@@ -11,20 +11,19 @@ import shared.popups 1.0
 
 // TODO: replace with StatusModal
 ModalPopup {
-    property string selectedImage // selectedImage is for us to be able to analyze it before setting it as current
-    property string uploadError
-
     id: popup
-
-    property url largeImage: ""
-    property bool hasIdentityImage: false
-
-    signal cropFinished(string selectedImage, var aX, var aY, var bX, var bY)
-    signal removeImageButtonClicked()
-
     //% "Profile picture"
     title: qsTrId("profile-picture")
 
+    property var profileStore
+
+    property string selectedImage // selectedImage is for us to be able to analyze it before setting it as current
+    property string uploadError
+    property url largeImage: !popup.profileStore.isIdenticon?
+                                 popup.profileStore.profileLargeImage :
+                                 popup.profileStore.icon
+    property bool hasIdentityImage: !popup.profileStore.isIdenticon
+
     onClosed: {
         destroy()
     }
@@ -71,7 +70,9 @@ ModalPopup {
 
             selectedImage: popup.selectedImage
             ratio: "1:1"
-            onCropFinished: popup.cropFinished(selectedImage, aX, aY, bX, bY)
+            onCropFinished: {
+                popup.uploadError = popup.profileStore.uploadImage(selectedImage, aX, aY, bX, bY)
+            }
         }
     }
 
@@ -87,7 +88,9 @@ ModalPopup {
             anchors.right: uploadBtn.left
             anchors.rightMargin: Style.current.padding
             anchors.bottom: parent.bottom
-            onClicked: popup.removeImageButtonClicked()
+            onClicked: {
+                popup.uploadError = popup.profileStore.removeImage()
+            }
         }
 
         StatusButton {

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -26,20 +26,6 @@ Item {
     height: parent.height
     Layout.fillWidth: true
 
-    Component {
-        id: changeProfileModalComponent
-        ChangeProfilePicModal {
-            largeImage: !root.profileStore.isIdenticon? root.profileStore.profileLargeImage : root.profileStore.icon
-            hasIdentityImage: !root.profileStore.isIdenticon
-            onCropFinished: {
-                uploadError = root.profileStore.uploadImage(selectedImage, aX, aY, bX, bY)
-            }
-            onRemoveImageButtonClicked: {
-                uploadError = root.profileStore.removeImage()
-            }
-        }
-    }
-
     Item {
         id: profileImgNameContainer
         anchors.top: parent.top
@@ -82,8 +68,7 @@ Item {
                 anchors.fill: parent
                 cursorShape: Qt.PointingHandCursor
                 onClicked: {
-                    const popup = changeProfileModalComponent.createObject(root);
-                    popup.open()
+                    Global.openChangeProfilePicPopup()
                 }
             }
         }

ui/app/AppMain.qml

@@ -80,6 +80,10 @@ Item {
             popup.openPopup(publicKey);
             Global.profilePopupOpened = true;
         }
+        onOpenChangeProfilePicPopup: {
+            var popup = changeProfilePicComponent.createObject(appMain);
+            popup.open();
+        }
         onOpenBackUpSeedPopup : {
             var popup = backupSeedModalComponent.createObject(appMain)
             popup.open()
@@ -170,6 +174,12 @@ Item {
         }
     }
 
+    property Component changeProfilePicComponent: Component {
+        ChangeProfilePicModal {
+            profileStore: appMain.rootStore.profileSectionStore.profileStore
+        }
+    }
+
     Audio {
         id: sendMessageSound
         store: rootStore

ui/imports/shared/popups/ProfilePopup.qml

@@ -66,10 +66,17 @@ StatusModal {
         popup.open()
     }
 
+    onHeaderImageClicked: {
+        Global.openChangeProfilePicPopup()
+    }
+
     header.title: userDisplayName
     header.subTitle: userIsEnsVerified ? userName : userPublicKey
     header.subTitleElide: Text.ElideMiddle
-    header.image.source: userIcon
+    // In the following line we need to use `icon` property as that's the easiest way
+    // to update image on change (in case of logged in user)
+    header.image.source: isCurrentUser? popup.profileStore.icon : userIcon
+    header.headerImageEditable: isCurrentUser
 
     headerActionButton: StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary

ui/imports/utils/Global.qml

@@ -27,6 +27,7 @@ QtObject {
     signal openBackUpSeedPopup()
 
     signal openProfilePopupRequested(string publicKey, var parentPopup)
+    signal openChangeProfilePicPopup()
 
     function openProfilePopup(publicKey, parentPopup){
         openProfilePopupRequested(publicKey, parentPopup);