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

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

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

@@ -192,6 +192,7 @@ SettingsPageLayout {
                                       preview: true,
                                       name,
                                       artworkSource,
+                                      artworkCropRect,
                                       symbol,
                                       description,
                                       supplyAmount,

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

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

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