feature(profile): use an image cropper to set the profile picture

ui/app/AppLayouts/Onboarding/popups/UploadProfilePicModal.qml

@@ -19,64 +19,38 @@ StatusModal {
     height: 510
     header.title: qsTr("Upload profile picture")
 
-    readonly property alias aX: cropImageModal.aX
-    readonly property alias aY: cropImageModal.aY
-    readonly property alias bX: cropImageModal.bX
-    readonly property alias bY: cropImageModal.bY
-
-    property string selectedImage
     property string currentProfileImg: ""
     property string croppedImg: ""
-    property string uploadError
 
     signal setProfileImage(string image)
 
-    onClosed: {
+    // Internals
-        popup.selectedImage = ""
+    //
-        popup.croppedImg = ""
+    onOpened: imageEditor.userSelectedImage = false
-    }
+    onClosed: popup.croppedImg = ""
 
     contentItem: Item {
         anchors.fill: parent
-        StatusRoundedImage {
+
-            id: profilePic
+        EditCroppedImagePanel {
+            id: imageEditor
+
             width: 160
             height: 160
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.centerIn: parent
-            anchors.horizontalCenter: parent.horizontalCenter
-            image.source: popup.croppedImg || popup.currentProfileImg
-            showLoadingIndicator: true
-            border.width: 1
-            border.color: Style.current.border
 
-            MouseArea {
+            imageFileDialogTitle: qsTr("Choose an image for profile picture")
-                anchors.fill: parent
+            title: qsTr("Profile picture")
-                cursorShape: Qt.PointingHandCursor
+            acceptButtonText: qsTr("Make this my profile picture")
-                hoverEnabled: true
-                onClicked: imageDialog.open()
-            }
-        }
 
-        StyledText {
+            aspectRatio: 1
-            visible: !!uploadError
-            text: uploadError
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: profilePic.bottom
-            horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 13
-            wrapMode: Text.WordWrap
-            anchors.topMargin: 13
-            font.weight: Font.Thin
-            color: Style.current.danger
-        }
 
-        ImageCropperModal {
+            dataImage: popup.currentProfileImg
-            id: cropImageModal
+
-            ratio: "1:1"
+            NoImageUploadedPanel {
-            selectedImage: popup.selectedImage
+                anchors.centerIn: parent
-            onCropFinished: {
+
-                popup.croppedImg = OnboardingStore.generateImage(popup.selectedImage, aX, aY, bX, bY);
+                visible: imageEditor.nothingToShow
             }
         }
     }
@@ -94,29 +68,17 @@ StatusModal {
         },
         StatusButton {
             id: uploadBtn
-            text: popup.croppedImg? qsTr("Done") : qsTr("Upload")
+            text: imageEditor.userSelectedImage ? qsTr("Upload") : qsTr("Done")
             onClicked: {
-                if (popup.croppedImg) {
+                if (imageEditor.userSelectedImage) {
-                    OnboardingStore.setImageProps(popup.selectedImage, aX, aY, bX, bY)
+                    popup.croppedImg = OnboardingStore.generateImage(imageEditor.source,
+                                             imageEditor.cropRect.x.toFixed(),
+                                             imageEditor.cropRect.y.toFixed(),
+                                             (imageEditor.cropRect.x + imageEditor.cropRect.width).toFixed(),
+                                             (imageEditor.cropRect.y + imageEditor.cropRect.height).toFixed())
                     popup.setProfileImage(popup.croppedImg)
-                    close();
-                } else {
-                    imageDialog.open();
-                }
-            }
-            FileDialog {
-                id: imageDialog
-                title: qsTrId("please-choose-an-image")
-                folder: shortcuts.pictures
-                nameFilters: [
-                    qsTrId("image-files----jpg---jpeg---png-")
-                ]
-                onAccepted: {
-                    if(imageDialog.fileUrls.length > 0) {
-                        popup.selectedImage = imageDialog.fileUrls[0];
-                        cropImageModal.open()
-                    }
                 }
+                close();
             }
         }
     ]

ui/imports/shared/panels/NoImageUploadedPanel.qml

@@ -21,11 +21,14 @@ Item {
     ColumnLayout {
         id: mainLayout
 
-        SVGImage {
+        Image {
             id: imageImg
             source: Style.svg("images_icon")
             width: 20
             height: 18
+            sourceSize.width: width || undefined
+            sourceSize.height: height || undefined
+            fillMode: Image.PreserveAspectFit
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
         }