From 7d6a2bae5fa2a0aa419fab208bd577f29ea23574 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Tue, 25 Apr 2023 11:40:00 +0200 Subject: [PATCH] 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 --- .../src/StatusQ/Controls/StatusImageCrop.qml | 5 +++ .../community/CommunityBannerPicker.qml | 4 +- .../community/CommunityLogoPicker.qml | 4 +- .../CommunityOverviewSettingsPanel.qml | 2 + .../shared/panels/EditCroppedImagePanel.qml | 39 +++++++++++++++---- 5 files changed, 41 insertions(+), 13 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml b/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml index 0b07decfdf..d7a31122fc 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusImageCrop.qml +++ b/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) diff --git a/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml b/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml index cc5296c894..70dcb2a3e8 100644 --- a/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml +++ b/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 diff --git a/ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml b/ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml index 5c73959ec8..7f01e3ac58 100644 --- a/ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml +++ b/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 diff --git a/ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml b/ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml index def6d72194..65dd1213c1 100644 --- a/ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml +++ b/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) }) diff --git a/ui/imports/shared/panels/EditCroppedImagePanel.qml b/ui/imports/shared/panels/EditCroppedImagePanel.qml index 63af0f7ee7..d895524fae 100644 --- a/ui/imports/shared/panels/EditCroppedImagePanel.qml +++ b/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)) + } + } + } }