137 lines
4.0 KiB
QML
137 lines
4.0 KiB
QML
import QtQuick 2.15
|
|
import QtGraphicalEffects 1.15
|
|
|
|
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
|
|
|
|
property StatusAssetSettings iconSettings: StatusAssetSettings {
|
|
name: root.asset.name
|
|
color: "transparent"
|
|
width: root.smallIcon ? 20 : 36
|
|
height: root.smallIcon ? 20 : 36
|
|
bgWidth: width
|
|
bgHeight: height
|
|
}
|
|
|
|
signal buttonClicked()
|
|
|
|
leftPadding: 12
|
|
rightPadding: 12
|
|
height: visible ? implicitHeight + bottomPadding : 0
|
|
radius: 0
|
|
sensor.cursorShape: Qt.ArrowCursor
|
|
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor5 : Theme.palette.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: root.iconSettings
|
|
layer.enabled: asset.bgRadius > 0
|
|
layer.effect: OpacityMask {
|
|
maskSource: Rectangle {
|
|
width: root.iconSettings.bgWidth
|
|
height: root.iconSettings.bgHeight
|
|
radius: root.iconSettings.bgRadius
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|