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): Update `CommunityCollectibleView` according to new design 

- Title format changed. Now symbol is a title side text.
- Back button text changed.
- Description / boxes order changed.
- Boxes changed order and format.
- Warning description changed.

Closes #10601
This commit is contained in:
Noelia 2023-05-15 14:49:26 +02:00 committed by Noelia
parent 24f09e9e96
commit e0acf0f195
5 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
storybook/src/Models/MintedCollectiblesModel.qml
View File

@ -25,7 +25,7 @@ QtObject {
symbol: "SRW",
description: "Desc",
supply: 1,
availableTokens: 1,
remainingTokens: 1,
infiniteSupply: true,
transferable: false,
remoteSelfDestruct: true,
@ -41,7 +41,7 @@ QtObject {
symbol: "KAT",
description: "Desc",
supply: 10,
availableTokens: 5,
remainingTokens: 5,
infiniteSupply: false,
transferable: false,
remoteSelfDestruct: true,
@ -57,7 +57,7 @@ QtObject {
symbol: "MMM",
description: "Desc",
supply: 1,
availableTokens: 0,
remainingTokens: 0,
infiniteSupply: true,
transferable: false,
remoteSelfDestruct: true,
@ -73,7 +73,7 @@ QtObject {
symbol: "CPA",
description: "Desc",
supply: 5000,
availableTokens: 1500,
remainingTokens: 1500,
infiniteSupply: false,
transferable: false,
remoteSelfDestruct: false,

33
ui/app/AppLayouts/Chat/layouts/SettingsPageLayout.qml
View File

@ -13,7 +13,7 @@ Item {
id: root
// required
property string title
property alias title: itemHeader.text
property Component content
@ -29,6 +29,7 @@ Item {
property alias saveChangesText: settingsDirtyToastMessage.saveChangesText
property alias cancelChangesText: settingsDirtyToastMessage.cancelChangesText
property alias changesDetectedText: settingsDirtyToastMessage.changesDetectedText
property alias subTitle: sideTextHeader.text
readonly property Item contentItem: contentLoader.item
readonly property size settingsDirtyToastMessageImplicitSize:
@ -61,15 +62,29 @@ Item {
Layout.maximumWidth: root.headerWidth === 0 ? parent.width : (root.headerWidth + itemHeader.Layout.leftMargin)
Layout.preferredHeight: 56
StatusBaseText {
id: itemHeader
Layout.leftMargin: 64
Layout.fillWidth: true
RowLayout {
Layout.alignment: Qt.AlignVCenter
text: root.title
color: Theme.palette.directColor1
font.pixelSize: 26
font.bold: true
Layout.fillWidth: true
StatusBaseText {
id: itemHeader
Layout.leftMargin: 64
color: Theme.palette.directColor1
font.pixelSize: 26
font.bold: true
}
StatusBaseText {
id: sideTextHeader
Layout.leftMargin: 6
Layout.topMargin: 6
color: Theme.palette.baseColor1
font.pixelSize: 15
}
}
StatusButton {

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

@ -83,7 +83,6 @@ SettingsPageLayout {
readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
readonly property string newTokenButtonText: qsTr("Mint token")
readonly property string backButtonText: qsTr("Back")
readonly property string backTokensText: qsTr("Tokens")
property string accountAddress
property string accountName
@ -121,6 +120,7 @@ SettingsPageLayout {
State {
name: d.initialViewState
PropertyChanges {target: root; title: d.welcomePageTitle}
PropertyChanges {target: root; subTitle: ""}
PropertyChanges {target: root; previousPageName: ""}
PropertyChanges {target: root; headerButtonVisible: true}
PropertyChanges {target: root; headerButtonText: d.newTokenButtonText}
@ -129,6 +129,7 @@ SettingsPageLayout {
State {
name: d.newCollectibleViewState
PropertyChanges {target: root; title: d.newCollectiblePageTitle}
PropertyChanges {target: root; subTitle: ""}
PropertyChanges {target: root; previousPageName: d.backButtonText}
PropertyChanges {target: root; headerButtonVisible: false}
PropertyChanges {target: root; headerWidth: 0}
@ -141,7 +142,7 @@ SettingsPageLayout {
},
State {
name: d.collectibleViewState
PropertyChanges {target: root; previousPageName: d.backTokensText}
PropertyChanges {target: root; previousPageName: d.backButtonText}
PropertyChanges {target: root; headerButtonVisible: false}
PropertyChanges {target: root; headerWidth: 0}
PropertyChanges {target: root; footer: mintTokenFooter}
@ -244,6 +245,13 @@ SettingsPageLayout {
value: preview.name
}
Binding {
target: root
property: "subTitle"
value: preview.symbol
restoreMode: Binding.RestoreBindingOrValue
}
SignMintTokenTransactionPopup {
id: popup
@ -370,6 +378,13 @@ SettingsPageLayout {
value: view.name
}
Binding {
target: root
property: "subTitle"
value: view.symbol
restoreMode: Binding.RestoreBindingOrValue
}
Binding {
target: d
property: "tokenOwnersModel"
@ -403,6 +418,7 @@ SettingsPageLayout {
Bind { property: "description"; value: model.description },
Bind { property: "supplyAmount"; value: model.supply },
Bind { property: "infiniteSupply"; value: model.infiniteSupply },
Bind { property: "remainingTokens"; value: model.remainingTokens },
Bind { property: "selfDestruct"; value: model.remoteSelfDestruct },
Bind { property: "chainId"; value: model.chainId },
Bind { property: "chainName"; value: model.chainName },

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

@ -26,6 +26,7 @@ StatusScrollView {
property alias chainName: chainText.text
property string name
property int supplyAmount
property int remainingTokens
property bool infiniteSupply
property bool transferable
property bool selfDestruct
@ -52,6 +53,7 @@ StatusScrollView {
readonly property int imageSelectorRectSize: 280
readonly property int iconSize: 20
readonly property string infiniteSymbol: "∞"
}
contentWidth: mainLayout.width
@ -101,15 +103,6 @@ StatusScrollView {
}
}
StatusBaseText {
id: descriptionItem
Layout.fillWidth: true
wrapMode: TextEdit.WordWrap
font.pixelSize: Theme.primaryTextFontSize
lineHeight: 1.2
}
Flow {
spacing: Style.current.halfPadding
Layout.fillWidth: true
@ -119,7 +112,6 @@ StatusScrollView {
property string label
property string value
property bool leftAlignment: true
radius: 8
border.color: Theme.palette.baseColor2
@ -143,20 +135,28 @@ StatusScrollView {
StatusBaseText {
Layout.maximumWidth: mainLayout.width - Style.current.padding
Layout.alignment: previewBox.leftAlignment ? Qt.AlignLeft : Qt.AlignHCenter
text: previewBox.value
elide: Text.ElideRight
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.directColor1
horizontalAlignment: previewBox.leftAlignment ? Text.AlignLeft : Text.AlignHCenter
}
}
}
CustomPreviewBox {
label: root.infiniteSupply ? qsTr("Infinite supply") : qsTr("Total")
value: root.infiniteSupply ? qsTr("Yes") : LocaleUtils.numberToLocaleString(root.supplyAmount)
leftAlignment: root.infiniteSupply
id: symbolBox
label: qsTr("Symbol")
}
CustomPreviewBox {
label: qsTr("Total")
value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.supplyAmount)
}
CustomPreviewBox {
label: qsTr("Remaining")
value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.remainingTokens)
}
CustomPreviewBox {
@ -165,22 +165,14 @@ StatusScrollView {
}
CustomPreviewBox {
label: qsTr("Remote self-destruct")
label: qsTr("Remotely destructible")
value: root.selfDestruct ? qsTr("Yes") : qsTr("No")
}
CustomPreviewBox {
id: symbolBox
label: qsTr("Symbol")
leftAlignment: false
}
CustomPreviewBox {
id: accountBox
label: qsTr("Account")
leftAlignment: false
}
Rectangle {
@ -218,6 +210,15 @@ StatusScrollView {
}
}
StatusBaseText {
id: descriptionItem
Layout.fillWidth: true
wrapMode: TextEdit.WordWrap
font.pixelSize: Theme.primaryTextFontSize
lineHeight: 1.2
}
RowLayout {
visible: root.preview
Layout.fillWidth: true
@ -235,7 +236,7 @@ StatusScrollView {
wrapMode: Text.Wrap
font.pixelSize: Style.current.primaryTextFontSize
color: Theme.palette.baseColor1
text: qsTr("Make sure you’re happy with your collectible before minting it as it can’t be edited later")
text: qsTr("Make sure you’re happy with your token before minting it as it can’t be edited later")
}
}

10
ui/app/AppLayouts/Chat/views/communities/CommunityMintedTokensView.qml
View File

@ -24,7 +24,7 @@ StatusScrollView {
QtObject {
id: d
function getSubtitle(deployState, availableTokens, supply) {
function getSubtitle(deployState, remainingTokens, supply) {
if(deployState === Constants.DeployState.Failed) {
return qsTr("Failed")
}
@ -34,11 +34,11 @@ StatusScrollView {
}
// TO REMOVE: Just added bc backend still doesn't have `availableTokens` property in model. Once it is added, the following 2 lines can be removed.
if(!availableTokens)
availableTokens = 0
if(!remainingTokens)
remainingTokens = 0
if(supply === 0)
supply = "∞"
return qsTr("%1 / %2 remaining").arg(availableTokens).arg(supply)
return qsTr("%1 / %2 remaining").arg(remainingTokens).arg(supply)
}
}
@ -70,7 +70,7 @@ StatusScrollView {
height: gridView.cellHeight
width: gridView.cellWidth
title: model.name ? model.name : "..."
subTitle: d.getSubtitle(model.deployState, model.availableTokens, model.supply)
subTitle: d.getSubtitle(model.deployState, model.remainingTokens, model.supply)
fallbackImageUrl: model.image ? model.image : ""
backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent" // TODO BACKEND
isLoading: false