status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-10 13:46:35 +00:00
Code Issues Projects Releases Wiki Activity

TokenSelectorAssetDelegate simplified

Browse Source 
Moreover:
- reset search box for AssetSelector on close
- fix highlight when Asset/Token selector reset
- storybook pages/tests adjusted
This commit is contained in:
Michał Cieślak 2024-09-18 13:03:36 +02:00 committed by Michał
parent 1d46673775
commit 8c2d2115b0
15 changed files with 103 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
storybook/pages/AssetSelectorPage.qml
View File

@ -8,13 +8,12 @@ import utils 1.0
Pane {
readonly property var assetsData: [
{
tokensKey: "key_1",
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
tokensKey: "STT",
balances: [
{
@ -26,13 +25,12 @@ Pane {
sectionText: "My assets on Mainnet"
},
{
tokensKey: "key_2",
tokensKey: "eth_key",
communityId: "",
name: "Ether",
currencyBalanceAsString: "4 276,86 USD",
symbol: "ETH",
iconSource: Constants.tokenIcon("ETH"),
tokensKey: "ETH",
balances: [
{
@ -44,25 +42,23 @@ Pane {
sectionText: "My assets on Mainnet"
},
{
tokensKey: "key_2",
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
tokensKey: "DAI",
balances: [],
sectionText: "Popular assets"
},
{
tokensKey: "key_3",
tokensKey: "zrx_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ZRX",
iconSource: Constants.tokenIcon("ZRX"),
tokensKey: "ZRX",
balances: [],
sectionText: "Popular assets"
@ -89,6 +85,15 @@ Pane {
onSelected: console.log("asset selected:", key)
}
Button {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "reset"
onClicked: panel.reset()
}
}
// category: Controls

17
storybook/pages/SearchableAssetsPanelPage.qml
View File

@ -8,13 +8,12 @@ import utils 1.0
Pane {
readonly property var assetsData: [
{
tokensKey: "key_1",
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
tokensKey: "STT",
balances: [
{
balanceAsString: "0,56",
@ -33,13 +32,12 @@ Pane {
sectionText: ""
},
{
tokensKey: "key_2",
tokensKey: "eth_key",
communityId: "",
name: "Ether",
currencyBalanceAsString: "4 276,86 USD",
symbol: "ETH",
iconSource: Constants.tokenIcon("ETH"),
tokensKey: "ETH",
balances: [
{
balanceAsString: "1,01",
@ -58,25 +56,23 @@ Pane {
sectionText: ""
},
{
tokensKey: "key_2",
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
tokensKey: "DAI",
balances: [],
sectionText: "Popular assets"
},
{
tokensKey: "key_3",
tokensKey: "zrx_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ZRX",
iconSource: Constants.tokenIcon("ZRX"),
tokensKey: "ZRX",
balances: [],
sectionText: "Popular assets"
@ -102,10 +98,13 @@ Pane {
anchors.centerIn: parent
width: 350
width: 450
highlightedKey: "key_2"
model: assetsModel
sectionProperty: "sectionText"
onSelected: console.log("selected:", key)
}
}

15
storybook/pages/TokenSelectorAssetDelegatePage.qml
View File

@ -39,14 +39,14 @@ SplitView {
anchors.centerIn: parent
TokenSelectorAssetDelegate {
implicitWidth: 333
width: 333
anchors.centerIn: parent
tokensKey: "ETH"
name: "Ethereum"
symbol: "ETH"
currencyBalanceAsString: "14,456.42 USD"
iconSource: Constants.tokenIcon(symbol)
balancesModel: ListModel {
readonly property var data: [
{ chainId: 1, balanceAsString: "1234.50", iconUrl: "network/Network=Ethereum" },
@ -57,13 +57,10 @@ SplitView {
Component.onCompleted: append(data)
}
interactive: ctrlInteractive.checked
enabled: ctrlEnabled.checked
highlighted: ctrlHighlighted.checked
onAssetSelected: (tokensKey) => {
console.warn("!!! TOKEN SELECTED:", tokensKey)
logs.logEvent("TokenSelectorAssetDelegate::onTokenSelected", ["tokensKey"], arguments)
}
onClicked: key => logs.logEvent("TokenSelectorAssetDelegate::onClicked")
}
}
}
@ -79,8 +76,8 @@ SplitView {
ColumnLayout {
Switch {
id: ctrlInteractive
text: "Interactive"
id: ctrlEnabled
text: "Enabled"
checked: true
}
Switch {

10
storybook/pages/TokenSelectorButtonPage.qml
View File

@ -32,9 +32,10 @@ Pane {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.maximumWidth: implicitWidth
selected: selectionCheckBox.checked
forceHovered: forceHoveredCheckBox.checked
name: "My token" + (longNameCheckBox.checked ? " long name" : "")
icon: Constants.tokenIcon("CFI")
@ -54,11 +55,18 @@ Pane {
text: "long name"
}
CheckBox {
id: forceHoveredCheckBox
text: "force hovered"
}
}
Settings {
property alias selected: selectionCheckBox.checked
property alias longName: longNameCheckBox.checked
property alias forceHovered: forceHoveredCheckBox.checked
}
}

4
storybook/qmlTests/tests/tst_SwapInputPanel.qml
View File

@ -211,7 +211,9 @@ Item {
verify(!!assetSelectorList)
waitForRendering(assetSelectorList)
const sttDelegate = findChild(assetSelectorList, "tokenSelectorAssetDelegate_STT")
const delegateIndex = ModelUtils.indexOf(assetSelectorList.model, "symbol", "STT")
const sttDelegate = assetSelectorList.itemAtIndex(delegateIndex)
verify(!!sttDelegate)
mouseClick(sttDelegate)

1
storybook/qmlTests/tests/tst_TokenSelectorView.qml
View File

@ -71,7 +71,6 @@ Item {
const delegate = findChild(controlUnderTest, "tokenSelectorAssetDelegate_%1".arg(tokensKey))
verify(!!delegate)
tryCompare(delegate, "tokensKey", tokensKey)
// click the delegate, verify the signal has been fired and has the correct "tokensKey" as argument
mouseClick(delegate)

11
ui/app/AppLayouts/Wallet/controls/AssetSelector.qml
View File

@ -31,6 +31,7 @@ Control {
function reset() {
button.selected = false
searchableAssetsPanel.highlightedKey = ""
}
contentItem: TokenSelectorButton {
@ -45,8 +46,10 @@ Control {
StatusDropdown {
id: dropdown
y: parent.height + 4
x: parent.width - width
y: root.height + 4
x: root.width - width
width: 448
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
padding: 0
@ -54,6 +57,8 @@ Control {
contentItem: SearchableAssetsPanel {
id: searchableAssetsPanel
objectName: "searchableAssetsPanel"
function setCurrentAndClose(name, icon) {
button.name = name
button.icon = icon
@ -69,5 +74,7 @@ Control {
root.selected(key)
}
}
onClosed: searchableAssetsPanel.clearSearch()
}
}

1
ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml
View File

@ -31,6 +31,7 @@ Control {
function reset() {
button.selected = false
searchableAssetsPanel.highlightedKey = ""
}
contentItem: TokenSelectorCompactButton {

12
ui/app/AppLayouts/Wallet/controls/TokenSelector.qml
View File

@ -180,20 +180,24 @@ ComboBox {
}
delegate: TokenSelectorAssetDelegate {
objectName: "tokenSelectorAssetDelegate_" + model.tokensKey
required property var model
required property int index
highlighted: tokensKey === d.currentTokensKey
interactive: tokensKey !== root.nonInteractiveDelegateKey
width: ListView.view.width
highlighted: model.tokensKey === d.currentTokensKey
enabled: model.tokensKey !== root.nonInteractiveDelegateKey
balancesListInteractive: !ListView.view.moving
tokensKey: model.tokensKey
name: model.name
symbol: model.symbol
currencyBalanceAsString: model.currencyBalanceAsString ?? ""
iconSource: model.iconSource
balancesModel: model.balances
onAssetSelected: (tokensKey) => root.selectToken(tokensKey)
onClicked: root.selectToken(model.tokensKey)
}
Component {

1
ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml
View File

@ -53,6 +53,7 @@ Control {
id: dropdown
y: parent.height + 4
width: 448
closePolicy: Popup.CloseOnPressOutsideParent
horizontalPadding: 0

14
ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml
View File

@ -36,6 +36,10 @@ Control {
signal selected(string key)
function clearSearch() {
searchBox.text = ""
}
SortFilterProxyModel {
id: sfpm
@ -57,6 +61,8 @@ Control {
TokenSearchBox {
id: searchBox
objectName: "searchBox"
Layout.fillWidth: true
placeholderText: qsTr("Search assets")
}
@ -89,10 +95,12 @@ Control {
required property var model
required property int index
highlighted: tokensKey === root.highlightedKey
interactive: tokensKey !== root.nonInteractiveKey
width: ListView.view.width
highlighted: model.tokensKey === root.highlightedKey
enabled: model.tokensKey !== root.nonInteractiveKey
balancesListInteractive: !ListView.view.moving
tokensKey: model.tokensKey
name: model.name
symbol: model.symbol
currencyBalanceAsString: model.currencyBalanceAsString ?? ""

3
ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml
View File

@ -46,6 +46,7 @@ Control {
objectName: "tokensTabBar"
Layout.fillWidth: true
visible: !!root.assetsModel && !!root.collectiblesModel
currentIndex: !!root.assetsModel
@ -53,7 +54,6 @@ Control {
: TokenSelectorPanel.Tabs.Collectibles
StatusTabButton {
objectName: "assetsTab"
text: qsTr("Assets")
@ -63,7 +63,6 @@ Control {
}
StatusTabButton {
objectName: "collectiblesTab"
text: qsTr("Collectibles")

48
ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml
View File

@ -10,41 +10,36 @@ import utils 1.0
ItemDelegate {
id: root
objectName: "tokenSelectorAssetDelegate_" + tokensKey
required property string tokensKey
required property string name
required property string symbol
required property string currencyBalanceAsString
required property string iconSource
// expected structure: balancesModel -> model.balances submodel [chainId: int, balance: BigIntString] + flatNetworks [account:string, iconUrl: string]
required property var balancesModel
property bool interactive: true
// expected structure: [iconUrl: string, balanceAsString: string]
property alias balancesModel: balancesListView.model
signal assetSelected(string tokensKey)
property alias balancesListInteractive: balancesListView.interactive
spacing: Style.current.halfPadding
horizontalPadding: Style.current.padding
verticalPadding: 4
opacity: interactive ? 1 : 0.3
implicitWidth: ListView.view.width
opacity: enabled ? 1 : 0.3
implicitHeight: 60
icon.width: 32
icon.height: 32
icon.source: iconSource
enabled: interactive
background: Rectangle {
radius: Style.current.radius
color: (root.interactive && root.hovered) || root.highlighted ? Theme.palette.statusListItem.highlightColor
: "transparent"
color: root.hovered || root.highlighted
? Theme.palette.statusListItem.highlightColor
: "transparent"
HoverHandler {
cursorShape: root.interactive ? Qt.PointingHandCursor : undefined
cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
}
}
@ -66,19 +61,22 @@ ItemDelegate {
RowLayout {
Layout.fillWidth: true
spacing: root.spacing
Item {
id: nameRow
Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
StatusBaseText {
id: nameText
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: Math.min(implicitWidth, nameRow.width - symbolText.width - symbolText.anchors.leftMargin)
width: Math.min(implicitWidth, parent.width - symbolText.width
- symbolText.anchors.leftMargin)
text: root.name
font.weight: Font.Medium
elide: Text.ElideRight
}
StatusBaseText {
id: symbolText
anchors.left: nameText.right
@ -88,27 +86,34 @@ ItemDelegate {
color: Theme.palette.baseColor1
}
}
StatusBaseText {
font.weight: Font.Medium
text: root.currencyBalanceAsString
}
}
// balances per network chain
// balances per chain
StatusListView {
id: balancesListView
objectName: "balancesListView"
Layout.maximumWidth: parent.width
Layout.preferredWidth: contentWidth
Layout.preferredHeight: 22
ScrollBar.horizontal: null
orientation: ListView.Horizontal
spacing: root.spacing
visible: count
interactive: !root.ListView.view.moving
ScrollBar.horizontal: null
interactive: root.balancesListInteractive
model: root.balancesModel
delegate: RowLayout {
height: ListView.view.height
spacing: 4
StatusRoundedImage {
Layout.preferredWidth: 16
Layout.preferredHeight: 16
@ -119,6 +124,7 @@ ItemDelegate {
text: model.balanceAsString
}
}
// let the root handle the click
TapHandler {
onTapped: root.clicked()
@ -126,6 +132,4 @@ ItemDelegate {
}
}
}
onClicked: root.assetSelected(root.tokensKey)
}

8
ui/app/AppLayouts/Wallet/views/TokenSelectorView.qml
View File

@ -14,16 +14,20 @@ StatusListView {
currentIndex: -1
delegate: TokenSelectorAssetDelegate {
objectName: "tokenSelectorAssetDelegate_" + model.tokensKey
required property var model
required property int index
tokensKey: model.tokensKey
width: ListView.view.width
balancesListInteractive: !ListView.view.moving
name: model.name
symbol: model.symbol
currencyBalanceAsString: model.currencyBalanceAsString ?? ""
iconSource: model.iconSource
balancesModel: model.balances
onAssetSelected: (tokensKey) => root.tokenSelected(tokensKey)
onClicked: root.tokenSelected(model.tokensKey)
}
}

2
ui/imports/shared/controls/SearchBox.qml
View File

@ -1,4 +1,4 @@
import QtQuick 2.14
import QtQuick 2.15
import StatusQ.Controls 0.1