status-desktop/ui/imports/shared/controls/TransactionDataTile.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
    }
}