status-desktop/ui/imports/shared/panels/StatusAssetSelector.qml

170 lines
5.8 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
Item {
id: root
property var assets
property var selectedAsset
property string defaultToken: ""
property string userSelectedToken: ""
property var tokenAssetSourceFn: function (symbol) {
return ""
}
// Define this in the usage to get balance in currency selected by user
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
function resetInternal() {
assets = null
selectedAsset = null
}
implicitWidth: 106
implicitHeight: comboBox.implicitHeight
onSelectedAssetChanged: {
if (selectedAsset && selectedAsset.symbol) {
d.iconSource = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
d.text = selectedAsset.symbol.toUpperCase()
}
}
QtObject {
id: d
property string iconSource: ""
property string text: ""
}
StatusComboBox {
id: comboBox
2022-08-09 13:52:17 +00:00
objectName: "assetSelectorButton"
width: parent.width
height: parent.height
control.padding: 4
control.popup.width: 342
2022-08-03 13:41:24 +00:00
control.popup.height: 416
control.popup.x: width - control.popup.width
2022-08-09 13:52:17 +00:00
popupContentItemObjectName: "assetSelectorList"
model: root.assets
control.background: Rectangle {
2022-08-03 13:41:24 +00:00
color: "transparent"
border.width: 1
border.color: comboBox.control.hovered ? Theme.palette.primaryColor2 : Theme.palette.directColor8
radius: 16
}
contentItem: RowLayout {
2022-08-03 13:41:24 +00:00
spacing: 8
StatusBaseText {
Layout.maximumWidth: 50
Layout.leftMargin: 8
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1
font.weight: Font.Medium
text: d.text
}
StatusRoundedImage {
2022-08-03 13:41:24 +00:00
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.alignment: Qt.AlignVCenter
image.source: d.iconSource
image.onStatusChanged: {
if (image.status === Image.Error) {
image.source = defaultToken
}
}
}
}
2022-08-03 13:41:24 +00:00
control.indicator: null
delegate: StatusItemDelegate {
width: comboBox.control.popup.width
highlighted: index === comboBox.control.highlightedIndex
padding: 16
2022-08-09 13:52:17 +00:00
objectName: symbol
onClicked: {
// TODO: move this out of StatusQ, this involves dependency on BE code
// WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
root.userSelectedToken = symbol
root.selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
}
// TODO: move this out of StatusQ, this involves dependency on BE code
// WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
Component.onCompleted: {
if ((userSelectedToken === "" && index === 0) || symbol === userSelectedToken)
root.selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
}
contentItem: RowLayout {
spacing: 0
StatusRoundedImage {
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: {
if (image.status === Image.Error) {
image.source = defaultToken
}
}
}
ColumnLayout {
Layout.fillWidth: true
Layout.leftMargin: 12
spacing: 0
RowLayout {
Layout.fillWidth: true
StatusBaseText {
Layout.fillWidth: true
text: symbol.toUpperCase()
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
font.pixelSize: 15
text: parseFloat(totalBalance).toLocaleCurrencyString(Qt.locale(), symbol)
}
}
RowLayout {
Layout.fillWidth: true
StatusBaseText {
Layout.fillWidth: true
2022-08-03 13:41:24 +00:00
elide: Text.ElideRight
text: name
color: Theme.palette.baseColor1
font.pixelSize: 15
}
StatusBaseText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
font.pixelSize: 15
text: getCurrencyBalanceString(totalCurrencyBalance)
color: Theme.palette.baseColor1
}
}
}
}
}
}
}