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

125 lines
3.6 KiB
QML

import QtQuick 2.13
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import utils 1.0
import shared.panels 1.0
/*!
\qmltype TransactionDataTile
\inherits StatusListItem
\inqmlmodule shared.controls
\since shared.controls 1.0
\brief It displays data for wallet activity.
The \c TransactionDataTile can display wallet activity data as a tile.
To show button fill \l{buttonIcon} property.
\qml
TransactionDataTile {
width: parent.width
title: qsTr("From")
buttonIcon: "more"
}
\endqml
*/
StatusListItem {
id: root
/*!
\qmlproperty int TransactionDataTile::topPadding
This property holds spacing between top and content item in tile.
*/
property int topPadding: 12
/*!
\qmlproperty int TransactionDataTile::bottomPadding
This property holds spacing between bottom and content item in tile.
*/
property int bottomPadding: 12
/*!
\qmlproperty bool TransactionDataTile::smallIcon
This property holds information about icon state. Setting it to true will display small icon before subtitle.
Default value is false.
*/
property bool smallIcon: false
/*!
\qmlproperty string TransactionDataTile::buttonIconName
This property holds button icon source string.
To show button icon source must be filled
*/
property string buttonIconName
signal buttonClicked()
leftPadding: 12
rightPadding: 12
height: visible ? implicitHeight + bottomPadding : 0
radius: 0
sensor.cursorShape: Qt.ArrowCursor
color: sensor.containsMouse ? Theme.palette.baseColor5 : Style.current.transparent
// Title
statusListItemTitle.customColor: Theme.palette.directColor5
statusListItemTitle.enabled: false
statusListItemTitleArea.anchors {
left: statusListItemTitleArea.parent.left
top: statusListItemTitleArea.parent.top
topMargin: topPadding
right: statusListItemTitleArea.parent.right
verticalCenter: undefined
}
// Subtitle
statusListItemTagsRowLayout.anchors.topMargin: 8
statusListItemTagsRowLayout.width: statusListItemTagsRowLayout.parent.width - (!!root.buttonIconName ? 36 : 0)
statusListItemSubTitle.customColor: Theme.palette.directColor1
// Tertiary title
statusListItemTertiaryTitle.anchors.topMargin: -statusListItemTertiaryTitle.height
statusListItemTertiaryTitle.horizontalAlignment: Qt.AlignRight
// Icon
asset.isImage: false
statusListItemTagsRowLayout.spacing: 8
subTitleBadgeComponent: !!asset.name ? iconComponent : null
statusListItemIcon.asset: StatusAssetSettings {}
Component {
id: iconComponent
StatusRoundIcon {
asset: StatusAssetSettings {
name: root.asset.name
color: "transparent"
width: root.smallIcon ? 20 : 36
height: root.smallIcon ? 20 : 36
bgWidth: width
bgHeight: height
}
}
}
components: Loader {
active: !!root.buttonIconName
sourceComponent: StatusRoundButton {
width: 32
height: 32
icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
icon.name: root.buttonIconName
type: StatusRoundButton.Type.Quinary
radius: 8
visible: root.sensor.containsMouse
onClicked: root.buttonClicked()
}
}
Separator {
anchors.bottom: parent.bottom
}
}