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

134 lines
3.9 KiB
QML

import QtQuick 2.13
import QtQuick.Layouts 1.3
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import utils 1.0
import shared 1.0
StatusListItem {
id: root
property var modelData
property string symbol
property bool isIncoming
property int transferStatus
property string currentCurrency
property string cryptoValue
property string fiatValue
property string networkIcon
property string networkColor
property string networkName
property string shortTimeStamp
property string resolvedSymbol: root.symbol != "" ? root.symbol : "ETH"
property string savedAddressName
state: "normal"
asset.isImage: true
asset.name: Style.png("tokens/%1".arg(resolvedSymbol))
title: modelData !== undefined && !!modelData ?
isIncoming ? qsTr("Receive %1").arg(resolvedSymbol) : !!savedAddressName ?
qsTr("Send %1 to %2").arg(resolvedSymbol).arg(savedAddressName) :
qsTr("Send %1 to %2").arg(resolvedSymbol).arg(Utils.compactAddress(modelData.to, 4)): ""
subTitle: shortTimeStamp
inlineTagModel: 1
inlineTagDelegate: InformationTag {
tagPrimaryLabel.text: networkName
tagPrimaryLabel.color: networkColor
image.source: !!networkIcon ? Style.svg("tiny/%1".arg(networkIcon)) : ""
background: Rectangle {
id: controlBackground
implicitWidth: 51
implicitHeight: 24
color: "transparent"
border.width: 1
border.color: Theme.palette.baseColor2
radius: 36
}
rightComponent: transferStatus === Constants.TransactionStatus.Success ? completedIcon : loadingIndicator
}
components: [
ColumnLayout {
Row {
Layout.alignment: Qt.AlignRight
spacing: 4
StatusIcon {
color: isIncoming ? Theme.palette.successColor1 : Theme.palette.dangerColor1
icon: "arrow-up"
rotation: isIncoming ? 135 : 45
height: 18
}
StatusBaseText {
id: cryptoValueText
text: "%1 %2".arg(cryptoValue).arg(resolvedSymbol)
color: Theme.palette.directColor1
}
}
StatusBaseText {
Layout.alignment: Qt.AlignRight
text: "%1 %2".arg(fiatValue).arg(currentCurrency.toUpperCase())
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
]
Component {
id: loadingIndicator
StatusLoadingIndicator {
height: 10
width: 10
}
}
Component {
id: completedIcon
StatusIcon {
visible: icon !== ""
icon: "checkmark"
color: Theme.palette.baseColor1
width: 10
height: 10
}
}
states: [
State {
name: "normal"
PropertyChanges {
target: asset
width: 40
height: 40
}
PropertyChanges {
target: statusListItemTitle
font.weight: Font.Medium
font.pixelSize: 15
}
PropertyChanges {
target: cryptoValueText
font.pixelSize: 15
}
},
State {
name: "big"
PropertyChanges {
target: asset
width: 50
height: 50
}
PropertyChanges {
target: statusListItemTitle
font.weight: Font.Bold
font.pixelSize: 17
}
PropertyChanges {
target: cryptoValueText
font.pixelSize: 17
}
}
]
}