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

118 lines
3.3 KiB
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 imageUrl : ""
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
StatusRoundedImage {
id: image
Layout.alignment: Qt.AlignHCenter
Layout.margins: Style.current.halfPadding
Layout.fillWidth: true
Layout.preferredHeight: width
radius: 12
image.source: root.imageUrl
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()
}
}
}
}