status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ

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

227
ui/imports/shared/panels/StatusAssetSelector.qml
View File

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