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

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

View File

@ -212,13 +212,18 @@ Item {
BannerCropperModal {
id: cropperModal
imageFileDialogTitle: qsTr("Choose an image for profile picture")
title: qsTr("Profile picture")
acceptButtonText: qsTr("Make this my profile picture")
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
userImage.image.source = croppedImg
}
}
}

View File

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

View File

@ -13,6 +13,13 @@ import utils 1.0
Item {
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)
function chooseImageToCrop() {
@ -22,9 +29,9 @@ Item {
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")]
title: root.imageFileDialogTitle
folder: root.userSelectedImage ? bannerCropper.source.substr(0, bannerCropper.source.lastIndexOf("/")) : shortcuts.pictures
nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.heif")]
onAccepted: {
if (fileDialog.fileUrls.length > 0) {
bannerCropper.source = fileDialog.fileUrls[0]
@ -36,14 +43,15 @@ Item {
StatusModal {
id: imageCropperModal
header.title: qsTr("Profile picture")
header.title: root.title
anchors.centerIn: Overlay.overlay
width: root.roundedImage ? 480 : 580
StatusImageCropPanel {
id: bannerCropper
implicitWidth: 480
implicitHeight: 350
anchors {
@ -52,16 +60,16 @@ Item {
rightMargin: Style.current.padding * 2
topMargin: 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
}
rightButtons: [
StatusButton {
text: qsTr("Make this my profile picture")
text: root.acceptButtonText
enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0