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
2022-05-23 20:36:48 +03:00 · 2022-05-23 20:36:48 +03:00 · 7c74a0942d
parent e7dff15a97
commit 7c74a0942d
9 changed files with 34 additions and 106 deletions
--- a/src/app/modules/main/chat_section/controller.nim
+++ b/src/app/modules/main/chat_section/controller.nim
@ -376,8 +376,7 @@ proc editCommunity*(
    description: string,
    access: int,
    color: string,
-    imageUrl: string,
-    aX: int, aY: int, bX: int, bY: int,
+    logoJsonStr: string,
    bannerJsonStr: string,
    historyArchiveSupportEnabled: bool,
    pinMessageAllMembersEnabled: bool) =
@ -387,8 +386,7 @@ proc editCommunity*(
    description,
    access,
    color,
-    imageUrl,
-    aX, aY, bX, bY,
+    logoJsonStr,
    bannerJsonStr,
    historyArchiveSupportEnabled,
    pinMessageAllMembersEnabled)
--- a/src/app/modules/main/chat_section/io_interface.nim
+++ b/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.} =
--- a/src/app/modules/main/chat_section/module.nim
+++ b/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,
-                        aX: int, aY: int, bX: int, bY: int,
+                        logoJsonStr: string,
                        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()
--- a/src/app/modules/main/chat_section/view.nim
+++ b/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.} =
-    self.delegate.editCommunity(name, description, access, color, imagePath, aX, aY, bX, bY, bannerJsonData, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)
+  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, logoJsonData, bannerJsonData, historyArchiveSupportEnabled, pinMessageAllMembersEnabled)

  proc exportCommunity*(self: View): string {.slot.} =
    self.delegate.exportCommunity()
--- a/src/app_service/service/community/service.nim
+++ b/src/app_service/service/community/service.nim
@ -570,21 +570,25 @@ QtObject:
      description: string,
      access: int,
      color: string,
-      imageUrl: string,
-      aX: int, aY: int, bX: int, bY: int,
+      logoJsonStr: string,
      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,
-        aX, aY, bX, bY,
+        logoJson["imagePath"].getStr(),
+        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)
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml
+++ b/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
-    readonly property alias imageAy: imageCropperModal.aY
-    readonly property alias imageBx: imageCropperModal.bX
-    readonly property alias imageBy: imageCropperModal.bY
+    property alias logoImagePath: logoEditor.source
+    property alias logoCropRect: logoEditor.cropRect
    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 {
-                Layout.fillWidth: true
+            EditCroppedImagePanel {
+                id: logoEditor

-                implicitHeight: addImageButton.height + 32
+                Layout.preferredWidth: 128
+                Layout.preferredHeight: Layout.preferredWidth / aspectRatio
+                Layout.alignment: Qt.AlignHCenter

-                Rectangle {
-                    id: addImageButton
+                imageFileDialogTitle: qsTr("Choose an image as logo")
+                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 {
-                        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"
-                    }
+                    visible: !logoEditor.userSelectedImage && !root.logoImageData
                }
            }

--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml
+++ b/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) ||
--- a/ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml
+++ b/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,
-                        item.imageAx,
-                        item.imageAy,
-                        item.imageBx,
-                        item.imageBy,
+                        JSON.stringify({imagePath: String(item.logoImagePath).replace("file://", ""), cropRect: item.logoCropRect}),
                        JSON.stringify({imagePath: String(item.bannerPath).replace("file://", ""), cropRect: item.bannerCropRect}),
                        item.historyArchiveSupportToggle,
                        false /*TODO port the modal implementation*/
--- a/ui/imports/shared/popups/BannerCropperModal.qml
+++ b/ui/imports/shared/popups/BannerCropperModal.qml
@ -52,7 +52,7 @@ Item {
        StatusImageCropPanel {
            id: bannerCropper

-            implicitHeight: 350
+            implicitHeight: root.roundedImage ? 350 : 370

            anchors {
                 fill: parent