diff --git a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml b/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml index 9cf8834b28..386da6c9bb 100644 --- a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml +++ b/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml @@ -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 + + primaryText: model.name + image.source: model.imageUrl + type: StatusExpandableItem.Type.Secondary + expandableComponent: CollectibleCollection { + slug: model.slug + collectionImageUrl: model.imageUrl + } } } } } } } - -/*##^## -Designer { - D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640} -} -##^##*/ diff --git a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml index 7f27e45dd7..e24b766d8a 100644 --- a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml +++ b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml @@ -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 + } } } } diff --git a/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml b/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml index 4d1c6b711f..e62215445d 100644 --- a/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml +++ b/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml @@ -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,157 +24,69 @@ 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 + + Flow { 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 + bottomPadding: 16 + spacing: 24 - Repeater { - model: walletV2Model.collectiblesView.getAssetsList(root.slug) - - Item { - width: image.width - height: image.height - clip: true - - RoundedImage { - id: image - width: 164 - height: 164 - border.width: 1 - border.color: Style.current.border - radius: 16 - source: model.imageUrl - fillMode: Image.PreserveAspectCrop - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - onClicked: { - collectibleModal.openModal({ - name: model.name, - collectibleId: model.id, - description: model.description, - permalink: model.permalink, - imageUrl: model.imageUrl - }) - } + Repeater { + model: walletV2Model.collectiblesView.getAssetsList(root.slug) + StatusRoundedImage { + id: image + width: 146 + height: 146 + radius: 16 + image.source: model.imageUrl + border.color: Theme.palette.baseColor2 + border.width: 1 + showLoadingIndicator: true + MouseArea { + anchors.fill: parent + onClicked: { + openCollectibleDetailView({collectibleImageUrl:collectionImageUrl, + name: model.name, + collectibleId: model.id, + description: model.description, + permalink: model.permalink, + imageUrl: model.imageUrl + }) } } } } } } - -} -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640} + Component.onCompleted: { + walletV2Model.collectiblesView.loadAssets(walletV2Model.accountsView.currentAccount.address, root.slug) + } } -##^##*/ diff --git a/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsHeader.qml b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsHeader.qml new file mode 100644 index 0000000000..282ac287a8 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsHeader.qml @@ -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"); + } +} diff --git a/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml new file mode 100644 index 0000000000..48b4cd5835 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml @@ -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") + } + } + } +} diff --git a/ui/app/AppLayouts/WalletV2/components/qmldir b/ui/app/AppLayouts/WalletV2/components/qmldir index e1cf6060eb..c603166900 100644 --- a/ui/app/AppLayouts/WalletV2/components/qmldir +++ b/ui/app/AppLayouts/WalletV2/components/qmldir @@ -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