status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Noelia 2023-05-04 12:01:59 +02:00 committed by Noelia
parent 1bb4cc7258
commit 7bcf42a7ed
5 changed files with 92 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml
View File

@ -57,7 +57,7 @@ Item {
anchors.centerIn: parent
visible: !editor.userSelectedImage && !root.imageData
showARHint: true
showAdditionalInfo: true
}
}
}

1
ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml
View File

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

16
ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml
View File

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

52
ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml
View File

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

51
ui/imports/shared/panels/NoImageUploadedPanel.qml
View File

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