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

This commit is contained in:
Stefan 2022-05-04 15:40:45 +02:00 committed by Stefan Dunca
parent a54a999f4c
commit edbaccd6bf
2 changed files with 31 additions and 66 deletions

View File

@ -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: {
popup.selectedImage = ""
popup.croppedImg = ""
}
// Internals
//
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.horizontalCenter: parent.horizontalCenter
image.source: popup.croppedImg || popup.currentProfileImg
showLoadingIndicator: true
border.width: 1
border.color: Style.current.border
anchors.centerIn: parent
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: imageDialog.open()
}
}
imageFileDialogTitle: qsTr("Choose an image for profile picture")
title: qsTr("Profile picture")
acceptButtonText: qsTr("Make this my profile picture")
StyledText {
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
}
aspectRatio: 1
ImageCropperModal {
id: cropImageModal
ratio: "1:1"
selectedImage: popup.selectedImage
onCropFinished: {
popup.croppedImg = OnboardingStore.generateImage(popup.selectedImage, aX, aY, bX, bY);
dataImage: popup.currentProfileImg
NoImageUploadedPanel {
anchors.centerIn: parent
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) {
OnboardingStore.setImageProps(popup.selectedImage, aX, aY, bX, bY)
if (imageEditor.userSelectedImage) {
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()
}
}
}
}
]

View File

@ -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
}