From 0d6752a1f124bfd21554259a48758c7e3732f198 Mon Sep 17 00:00:00 2001 From: Boris Melnik Date: Mon, 23 May 2022 14:29:58 +0300 Subject: [PATCH] fix(Onboarding): Remove old uploading photo modal Closes: #5831 --- .../Onboarding/views/InsertDetailsView.qml | 25 ++++-- .../shared/panels/EditCroppedImagePanel.qml | 72 ++---------------- .../shared/popups/BannerCropperModal.qml | 76 +++++++++++++++++++ ui/imports/shared/popups/qmldir | 1 + 4 files changed, 101 insertions(+), 73 deletions(-) create mode 100644 ui/imports/shared/popups/BannerCropperModal.qml diff --git a/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml b/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml index d1f1523435..49528fe337 100644 --- a/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml +++ b/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 - uploadProfilePicPopup.open(); + cropperModal.chooseImageToCrop() } } } @@ -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 { - id: uploadProfilePicPopup - anchors.centerIn: parent - onSetProfileImage: { + BannerCropperModal { + id: cropperModal + onImageCropped: { + 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 } } diff --git a/ui/imports/shared/panels/EditCroppedImagePanel.qml b/ui/imports/shared/panels/EditCroppedImagePanel.qml index 702384b929..e87f75ef70 100644 --- a/ui/imports/shared/panels/EditCroppedImagePanel.qml +++ b/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 { - 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 { + BannerCropperModal { id: bannerCropperModal - - header.title: root.title - - anchors.centerIn: Overlay.overlay - - 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 - } - } + onImageCropped: { + bannerPreview.source = image + bannerPreview.setCropRect(cropRect) + root.userSelectedImage = 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 - } - } - ] } } } diff --git a/ui/imports/shared/popups/BannerCropperModal.qml b/ui/imports/shared/popups/BannerCropperModal.qml new file mode 100644 index 0000000000..c513195b78 --- /dev/null +++ b/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 + diff --git a/ui/imports/shared/popups/qmldir b/ui/imports/shared/popups/qmldir index b1d55aef64..fefecadf0a 100644 --- a/ui/imports/shared/popups/qmldir +++ b/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 \ No newline at end of file