mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-10 22:36:24 +00:00
9e6bd7a2da
Fixes #2050. This PR contains changes to fix the name validation for new communities and new channels in communities. In the process of updating this, better validation was also added to both popups (create community and create channel), including the prevention of the "Create" button from being enabled until all form fields were valid. During this process, it was noticed that the community image cropper was not actually cropping the image *in the preview*. Once the community was created, status-go was successfully cropping the image as the user intended. However, the preview thumbnail prior to creation was not accurately showing the cropped image preview and showing the entire image centred instead. *This is still yet to be fixed.* One solution is to upgrade Qt to `5.15` to take advantage of Image QML's `sourceClipRect`.
83 lines
2.9 KiB
QML
83 lines
2.9 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import "../imports"
|
|
import "./status"
|
|
|
|
ModalPopup {
|
|
property string selectedImage
|
|
property string ratio: "1:1"
|
|
property int aX: 0
|
|
property int aY: 0
|
|
property int bX: 0
|
|
property int bY: 0
|
|
signal cropFinished(aX: int, aY: int, bX: int, bY: int)
|
|
|
|
id: cropImageModal
|
|
width: image.width + 50
|
|
height: image.height + 170
|
|
title: qsTr("Crop your image (optional)")
|
|
|
|
Image {
|
|
id: image
|
|
width: 400
|
|
source: cropImageModal.selectedImage
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
fillMode: Image.PreserveAspectFit
|
|
}
|
|
|
|
ImageCropper {
|
|
id: imageCropper
|
|
x: image.x
|
|
y: image.y
|
|
image: image
|
|
ratio: cropImageModal.ratio
|
|
onReadyChanged: {
|
|
if (ready) {
|
|
// cropImageModal.calculateCrop()
|
|
cropImageModal.aX = Qt.binding(function() {
|
|
const aXPercent = imageCropper.selectorRectangle.x / image.width
|
|
return Math.round(aXPercent * image.sourceSize.width)
|
|
})
|
|
cropImageModal.aY = Qt.binding(function() {
|
|
const aYPercent = imageCropper.selectorRectangle.y / image.height
|
|
return Math.round(aYPercent * image.sourceSize.height)
|
|
})
|
|
cropImageModal.bX = Qt.binding(function() {
|
|
const bXPercent = (imageCropper.selectorRectangle.x + imageCropper.selectorRectangle.width) / image.width
|
|
return Math.round(bXPercent * image.sourceSize.width)
|
|
})
|
|
cropImageModal.bY = Qt.binding(function() {
|
|
const bYPercent = (imageCropper.selectorRectangle.y + imageCropper.selectorRectangle.height) / image.height
|
|
return Math.round(bYPercent * image.sourceSize.height)
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
footer: StatusButton {
|
|
id: doneBtn
|
|
text: qsTr("Finish")
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
onClicked: {
|
|
const aXPercent = imageCropper.selectorRectangle.x / image.width
|
|
const aYPercent = imageCropper.selectorRectangle.y / image.height
|
|
const bXPercent = (imageCropper.selectorRectangle.x + imageCropper.selectorRectangle.width) / image.width
|
|
const bYPercent = (imageCropper.selectorRectangle.y + imageCropper.selectorRectangle.height) / image.height
|
|
|
|
|
|
const aX = Math.round(aXPercent * image.sourceSize.width)
|
|
const aY = Math.round(aYPercent * image.sourceSize.height)
|
|
|
|
const bX = Math.round(bXPercent * image.sourceSize.width)
|
|
const bY = Math.round(bYPercent * image.sourceSize.height)
|
|
|
|
cropImageModal.cropFinished(aX, aY, bX, bY)
|
|
cropImageModal.close()
|
|
}
|
|
}
|
|
}
|