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(TokenPanel): Add support for amounts and network selection 

Closes: #9797
This commit is contained in:
Michał Cieślak 2023-04-19 14:39:50 +02:00 committed by Michał
parent ada4fdd407
commit 1ce17ca3d4
5 changed files with 178 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -129,6 +129,10 @@ ListModel {
title: "ProfileShowcaseAssetsPanel"
section: "Panels"
}
ListElement {
title: "TokenPanel"
section: "Panels"
}
ListElement {
title: "InviteFriendsToCommunityPopup"
section: "Popups"

1
storybook/figma.json
View File

@ -81,7 +81,6 @@
],
"HoldingsDropdown": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499660&t=F5yiYQV2YGPBdrJ8-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499992&t=je3ZsbFwMntKAhKe-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22827%3A501381&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22733%3A502088&t=5QSRGGAhrksqBs8e-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22772%3A496580&t=7gqqAFbdG5KrPOmn-0",

121
storybook/pages/TokenPanelPage.qml Normal file
View File

@ -0,0 +1,121 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Models 1.0
import Storybook 1.0
import utils 1.0
import AppLayouts.Chat.controls.community 1.0
SplitView {
id: root
orientation: Qt.Vertical
ListModel {
id: networksModel
readonly property var modelData: [
{
name: "Optimism",
icon: Style.svg(ModelsData.networks.optimism),
amount: "300"
},
{
name: "Arbitrum",
icon: Style.svg(ModelsData.networks.arbitrum),
amount: "400"
},
{
name: "Hermez",
icon: Style.svg(ModelsData.networks.hermez),
amount: "500"
}
]
Component.onCompleted: append(modelData)
}
Item {
id: container
SplitView.fillWidth: true
SplitView.fillHeight: true
Rectangle {
anchors.fill: tokenPanel
border.width: 1
anchors.margins: -15
}
TokenPanel {
id: tokenPanel
mode: {
if (addRadioButton.checked)
return HoldingTypes.Mode.Add
else if (updateRadioButton.checked)
return HoldingTypes.Mode.Update
else
return HoldingTypes.Mode.UpdateOrRemove
}
tokenCategoryText: "Community asset"
tokenName: "Token name"
tokenShortName: "TN"
tokenAmount: amountTextField.text
tokenImage: ModelsData.assets.socks
networksModel: networksModelCheckBox.checked ? networksModel : null
width: 300
anchors.centerIn: parent
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
SplitView.fillWidth: true
ColumnLayout {
RowLayout {
RadioButton {
id: addRadioButton
text: "Add"
checked: true
}
RadioButton {
id: updateRadioButton
text: "Update"
}
RadioButton {
id: updateOrRemoveRadioButton
text: "Update or remove"
}
}
CheckBox {
id: networksModelCheckBox
text: "Networks model"
}
RowLayout {
Label {
text: "Amount:"
}
TextField {
id: amountTextField
text: "∞"
}
}
}
}
}

60
ui/app/AppLayouts/Chat/controls/community/TokenPanel.qml
View File

@ -8,19 +8,26 @@ import StatusQ.Components 0.1
import shared.controls 1.0
import utils 1.0
ColumnLayout {
id: root
property int mode: HoldingTypes.Mode.Add
property alias tokenName: item.name
property alias tokenShortName: item.shortName
property alias tokenAmount: item.amount
property alias tokenImage: item.iconSource
property alias amountText: amountInput.text
property alias amount: amountInput.amount
property alias tokenCategoryText: tokenLabel.text
property alias networkLabelText: d.networkLabelText
property alias addOrUpdateButtonEnabled: addOrUpdateButton.enabled
property alias allowDecimals: amountInput.allowDecimals
readonly property bool amountValid: amountInput.valid && amountInput.text.length > 0
readonly property bool amountValid: amountInput.valid && !!amountInput.text
property var networksModel
signal addClicked
signal updateClicked
@ -36,27 +43,64 @@ ColumnLayout {
// values from design
readonly property int defaultHeight: 44
readonly property int defaultSpacing: 8
property string networkLabelText: qsTr("Network for airdrop")
}
component CustomText: StatusBaseText {
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: d.defaultSpacing
}
spacing: d.defaultSpacing
StatusBaseText {
CustomText {
id: tokenLabel
Layout.topMargin: 2 * d.defaultSpacing
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: d.defaultSpacing
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
}
TokenItem {
id: item
Layout.fillWidth: true
enabled: false
}
Loader {
active: !!root.networksModel
visible: active
Layout.fillWidth: true
Layout.topMargin: 14
Layout.bottomMargin: d.defaultSpacing
sourceComponent: ColumnLayout {
spacing: 10
CustomText {
id: networkLabel
text: d.networkLabelText
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
}
InlineNetworksComboBox {
Layout.fillWidth: true
model: root.networksModel
}
}
}
AmountInput {
id: amountInput

1
ui/app/AppLayouts/Chat/controls/community/qmldir
View File

@ -12,5 +12,6 @@ MembersSelectorPanel 1.0 MembersSelectorPanel.qml
PermissionItem 1.0 PermissionItem.qml
PermissionsDropdown 1.0 PermissionsDropdown.qml
TokenItem 1.0 TokenItem.qml
TokenPanel 1.0 TokenPanel.qml
singleton PermissionTypes 1.0 PermissionTypes.qml
singleton TokenCategories 1.0 TokenCategories.qml