status-desktop/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml

import QtQuick 2.13
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.13

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1

import utils 1.0

Control {
    id: root

    property string title: ""
    property string subTitle: ""
    property string backgroundColor: "transparent"
    property url mediaUrl : ""
    property string mediaType: ""
    property url fallbackImageUrl : ""
    property bool isLoading: false
    property bool navigationIconVisible: false

    signal clicked

    implicitHeight: 225
    implicitWidth: 176

    background: Rectangle {
        radius: 18
        border.width: 1
        border.color: Theme.palette.primaryColor1
        color: Theme.palette.indirectColor3
        visible: !root.isLoading && mouse.containsMouse
    }

    contentItem: ColumnLayout {
        spacing: 0

        StatusRoundedMedia {
            id: image

            Layout.alignment: Qt.AlignHCenter
            Layout.margins: Style.current.halfPadding
            Layout.fillWidth: true
            Layout.preferredHeight: width
            radius: 12
            mediaUrl: root.mediaUrl
            mediaType: root.mediaType
            fallbackImageUrl: root.fallbackImageUrl
            border.color: Theme.palette.baseColor2
            border.width: 1
            showLoadingIndicator: true
            color: root.isLoading ? "transparent": root.backgroundColor

            Loader {
                anchors.fill: parent
                active: root.isLoading
                sourceComponent: LoadingComponent {radius: image.radius}
            }
        }

        RowLayout {
            Layout.leftMargin: Style.current.halfPadding
            Layout.rightMargin: Layout.leftMargin
            Layout.fillWidth: !root.isLoading
            Layout.preferredWidth: root.isLoading ? 134 : width

            StatusTextWithLoadingState {
                Layout.alignment: Qt.AlignLeft
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 15
                customColor: Theme.palette.directColor1
                font.weight: Font.DemiBold
                elide: Text.ElideRight
                text: root.isLoading ? Constants.dummyText : root.title
                loading: root.isLoading
            }

            StatusIcon {
                Layout.alignment: Qt.AlignVCenter
                visible: root.navigationIconVisible
                icon: "next"
                color: Theme.palette.baseColor1
            }
        }

        StatusTextWithLoadingState {
            Layout.alignment: Qt.AlignLeft
            Layout.leftMargin: Style.current.halfPadding
            Layout.rightMargin: Layout.leftMargin
            Layout.fillWidth: !root.isLoading
            Layout.preferredWidth: root.isLoading ? 88 : width
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 13
            customColor: Theme.palette.baseColor1
            elide: Text.ElideRight
            text: root.isLoading? Constants.dummyText : root.subTitle
            loading: root.isLoading
        }

        // Filler
        Item {
            Layout.fillHeight: true
        }
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            if (!root.isLoading) {
                root.clicked()
            }
        }
    }
}