status-desktop/ui/app/AppLayouts/Wallet/views/TokenSelectorAssetDelegate.qml

132 lines
4.3 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
ItemDelegate {
id: root
objectName: "tokenSelectorAssetDelegate_" + tokensKey
required property string tokensKey
required property string name
required property string symbol
required property string currencyBalanceAsString
required property string iconSource
// expected structure: balancesModel -> model.balances submodel [chainId: int, balance: BigIntString] + flatNetworks [account:string, iconUrl: string]
required property var balancesModel
property bool interactive: true
signal assetSelected(string tokensKey)
spacing: Style.current.halfPadding
horizontalPadding: Style.current.padding
verticalPadding: 4
opacity: interactive ? 1 : 0.3
implicitWidth: ListView.view.width
implicitHeight: 60
icon.width: 32
icon.height: 32
icon.source: iconSource
enabled: interactive
background: Rectangle {
radius: Style.current.radius
color: (root.interactive && root.hovered) || root.highlighted ? Theme.palette.statusListItem.highlightColor
: "transparent"
HoverHandler {
cursorShape: root.interactive ? Qt.PointingHandCursor : undefined
}
}
contentItem: RowLayout {
spacing: root.spacing
// asset icon
StatusRoundedImage {
Layout.preferredWidth: root.icon.width
Layout.preferredHeight: root.icon.height
image.source: root.icon.source
}
ColumnLayout {
Layout.fillWidth: true
spacing: 0
// name, symbol, total balance
RowLayout {
Layout.fillWidth: true
spacing: root.spacing
Item {
id: nameRow
Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
StatusBaseText {
id: nameText
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: Math.min(implicitWidth, nameRow.width - symbolText.width - symbolText.anchors.leftMargin)
text: root.name
font.weight: Font.Medium
elide: Text.ElideRight
}
StatusBaseText {
id: symbolText
anchors.left: nameText.right
anchors.leftMargin: 6
anchors.verticalCenter: parent.verticalCenter
text: root.symbol
color: Theme.palette.baseColor1
}
}
StatusBaseText {
font.weight: Font.Medium
text: root.currencyBalanceAsString
}
}
// balances per network chain
StatusListView {
Layout.maximumWidth: parent.width
Layout.preferredWidth: contentWidth
Layout.preferredHeight: 22
orientation: ListView.Horizontal
spacing: root.spacing
visible: count
interactive: !root.ListView.view.moving
ScrollBar.horizontal: null
model: root.balancesModel
delegate: RowLayout {
height: ListView.view.height
spacing: 4
StatusRoundedImage {
Layout.preferredWidth: 16
Layout.preferredHeight: 16
image.source: Style.svg("tiny/%1".arg(model.iconUrl))
}
StatusBaseText {
font.pixelSize: Theme.tertiaryTextFontSize
text: model.balanceAsString
}
}
// let the root handle the click
TapHandler {
onTapped: root.clicked()
}
}
}
}
onClicked: root.assetSelected(root.tokensKey)
}