Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(@desktop/wallet): Adapt Token Selector #16733

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+203 −18
Open

feat(@desktop/wallet): Adapt Token Selector #16733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions storybook/pages/SearchableAssetsPanelPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,17 @@ Pane {
iconSource: Constants.tokenIcon("ZRX"),
balances: [],

sectionName: "Popular assets"
},
{
tokensKey: "abc_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ABC",
iconSource: Constants.tokenIcon("ABC"),
balances: [],

sectionName: "Popular assets"
}
]
Expand Down
6 changes: 6 additions & 0 deletions storybook/pages/TokenSelectorAssetDelegatePage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ SplitView {
symbol: "ETH"
currencyBalanceAsString: "14,456.42 USD"
iconSource: Constants.tokenIcon(symbol)
isFirstSearchEntry: ctrlIsFirstSearchEntry.checked

balancesModel: ListModel {
readonly property var data: [
Expand Down Expand Up @@ -85,6 +86,11 @@ SplitView {
text: "Highlighted"
checked: false
}
Switch {
id: ctrlIsFirstSearchEntry
text: "isFirstSearchEntry"
checked: false
}

Item { Layout.fillHeight: true }
}
Expand Down
8 changes: 8 additions & 0 deletions storybook/pages/TokenSelectorCollectibleDelegatePage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,13 @@ SplitView {
name: nameTextField.text
balance: balanceSpinBox.value ? balanceSpinBox.value : ""
image: Constants.tokenIcon("ETH")
networkIcon: "network/Network=Ethereum"

goDeeperIconVisible: goDeeperSwitch.checked

interactive: interactiveSwitch.checked
highlighted: highlightedSwitch.checked
isFirstSearchEntry: ctrlIsFirstSearchEntry.checked
}
}

Expand Down Expand Up @@ -95,6 +97,12 @@ SplitView {
checked: false
}

Switch {
id: ctrlIsFirstSearchEntry
text: "isFirstSearchEntry"
checked: false
}

Item { Layout.fillHeight: true }
}
}
Expand Down
18 changes: 16 additions & 2 deletions storybook/pages/TokenSelectorPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ Pane {
name: "My token",
balance: 1,
icon: Constants.tokenIcon("CFI"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -106,18 +108,24 @@ Pane {
name: "Furbeard",
balance: 1,
icon: Constants.tokenIcon("FUEL"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_2",
name: "Magicat",
balance: 1,
icon: Constants.tokenIcon("ENJ"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_3",
name: "Happy Meow",
balance: 1,
icon: Constants.tokenIcon("FUN"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -130,19 +138,25 @@ Pane {
key: "collection_2_key_1",
name: "Unicorn 1",
balance: 12,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_2_key_2",
name: "Unicorn 2",
balance: 1,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
{
groupName: "Unicorn",
icon: Constants.tokenIcon("ELF"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum",
type: "other",
subitems: [
{
Expand Down
18 changes: 16 additions & 2 deletions storybook/pages/TokenSelectorPanelPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ Pane {
name: "My token",
balance: 1,
icon: Constants.tokenIcon("CFI"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -105,18 +107,24 @@ Pane {
name: "Furbeard",
balance: 1,
icon: Constants.tokenIcon("FUEL"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_2",
name: "Magicat",
balance: 1,
icon: Constants.tokenIcon("ENJ"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_3",
name: "Happy Meow",
balance: 1,
icon: Constants.tokenIcon("FUN"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -129,20 +137,26 @@ Pane {
key: "collection_2_key_1",
name: "Unicorn 1",
balance: 12,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_2_key_2",
name: "Unicorn 2",
balance: 1,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
{
groupName: "Unicorn",
icon: Constants.tokenIcon("ELF"),
type: "other",
chainId: 11155111,
iconUrl: "network/Network=Ethereum",
subitems: [
{
key: "collection_3_key_1",
Expand Down
6 changes: 6 additions & 0 deletions storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import QtTest 1.15

import AppLayouts.Wallet.panels 1.0

import StatusQ.Core.Theme 0.1

import Storybook 1.0

import utils 1.0
Expand Down Expand Up @@ -157,6 +159,8 @@ Item {
const delegate1 = listView.itemAtIndex(0)
verify(delegate1)
compare(delegate1.name, "Status Test Token")
verify(delegate1.isFirstSearchEntry)
compare(delegate1.background.color, Theme.palette.baseColor2)
}
{
searchBox.text = "zrx"
Expand All @@ -166,6 +170,8 @@ Item {
const delegate1 = listView.itemAtIndex(0)
verify(delegate1)
compare(delegate1.name, "0x")
verify(delegate1.isFirstSearchEntry)
compare(delegate1.background.color, Theme.palette.baseColor2)
}
{
control.clearSearch()
Expand Down
25 changes: 25 additions & 0 deletions storybook/qmlTests/tests/tst_TokenSelectorAssetDelegate.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import AppLayouts.Wallet.views 1.0

import Storybook 1.0

import StatusQ.Core.Theme 0.1

Item {
id: root

Expand All @@ -21,6 +23,7 @@ Item {
symbol: "ETH"
currencyBalanceAsString: "42.02 USD"
iconSource: ""
isFirstSearchEntry: false
width: 250

readonly property SignalSpy clickSpy: SignalSpy {
Expand Down Expand Up @@ -129,5 +132,27 @@ Item {
verify(subBalanceText1.visible)
verify(subBalanceText2.visible)
}


function test_hovered_highlighted_states() {
const control = createTemporaryObject(delegateCmp, root,
{ balancesModel })

control.highlighted = true
compare(control.background.color, Theme.palette.statusListItem.highlightColor)

mouseMove(control, control.width/2, control.height/2)
compare(control.hovered, true)
compare(control.background.color, Theme.palette.baseColor2)

control.highlighted = false
mouseMove(control, control.width/2, control.height/2)
compare(control.hovered, true)
compare(control.background.color, Theme.palette.baseColor2)

// test isFirstSearchEntry behaviour
control.isFirstSearchEntry = true
compare(control.background.color, Theme.palette.baseColor2)
}
}
}
7 changes: 7 additions & 0 deletions storybook/qmlTests/tests/tst_TokenSelectorButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import AppLayouts.Wallet.controls 1.0

import Storybook 1.0

import StatusQ.Components 0.1

Item {
id: root

Expand Down Expand Up @@ -39,6 +41,11 @@ Item {
verify(!TestUtils.findTextItem(button, button.text))
verify(TestUtils.findTextItem(button, "ETH"))
verify(findChild(button, "selectedContent"))

const icon = TestUtils.findByType(button, StatusRoundedImage)
verify(icon)
compare(icon.width, 24)
compare(icon.height, 24)
}
}
}
4 changes: 2 additions & 2 deletions ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ Control {
id: tokenSelectorIcon
objectName: "tokenSelectorIcon"

Layout.preferredWidth: 21
Layout.preferredHeight: 21
Layout.preferredWidth: 24
Layout.preferredHeight: 24
image.source: root.icon
}

Expand Down
23 changes: 22 additions & 1 deletion ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ Control {
searchBox.text = ""
}

QtObject {
id: d
readonly property int delegateHeight: 60
// should show 5.5 items as per design
readonly property int maxListViewHeight: delegateHeight*5 + delegateHeight/2
readonly property bool validSearchResultExists: !!searchBox.text && sfpm.rowCount() > 0
}

SortFilterProxyModel {
id: sfpm

Expand All @@ -64,6 +72,8 @@ Control {

Layout.fillWidth: true
placeholderText: qsTr("Search assets")

Keys.forwardTo: [listView]
}

StatusDialogDivider {
Expand All @@ -80,7 +90,11 @@ Control {

Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: contentHeight
Layout.preferredHeight: d.maxListViewHeight
Layout.leftMargin: 4
Layout.rightMargin: 4

spacing: 4

model: sfpm
section.property: "sectionName"
Expand All @@ -95,10 +109,12 @@ Control {
required property int index

width: ListView.view.width
height: d.delegateHeight

highlighted: model.tokensKey === root.highlightedKey
enabled: model.tokensKey !== root.nonInteractiveKey
balancesListInteractive: !ListView.view.moving
isFirstSearchEntry: d.validSearchResultExists && index === 0

name: model.name
symbol: model.symbol
Expand All @@ -108,6 +124,11 @@ Control {

onClicked: root.selected(model.tokensKey)
}

Keys.onReturnPressed: {
if(d.validSearchResultExists)
listView.itemAtIndex(0).clicked()
}
}
}
}
Loading