feat(Community/Logo): use crop control for community Logo

Note that this doesn't refactor status-go to use CroppedImage
for the community logo.

fixes: 5404

src/app/modules/main/chat_section/controller.nim

@@ -376,8 +376,7 @@ proc editCommunity*(
     description: string,
     access: int,
     color: string,
-    imageUrl: string,
+    logoJsonStr: string,
-    aX: int, aY: int, bX: int, bY: int,
     bannerJsonStr: string,
     historyArchiveSupportEnabled: bool,
     pinMessageAllMembersEnabled: bool) =
@@ -387,8 +386,7 @@ proc editCommunity*(
     description,
     access,
     color,
-    imageUrl,
+    logoJsonStr,
-    aX, aY, bX, bY,
     bannerJsonStr,
     historyArchiveSupportEnabled,
     pinMessageAllMembersEnabled)

src/app/modules/main/chat_section/io_interface.nim

@@ -243,7 +243,7 @@ method removeUserFromCommunity*(self: AccessInterface, pubKey: string) {.base.}
 method banUserFromCommunity*(self: AccessInterface, pubKey: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method editCommunity*(self: AccessInterface, name: string, description: string, access: int, color: string, imagePath: string, aX: int, aY: int, bX: int, bY: int, bannerJsonData: string, historyArchiveSupportEnabled: bool, pinMessageAllMembersEnabled: bool) {.base.} =
+method editCommunity*(self: AccessInterface, name: string, description: string, access: int, color: string, logoJsonData: string, bannerJsonData: string, historyArchiveSupportEnabled: bool, pinMessageAllMembersEnabled: bool) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 method exportCommunity*(self: AccessInterface): string {.base.} =

src/app/modules/main/chat_section/module.nim

@@ -726,12 +726,11 @@ method banUserFromCommunity*(self: Module, pubKey: string) =
 
 method editCommunity*(self: Module, name: string, description: string,
                         access: int, color: string,
-                        imagePath: string,
+                        logoJsonStr: string,
-                        aX: int, aY: int, bX: int, bY: int,
                         bannerJsonStr: string,
                         historyArchiveSupportEnabled: bool,
                         pinMessageAllMembersEnabled: bool) =
-  self.controller.editCommunity(name, description, access, color, imagePath, aX, aY, bX, bY, bannerJsonStr, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)
+  self.controller.editCommunity(name, description, access, color, logoJsonStr, bannerJsonStr, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)
 
 method exportCommunity*(self: Module): string =
   self.controller.exportCommunity()

src/app/modules/main/chat_section/view.nim

@@ -244,8 +244,8 @@ QtObject:
   proc banUserFromCommunity*(self: View, pubKey: string) {.slot.} =
     self.delegate.banUserFromCommunity(pubKey)
 
-  proc editCommunity*(self: View, name: string, description: string, access: int, color: string, imagePath: string, aX: int, aY: int, bX: int, bY: int, bannerJsonData: string, historyArchiveSupportEnabled: bool, pinMessageAllMembersEnabled: bool) {.slot.} =
+  proc editCommunity*(self: View, name: string, description: string, access: int, color: string, logoJsonData: string, bannerJsonData: string, historyArchiveSupportEnabled: bool, pinMessageAllMembersEnabled: bool) {.slot.} =
-    self.delegate.editCommunity(name, description, access, color, imagePath, aX, aY, bX, bY, bannerJsonData, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)
+    self.delegate.editCommunity(name, description, access, color, logoJsonData, bannerJsonData, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)
 
   proc exportCommunity*(self: View): string {.slot.} =
     self.delegate.exportCommunity()

src/app_service/service/community/service.nim

@@ -570,21 +570,25 @@ QtObject:
       description: string,
       access: int,
       color: string,
-      imageUrl: string,
+      logoJsonStr: string,
-      aX: int, aY: int, bX: int, bY: int,
       bannerJsonStr: string,
       historyArchiveSupportEnabled: bool,
       pinMessageAllMembersEnabled: bool) =
     try:
-      var image = singletonInstance.utils.formatImagePath(imageUrl)
+      # TODO: refactor status-go to use `CroppedImage` for logo as it does for banner. This is an API breaking change, sync with mobile
+      let logoJson = parseJson(logoJsonStr)
+      let cropRectJson = logoJson["cropRect"]
       let response = status_go.editCommunity(
         id,
         name,
         description,
         access,
         color,
-        image,
+        logoJson["imagePath"].getStr(),
-        aX, aY, bX, bY,
+        int(cropRectJson["x"].getFloat()),
+        int(cropRectJson["y"].getFloat()),
+        int(cropRectJson["x"].getFloat() + cropRectJson["width"].getFloat()),
+        int(cropRectJson["y"].getFloat() + cropRectJson["height"].getFloat()),
         bannerJsonStr,
         historyArchiveSupportEnabled,
         pinMessageAllMembersEnabled)

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

