236 lines
8.5 KiB
QML
236 lines
8.5 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 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 "../"
|
|
import "../../controls"
|
|
|
|
StackDetailBase {
|
|
id: root
|
|
backButtonText: "Collectibles"
|
|
|
|
property var store
|
|
property var assetStats: root.store.collectiblesStore.stats
|
|
property var assetRankings: root.store.collectiblesStore.rankings
|
|
property var assetProperties: root.store.collectiblesStore.properties
|
|
property int collectionIndex: root.store.collectiblesStore.collectionIndex
|
|
|
|
CollectibleDetailsHeader {
|
|
id: collectibleHeader
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
image.source: root.store.collectiblesStore.collectibleImageUrl
|
|
primaryText: root.store.collectiblesStore.name
|
|
secondaryText: root.store.collectiblesStore.collectibleId
|
|
}
|
|
|
|
Item {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: collectibleHeader.bottom
|
|
anchors.topMargin: 46
|
|
|
|
Row {
|
|
id: collectibleImageDetails
|
|
anchors.top: parent.top
|
|
width: parent.width
|
|
spacing: 24
|
|
|
|
StatusRoundedImage {
|
|
id: collectibleimage
|
|
width: 253
|
|
height: 253
|
|
radius: 2
|
|
color: root.store.collectiblesStore.backgroundColor
|
|
border.color: Theme.palette.directColor8
|
|
border.width: 1
|
|
image.source: root.store.collectiblesStore.imageUrl
|
|
}
|
|
StatusBaseText {
|
|
id: collectibleText
|
|
width: parent.width - collectibleimage.width - 24
|
|
height: collectibleimage.height
|
|
|
|
text: root.store.collectiblesStore.description
|
|
color: Theme.palette.directColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
elide: Text.ElideRight
|
|
wrapMode: Text.Wrap
|
|
}
|
|
}
|
|
|
|
ListView {
|
|
anchors.top: collectibleImageDetails.bottom
|
|
anchors.topMargin: 32
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: 20
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: parent.width
|
|
|
|
clip: true
|
|
boundsBehavior: Flickable.StopAtBounds
|
|
model: 3
|
|
delegate: StatusExpandableItem {
|
|
width: parent.width
|
|
height: childrenRect.height
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
primaryText: index === 0 ? qsTr("Properties") : index === 1 ? qsTr("Levels") : qsTr("Stats")
|
|
type: StatusExpandableItem.Type.Tertiary
|
|
expandableComponent: index === 0 ? properties : index === 1 ? rankings : stats
|
|
visible: index === 0 ? (!!assetProperties ? assetProperties.rowCount() !== 0 : false) :
|
|
index === 1 ? (!!assetRankings ? assetRankings.rowCount() !== 0 : false) :
|
|
(!!assetStats ? assetStats.rowCount() !== 0 : false)
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: properties
|
|
|
|
Flow {
|
|
width: parent.width
|
|
spacing: 10
|
|
|
|
Repeater {
|
|
model: assetProperties
|
|
Rectangle {
|
|
id: containerRect
|
|
height: 52
|
|
width: 147
|
|
color: "transparent"
|
|
border.color: Theme.palette.baseColor2
|
|
border.width: 1
|
|
radius: 8
|
|
Column {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 6
|
|
StatusBaseText {
|
|
width: containerRect.width - 12
|
|
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 13
|
|
lineHeight: 18
|
|
lineHeightMode: Text.FixedHeight
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: model.traitType
|
|
font.capitalization: Font.Capitalize
|
|
}
|
|
StatusBaseText {
|
|
width: containerRect.width - 12
|
|
|
|
color: Theme.palette.directColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
horizontalAlignment: Text.AlignHCenter
|
|
elide: Text.ElideRight
|
|
text: model.value
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// To-do change to progress bar one design is finalized
|
|
Component {
|
|
id: rankings
|
|
|
|
Column {
|
|
width: parent.width
|
|
spacing: 10
|
|
|
|
Repeater {
|
|
model: assetRankings
|
|
Rectangle {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: parent.width
|
|
height: 52
|
|
color: Theme.palette.baseColor4
|
|
StatusBaseText {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: Text.AlignLeft
|
|
text: model.traitType
|
|
font.capitalization: Font.Capitalize
|
|
}
|
|
StatusBaseText {
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.palette.directColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
horizontalAlignment: Text.AlignLeft
|
|
elide: Text.ElideRight
|
|
text: root.store.getCollectionMaxValue(model.traitType, model.value, model.maxValue, collectionIndex)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// To-do change to progress bar one design is finalized
|
|
Component {
|
|
id: stats
|
|
|
|
Column {
|
|
width: parent.width
|
|
spacing: 10
|
|
|
|
Repeater {
|
|
model: assetStats
|
|
Rectangle {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: parent.width
|
|
height: 52
|
|
color: Theme.palette.baseColor4
|
|
StatusBaseText {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: Text.AlignLeft
|
|
text: model.traitType
|
|
font.capitalization: Font.Capitalize
|
|
}
|
|
StatusBaseText {
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Theme.palette.directColor1
|
|
font.pixelSize: 15
|
|
lineHeight: 22
|
|
lineHeightMode: Text.FixedHeight
|
|
horizontalAlignment: Text.AlignLeft
|
|
elide: Text.ElideRight
|
|
text: root.store.getCollectionMaxValue(model.traitType, model.value, model.maxValue, collectionIndex)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|