[CommunityPermissions]: Added drag/drop image panel as per new design

Closes #10609

ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml

@@ -27,8 +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 alias artworkSource: editor.source
+    property alias artworkSource: dropAreaItem.artworkSource
-    property alias artworkCropRect: editor.cropRect
+    property alias artworkCropRect: dropAreaItem.artworkCropRect
     property int chainId
     property string chainName
     property string chainIcon
@@ -52,6 +52,7 @@ StatusScrollView {
     QtObject {
         id: d
 
+        property bool isAssetView: (optionsTab.currentIndex === 1)
         readonly property bool isFullyFilled: root.artworkSource.toString().length > 0
                                               && !!root.name
                                               && !!root.symbol
@@ -59,7 +60,7 @@ StatusScrollView {
                                               && (root.infiniteSupply || (!root.infiniteSupply && root.supplyAmount > 0))
 
 
-        readonly property int imageSelectorRectWidth: 290
+        readonly property int imageSelectorRectWidth: d.isAssetView ? 128 : 290
     }
 
     contentWidth: mainLayout.width
@@ -72,32 +73,39 @@ StatusScrollView {
         width: root.viewWidth
         spacing: Style.current.padding
 
+        StatusTabBar {
+            //TODO replace with tab bar from design when this
+            //https://github.com/status-im/status-desktop/issues/10623 is done
+            id: optionsTab
+            StatusTabButton {
+                id: assetBtn
+                width: implicitWidth
+                text: qsTr("Collectibles")
+            }
+            StatusTabButton {
+                id: collectiblesBtn
+                width: implicitWidth
+                text: qsTr("Assets")
+            }
+        }
+
         StatusBaseText {
             elide: Text.ElideRight
             font.pixelSize: Theme.primaryTextFontSize
             text: qsTr("Artwork")
         }
 
-        EditCroppedImagePanel {
+        DropAndEditImagePanel {
-            id: editor
+            id: dropAreaItem
-
+            Layout.fillWidth: true
             Layout.preferredHeight: d.imageSelectorRectWidth
-            Layout.preferredWidth: d.imageSelectorRectWidth
+            editorAnchorLeft: !d.isAssetView
-
+            editorRoundedImage: d.isAssetView
-            title: qsTr("Collectible artwork")
+            uploadTextLabel.uploadText: d.isAssetView ? qsTr("Upload") : qsTr("Drag and Drop or Upload Artwork")
+            uploadTextLabel.additionalText: qsTr("Images only")
+            uploadTextLabel.showAdditionalInfo: !d.isAssetView
+            editorTitle: qsTr("Collectible artwork")
             acceptButtonText: qsTr("Upload collectible artwork")
-            roundedImage: false
-            isDraggable: true
-
-            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 {
@@ -178,7 +186,7 @@ StatusScrollView {
 
         CustomSwitchRowComponent {
             id: transferableChecker
-
+            visible: (optionsTab.currentIndex === 0)
             label: checked ? qsTr("Not transferable (Soulbound)") : qsTr("Transferable")
             description: qsTr("If enabled, the token is locked to the first address it is sent to and can never be transferred to another address. Useful for tokens that represent Admin permissions")
             checked: true
@@ -186,12 +194,19 @@ StatusScrollView {
 
         CustomSwitchRowComponent {
             id: selfDestructChecker
-
+            visible: (optionsTab.currentIndex === 0)
             label: qsTr("Remotely destructible")
             description: qsTr("Enable to allow you to destroy tokens remotely. Useful for revoking permissions from individuals")
             checked: true
         }
 
+        CustomStatusInput {
+            visible: (optionsTab.currentIndex === 1)
+            label: qsTr("Decimals")
+            secondaryLabel: "Max 10"
+            placeholderText: qsTr("2")
+        }
+
         StatusButton {
             Layout.preferredHeight: 44
             Layout.alignment: Qt.AlignHCenter

ui/imports/shared/panels/DropAndEditImagePanel.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14
+import QtQuick.Dialogs 1.3
+
+import utils 1.0
+import shared.panels 1.0
+import shared.popups 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: root
+
+    property bool hasImage: false
+    property bool isDraggable: true
+    property bool containsDrag: dropArea.containsDrag
+    property bool editorAnchorLeft: true
+    property alias uploadTextLabel: textLabel
+    property alias editorRoundedImage: editor.roundedImage
+    property alias artworkSource: editor.source
+    property alias artworkCropRect: editor.cropRect
+    property alias editorTitle: editor.title
+    property alias acceptButtonText: editor.acceptButtonText
+
+    Item {
+        id: dropAreaItem
+        anchors.fill: parent
+        Rectangle {
+            anchors.fill: parent
+            opacity: root.containsDrag ? 1 : 0
+            Behavior on opacity { NumberAnimation { duration: 100 } }
+            color: "#33869eff"
+            border.color: Theme.palette.primaryColor1
+            radius: Style.current.radius
+            NoImageUploadedPanel {
+                visible: !editor.userSelectedImage
+                anchors.centerIn: parent
+                imgColor: Theme.palette.primaryColor1
+                uploadTextColor: Theme.palette.primaryColor1
+                uploadText: qsTr("Drop It!")
+            }
+        }
+        DropArea {
+            id: dropArea
+            anchors.fill: parent
+            enabled: root.isDraggable
+            onEntered: {
+                root.hasImage = (drag.urls.length > 0);
+            }
+            onDropped: {
+                editor.cropImage(drop.urls[0]);
+            }
+        }
+    }
+
+    EditCroppedImagePanel {
+        id: editor
+        width: parent.height
+        height: width
+        anchors.left: root.editorAnchorLeft ? parent.left : undefined
+        anchors.horizontalCenter: !root.editorAnchorLeft ? parent.horizontalCenter : undefined
+        visible: editor.userSelectedImage || !(root.containsDrag && root.hasImage)
+        opacity: visible ? ((root.containsDrag && root.hasImage) ? .4 : 1) : 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+        editButtonVisible: !(root.containsDrag && root.hasImage)
+
+        NoImageUploadedPanel {
+            id: textLabel
+            width: parent.width
+            anchors.centerIn: parent
+            visible: !editor.userSelectedImage
+            additionalTextPixelSize: Theme.secondaryTextFontSize
+        }
+    }
+}

ui/imports/shared/panels/EditCroppedImagePanel.qml

@@ -27,6 +27,7 @@ Item {
     /*required*/ property alias imageFileDialogTitle: imageCropWorkflow.imageFileDialogTitle
     /*required*/ property alias title: imageCropWorkflow.title
     /*required*/ property alias acceptButtonText: imageCropWorkflow.acceptButtonText
+    property alias editButtonVisible: editButton.visible
 
     property string dataImage: ""
 
@@ -37,7 +38,9 @@ Item {
 
     readonly property alias cropWorkflow : imageCropWorkflow
 
-    property bool isDraggable: false
+    function cropImage(file) {
+        imageCropWorkflow.cropImage(file);
+    }
 
     function chooseImageToCrop() {
         imageCropWorkflow.chooseImageToCrop()
@@ -149,22 +152,11 @@ Item {
             visible: root.state === d.noImageState
             radius: roundedImage ? Math.max(width, height)/2 : croppedPreview.radius
             color: Style.current.inputBackground
-            states: [
-                State {
-                    when: dropArea.containsDrag
-                    PropertyChanges {target: imageCropEditor; border.color: Theme.palette.primaryColor1 }
-                },
-                State {
-                    when: !dropArea.containsDrag
-                    PropertyChanges {target: imageCropEditor; border.color: Theme.palette.baseColor2 }
-                }
-            ]
 
             StatusRoundButton {
                 id: addButton
 
                 icon.name: "add"
-
                 readonly property real rotationRadius: root.roundedImage ? parent.width/2 : imageCropEditor.radius
 
                 transform: [
@@ -213,18 +205,6 @@ Item {
         }
     }
 
-    DropArea {
-        id: dropArea
-
-        anchors.fill: parent
-        enabled: root.isDraggable
-        onDropped: {
-            if (drop.urls.length > 0) {
-                imageCropWorkflow.cropImage(drop.urls[0])
-            }
-        }
-    }
-
     StatusMenu {
         id: imageEditMenu
         width: 200

ui/imports/shared/panels/NoImageUploadedPanel.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.13
 
 import utils 1.0
 import shared.panels 1.0
@@ -38,6 +39,18 @@ Control {
     */
     property alias additionalTextPixelSize: additionalText.font.pixelSize
 
+    /*!
+       \qmlproperty color StatusImageSelector::uploadTextColor.
+       This property sets the upload text color.
+    */
+    property color uploadTextColor: Theme.palette.baseColor1
+
+    /*!
+       \qmlproperty color StatusImageSelector::imgColor.
+       This property sets the image color.
+    */
+    property color imgColor: Theme.palette.baseColor1
+
     QtObject {
         id: d
 
@@ -55,6 +68,10 @@ Control {
             sourceSize.height: height || undefined
             fillMode: Image.PreserveAspectFit
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+            layer.enabled: !Qt.colorEqual(root.imgColor, Theme.palette.baseColor1)
+            layer.effect: ColorOverlay {
+                color: root.imgColor
+            }
         }
 
         StatusBaseText {
@@ -65,7 +82,7 @@ Control {
             Layout.topMargin: 5
             Layout.preferredWidth: root.width - 2 * d.imageSelectorPadding
             font.pixelSize: Theme.primaryTextFontSize
-            color: Theme.palette.baseColor1
+            color: root.uploadTextColor
             wrapMode: Text.WordWrap
             lineHeight: 1.2
             horizontalAlignment: Text.AlignHCenter

ui/imports/shared/panels/qmldir

@@ -26,3 +26,4 @@ SplitViewHandle 1.0 SplitViewHandle.qml
 StatusAssetSelector 1.0 StatusAssetSelector.qml
 StyledText 1.0 StyledText.qml
 TextWithLabel 1.0 TextWithLabel.qml
+DropAndEditImagePanel 1.0 DropAndEditImagePanel.qml