feat(@desktop/wallet2): Added new Tab to display Collectibles
New features added : 1. Tab which displays the collection 2. Page which display the details of the NFT fixes #3306
This commit is contained in:
parent
1db9e1b151
commit
06d7dbed95
|
@ -6,8 +6,10 @@ import "../../../shared"
|
|||
import "../../../shared/status/core"
|
||||
import "./components"
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: collectiblesTab
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
|
@ -52,6 +54,7 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
// To-do remove
|
||||
CollectibleModal {
|
||||
id: collectibleModalComponent
|
||||
}
|
||||
|
@ -65,32 +68,26 @@ Item {
|
|||
|
||||
Column {
|
||||
id: collectiblesSection
|
||||
spacing: Style.current.halfPadding
|
||||
width: root.width
|
||||
width: collectiblesTab.width
|
||||
|
||||
Repeater {
|
||||
id: collectionsRepeater
|
||||
model: walletV2Model.collectiblesView.collections
|
||||
|
||||
CollectibleCollection {
|
||||
name: model.name
|
||||
imageUrl: model.imageUrl
|
||||
ownedAssetCount: model.ownedAssetCount
|
||||
slug: model.slug
|
||||
collectibleModal: collectibleModalComponent
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.bigPadding
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.bigPadding
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusExpandableItem {
|
||||
width: parent.width - 156
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
|
||||
primaryText: model.name
|
||||
image.source: model.imageUrl
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandableComponent: CollectibleCollection {
|
||||
slug: model.slug
|
||||
collectionImageUrl: model.imageUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
##^##*/
|
||||
|
|
|
@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
|
|||
import "../../../imports"
|
||||
import "../../../shared"
|
||||
import "."
|
||||
import "./components"
|
||||
|
||||
import StatusQ.Layout 0.1
|
||||
|
||||
|
@ -12,6 +13,10 @@ Item {
|
|||
|
||||
property bool hideSignPhraseModal: false
|
||||
|
||||
function openCollectibleDetailView(options) {
|
||||
collectiblesDetailPage.show(options)
|
||||
}
|
||||
|
||||
function showSigningPhrasePopup(){
|
||||
if(!hideSignPhraseModal && !appSettings.hideSignPhraseModal){
|
||||
signPhrasePopup.open();
|
||||
|
@ -51,6 +56,7 @@ Item {
|
|||
WalletHeader {
|
||||
id: walletHeader
|
||||
changeSelectedAccount: leftTab.changeSelectedAccount
|
||||
visible: !collectiblesDetailPage.visible
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
|
@ -63,6 +69,7 @@ Item {
|
|||
anchors.rightMargin: 0
|
||||
anchors.top: walletHeader.bottom
|
||||
anchors.topMargin: 23
|
||||
visible: !collectiblesDetailPage.visible
|
||||
|
||||
Item {
|
||||
id: walletInfoContent
|
||||
|
@ -117,6 +124,11 @@ Item {
|
|||
id: walletFooter
|
||||
anchors.bottom: parent.bottom
|
||||
}
|
||||
|
||||
CollectibleDetailsPage {
|
||||
id: collectiblesDetailPage
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,38 +1,21 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtGraphicalEffects 1.13
|
||||
import "../../../../imports"
|
||||
import "../../../../shared"
|
||||
import "../../../../shared/status/core"
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
property string imageUrl: ""
|
||||
property string name: "CryptoKitties"
|
||||
property string slug: "cryptokitties"
|
||||
property int ownedAssetCount: 0
|
||||
property var collectibleModal
|
||||
property bool isOpened: false
|
||||
|
||||
property string slug: ""
|
||||
property bool assetsLoaded: false
|
||||
property string collectionImageUrl: ""
|
||||
|
||||
signal clicked()
|
||||
|
||||
width: parent.width
|
||||
height: {
|
||||
if (!isOpened) {
|
||||
return header.height
|
||||
}
|
||||
|
||||
return header.height + contentLoader.height
|
||||
}
|
||||
|
||||
function toggleCollection() {
|
||||
if (root.isOpened) {
|
||||
root.isOpened = false
|
||||
return
|
||||
}
|
||||
|
||||
walletV2Model.collectiblesView.loadAssets(walletV2Model.accountsView.currentAccount.address, root.slug)
|
||||
root.isOpened = true
|
||||
}
|
||||
height: contentLoader.height
|
||||
|
||||
Connections {
|
||||
target: walletV2Model.collectiblesView.getAssetsList(root.slug)
|
||||
|
@ -41,139 +24,55 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: header
|
||||
property bool hovered: false
|
||||
height: 64
|
||||
width: parent.width
|
||||
color: hovered ? Style.current.backgroundHover : Style.current.transparent
|
||||
border.width: 0
|
||||
radius: Style.current.radius
|
||||
|
||||
Image {
|
||||
id: image
|
||||
source: root.imageUrl
|
||||
width: 40
|
||||
height: 40
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.name
|
||||
anchors.left: image.right
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.right: header.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.verticalCenter: header.verticalCenter
|
||||
width: childrenRect.width
|
||||
height: count.height
|
||||
|
||||
StyledText {
|
||||
id: count
|
||||
color: Style.current.secondaryText
|
||||
text: root.ownedAssetCount
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
id: caretImg
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: "../../../img/caret.svg"
|
||||
width: 11
|
||||
anchors.left: count.right
|
||||
anchors.leftMargin: Style.current.padding
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
ColorOverlay {
|
||||
anchors.fill: caretImg
|
||||
source: caretImg
|
||||
color: Style.current.black
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
header.hovered = true
|
||||
}
|
||||
onExited: {
|
||||
header.hovered = false
|
||||
}
|
||||
onClicked: {
|
||||
root.toggleCollection()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
active: root.isOpened
|
||||
width: parent.width
|
||||
anchors.top: header.bottom
|
||||
anchors.topMargin: Style.current.halfPadding
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
sourceComponent: root.assetsLoaded ? loaded : loading
|
||||
}
|
||||
|
||||
Component {
|
||||
id: loading
|
||||
|
||||
Item {
|
||||
id: loadingIndicator
|
||||
height: 164
|
||||
StatusLoadingIndicator {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: 20
|
||||
height: 20
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: loaded
|
||||
ScrollView {
|
||||
height: contentRow.height
|
||||
width: parent.width
|
||||
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
|
||||
clip: true
|
||||
|
||||
Row {
|
||||
id: contentRow
|
||||
bottomPadding: Style.current.padding
|
||||
spacing: Style.current.padding
|
||||
Flow {
|
||||
width: parent.width
|
||||
|
||||
bottomPadding: 16
|
||||
spacing: 24
|
||||
|
||||
Repeater {
|
||||
model: walletV2Model.collectiblesView.getAssetsList(root.slug)
|
||||
|
||||
Item {
|
||||
width: image.width
|
||||
height: image.height
|
||||
clip: true
|
||||
|
||||
RoundedImage {
|
||||
StatusRoundedImage {
|
||||
id: image
|
||||
width: 164
|
||||
height: 164
|
||||
border.width: 1
|
||||
border.color: Style.current.border
|
||||
width: 146
|
||||
height: 146
|
||||
radius: 16
|
||||
source: model.imageUrl
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
image.source: model.imageUrl
|
||||
border.color: Theme.palette.baseColor2
|
||||
border.width: 1
|
||||
showLoadingIndicator: true
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
collectibleModal.openModal({
|
||||
openCollectibleDetailView({collectibleImageUrl:collectionImageUrl,
|
||||
name: model.name,
|
||||
collectibleId: model.id,
|
||||
description: model.description,
|
||||
|
@ -186,12 +85,8 @@ Item {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
walletV2Model.collectiblesView.loadAssets(walletV2Model.accountsView.currentAccount.address, root.slug)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
|
|
@ -0,0 +1,121 @@
|
|||
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
|
||||
|
||||
Item {
|
||||
id: collectiblesDetailHeader
|
||||
|
||||
property alias primaryText: collectibleName.text
|
||||
property alias secondaryText: collectibleId.text
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
}
|
||||
|
||||
height: childrenRect.height
|
||||
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
Row {
|
||||
id: backButtonRow
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 19
|
||||
anchors.left: parent.left
|
||||
spacing: 8
|
||||
StatusIcon {
|
||||
id: arrowIcon
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.verticalCenterOffset: -1
|
||||
icon: "chevron-up"
|
||||
rotation: 270
|
||||
color: Theme.palette.primaryColor1
|
||||
}
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
id: collectiblesText
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
lineHeight: 22
|
||||
lineHeightMode: Text.FixedHeight
|
||||
color: Theme.palette.primaryColor1
|
||||
text: qsTr("Collectibles")
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: backButtonRow
|
||||
onClicked: {
|
||||
hide()
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: collectibleRow
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 63
|
||||
anchors.left: parent.left
|
||||
width: parent.width - sendButton.width
|
||||
|
||||
spacing: 8
|
||||
|
||||
Loader {
|
||||
id: identiconLoader
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
sourceComponent: !!collectiblesDetailHeader.image.source.toString() ? roundedImage : statusLetterIdenticonCmp
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: collectibleName
|
||||
width: Math.min(parent.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 28
|
||||
lineHeight: 38
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: collectibleId
|
||||
anchors.verticalCenter: collectibleName.verticalCenter
|
||||
font.pixelSize: 28
|
||||
lineHeight: 38
|
||||
lineHeightMode: Text.FixedHeight
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roundedImage
|
||||
StatusRoundedImage {
|
||||
image.source: collectiblesDetailHeader.image.source
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticonCmp
|
||||
StatusLetterIdenticon {
|
||||
width: 40
|
||||
height: 40
|
||||
letterSize: 20
|
||||
color: Theme.palette.miscColor5
|
||||
name: collectibleName.text
|
||||
}
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
id: sendButton
|
||||
anchors.bottom: collectibleRow.bottom
|
||||
anchors.right: parent.right
|
||||
icon.name: "send"
|
||||
text: qsTr("Send")
|
||||
onClicked: () => console.log("TODO");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,130 @@
|
|||
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
|
||||
|
||||
Item {
|
||||
id: collectiblesDetailContainer
|
||||
|
||||
visible: false
|
||||
|
||||
function show(options) {
|
||||
visible = true
|
||||
|
||||
collectibleHeader.image.source = options.collectibleImageUrl
|
||||
collectibleHeader.primaryText = options.name
|
||||
collectibleHeader.secondaryText = options.collectibleId
|
||||
|
||||
collectibleimage.image.source = options.imageUrl
|
||||
collectibleText.text = options.description
|
||||
}
|
||||
|
||||
function hide() {
|
||||
visible = false
|
||||
}
|
||||
|
||||
CollectibleDetailsHeader {
|
||||
id: collectibleHeader
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 79
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 79
|
||||
anchors.top: parent.top
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 83
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 78
|
||||
anchors.top: collectibleHeader.bottom
|
||||
anchors.topMargin: 46
|
||||
|
||||
Row {
|
||||
id: collectibleImageDetails
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
spacing: 24
|
||||
|
||||
// To-do update color of background once design is finalized
|
||||
StatusRoundedImage {
|
||||
id: collectibleimage
|
||||
width: 253
|
||||
height: 253
|
||||
radius: 2
|
||||
color: "transparent"
|
||||
border.color: Theme.palette.directColor8
|
||||
border.width: 1
|
||||
}
|
||||
StatusBaseText {
|
||||
id: collectibleText
|
||||
width: parent.width - collectibleimage.width - 24
|
||||
height: collectibleimage.height
|
||||
|
||||
text: qsTr("Collectibles")
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 15
|
||||
lineHeight: 22
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: collectibleImageDetails.bottom
|
||||
anchors.topMargin: 32
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: parent.width
|
||||
StatusExpandableItem {
|
||||
width: parent.width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
primaryText: qsTr("Properties")
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
StatusExpandableItem {
|
||||
width: parent.width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
primaryText: "Data group 2"
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
StatusExpandableItem {
|
||||
width: parent.width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
primaryText: "Data group 3"
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: notImplemented
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
height: infoText.implicitHeight
|
||||
color: Theme.palette.baseColor5
|
||||
StatusBaseText {
|
||||
id: infoText
|
||||
anchors.centerIn: parent
|
||||
color: Theme.palette.directColor4
|
||||
font.pixelSize: 15
|
||||
lineHeight: 22
|
||||
lineHeightMode: Text.FixedHeight
|
||||
font.weight: Font.Medium
|
||||
text: qsTr("Not Implemented")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,3 +3,4 @@ HeaderButton 1.0 HeaderButton.qml
|
|||
CollectibleCollection 1.0 CollectibleCollection.qml
|
||||
CollectibleModal 1.0 CollectibleModal.qml
|
||||
AddAccountPopup 1.0 AddAccountPopup.qml
|
||||
CollectibleDetailsPage 1.0 CollectibleDetailsPage.qml
|
||||
|
|
Loading…
Reference in New Issue