import QtQuick 2.14 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 property var currentCollectible: RootStore.currentCollectible readonly property int isNarrowMode : width < 700 CollectibleDetailsHeader { id: collectibleHeader anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right asset.name: currentCollectible.collectionImageUrl asset.isImage: true primaryText: currentCollectible.collectionName secondaryText: currentCollectible.id isNarrowMode: root.isNarrowMode networkName: currentCollectible.networkName networkColor: currentCollectible.networkColor networkIconURL: currentCollectible.networkIconUrl } ColumnLayout { id: collectibleBody anchors.top: collectibleHeader.bottom anchors.topMargin: 25 anchors.left: parent.left anchors.leftMargin: root.isNarrowMode ? 0 : 52 anchors.right: parent.right anchors.bottom: parent.bottom spacing: Style.current.padding Row { id: collectibleImageDetails Layout.preferredHeight: root.isNarrowMode ? 152 : collectibleimage.height Layout.preferredWidth: parent.width spacing: 24 StatusRoundedImage { id: collectibleimage readonly property int size : root.isNarrowMode ? 132 : 253 width: size height: size radius: 2 color: currentCollectible.backgroundColor border.color: Theme.palette.directColor8 border.width: 1 image.source: currentCollectible.imageUrl } Column { id: collectibleNameAndDescription spacing: 12 width: parent.width - collectibleimage.width - Style.current.bigPadding StatusBaseText { id: collectibleName width: parent.width height: 24 text: currentCollectible.name color: Theme.palette.directColor1 font.pixelSize: 17 lineHeight: 24 elide: Text.ElideRight wrapMode: Text.WordWrap } StatusScrollView { id: descriptionScrollView width: parent.width height: collectibleImageDetails.height - collectibleName.height - parent.spacing contentWidth: availableWidth contentHeight: descriptionText.height padding: 0 StatusBaseText { id: descriptionText width: descriptionScrollView.availableWidth text: currentCollectible.description textFormat: Text.MarkdownText color: Theme.palette.directColor4 font.pixelSize: 15 lineHeight: 22 lineHeightMode: Text.FixedHeight elide: Text.ElideRight wrapMode: Text.Wrap } } } } StatusTabBar { id: collectiblesDetailsTab Layout.fillWidth: true Layout.topMargin: root.isNarrowMode ? 0 : Style.current.xlPadding visible: currentCollectible.properties.count > 0 StatusTabButton { leftPadding: 0 width: implicitWidth text: qsTr("Properties") } } StatusScrollView { id: scrollView Layout.fillWidth: true Layout.fillHeight: true Flow { width: scrollView.availableWidth spacing: 10 Repeater { model: currentCollectible.properties InformationTile { maxWidth: parent.width primaryText: model.traitType secondaryText: model.value } } } } } }