@@ -23,12 +23,9 @@ Flickable {
 
     property alias name: nameInput.text
     property alias description: descriptionTextInput.text
-    property alias logoImagePath: addImageButton.selectedImage
     property string logoImageData: ""
-    readonly property alias imageAx: imageCropperModal.aX
+    property alias logoImagePath: logoEditor.source
-    readonly property alias imageAy: imageCropperModal.aY
+    property alias logoCropRect: logoEditor.cropRect
-    readonly property alias imageBx: imageCropperModal.bX
-    readonly property alias imageBy: imageCropperModal.bY
     property string bannerImageData: ""
     property alias bannerPath: bannerEditor.source
     property alias bannerCropRect: bannerEditor.cropRect
@@ -97,98 +94,31 @@ Flickable {
         ColumnLayout {
             spacing: 8
 
+            // Logo
+            //
             StatusBaseText {
                 text: qsTr("Community logo")
                 font.pixelSize: 15
                 color: Theme.palette.directColor1
             }
 
-            Item {
+            EditCroppedImagePanel {
-                Layout.fillWidth: true
+                id: logoEditor
 
-                implicitHeight: addImageButton.height + 32
+                Layout.preferredWidth: 128
+                Layout.preferredHeight: Layout.preferredWidth / aspectRatio
+                Layout.alignment: Qt.AlignHCenter
 
-                Rectangle {
+                imageFileDialogTitle: qsTr("Choose an image as logo")
-                    id: addImageButton
+                title: qsTr("Community logo")
+                acceptButtonText: qsTr("Make this my Community logo")
 
-                    property string selectedImage: ""
+                dataImage: root.logoImageData
 
+                NoImageUploadedPanel {
                     anchors.centerIn: parent
-                    color: imagePreview.visible ? "transparent" : Style.current.inputBackground
-                    width: 128
-                    height: width
-                    radius: width / 2
 
-                    FileDialog {
+                    visible: !logoEditor.userSelectedImage && !root.logoImageData
-                        id: imageDialog
-                        title: qsTr("Please choose an image")
-                        folder: shortcuts.pictures
-                        nameFilters: [qsTr("Image files (*.jpg *.jpeg *.png)")]
-                        onAccepted: {
-                            if(imageDialog.fileUrls.length > 0) {
-                                addImageButton.selectedImage = imageDialog.fileUrls[0]
-                                imageCropperModal.open()
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        id: imagePreviewCropper
-                        clip: true
-                        width: parent.width
-                        height: parent.height
-                        radius: parent.width / 2
-                        visible: !!addImageButton.selectedImage || !!root.logoImageData
-
-                        Image {
-                            id: imagePreview
-                            visible: !!addImageButton.selectedImage || !!root.logoImageData
-                            source: addImageButton.selectedImage
-                                        ? addImageButton.selectedImage
-                                        : root.logoImageData
-                            fillMode: Image.PreserveAspectFit
-                            width: parent.width
-                            height: parent.height
-                        }
-                        layer.enabled: true
-                        layer.effect: OpacityMask {
-                            maskSource: Rectangle {
-                                anchors.centerIn: parent
-                                width: imageCropperModal.width
-                                height: imageCropperModal.height
-                                radius: width / 2
-                            }
-                        }
-                    }
-
-                    NoImageUploadedPanel {
-                        anchors.centerIn: parent
-
-                        visible: !imagePreview.visible
-                    }
-
-                    StatusRoundButton {
-                        type: StatusRoundButton.Type.Secondary
-                        icon.name: "add"
-                        anchors.top: parent.top
-                        anchors.right: parent.right
-                        anchors.rightMargin: Style.current.halfPadding
-                        highlighted: sensor.containsMouse
-                    }
-
-                    MouseArea {
-                        id: sensor
-                        hoverEnabled: true
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: imageDialog.open()
-                    }
-
-                    ImageCropperModal {
-                        id: imageCropperModal
-                        selectedImage: addImageButton.selectedImage
-                        ratio: "1:1"
-                    }
                 }
             }
 

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

@@ -146,6 +146,7 @@ StackLayout {
                                        return root.name !== name ||
                                               root.description !== description ||
                                               logoImagePath.length > 0 ||
+                                              isValidRect(logoCropRect) ||
                                               root.color !== color ||
                                               bannerPath.length > 0 ||
                                               isValidRect(bannerCropRect) ||

ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml

@@ -129,11 +129,7 @@ StatusAppTwoPanelLayout {
                         Utils.filterXSS(item.description),
                         root.community.access,
                         item.color.toString().toUpperCase(),
-                        item.logoImagePath,
+                        JSON.stringify({imagePath: String(item.logoImagePath).replace("file://", ""), cropRect: item.logoCropRect}),
-                        item.imageAx,
-                        item.imageAy,
-                        item.imageBx,
-                        item.imageBy,
                         JSON.stringify({imagePath: String(item.bannerPath).replace("file://", ""), cropRect: item.bannerCropRect}),
                         item.historyArchiveSupportToggle,
                         false /*TODO port the modal implementation*/

ui/imports/shared/popups/BannerCropperModal.qml

@@ -52,7 +52,7 @@ Item {
         StatusImageCropPanel {
             id: bannerCropper
 
-            implicitHeight: 350
+            implicitHeight: root.roundedImage ? 350 : 370
 
             anchors {
                  fill: parent