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

Closes #10609
2023-05-16 18:07:21 +03:00 · 2023-05-16 18:07:21 +03:00 · 06b4b28145
parent 12faa752bd
commit 06b4b28145
5 changed files with 143 additions and 48 deletions
--- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml
+++ b/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 artworkCropRect: editor.cropRect
+    property alias artworkSource: dropAreaItem.artworkSource
+    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 {
-            id: editor
-
+        DropAndEditImagePanel {
+            id: dropAreaItem
+            Layout.fillWidth: true
            Layout.preferredHeight: d.imageSelectorRectWidth
-            Layout.preferredWidth: d.imageSelectorRectWidth
-
-            title: qsTr("Collectible artwork")
+            editorAnchorLeft: !d.isAssetView
+            editorRoundedImage: d.isAssetView
+            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
--- a/ui/imports/shared/panels/DropAndEditImagePanel.qml
+++ b/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
+        }
+    }
+}
--- a/ui/imports/shared/panels/EditCroppedImagePanel.qml
+++ b/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
--- a/ui/imports/shared/panels/NoImageUploadedPanel.qml
+++ b/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
--- a/ui/imports/shared/panels/qmldir
+++ b/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