From 7bcf42a7eddeba4603cc6c00d554466204eaf82d Mon Sep 17 00:00:00 2001 From: Noelia Date: Thu, 4 May 2023 12:01:59 +0200 Subject: [PATCH] feat(MintTokens): Artwork image field missing cropping tool Replaced basic image selector to `EditCroppedImagePanel` component in mint token workflow. Extended `NoImageUploadedPanel` to allow custom texts and some sizing improvements. UI part of #10317 --- .../community/CommunityBannerPicker.qml | 2 +- .../CommunityMintTokensSettingsPanel.qml | 1 + .../communities/CommunityCollectibleView.qml | 16 +++++- .../CommunityNewCollectibleView.qml | 52 +++++++++++++------ .../shared/panels/NoImageUploadedPanel.qml | 51 ++++++++++++++---- 5 files changed, 92 insertions(+), 30 deletions(-) diff --git a/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml b/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml index 70dcb2a3e8..ca99b3f299 100644 --- a/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml +++ b/ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml @@ -57,7 +57,7 @@ Item { anchors.centerIn: parent visible: !editor.userSelectedImage && !root.imageData - showARHint: true + showAdditionalInfo: true } } } diff --git a/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml b/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml index 52e16cf3f6..b204e433b1 100644 --- a/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml @@ -192,6 +192,7 @@ SettingsPageLayout { preview: true, name, artworkSource, + artworkCropRect, symbol, description, supplyAmount, diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml index 108c3a6ba9..62e0e4e89a 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml @@ -1,5 +1,6 @@ -import QtQuick 2.14 +import QtQuick 2.15 import QtQuick.Layouts 1.14 +import QtGraphicalEffects 1.0 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -19,6 +20,7 @@ StatusScrollView { // Collectible object properties: property alias artworkSource: image.source + property rect artworkCropRect property alias symbol: symbolBox.value property alias description: descriptionItem.text property alias chainName: chainText.text @@ -78,14 +80,24 @@ StatusScrollView { Rectangle { Layout.preferredHeight: d.imageSelectorRectSize Layout.preferredWidth: Layout.preferredHeight + radius: 8 - color: Theme.palette.baseColor2 + color:Theme.palette.baseColor2 + clip: true Image { id: image anchors.fill: parent fillMode: Image.PreserveAspectFit + visible: false + sourceClipRect: root.artworkCropRect ? root.artworkCropRect : undefined + } + + OpacityMask { + anchors.fill: image + source: image + maskSource: parent } } diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml index a531fba743..e76f6e8743 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml @@ -10,8 +10,9 @@ import StatusQ.Core.Utils 0.1 import utils 1.0 -import "../../../Wallet/controls" +import AppLayouts.Wallet.controls 1.0 import shared.panels 1.0 +import shared.popups 1.0 StatusScrollView { id: root @@ -26,7 +27,8 @@ StatusScrollView { readonly property alias notTransferable: transferableChecker.checked readonly property alias selfDestruct: selfDestructChecker.checked readonly property int supplyAmount: supplyInput.text ? parseInt(supplyInput.text) : 0 - property url artworkSource + property alias artworkSource: editor.source + property alias artworkCropRect: editor.cropRect property int chainId property string chainName property string chainIcon @@ -57,7 +59,7 @@ StatusScrollView { && (root.infiniteSupply || (!root.infiniteSupply && root.supplyAmount > 0)) - readonly property int imageSelectorRectWidth: 280 + readonly property int imageSelectorRectWidth: 290 } contentWidth: mainLayout.width @@ -70,16 +72,31 @@ StatusScrollView { width: root.viewWidth spacing: Style.current.padding - StatusImageSelector { - Layout.preferredHeight: d.imageSelectorRectWidth + headerHeight - Layout.preferredWidth: d.imageSelectorRectWidth + buttonsInsideOffset - labelText: qsTr("Artwork") - uploadText: qsTr("Drag and Drop or Upload Artwork") - additionalText: qsTr("Images only") - acceptedImageExtensions: Constants.acceptedDragNDropImageExtensions - file: root.artworkSource + StatusBaseText { + elide: Text.ElideRight + font.pixelSize: Theme.primaryTextFontSize + text: qsTr("Artwork") + } - onFileSelected: root.artworkSource = file + EditCroppedImagePanel { + id: editor + + Layout.preferredHeight: d.imageSelectorRectWidth + Layout.preferredWidth: d.imageSelectorRectWidth + + title: qsTr("Collectible artwork") + acceptButtonText: qsTr("Upload collectible artwork") + roundedImage: false + + NoImageUploadedPanel { + width: parent.width + anchors.centerIn: parent + visible: !editor.userSelectedImage + uploadText: qsTr("Drag and Drop or Upload Artwork") + additionalText: qsTr("Images only") + showAdditionalInfo: true + additionalTextPixelSize: Theme.secondaryTextFontSize + } } CustomStatusInput { @@ -280,11 +297,12 @@ StatusScrollView { isChainVisible: false multiSelection: false - onToggleNetwork: (network) => { - root.chainId = network.chainId - root.chainName = network.chainName - root.chainIcon = network.iconUrl - } + onToggleNetwork: (network) => + { + root.chainId = network.chainId + root.chainName = network.chainName + root.chainIcon = network.iconUrl + } } } } diff --git a/ui/imports/shared/panels/NoImageUploadedPanel.qml b/ui/imports/shared/panels/NoImageUploadedPanel.qml index 85204a30e0..04f538ccca 100644 --- a/ui/imports/shared/panels/NoImageUploadedPanel.qml +++ b/ui/imports/shared/panels/NoImageUploadedPanel.qml @@ -1,4 +1,5 @@ import QtQuick 2.14 +import QtQuick.Controls 2.13 import QtQuick.Layouts 1.14 import utils 1.0 @@ -10,16 +11,40 @@ import StatusQ.Core.Theme 0.1 /*! /brief Image icon and ulopad text hints for banner and logo */ -Item { +Control { id: root - implicitWidth: mainLayout.implicitWidth - implicitHeight: mainLayout.implicitHeight + /*! + \qmlproperty alias StatusImageSelector::uploadText. + This property holds the main image upload text value. + */ + property alias uploadText: uploadText.text - property bool showARHint: false + /*! + \qmlproperty alias StatusImageSelector::additionalText. + This property holds an additional text value. + */ + property alias additionalText: additionalText.text - ColumnLayout { - id: mainLayout + /*! + \qmlproperty alias StatusImageSelector::showAdditionalInfo. + This property holds if the additional text is shown or not. + */ + property alias showAdditionalInfo: additionalText.visible + + /*! + \qmlproperty alias StatusImageSelector::additionalTextPixelSize. + This property holds the additional text font pixel size value. + */ + property alias additionalTextPixelSize: additionalText.font.pixelSize + + QtObject { + id: d + + readonly property int imageSelectorPadding: 75 + } + + contentItem: ColumnLayout { Image { id: imageImg @@ -34,20 +59,26 @@ Item { StatusBaseText { id: uploadText + text: qsTr("Upload") Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.topMargin: 5 - font.pixelSize: 15 + Layout.preferredWidth: root.width - 2 * d.imageSelectorPadding + font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.baseColor1 + wrapMode: Text.WordWrap + lineHeight: 1.2 + horizontalAlignment: Text.AlignHCenter } StatusBaseText { - id: optimalARText + id: additionalText + text: qsTr("Wide aspect ratio is optimal") Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter - visible: root.showARHint + visible: false Layout.topMargin: 5 - font.pixelSize: 15 + font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.baseColor1 } }