status-desktop/ui/imports/shared/controls/AssetsDetailsHeader.qml

112 lines
3.9 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.14
import utils 1.0
import shared.controls 1.0
import StatusQ 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
Control {
id: root
property alias primaryText: tokenName.text
property alias secondaryText: cryptoBalance.text
property alias tertiaryText: fiatBalance.text
property var balances
property var networksModel
property bool isLoading: false
property string errorTooltipText
property StatusAssetSettings asset: StatusAssetSettings {
width: 40
height: 40
}
property var formatBalance: function(balance){}
topPadding: Style.current.padding
contentItem: Column {
spacing: 4
Row {
spacing: 8
StatusSmartIdenticon {
id: identiconLoader
anchors.verticalCenter: parent.verticalCenter
asset: root.asset
loading: root.isLoading
}
StatusTextWithLoadingState {
id: tokenName
width: Math.min(root.width - identiconLoader.width - cryptoBalance.width - fiatBalance.width - 24, implicitWidth)
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 22
lineHeight: 30
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
customColor: Theme.palette.directColor1
loading: root.isLoading
}
StatusTextWithLoadingState {
id: cryptoBalance
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 22
lineHeight: 30
lineHeightMode: Text.FixedHeight
customColor: Theme.palette.baseColor1
loading: root.isLoading
}
StatusBaseText {
id: dotSeparator
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -15
font.pixelSize: 50
color: Theme.palette.baseColor1
text: "."
}
StatusTextWithLoadingState {
id: fiatBalance
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 22
lineHeight: 30
lineHeightMode: Text.FixedHeight
customColor: Theme.palette.baseColor1
loading: root.isLoading
}
}
/* TODO :: Issue with not being able to see correct balnces after switching assets will be fixed under
https://github.com/status-im/status-desktop/issues/12912 */
Row {
spacing: Style.current.smallPadding
anchors.left: parent.left
anchors.leftMargin: identiconLoader.width
Repeater {
id: chainRepeater
model: LeftJoinModel {
leftModel: root.balances
rightModel: root.networksModel
joinRole: "chainId"
}
delegate: InformationTag {
tagPrimaryLabel.text: root.formatBalance(model.balance)
tagPrimaryLabel.color: model.chainColor
image.source: Style.svg("tiny/%1".arg(model.iconUrl))
loading: root.isLoading
rightComponent: StatusFlatRoundButton {
width: 14
height: visible ? 14 : 0
icon.width: 14
icon.height: 14
icon.name: "tiny/warning"
icon.color: Theme.palette.dangerColor1
tooltip.text: root.errorTooltipText
visible: !!root.errorTooltipText
}
}
}
}
}
}