status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(Communities): loading of new images for logo and banner 

Also rename the crop image workflow

fixes: #5961
This commit is contained in:
Stefan 2022-06-01 16:00:57 +02:00 committed by osmaczko
parent 1696fec9db
commit 93596b19ca
4 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -210,7 +210,7 @@ Item {
} }
} }
BannerCropperModal { ImageCropWorkflow {
id: cropperModal id: cropperModal
imageFileDialogTitle: qsTr("Choose an image for profile picture") imageFileDialogTitle: qsTr("Choose an image for profile picture")

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

@ -18,15 +18,15 @@ import StatusQ.Popups 0.1
Item { Item {
id: root id: root
property alias source: bannerPreview.source property alias source: croppedPreview.source
property alias cropRect: bannerPreview.cropRect property alias cropRect: croppedPreview.cropRect
/*required*/ property alias aspectRatio: bannerCropperModal.aspectRatio /*required*/ property alias aspectRatio: imageCropWorkflow.aspectRatio
property alias roundedImage: bannerCropperModal.roundedImage property alias roundedImage: imageCropWorkflow.roundedImage
/*required*/ property alias imageFileDialogTitle: bannerCropperModal.imageFileDialogTitle /*required*/ property alias imageFileDialogTitle: imageCropWorkflow.imageFileDialogTitle
/*required*/ property alias title: bannerCropperModal.title /*required*/ property alias title: imageCropWorkflow.title
/*required*/ property alias acceptButtonText: bannerCropperModal.acceptButtonText /*required*/ property alias acceptButtonText: imageCropWorkflow.acceptButtonText
property string dataImage: "" property string dataImage: ""
@ -70,7 +70,7 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
visible: !bannerEditor.visible visible: !imageCropEditor.visible
StatusRoundedImage { StatusRoundedImage {
anchors.fill: parent anchors.fill: parent
@ -81,15 +81,15 @@ Item {
showLoadingIndicator: true showLoadingIndicator: true
border.width: 1 border.width: 1
border.color: Style.current.border border.color: Style.current.border
radius: root.roundedImage ? width/2 : bannerPreview.radius radius: root.roundedImage ? width/2 : croppedPreview.radius
} }
StatusImageCrop { StatusImageCrop {
id: bannerPreview id: croppedPreview
anchors.fill: parent anchors.fill: parent
visible: root.state === d.imageSelectedState visible: root.state === d.imageSelectedState
windowStyle: bannerCropperModal.windowStyle windowStyle: imageCropWorkflow.windowStyle
wallColor: Theme.palette.statusAppLayout.backgroundColor wallColor: Theme.palette.statusAppLayout.backgroundColor
wallTransparency: 1 wallTransparency: 1
clip:true clip:true
@ -100,7 +100,7 @@ Item {
icon.name: "edit" icon.name: "edit"
readonly property real rotationRadius: roundedImage ? parent.width/2 : bannerEditor.radius readonly property real rotationRadius: roundedImage ? parent.width/2 : imageCropEditor.radius
transform: [ transform: [
Translate { Translate {
x: -editButton.width/2 - d.buttonsInsideOffset x: -editButton.width/2 - d.buttonsInsideOffset
@ -119,19 +119,19 @@ Item {
] ]
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
onClicked: bannerCropperModal.chooseImageToCrop() onClicked: imageCropWorkflow.chooseImageToCrop()
} }
} }
Rectangle { Rectangle {
id: bannerEditor id: imageCropEditor
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
visible: root.state === d.noImageState visible: root.state === d.noImageState
radius: roundedImage ? Math.max(width, height)/2 : bannerPreview.radius radius: roundedImage ? Math.max(width, height)/2 : croppedPreview.radius
color: Style.current.inputBackground color: Style.current.inputBackground
StatusRoundButton { StatusRoundButton {
@ -139,7 +139,7 @@ Item {
icon.name: "add" icon.name: "add"
readonly property real rotationRadius: root.roundedImage ? parent.width/2 : bannerEditor.radius readonly property real rotationRadius: root.roundedImage ? parent.width/2 : imageCropEditor.radius
transform: [ transform: [
Translate { Translate {
x: -addButton.width/2 - d.buttonsInsideOffset x: -addButton.width/2 - d.buttonsInsideOffset
@ -159,16 +159,16 @@ Item {
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
onClicked: bannerFileDialog.open() onClicked: imageCropWorkflow.chooseImageToCrop()
z: bannerEditor.z + 1 z: imageCropEditor.z + 1
} }
BannerCropperModal { ImageCropWorkflow {
id: bannerCropperModal id: imageCropWorkflow
onImageCropped: { onImageCropped: {
bannerPreview.source = image croppedPreview.source = image
bannerPreview.setCropRect(cropRect) croppedPreview.setCropRect(cropRect)
root.userSelectedImage = true root.userSelectedImage = true
} }
} }

14
ui/imports/shared/popups/BannerCropperModal.qml → ui/imports/shared/popups/ImageCropWorkflow.qml
View File

@ -13,8 +13,8 @@ import utils 1.0
Item { Item {
id: root id: root
property alias aspectRatio: bannerCropper.aspectRatio property alias aspectRatio: imageCropper.aspectRatio
property alias windowStyle: bannerCropper.windowStyle property alias windowStyle: imageCropper.windowStyle
/*required*/ property string imageFileDialogTitle: "" /*required*/ property string imageFileDialogTitle: ""
/*required*/ property string title: "" /*required*/ property string title: ""
/*required*/ property string acceptButtonText: "" /*required*/ property string acceptButtonText: ""
@ -30,11 +30,11 @@ Item {
id: fileDialog id: fileDialog
title: root.imageFileDialogTitle title: root.imageFileDialogTitle
folder: root.userSelectedImage ? bannerCropper.source.substr(0, bannerCropper.source.lastIndexOf("/")) : shortcuts.pictures folder: root.userSelectedImage ? imageCropper.source.substr(0, imageCropper.source.lastIndexOf("/")) : shortcuts.pictures
nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.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] imageCropper.source = fileDialog.fileUrls[0]
imageCropperModal.open() imageCropperModal.open()
} }
} }
@ -50,7 +50,7 @@ Item {
width: root.roundedImage ? 480 : 580 width: root.roundedImage ? 480 : 580
StatusImageCropPanel { StatusImageCropPanel {
id: bannerCropper id: imageCropper
implicitHeight: root.roundedImage ? 350 : 370 implicitHeight: root.roundedImage ? 350 : 370
@ -71,10 +71,10 @@ Item {
StatusButton { StatusButton {
text: root.acceptButtonText text: root.acceptButtonText
enabled: bannerCropper.sourceSize.width > 0 && bannerCropper.sourceSize.height > 0 enabled: imageCropper.sourceSize.width > 0 && imageCropper.sourceSize.height > 0
onClicked: { onClicked: {
root.imageCropped(bannerCropper.source, bannerCropper.cropRect) root.imageCropped(imageCropper.source, imageCropper.cropRect)
imageCropperModal.close() imageCropperModal.close()
} }
} }

2
ui/imports/shared/popups/qmldir
View File

@ -15,4 +15,4 @@ UserStatusContextMenu 1.0 UserStatusContextMenu.qml
SignTransactionModal 1.0 SignTransactionModal.qml SignTransactionModal 1.0 SignTransactionModal.qml
SelectAccountModal 1.0 SelectAccountModal.qml SelectAccountModal 1.0 SelectAccountModal.qml
ProfilePopup 1.0 ProfilePopup.qml ProfilePopup 1.0 ProfilePopup.qml
BannerCropperModal 1.0 BannerCropperModal.qml ImageCropWorkflow 1.0 ImageCropWorkflow.qml