172 lines
5.8 KiB
QML
172 lines
5.8 KiB
QML
|
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
|
||
|
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 "" }
|
||
|
implicitWidth: select.width
|
||
|
implicitHeight: 48
|
||
|
|
||
|
function resetInternal() {
|
||
|
assets = null
|
||
|
selectedAsset = null
|
||
|
}
|
||
|
|
||
|
onSelectedAssetChanged: {
|
||
|
if (selectedAsset && selectedAsset.symbol) {
|
||
|
iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
|
||
|
selectedTextField.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
|
||
|
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
|
||
|
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
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
selectMenu.delegate: menuItem
|
||
|
}
|
||
|
|
||
|
Component {
|
||
|
id: menuItem
|
||
|
MenuItem {
|
||
|
id: itemContainer
|
||
|
property bool isFirstItem: index === 0
|
||
|
property bool isLastItem: index === assets.rowCount() - 1
|
||
|
|
||
|
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
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
Column {
|
||
|
anchors.left: iconImg.right
|
||
|
anchors.leftMargin: 12
|
||
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
||
|
StatusBaseText {
|
||
|
text: symbol.toUpperCase()
|
||
|
font.pixelSize: 15
|
||
|
color: Theme.palette.directColor1
|
||
|
}
|
||
|
|
||
|
StatusBaseText {
|
||
|
text: name
|
||
|
color: Theme.palette.baseColor1
|
||
|
font.pixelSize: 15
|
||
|
}
|
||
|
}
|
||
|
Column {
|
||
|
anchors.right: parent.right
|
||
|
anchors.rightMargin: 16
|
||
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
StatusBaseText {
|
||
|
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()
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|