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

100 lines
2.8 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Layouts 1.13
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.controls 1.0
import "../../stores"
import "../../controls"
Item {
id: root
signal goBack()
CollectibleDetailsHeader {
id: collectibleHeader
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
asset.name: RootStore.collectiblesStore.collectibleImageUrl
asset.isImage: true
primaryText: RootStore.collectiblesStore.name
secondaryText: RootStore.collectiblesStore.collectibleId
onGoBack: root.goBack()
}
ColumnLayout {
anchors.top: collectibleHeader.bottom
anchors.topMargin: 46
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
spacing: Style.current.padding
Row {
id: collectibleImageDetails
Layout.preferredWidth: parent.width
spacing: 24
StatusRoundedImage {
id: collectibleimage
width: 253
height: 253
radius: 2
color: RootStore.collectiblesStore.backgroundColor
border.color: Theme.palette.directColor8
border.width: 1
image.source: RootStore.collectiblesStore.imageUrl
}
StatusBaseText {
id: collectibleText
width: parent.width - collectibleimage.width - Style.current.bigPadding
height: collectibleimage.height
text: RootStore.collectiblesStore.description
color: Theme.palette.directColor1
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
wrapMode: Text.Wrap
}
}
StatusTabBar {
id: collectiblesDetailsTab
Layout.fillWidth: true
Layout.topMargin: Style.current.xlPadding
visible: RootStore.collectiblesStore.properties.count > 0
StatusTabButton {
leftPadding: 0
width: implicitWidth
text: qsTr("Properties")
}
}
StackLayout {
Flow {
width: parent.width
spacing: 10
Repeater {
model: RootStore.collectiblesStore.properties
InformationTile {
maxWidth: parent.width
primaryText: model.traitType
secondaryText: model.value
}
}
}
}
}
}