fix: community logo/banner edit icon fixes

- move the add/edit FAB icon to the topright corner as designed
- prepare UI changes for being able to delete banner/logo (missing impl
in status-go)

Fixes: #9680
This commit is contained in:
Lukáš Tinkl 2023-04-25 11:40:00 +02:00 committed by Lukáš Tinkl
parent 70e8370aae
commit 7d6a2bae5f
5 changed files with 41 additions and 13 deletions

View File

@ -163,6 +163,11 @@ Item {
\note If the new rect has a diferent area the crop window will adjust to the new AR
*/
function setCropRect(newRect /*rect*/) {
if (newRect.x === 0 && newRect.y === 0 && newRect.width === 0 && newRect.height === 0) { // reset
d.cropRect = newRect
return
}
if(newRect.width === 0 || newRect.height === 0)
return
if(root.sourceSize.width === 0 || root.sourceSize.height === 0)

View File

@ -21,7 +21,7 @@ Item {
property alias source: editor.source
property alias cropRect: editor.cropRect
property string imageData
property alias imageData: editor.dataImage
implicitHeight: layout.childrenRect.height
@ -53,8 +53,6 @@ Item {
roundedImage: false
aspectRatio: 375/184
dataImage: root.imageData
NoImageUploadedPanel {
anchors.centerIn: parent

View File

@ -21,7 +21,7 @@ Item {
property alias source: editor.source
property alias cropRect: editor.cropRect
property string imageData
property alias imageData: editor.dataImage
implicitHeight: layout.childrenRect.height
@ -48,8 +48,6 @@ Item {
title: qsTr("Community logo")
acceptButtonText: qsTr("Make this my Community logo")
dataImage: root.imageData
NoImageUploadedPanel {
anchors.centerIn: parent

View File

@ -207,8 +207,10 @@ StackLayout {
root.pinMessagesEnabled != options.pinMessagesEnabled ||
root.color != color ||
root.selectedTags != selectedTags ||
root.logoImageData != logoImageData ||
logoImagePath.length > 0 ||
isValidRect(logoCropRect) ||
root.bannerImageData != bannerImageData ||
bannerPath.length > 0 ||
isValidRect(bannerCropRect)
})

View File

@ -111,28 +111,30 @@ Item {
StatusRoundButton {
id: editButton
icon.name: "edit"
icon.name: "edit_pencil"
readonly property real rotationRadius: roundedImage ? parent.width/2 : imageCropEditor.radius
readonly property real rotationRadius: root.roundedImage ? parent.width/2 : imageCropEditor.radius
transform: [
Translate {
x: -editButton.width/2 - d.buttonsInsideOffset
y: -editButton.height/2 - d.buttonsInsideOffset
y: -editButton.height/2 + d.buttonsInsideOffset
},
Rotation { angle: -editRotationTransform.angle },
Rotation {
id: editRotationTransform
angle: 225
angle: 135
origin.x: editButton.rotationRadius
},
Translate {
x: root.roundedImage ? 0 : editButton.parent.width - 2 * editButton.rotationRadius
y: (root.roundedImage ? 0 : editButton.parent.height - 2 * editButton.rotationRadius) + editButton.rotationRadius
y: editButton.rotationRadius
}
]
type: StatusRoundButton.Type.Secondary
onClicked: imageCropWorkflow.chooseImageToCrop()
onClicked: chooseImageToCrop()
// TODO uncomment when status-go supports deleting images:
// onClicked: imageEditMenu.popup(this, mouse.x, mouse.y)
}
}
@ -173,7 +175,7 @@ Item {
type: StatusRoundButton.Type.Secondary
onClicked: imageCropWorkflow.chooseImageToCrop()
onClicked: chooseImageToCrop()
z: imageCropEditor.z + 1
}
@ -199,4 +201,27 @@ Item {
sourceComponent: root.backgroundComponent
}
}
StatusMenu {
id: imageEditMenu
width: 200
StatusAction {
text: qsTr("Select different image")
assetSettings.name: "image"
onTriggered: chooseImageToCrop()
}
StatusAction {
text: qsTr("Remove image")
type: StatusAction.Danger
assetSettings.name: "delete"
onTriggered: {
root.userSelectedImage = false
root.dataImage = ""
root.source = ""
croppedPreview.setCropRect(Qt.rect(0, 0, 0, 0))
}
}
}
}