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

136 lines
4.0 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
required property string name
required property string symbol
required property string currencyBalanceAsString
required property string iconSource
// expected structure: [iconUrl: string, balanceAsString: string]
property alias balancesModel: balancesListView.model
property alias balancesListInteractive: balancesListView.interactive
spacing: Style.current.halfPadding
horizontalPadding: Style.current.padding
verticalPadding: 4
opacity: enabled ? 1 : 0.3
implicitHeight: 60
icon.width: 32
icon.height: 32
icon.source: iconSource
background: Rectangle {
radius: Style.current.radius
color: root.hovered || root.highlighted
? Theme.palette.statusListItem.highlightColor
: "transparent"
HoverHandler {
cursorShape: root.enabled ? 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 {
Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
StatusBaseText {
id: nameText
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: Math.min(implicitWidth, parent.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 chain
StatusListView {
id: balancesListView
objectName: "balancesListView"
Layout.maximumWidth: parent.width
Layout.preferredWidth: contentWidth
Layout.preferredHeight: 22
ScrollBar.horizontal: null
orientation: ListView.Horizontal
spacing: root.spacing
visible: count
interactive: root.balancesListInteractive
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()
}
}
}
}
}