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
This commit is contained in:
parent
01a24e1b19
commit
d82499fd7b
|
@ -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
|
|
@ -1,5 +1,6 @@
|
||||||
import QtQuick 2.15
|
import QtQuick 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
|
||||||
import AppLayouts.Wallet.controls 1.0
|
import AppLayouts.Wallet.controls 1.0
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
|
@ -175,13 +176,32 @@ Pane {
|
||||||
|
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
|
|
||||||
assetsModel: assetsModel
|
assetsModel: assetsModelCheckBox.checked ? assetsModel : null
|
||||||
collectiblesModel: collectiblesModel
|
collectiblesModel: collectiblesModelCheckBox.checked ? collectiblesModel : null
|
||||||
|
|
||||||
onCollectibleSelected: console.log("collectible selected:", key)
|
onCollectibleSelected: console.log("collectible selected:", key)
|
||||||
onCollectionSelected: console.log("collection selected:", key)
|
onCollectionSelected: console.log("collection selected:", key)
|
||||||
onAssetSelected: console.log("asset 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
|
// category: Controls
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,6 +15,8 @@ Control {
|
||||||
property bool selected
|
property bool selected
|
||||||
property bool forceHovered
|
property bool forceHovered
|
||||||
|
|
||||||
|
property string text: qsTr("Select token")
|
||||||
|
|
||||||
property string name
|
property string name
|
||||||
property url icon
|
property url icon
|
||||||
|
|
||||||
|
@ -49,7 +51,7 @@ Control {
|
||||||
font.pixelSize: root.font.pixelSize
|
font.pixelSize: root.font.pixelSize
|
||||||
font.weight: Font.Medium
|
font.weight: Font.Medium
|
||||||
color: Theme.palette.primaryColor1
|
color: Theme.palette.primaryColor1
|
||||||
text: qsTr("Select token")
|
text: root.text
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusComboboxIndicator {
|
StatusComboboxIndicator {
|
||||||
|
|
|
@ -29,8 +29,8 @@ Control {
|
||||||
|
|
||||||
function setCustom(name: string, icon: url, key: string) {
|
function setCustom(name: string, icon: url, key: string) {
|
||||||
d.isTokenSelected = true
|
d.isTokenSelected = true
|
||||||
d.currentName = name
|
tokenSelectorButton.name = name
|
||||||
d.currentIcon = icon
|
tokenSelectorButton.icon = icon
|
||||||
tokenSelectorPanel.highlightedKey = key ?? ""
|
tokenSelectorPanel.highlightedKey = key ?? ""
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,18 +38,14 @@ Control {
|
||||||
id: d
|
id: d
|
||||||
|
|
||||||
property bool isTokenSelected: false
|
property bool isTokenSelected: false
|
||||||
|
|
||||||
property string currentName
|
|
||||||
property url currentIcon
|
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: TokenSelectorButton {
|
contentItem: TokenSelectorButton {
|
||||||
|
id: tokenSelectorButton
|
||||||
|
|
||||||
selected: d.isTokenSelected
|
selected: d.isTokenSelected
|
||||||
forceHovered: dropdown.opened
|
forceHovered: dropdown.opened
|
||||||
|
|
||||||
name: d.currentName
|
|
||||||
icon: d.currentIcon
|
|
||||||
|
|
||||||
onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
|
onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -59,6 +55,7 @@ Control {
|
||||||
y: parent.height + 4
|
y: parent.height + 4
|
||||||
|
|
||||||
closePolicy: Popup.CloseOnPressOutsideParent
|
closePolicy: Popup.CloseOnPressOutsideParent
|
||||||
|
horizontalPadding: 0
|
||||||
bottomPadding: 0
|
bottomPadding: 0
|
||||||
|
|
||||||
contentItem: TokenSelectorPanel {
|
contentItem: TokenSelectorPanel {
|
||||||
|
@ -79,8 +76,8 @@ Control {
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCurrentAndClose(name, icon) {
|
function setCurrentAndClose(name, icon) {
|
||||||
d.currentName = name
|
tokenSelectorButton.name = name
|
||||||
d.currentIcon = icon
|
tokenSelectorButton.icon = icon
|
||||||
d.isTokenSelected = true
|
d.isTokenSelected = true
|
||||||
dropdown.close()
|
dropdown.close()
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
AccountHeaderGradient 1.0 AccountHeaderGradient.qml
|
AccountHeaderGradient 1.0 AccountHeaderGradient.qml
|
||||||
ActivityFilterTagItem 1.0 ActivityFilterTagItem.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
|
CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml
|
||||||
CollectibleLinksTags 1.0 CollectibleLinksTags.qml
|
CollectibleLinksTags 1.0 CollectibleLinksTags.qml
|
||||||
DappsComboBox 1.0 DappsComboBox.qml
|
DappsComboBox 1.0 DappsComboBox.qml
|
||||||
|
@ -18,9 +21,7 @@ StatusDateRangePicker 1.0 StatusDateRangePicker.qml
|
||||||
StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
|
StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
|
||||||
StatusTxProgressBar 1.0 StatusTxProgressBar.qml
|
StatusTxProgressBar 1.0 StatusTxProgressBar.qml
|
||||||
SwapExchangeButton 1.0 SwapExchangeButton.qml
|
SwapExchangeButton 1.0 SwapExchangeButton.qml
|
||||||
|
SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
|
||||||
TokenSelector 1.0 TokenSelector.qml
|
TokenSelector 1.0 TokenSelector.qml
|
||||||
TokenSelectorButton 1.0 TokenSelectorButton.qml
|
TokenSelectorButton 1.0 TokenSelectorButton.qml
|
||||||
TokenSelectorNew 1.0 TokenSelectorNew.qml
|
TokenSelectorNew 1.0 TokenSelectorNew.qml
|
||||||
SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
|
|
||||||
BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml
|
|
||||||
BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml
|
|
||||||
|
|
|
@ -123,9 +123,12 @@ Control {
|
||||||
|
|
||||||
section.property: "type"
|
section.property: "type"
|
||||||
section.delegate: StatusBaseText {
|
section.delegate: StatusBaseText {
|
||||||
|
width: ListView.view.width
|
||||||
color: Theme.palette.baseColor1
|
color: Theme.palette.baseColor1
|
||||||
topPadding: Style.current.padding
|
padding: Style.current.padding
|
||||||
|
bottomPadding: 0
|
||||||
|
|
||||||
|
elide: Text.ElideRight
|
||||||
text: section === "community"
|
text: section === "community"
|
||||||
? qsTr("Community minted")
|
? qsTr("Community minted")
|
||||||
: qsTr("Other")
|
: qsTr("Other")
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import shared.controls 1.0
|
import shared.controls 1.0
|
||||||
|
|
||||||
SearchBox {
|
SearchBox {
|
||||||
input.leftPadding: 0
|
input.leftPadding: 14
|
||||||
input.rightPadding: 0
|
input.rightPadding: 14
|
||||||
|
|
||||||
minimumHeight: 56
|
minimumHeight: 56
|
||||||
maximumHeight: 56
|
maximumHeight: 56
|
||||||
input.showBackground: false
|
input.showBackground: false
|
||||||
|
|
Loading…
Reference in New Issue