status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-20 18:48:47 +00:00
Code Issues Projects Releases Wiki Activity

fix(ImageCropper): adapt to new changes done to image cropper workflow

Browse Source
This commit is contained in:
Stefan 2022-05-31 11:07:45 +02:00 committed by Stefan Dunca
parent 9f633f0fcc
commit 07d36722f8
3 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml
View File

@ -212,13 +212,18 @@ Item {
BannerCropperModal { BannerCropperModal {
id: cropperModal id: cropperModal
imageFileDialogTitle: qsTr("Choose an image for profile picture")
title: qsTr("Profile picture")
acceptButtonText: qsTr("Make this my profile picture")
onImageCropped: { onImageCropped: {
const croppedImg = OnboardingStore.generateImage(image, const croppedImg = OnboardingStore.generateImage(image,
cropRect.x.toFixed(), cropRect.x.toFixed(),
cropRect.y.toFixed(), cropRect.y.toFixed(),
(cropRect.x + cropRect.width).toFixed(), (cropRect.x + cropRect.width).toFixed(),
(cropRect.y + cropRect.height).toFixed()) (cropRect.y + cropRect.height).toFixed())
userImage.image.source = image userImage.image.source = croppedImg
} }
} }
} }

13
ui/imports/shared/panels/EditCroppedImagePanel.qml
View File

@ -20,13 +20,13 @@ Item {
property alias source: bannerPreview.source property alias source: bannerPreview.source
property alias cropRect: bannerPreview.cropRect property alias cropRect: bannerPreview.cropRect
/*required*/ property alias aspectRatio: bannerCropper.aspectRatio /*required*/ property alias aspectRatio: bannerCropperModal.aspectRatio
property bool roundedImage: true property alias roundedImage: bannerCropperModal.roundedImage
/*required*/ property string imageFileDialogTitle: "" /*required*/ property alias imageFileDialogTitle: bannerCropperModal.imageFileDialogTitle
/*required*/ property string title: "" /*required*/ property alias title: bannerCropperModal.title
/*required*/ property string acceptButtonText: "" /*required*/ property alias acceptButtonText: bannerCropperModal.acceptButtonText
property string dataImage: "" property string dataImage: ""
@ -89,7 +89,7 @@ Item {
anchors.fill: parent anchors.fill: parent
visible: root.state === d.imageSelectedState visible: root.state === d.imageSelectedState
windowStyle: bannerCropper.windowStyle windowStyle: bannerCropperModal.windowStyle
wallColor: Theme.palette.statusAppLayout.backgroundColor wallColor: Theme.palette.statusAppLayout.backgroundColor
wallTransparency: 1 wallTransparency: 1
clip:true clip:true
@ -165,6 +165,7 @@ Item {
BannerCropperModal { BannerCropperModal {
id: bannerCropperModal id: bannerCropperModal
onImageCropped: { onImageCropped: {
bannerPreview.source = image bannerPreview.source = image
bannerPreview.setCropRect(cropRect) bannerPreview.setCropRect(cropRect)

26
ui/imports/shared/popups/BannerCropperModal.qml
View File

@ -13,6 +13,13 @@ import utils 1.0
Item { Item {
id: root id: root
property alias aspectRatio: bannerCropper.aspectRatio
property alias windowStyle: bannerCropper.windowStyle
/*required*/ property string imageFileDialogTitle: ""
/*required*/ property string title: ""
/*required*/ property string acceptButtonText: ""
property bool roundedImage: true
signal imageCropped(var image, var cropRect) signal imageCropped(var image, var cropRect)
function chooseImageToCrop() { function chooseImageToCrop() {
@ -22,9 +29,9 @@ Item {
FileDialog { FileDialog {
id: fileDialog id: fileDialog
title: qsTr("Choose an image for profile picture") title: root.imageFileDialogTitle
folder: shortcuts.pictures folder: root.userSelectedImage ? bannerCropper.source.substr(0, bannerCropper.source.lastIndexOf("/")) : shortcuts.pictures
nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg, *.jpeg, *.jfif, *.png *.tiff *.heif")] nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.heif")]
onAccepted: { onAccepted: {
if (fileDialog.fileUrls.length > 0) { if (fileDialog.fileUrls.length > 0) {
bannerCropper.source = fileDialog.fileUrls[0] bannerCropper.source = fileDialog.fileUrls[0]
@ -36,14 +43,15 @@ Item {
StatusModal { StatusModal {
id: imageCropperModal id: imageCropperModal
header.title: qsTr("Profile picture") header.title: root.title
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
width: root.roundedImage ? 480 : 580
StatusImageCropPanel { StatusImageCropPanel {
id: bannerCropper id: bannerCropper
implicitWidth: 480
implicitHeight: 350 implicitHeight: 350
anchors { anchors {
@ -52,16 +60,16 @@ Item {
rightMargin: Style.current.padding * 2 rightMargin: Style.current.padding * 2
topMargin: Style.current.bigPadding topMargin: Style.current.bigPadding
bottomMargin: Style.current.bigPadding bottomMargin: Style.current.bigPadding
} }
aspectRatio: 1
margins: root.roundedImage ? 10 : 20
windowStyle: root.roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
enableCheckers: true enableCheckers: true
} }
rightButtons: [ rightButtons: [
StatusButton { StatusButton {
text: qsTr("Make this my profile picture") text: root.acceptButtonText
enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0 enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0