fix(Onboarding): Remove old uploading photo modal

Closes: #5831

ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

@@ -1,16 +1,24 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.14
+import QtQuick.Dialogs 1.3
+
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
 
 import shared.panels 1.0
+import shared 1.0
+import shared.popups 1.0
 
 import utils 1.0
 import shared.controls 1.0
 import "../popups"
 import "../stores"
+import "../shared"
 
 Item {
     id: root
@@ -101,8 +109,7 @@ Item {
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "add"
                 onClicked: {
-                    uploadProfilePicPopup.currentProfileImg = userImage.image.source
+                    cropperModal.chooseImageToCrop()
-                    uploadProfilePicPopup.open();
                 }
             }
         }
@@ -131,7 +138,7 @@ Item {
             onTextChanged: {
                 userImage.name = text;
             }
-            input.acceptReturn: true  
+            input.acceptReturn: true
             onKeyPressed: {
                 if (input.edit.keyEvent === Qt.Key_Return || input.edit.keyEvent === Qt.Key_Enter) {
                     event.accepted = true
@@ -203,10 +210,14 @@ Item {
             }
         }
 
-        UploadProfilePicModal {
+        BannerCropperModal {
-            id: uploadProfilePicPopup
+            id: cropperModal
-            anchors.centerIn: parent
+            onImageCropped: {
-            onSetProfileImage: {
+                const croppedImg = OnboardingStore.generateImage(image,
+                                              cropRect.x.toFixed(),
+                                              cropRect.y.toFixed(),
+                                              (cropRect.x + cropRect.width).toFixed(),
+                                              (cropRect.y + cropRect.height).toFixed())
                 userImage.image.source = image
             }
         }

ui/imports/shared/panels/EditCroppedImagePanel.qml

@@ -115,7 +115,7 @@ Item {
 
                 type: StatusRoundButton.Type.Secondary
 
-                onClicked: bannerFileDialog.open()
+                onClicked: bannerCropperModal.chooseImageToCrop()
             }
         }
 
@@ -145,73 +145,13 @@ Item {
                 z: bannerEditor.z + 1
             }
 
-            FileDialog {
+            BannerCropperModal {
-                id: bannerFileDialog
-
-                title: root.imageFileDialogTitle
-                folder: root.userSelectedImage ? bannerCropper.source.substr(0, bannerCropper.source.lastIndexOf("/")) : shortcuts.pictures
-                nameFilters: [qsTr("Image files (*.jpg *.jpeg, *.jfif, *.png *.tiff *.heif)")]
-                onAccepted: {
-                    if(bannerFileDialog.fileUrls.length > 0) {
-                        bannerCropper.source = bannerFileDialog.fileUrls[0]
-                        bannerCropperModal.open()
-                    }
-                }
-                onRejected: {
-                    if(root.userSelectedImage)
-                        bannerCropperModal.open()
-                }
-            }
-
-            StatusModal {
                 id: bannerCropperModal
-
+                onImageCropped: {
-                header.title: root.title
+                    bannerPreview.source = image
-
+                    bannerPreview.setCropRect(cropRect)
-                anchors.centerIn: Overlay.overlay
+                    root.userSelectedImage = true
-
-                Item {
-                    implicitWidth: 480
-                    implicitHeight: 350
-
-                    anchors.fill: parent
-
-                    ColumnLayout {
-                        anchors.fill: parent
-
-                        StatusImageCropPanel {
-                            id: bannerCropper
-
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                            Layout.leftMargin: Style.current.padding * 2
-                            Layout.topMargin: Style.current.bigPadding
-                            Layout.rightMargin: Layout.leftMargin
-                            Layout.bottomMargin: Layout.topMargin
-
-                            windowStyle: bannerPreview.windowStyle
-                            aspectRatio: bannerPreview.aspectRatio
-
-                            enableCheckers: true
-                        }
-                    }
                 }
-
-                rightButtons: [
-                    StatusButton {
-                        text: root.acceptButtonText
-
-                        enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0
-
-                        onClicked: {
-                            bannerPreview.source = bannerCropper.source
-                            bannerPreview.setCropRect(bannerCropper.cropRect)
-                            bannerCropperModal.close()
-                            root.userSelectedImage = true
-                        }
-                    }
-                ]
             }
         }
     }

ui/imports/shared/popups/BannerCropperModal.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Dialogs 1.3
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+import utils 1.0
+
+Item {
+    id: root
+
+    signal imageCropped(var image, var cropRect)
+
+    function chooseImageToCrop() {
+        fileDialog.open()
+    }
+
+    FileDialog {
+        id: fileDialog
+
+        title: qsTr("Choose an image for profile picture")
+        folder: shortcuts.pictures
+        nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg, *.jpeg, *.jfif, *.png *.tiff *.heif")]
+        onAccepted: {
+            if (fileDialog.fileUrls.length > 0) {
+                bannerCropper.source = fileDialog.fileUrls[0]
+                imageCropperModal.open()
+            }
+        }
+    } // FileDialog
+
+    StatusModal {
+        id: imageCropperModal
+
+        header.title: qsTr("Profile picture")
+
+        anchors.centerIn: Overlay.overlay
+
+        StatusImageCropPanel {
+            id: bannerCropper
+
+            implicitWidth: 480
+            implicitHeight: 350
+
+            anchors {
+                 fill: parent
+                 leftMargin: Style.current.padding * 2
+                 rightMargin: Style.current.padding * 2
+                 topMargin: Style.current.bigPadding
+                 bottomMargin: Style.current.bigPadding
+             }
+
+            aspectRatio: 1
+
+            enableCheckers: true
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: qsTr("Make this my profile picture")
+
+                enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0
+
+                onClicked: {
+                    root.imageCropped(bannerCropper.source, bannerCropper.cropRect)
+                    imageCropperModal.close()
+                }
+            }
+        ]
+    } // StatusModal
+} // Item
+

ui/imports/shared/popups/qmldir

@@ -15,3 +15,4 @@ UserStatusContextMenu 1.0 UserStatusContextMenu.qml
 SignTransactionModal 1.0 SignTransactionModal.qml
 SelectAccountModal 1.0 SelectAccountModal.qml
 ProfilePopup 1.0 ProfilePopup.qml
+BannerCropperModal 1.0 BannerCropperModal.qml