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

ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml

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

ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml

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

ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml

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

ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml

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

ui/imports/shared/panels/EditCroppedImagePanel.qml

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