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

126 lines
3.6 KiB
QML
Raw Normal View History

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 || highlighted ? 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 {}
statusListItemIcon.name: ""
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
}
}