fix(StatusAssetSelector): Reimplemented using `StatusComboBox`

This commit is contained in:
Igor Sirotin 2022-08-03 15:15:13 +03:00 committed by Lukáš Tinkl
parent 72cc269ae6
commit 6e495596c6
2 changed files with 109 additions and 120 deletions

@ -1 +1 @@
Subproject commit 63ff9b82d1f13c063dddbb244a255a9886705fc7
Subproject commit cff836280f3b9e1671518568fe1884f286b36054

View File

@ -2,8 +2,6 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
@ -12,159 +10,150 @@ import StatusQ.Components 0.1
Item {
id: root
property var assets
property var selectedAsset
property string defaultToken
property string userSelectedToken
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 "" }
implicitWidth: select.width
implicitHeight: 48
function resetInternal() {
assets = null
selectedAsset = null
}
implicitWidth: 106
implicitHeight: comboBox.implicitHeight
onSelectedAssetChanged: {
if (selectedAsset && selectedAsset.symbol) {
iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
selectedTextField.text = selectedAsset.symbol.toUpperCase()
d.iconSource = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
d.text = selectedAsset.symbol.toUpperCase()
}
}
StatusSelect {
id: select
width: visualRect.width
model: root.assets
caretVisible: false
caretRightMargin: 0
bgColor: Style.current.transparent
bgColorHover: Theme.palette.directColor8
select.radius: 16
select.height: root.height
selectMenu.width: 342
selectMenu.height: 416
selectedItemComponent: Rectangle {
id: visualRect
width: row.width + Style.current.padding
QtObject {
id: d
property string iconSource: ""
property string text: ""
}
StatusComboBox {
id: comboBox
width: parent.width
height: parent.height
color: Style.current.transparent
border.width: 1
border.color: Theme.palette.directColor8
radius: 16
Row {
id: row
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.margins: Style.current.halfPadding
spacing: Style.current.halfPadding
control.padding: 4
control.popup.width: 342
control.popup.x: width - control.popup.width
model: root.assets
control.background: Rectangle {
color: comboBox.control.hovered ? Theme.palette.directColor8 : "transparent"
radius: 6
}
contentItem: RowLayout {
spacing: 4
StatusRoundedImage {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignVCenter
image.source: d.iconSource
image.onStatusChanged: {
if (image.status === Image.Error) {
image.source = defaultToken
}
}
}
StatusBaseText {
id: selectedTextField
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
width: Math.min(50, implicitWidth)
Layout.maximumWidth: 50
Layout.alignment: Qt.AlignVCenter
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1
font.weight: Font.Medium
text: d.text
}
StatusRoundedImage {
id: iconImg
width: 40
height: 40
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
}
}
}
}
}
selectMenu.delegate: menuItem
}
Component {
id: menuItem
MenuItem {
id: itemContainer
property bool isFirstItem: index === 0
property bool isLastItem: index === assets.rowCount() - 1
delegate: StatusItemDelegate {
width: comboBox.control.popup.width
highlighted: index === comboBox.control.highlightedIndex
padding: 16
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
width: parent.width
height: 72
contentItem: Item {
anchors.fill: parent
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
if (image.status === Image.Error) {
image.source = defaultToken
}
}
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
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
text: name
color: Theme.palette.baseColor1
font.pixelSize: 15
}
}
Column {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
font.pixelSize: 15
text: parseFloat(totalBalance).toFixed(4) + " " + symbol
}
StatusBaseText {
font.pixelSize: 15
anchors.right: parent.right
text: getCurrencyBalanceString(totalCurrencyBalance)
color: Theme.palette.baseColor1
}
}
}
background: Rectangle {
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
}
Component.onCompleted: {
if(userSelectedToken === "") {
if(index === 0) {
selectedAsset = model
}
} else {
if(symbol === userSelectedToken) {
selectedAsset = model
}
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
userSelectedToken = symbol
selectedAsset = model
select.selectMenu.close()
}
}
}
}