status-desktop/ui/imports/shared/popups/ImageCropWorkflow.qml

118 lines
3.6 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Dialogs 1.3
import StatusQ 0.1
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 StatusQ.Popups.Dialog 0.1
import utils 1.0
Item {
id: root
objectName: "imageCropWorkflow"
property var callback: null
property alias aspectRatio: imageCropper.aspectRatio
property alias windowStyle: imageCropper.windowStyle
/*required*/ property string imageFileDialogTitle: ""
/*required*/ property string title: ""
/*required*/ property string acceptButtonText: ""
property bool roundedImage: true
signal imageCropped(var image, var cropRect)
signal done()
function chooseImageToCrop() {
fileDialog.open()
}
function cropImage(imageUrl) {
imageCropper.source = imageUrl
imageCropperModal.open()
}
FileDialog {
id: fileDialog
title: root.imageFileDialogTitle
folder: root.userSelectedImage ? imageCropper.source.substr(0, imageCropper.source.lastIndexOf("/")) : shortcuts.pictures
nameFilters: [qsTr("Supported image formats (%1)").arg(UrlUtils.validImageNameFilters)]
onAccepted: {
if (fileDialog.fileUrls.length > 0) {
const url = fileDialog.fileUrls[0]
if (Utils.isValidDragNDropImage(url))
cropImage(url)
else
errorDialog.open()
}
}
} // FileDialog
StatusDialog {
id: errorDialog
title: qsTr("Image format not supported")
width: 480
contentItem: ColumnLayout {
StatusBaseText {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: qsTr("Format of the image you chose is not supported. Most probably you picked a file that is invalid, corrupted or has a wrong file extension.")
}
StatusBaseText {
Layout.fillWidth: true
font.pixelSize: Theme.additionalTextSize
text: qsTr("Supported image extensions: %1").arg(UrlUtils.allValidImageExtensions)
}
}
standardButtons: Dialog.Ok
} // StatusDialog
StatusModal {
id: imageCropperModal
headerSettings.title: root.title
width: root.roundedImage ? 480 : 580
StatusImageCropPanel {
id: imageCropper
objectName: "profileImageCropper"
implicitHeight: root.roundedImage ? 350 : 370
anchors {
fill: parent
leftMargin: Theme.bigPadding + Theme.halfPadding / 2
rightMargin: Theme.bigPadding + Theme.halfPadding / 2
topMargin: Theme.bigPadding
bottomMargin: Theme.bigPadding
}
margins: root.roundedImage ? 10 : 20
windowStyle: root.roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
enableCheckers: true
}
rightButtons: [
StatusButton {
objectName: "imageCropperAcceptButton"
text: root.acceptButtonText
enabled: imageCropper.sourceSize.width > 0 && imageCropper.sourceSize.height > 0
onClicked: {
root.imageCropped(imageCropper.source, imageCropper.cropRect)
imageCropperModal.close()
}
}
]
onClosed: root.done()
} // StatusModal
} // Item