From d82499fd7b465ca25f8318fa7c6e6f19b46d0801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 2 Sep 2024 11:35:18 +0200 Subject: [PATCH] AssetSelector added This component is simpler version of TokenSelector, composed of the same basic componets, useful when only assets are subject of selection. Closes: #16234 --- storybook/pages/AssetSelectorPage.qml | 105 ++++++++++++++++++ storybook/pages/TokenSelectorNewPage.qml | 24 +++- .../Wallet/controls/AssetSelector.qml | 72 ++++++++++++ .../Wallet/controls/TokenSelectorButton.qml | 4 +- .../Wallet/controls/TokenSelectorNew.qml | 17 ++- ui/app/AppLayouts/Wallet/controls/qmldir | 7 +- .../panels/SearchableCollectiblesPanel.qml | 5 +- .../Wallet/panels/TokenSearchBox.qml | 5 +- 8 files changed, 220 insertions(+), 19 deletions(-) create mode 100644 storybook/pages/AssetSelectorPage.qml create mode 100644 ui/app/AppLayouts/Wallet/controls/AssetSelector.qml diff --git a/storybook/pages/AssetSelectorPage.qml b/storybook/pages/AssetSelectorPage.qml new file mode 100644 index 0000000000..175e361ae8 --- /dev/null +++ b/storybook/pages/AssetSelectorPage.qml @@ -0,0 +1,105 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +import AppLayouts.Wallet.controls 1.0 +import StatusQ.Core.Theme 0.1 +import utils 1.0 + +Pane { + readonly property var assetsData: [ + { + tokensKey: "key_1", + communityId: "", + name: "Status Test Token", + currencyBalanceAsString: "42,23 USD", + symbol: "STT", + iconSource: Constants.tokenIcon("STT"), + tokensKey: "STT", + + balances: [ + { + balanceAsString: "0,56", + iconUrl: "network/Network=Ethereum" + }, + { + balanceAsString: "0,22", + iconUrl: "network/Network=Arbitrum" + }, + { + balanceAsString: "0,12", + iconUrl: "network/Network=Optimism" + } + ] + }, + { + tokensKey: "key_2", + communityId: "", + name: "Ether", + currencyBalanceAsString: "4 276,86 USD", + symbol: "ETH", + iconSource: Constants.tokenIcon("ETH"), + tokensKey: "ETH", + + balances: [ + { + balanceAsString: "1,01", + iconUrl: "network/Network=Optimism" + }, + { + balanceAsString: "0,47", + iconUrl: "network/Network=Arbitrum" + }, + { + balanceAsString: "0,12", + iconUrl: "network/Network=Ethereum" + } + ] + }, + { + tokensKey: "key_2", + communityId: "", + name: "Dai Stablecoin", + currencyBalanceAsString: "45,92 USD", + symbol: "DAI", + iconSource: Constants.tokenIcon("DAI"), + tokensKey: "DAI", + + balances: [ + { + balanceAsString: "45,12", + iconUrl: "network/Network=Arbitrum" + }, + { + balanceAsString: "0,56", + iconUrl: "network/Network=Optimism" + }, + { + balanceAsString: "0,12", + iconUrl: "network/Network=Ethereum" + } + ] + } + ] + + ListModel { + id: assetsModel + + Component.onCompleted: append(assetsData) + } + + background: Rectangle { + color: Theme.palette.baseColor3 + } + + AssetSelector { + id: panel + + anchors.centerIn: parent + + assetsModel: assetsModel + + onAssetSelected: console.log("asset selected:", key) + } +} + +// category: Controls diff --git a/storybook/pages/TokenSelectorNewPage.qml b/storybook/pages/TokenSelectorNewPage.qml index ba79811a41..5a4557455c 100644 --- a/storybook/pages/TokenSelectorNewPage.qml +++ b/storybook/pages/TokenSelectorNewPage.qml @@ -1,5 +1,6 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import AppLayouts.Wallet.controls 1.0 import StatusQ.Core.Theme 0.1 @@ -175,13 +176,32 @@ Pane { anchors.centerIn: parent - assetsModel: assetsModel - collectiblesModel: collectiblesModel + assetsModel: assetsModelCheckBox.checked ? assetsModel : null + collectiblesModel: collectiblesModelCheckBox.checked ? collectiblesModel : null onCollectibleSelected: console.log("collectible selected:", key) onCollectionSelected: console.log("collection selected:", key) onAssetSelected: console.log("asset selected:", key) } + + RowLayout { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + + CheckBox { + id: assetsModelCheckBox + + checked: true + text: "Assets model assigned" + } + + CheckBox { + id: collectiblesModelCheckBox + + checked: true + text: "Collectibles model assigned" + } + } } // category: Controls diff --git a/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml b/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml new file mode 100644 index 0000000000..95cbecd041 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml @@ -0,0 +1,72 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +import StatusQ.Controls 0.1 +import StatusQ.Core.Utils 0.1 + +import AppLayouts.Wallet.panels 1.0 + +import utils 1.0 + +Control { + id: root + + /** Expected model structure: see SearchableAssetsPanel::model **/ + property alias assetsModel: searchableAssetsPanel.model + + readonly property bool isTokenSelected: d.isTokenSelected + + signal assetSelected(string key) + + function setCustom(name: string, icon: url, key: string) { + d.isTokenSelected = true + tokenSelectorButton.name = name + tokenSelectorButton.icon = icon + searchableAssetsPanel.highlightedKey = key ?? "" + } + + QtObject { + id: d + + property bool isTokenSelected: false + } + + contentItem: TokenSelectorButton { + id: tokenSelectorButton + + selected: d.isTokenSelected + forceHovered: dropdown.opened + + text: qsTr("Select asset") + + onClicked: dropdown.opened ? dropdown.close() : dropdown.open() + } + + StatusDropdown { + id: dropdown + + y: parent.height + 4 + + closePolicy: Popup.CloseOnPressOutsideParent + padding: 0 + + contentItem: SearchableAssetsPanel { + id: searchableAssetsPanel + + function setCurrentAndClose(name, icon) { + tokenSelectorButton.name = name + tokenSelectorButton.icon = icon + d.isTokenSelected = true + dropdown.close() + } + + onSelected: { + const entry = ModelUtils.getByKey(assetsModel, "tokensKey", key) + highlightedKey = key + + setCurrentAndClose(entry.symbol, entry.iconSource) + root.assetSelected(key) + } + } + } +} diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml index 0893f3e2c9..06694affcf 100644 --- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml @@ -15,6 +15,8 @@ Control { property bool selected property bool forceHovered + property string text: qsTr("Select token") + property string name property url icon @@ -49,7 +51,7 @@ Control { font.pixelSize: root.font.pixelSize font.weight: Font.Medium color: Theme.palette.primaryColor1 - text: qsTr("Select token") + text: root.text } StatusComboboxIndicator { diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml index b4fe95ffe0..53553ba41a 100644 --- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml @@ -29,8 +29,8 @@ Control { function setCustom(name: string, icon: url, key: string) { d.isTokenSelected = true - d.currentName = name - d.currentIcon = icon + tokenSelectorButton.name = name + tokenSelectorButton.icon = icon tokenSelectorPanel.highlightedKey = key ?? "" } @@ -38,18 +38,14 @@ Control { id: d property bool isTokenSelected: false - - property string currentName - property url currentIcon } contentItem: TokenSelectorButton { + id: tokenSelectorButton + selected: d.isTokenSelected forceHovered: dropdown.opened - name: d.currentName - icon: d.currentIcon - onClicked: dropdown.opened ? dropdown.close() : dropdown.open() } @@ -59,6 +55,7 @@ Control { y: parent.height + 4 closePolicy: Popup.CloseOnPressOutsideParent + horizontalPadding: 0 bottomPadding: 0 contentItem: TokenSelectorPanel { @@ -79,8 +76,8 @@ Control { } function setCurrentAndClose(name, icon) { - d.currentName = name - d.currentIcon = icon + tokenSelectorButton.name = name + tokenSelectorButton.icon = icon d.isTokenSelected = true dropdown.close() } diff --git a/ui/app/AppLayouts/Wallet/controls/qmldir b/ui/app/AppLayouts/Wallet/controls/qmldir index 61989a814b..54d8677825 100644 --- a/ui/app/AppLayouts/Wallet/controls/qmldir +++ b/ui/app/AppLayouts/Wallet/controls/qmldir @@ -1,5 +1,8 @@ AccountHeaderGradient 1.0 AccountHeaderGradient.qml ActivityFilterTagItem 1.0 ActivityFilterTagItem.qml +AssetSelector 1.0 AssetSelector.qml +BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml +BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml CollectibleLinksTags 1.0 CollectibleLinksTags.qml DappsComboBox 1.0 DappsComboBox.qml @@ -18,9 +21,7 @@ StatusDateRangePicker 1.0 StatusDateRangePicker.qml StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml StatusTxProgressBar 1.0 StatusTxProgressBar.qml SwapExchangeButton 1.0 SwapExchangeButton.qml +SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml TokenSelector 1.0 TokenSelector.qml TokenSelectorButton 1.0 TokenSelectorButton.qml TokenSelectorNew 1.0 TokenSelectorNew.qml -SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml -BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml -BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml diff --git a/ui/app/AppLayouts/Wallet/panels/SearchableCollectiblesPanel.qml b/ui/app/AppLayouts/Wallet/panels/SearchableCollectiblesPanel.qml index 6bff0d1d44..a90b49d051 100644 --- a/ui/app/AppLayouts/Wallet/panels/SearchableCollectiblesPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/SearchableCollectiblesPanel.qml @@ -123,9 +123,12 @@ Control { section.property: "type" section.delegate: StatusBaseText { + width: ListView.view.width color: Theme.palette.baseColor1 - topPadding: Style.current.padding + padding: Style.current.padding + bottomPadding: 0 + elide: Text.ElideRight text: section === "community" ? qsTr("Community minted") : qsTr("Other") diff --git a/ui/app/AppLayouts/Wallet/panels/TokenSearchBox.qml b/ui/app/AppLayouts/Wallet/panels/TokenSearchBox.qml index fc8fed9f26..dffd27efc5 100644 --- a/ui/app/AppLayouts/Wallet/panels/TokenSearchBox.qml +++ b/ui/app/AppLayouts/Wallet/panels/TokenSearchBox.qml @@ -1,8 +1,9 @@ import shared.controls 1.0 SearchBox { - input.leftPadding: 0 - input.rightPadding: 0 + input.leftPadding: 14 + input.rightPadding: 14 + minimumHeight: 56 maximumHeight: 56 input.showBackground: false