status-desktop/ui/app/AppLayouts/Wallet/panels/CollectiblesContent.qml

115 lines
3.8 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml.Models 2.13
import utils 1.0
import "../../../../shared"
import "../../../../shared/status"
ScrollView {
id: collectiblesContent
readonly property int imageSize: 164
property var collectiblesModal
property string buttonText: "View in Cryptokitties"
property var getLink: function () {}
property var collectibles: []
signal reloadCollectibles(string collectibleType)
height: visible ? contentLoader.item.height : 0
width: parent.width
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
clip: true
Loader {
id: contentLoader
active: true
width: parent.width
height: collectiblesContent.imageSize
sourceComponent: !!error ? errorComponent : collectiblesContentComponent
}
Component {
id: errorComponent
Item {
width: parent.width
height: collectiblesContent.imageSize
Item {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
height: childrenRect.height
width: somethingWentWrongText.width
StyledText {
id: somethingWentWrongText
//% "Something went wrong"
text: qsTrId("something-went-wrong")
anchors.horizontalCenter: parent.horizontalCenter
color: Style.current.secondaryText
font.pixelSize: 13
}
StatusButton {
//% "Reload"
text: qsTrId("reload")
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: somethingWentWrongText.bottom
anchors.topMargin: Style.current.halfPadding
onClicked: {
reloadCollectibleClicked(collectibleType)
}
}
}
}
}
Component {
id: collectiblesContentComponent
Row {
id: contentRow
bottomPadding: Style.current.padding
spacing: Style.current.padding
Repeater {
model: collectibles
Item {
width: collectibleImage.width
height: collectibleImage.height
clip: true
RoundedImage {
id: collectibleImage
width: collectiblesContent.imageSize
height: collectiblesContent.imageSize
border.width: 1
border.color: Style.current.border
radius: 16
source: modelData.image
fillMode: Image.PreserveAspectCrop
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
collectiblesModal.openModal({
name: modelData.name,
id: modelData.id,
description: modelData.description,
buttonText: collectiblesContent.buttonText,
link: collectiblesContent.getLink(modelData.id, modelData.externalUrl),
image: modelData.image
})
}
}
}
}
}
}
}