From bd986a5b6b1aae95cac59f1fa84294c726d84210 Mon Sep 17 00:00:00 2001 From: Dario Gabriel Lipicar Date: Mon, 28 Nov 2022 18:05:57 -0300 Subject: [PATCH] fix(@desktop/wallet): adjust collectible details screen to design --- .../current_collectible/controller.nim | 6 +- .../current_collectible/io_interface.nim | 3 +- .../current_collectible/module.nim | 9 +- .../collectibles/current_collectible/view.nim | 75 ++++++++++++--- .../wallet_section/collectibles/module.nim | 2 +- .../service/collectible/service.nim | 7 +- .../controls/CollectibleDetailsHeader.qml | 96 ++++++++++++++----- .../AppLayouts/Wallet/views/RightTabView.qml | 2 +- .../collectibles/CollectibleDetailView.qml | 82 ++++++++++++---- 9 files changed, 216 insertions(+), 66 deletions(-) diff --git a/src/app/modules/main/wallet_section/collectibles/current_collectible/controller.nim b/src/app/modules/main/wallet_section/collectibles/current_collectible/controller.nim index f491e29e7c..80d6b21677 100644 --- a/src/app/modules/main/wallet_section/collectibles/current_collectible/controller.nim +++ b/src/app/modules/main/wallet_section/collectibles/current_collectible/controller.nim @@ -1,21 +1,25 @@ import io_interface +import ../../../../../../app_service/service/collectible/service as collectible_service import ../collectibles/module as collectibles_module import ../collections/module as collections_module type Controller* = ref object of RootObj delegate: io_interface.AccessInterface + collectibleService: collectible_service.Service collectiblesModule: collectibles_module.AccessInterface collectionsModule: collections_module.AccessInterface proc newController*( delegate: io_interface.AccessInterface, + collectibleService: collectible_service.Service, collectiblesModule: collectibles_module.AccessInterface, collectionsModule: collections_module.AccessInterface ): Controller = result = Controller() result.delegate = delegate + result.collectibleService = collectibleService result.collectiblesModule = collectiblesModule result.collectionsModule = collectionsModule @@ -26,4 +30,4 @@ proc init*(self: Controller) = discard proc update*(self: Controller, slug: string, id: int) = - self.delegate.setData(self.collectionsModule.getCollection(slug), self.collectiblesModule.getCollectible(slug, id)) + self.delegate.setData(self.collectionsModule.getCollection(slug), self.collectiblesModule.getCollectible(slug, id), self.collectibleService.getNetwork()) diff --git a/src/app/modules/main/wallet_section/collectibles/current_collectible/io_interface.nim b/src/app/modules/main/wallet_section/collectibles/current_collectible/io_interface.nim index 7ebf6e5fb9..bad1e14125 100644 --- a/src/app/modules/main/wallet_section/collectibles/current_collectible/io_interface.nim +++ b/src/app/modules/main/wallet_section/collectibles/current_collectible/io_interface.nim @@ -1,3 +1,4 @@ +import ../../../../../../app_service/service/network/dto as network_dto import ../collections/item as collection_item import ../collectibles/item as collectible_item @@ -17,7 +18,7 @@ method isLoaded*(self: AccessInterface): bool {.base.} = method update*(self: AccessInterface, slug: string, id: int) {.base.} = raise newException(ValueError, "No implementation available") -method setData*(self: AccessInterface, collection: collection_item.Item, collectible: collectible_item.Item) {.base.} = +method setData*(self: AccessInterface, collection: collection_item.Item, collectible: collectible_item.Item, network: network_dto.NetworkDto) {.base.} = raise newException(ValueError, "No implementation available") # View Delegate Interface diff --git a/src/app/modules/main/wallet_section/collectibles/current_collectible/module.nim b/src/app/modules/main/wallet_section/collectibles/current_collectible/module.nim index 5fc14fba44..882445b796 100644 --- a/src/app/modules/main/wallet_section/collectibles/current_collectible/module.nim +++ b/src/app/modules/main/wallet_section/collectibles/current_collectible/module.nim @@ -4,6 +4,8 @@ import ../../../../../global/global_singleton import ./io_interface, ./view, ./controller import ../io_interface as delegate_interface +import ../../../../../../app_service/service/collectible/service as collectible_service +import ../../../../../../app_service/service/network/dto as network_dto import ../collectibles/module as collectibles_module import ../collections/module as collections_module @@ -22,13 +24,14 @@ type proc newModule*( delegate: delegate_interface.AccessInterface, + collectibleService: collectible_service.Service, collectionsModule: collections_module.AccessInterface, collectiblesModule: collectibles_module.AccessInterface, ): Module = result = Module() result.delegate = delegate result.view = newView(result) - result.controller = newController(result, collectiblesModule, collectionsModule) + result.controller = newController(result, collectibleService, collectiblesModule, collectionsModule) result.moduleLoaded = false method delete*(self: Module) = @@ -50,5 +53,5 @@ method viewDidLoad*(self: Module) = method update*(self: Module, slug: string, id: int) = self.controller.update(slug, id) -method setData*(self: Module, collection: collection_item.Item, collectible: collectible_item.Item) = - self.view.setData(collection, collectible) +method setData*(self: Module, collection: collection_item.Item, collectible: collectible_item.Item, network: network_dto.NetworkDto) = + self.view.setData(collection, collectible, network) diff --git a/src/app/modules/main/wallet_section/collectibles/current_collectible/view.nim b/src/app/modules/main/wallet_section/collectibles/current_collectible/view.nim index f7fe507374..82f4283acb 100644 --- a/src/app/modules/main/wallet_section/collectibles/current_collectible/view.nim +++ b/src/app/modules/main/wallet_section/collectibles/current_collectible/view.nim @@ -1,6 +1,7 @@ import NimQml, sequtils, sugar import ./io_interface +import ../../../../../../app_service/service/network/dto as network_dto import ../collections/model as collections_model import ../collectibles/model as collectibles_model import ../collections/item as collection_item @@ -12,13 +13,18 @@ QtObject: View* = ref object of QObject delegate: io_interface.AccessInterface + networkName: string + networkColor: string + networkIconUrl: string + + collectionName: string + collectionImageUrl: string + name: string id: string description: string backgroundColor: string imageUrl: string - collectionID: string - collectionImageUrl: string permalink: string propertiesModel: TraitModel rankingsModel: TraitModel @@ -43,6 +49,33 @@ QtObject: proc load*(self: View) = self.delegate.viewDidLoad() + proc getNetworkName(self: View): QVariant {.slot.} = + return newQVariant(self.networkName) + + proc networkNameChanged(self: View) {.signal.} + + QtProperty[QVariant] networkName: + read = getNetworkName + notify = networkNameChanged + + proc getNetworkColor(self: View): QVariant {.slot.} = + return newQVariant(self.networkColor) + + proc networkColorChanged(self: View) {.signal.} + + QtProperty[QVariant] networkColor: + read = getNetworkColor + notify = networkColorChanged + + proc getNetworkIconUrl(self: View): QVariant {.slot.} = + return newQVariant(self.networkIconUrl) + + proc networkIconUrlChanged(self: View) {.signal.} + + QtProperty[QVariant] networkIconUrl: + read = getNetworkIconUrl + notify = networkIconUrlChanged + proc getName(self: View): QVariant {.slot.} = return newQVariant(self.name) @@ -88,14 +121,14 @@ QtObject: read = getImageUrl notify = imageUrlChanged - proc getCollectionID(self: View): QVariant {.slot.} = - return newQVariant(self.collectionID) + proc getCollectionName(self: View): QVariant {.slot.} = + return newQVariant(self.collectionName) - proc collectionIDChanged(self: View) {.signal.} + proc collectionNameChanged(self: View) {.signal.} - QtProperty[QVariant] collectionID: - read = getCollectionID - notify = collectionIDChanged + QtProperty[QVariant] collectionName: + read = getCollectionName + notify = collectionNameChanged proc getCollectionImageUrl(self: View): QVariant {.slot.} = return newQVariant(self.collectionImageUrl) @@ -145,7 +178,27 @@ QtObject: proc update*(self: View, slug: string, id: int) {.slot.} = self.delegate.update(slug, id) - proc setData*(self: View, collection: collection_item.Item, collectible: collectible_item.Item) = + proc setData*(self: View, collection: collection_item.Item, collectible: collectible_item.Item, network: network_dto.NetworkDto) = + if (self.networkName != network.chainName): + self.networkName = network.chainName + self.networkNameChanged() + + if (self.networkColor != network.chainColor): + self.networkColor = network.chainColor + self.networkColorChanged() + + if (self.networkIconUrl != network.iconURL): + self.networkIconUrl = network.iconURL + self.networkIconUrlChanged() + + if (self.collectionName != collection.getName()): + self.collectionName = collection.getName() + self.collectionNameChanged() + + if (self.collectionImageUrl != collection.getImageUrl()): + self.collectionImageUrl = collection.getImageUrl() + self.collectionImageUrlChanged() + if (self.name != collectible.getName()): self.name = collectible.getName() self.nameChanged() @@ -167,10 +220,6 @@ QtObject: self.imageUrl = collectible.getImageUrl() self.imageUrlChanged() - if (self.collectionImageUrl != collection.getImageUrl()): - self.collectionImageUrl = collection.getImageUrl() - self.collectionImageUrlChanged() - self.propertiesModel.setItems(collectible.getProperties()) self.propertiesChanged() diff --git a/src/app/modules/main/wallet_section/collectibles/module.nim b/src/app/modules/main/wallet_section/collectibles/module.nim index 2b2b222523..c1f22f5ac6 100644 --- a/src/app/modules/main/wallet_section/collectibles/module.nim +++ b/src/app/modules/main/wallet_section/collectibles/module.nim @@ -33,7 +33,7 @@ proc newModule*( result.collectiblesModule = collectibles_module.newModule(result, collectibleService) result.collectionsModule = collectionsModule.newModule(result, events, collectibleService) - result.currentCollectibleModule = currentCollectibleModule.newModule(result, result.collectionsModule, result.collectiblesModule) + result.currentCollectibleModule = currentCollectibleModule.newModule(result, collectibleService, result.collectionsModule, result.collectiblesModule) method delete*(self: Module) = self.collectiblesModule.delete diff --git a/src/app_service/service/collectible/service.nim b/src/app_service/service/collectible/service.nim index 6cda1a7e69..71dc3311a5 100644 --- a/src/app_service/service/collectible/service.nim +++ b/src/app_service/service/collectible/service.nim @@ -68,10 +68,13 @@ QtObject: address: address, ) self.threadpool.start(arg) - + + proc getNetwork*(self: Service): NetworkDto = + return self.networkService.getNetworkForCollectibles() + proc getCollectibles*(self: Service, address: string, collectionSlug: string): seq[CollectibleDto] = try: - let chainId = self.networkService.getNetworkForCollectibles().chainId + let chainId = self.getNetwork().chainId let response = backend.getOpenseaAssetsByOwnerAndCollection(chainId, address, collectionSlug, limit) return map(response.result.getElems(), proc(x: JsonNode): CollectibleDto = x.toCollectibleDto()) except Exception as e: diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml index b436174fac..823ce7cb75 100644 --- a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml +++ b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml @@ -8,41 +8,87 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 +import shared.controls 1.0 + ColumnLayout { id: root - property alias primaryText: collectibleName.text - property alias secondaryText: collectibleId.text + property string secondaryText + property bool isNarrowMode + property string networkName + property string networkColor + property string networkIconURL + property StatusAssetSettings asset: StatusAssetSettings { - width: 40 - height: 40 + readonly property int size: root.isNarrowMode ? 24 : 38 + width: size + height: size isImage: true } - RowLayout { - spacing: 8 - StatusSmartIdenticon { - id: identiconLoader - Layout.alignment: Qt.AlignVCenter - asset: root.asset - } + Component { + id: collectibleIdComponent StatusBaseText { - id: collectibleName - Layout.preferredWidth: Math.min(root.width - identiconLoader.width - collectibleId.width - 24, implicitWidth) - Layout.alignment: Qt.AlignVCenter - font.pixelSize: 28 - lineHeight: 38 - lineHeightMode: Text.FixedHeight - elide: Text.ElideRight - color: Theme.palette.directColor1 - } - StatusBaseText { - id: collectibleId - Layout.alignment: Qt.AlignVCenter - font.pixelSize: 28 - lineHeight: 38 + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + font.pixelSize: isNarrowMode ? 15 : 22 + lineHeight: isNarrowMode ? 22 : 30 lineHeightMode: Text.FixedHeight color: Theme.palette.baseColor1 } } + + RowLayout { + StatusSmartIdenticon { + id: identiconLoader + asset: root.asset + } + + StatusBaseText { + id: collectibleName + + font.pixelSize: 22 + lineHeight: 30 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + color: Theme.palette.directColor1 + } + + Loader { + id: collectibleIdTopRow + sourceComponent: collectibleIdComponent + visible: !root.isNarrowMode + + Binding { + target: collectibleIdTopRow.item + property: "text" + value: root.secondaryText + } + } + } + + RowLayout { + Layout.leftMargin: root.isNarrowMode ? 0 : 48 + spacing: 10 + + Loader { + id: collectibleIdBottomRow + sourceComponent: collectibleIdComponent + visible: root.isNarrowMode + + Binding { + target: collectibleIdBottomRow.item + property: "text" + value: root.secondaryText + } + } + + InformationTag { + id: networkTag + readonly property bool isNetworkValid: networkName !== "" + image.source: isNetworkValid && networkIconURL !== "" ? Style.svg("tiny/" + networkIconURL) : "" + tagPrimaryLabel.text: isNetworkValid ? networkName : "---" + tagPrimaryLabel.color: isNetworkValid ? networkColor : "black" + visible: isNetworkValid + } + } } diff --git a/ui/app/AppLayouts/Wallet/views/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml index 975f24dfcb..ce0f27d804 100644 --- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml @@ -29,7 +29,7 @@ Item { function getBackButtonText(index) { switch(index) { case 1: - return qsTr("Assets") + return qsTr("Collectibles") case 2: return qsTr("Assets") case 3: diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml index f40e91a84d..b5fff4c63e 100644 --- a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml +++ b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml @@ -1,4 +1,4 @@ -import QtQuick 2.13 +import QtQuick 2.14 import QtQuick.Layouts 1.13 import StatusQ.Components 0.1 @@ -16,6 +16,7 @@ Item { id: root property var currentCollectible: RootStore.currentCollectible + readonly property int isNarrowMode : width < 700 CollectibleDetailsHeader { id: collectibleHeader @@ -24,14 +25,20 @@ Item { anchors.right: parent.right asset.name: currentCollectible.collectionImageUrl asset.isImage: true - primaryText: currentCollectible.name + 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: 46 + anchors.topMargin: 25 anchors.left: parent.left + anchors.leftMargin: root.isNarrowMode ? 0 : 52 anchors.right: parent.right anchors.bottom: parent.bottom @@ -39,38 +46,72 @@ Item { Row { id: collectibleImageDetails + Layout.preferredHeight: root.isNarrowMode ? 152 : collectibleimage.height Layout.preferredWidth: parent.width spacing: 24 StatusRoundedImage { id: collectibleimage - width: 253 - height: 253 + 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 } - StatusBaseText { - id: collectibleText - width: parent.width - collectibleimage.width - Style.current.bigPadding - height: collectibleimage.height - text: currentCollectible.description - color: Theme.palette.directColor1 - font.pixelSize: 15 - lineHeight: 22 - lineHeightMode: Text.FixedHeight - elide: Text.ElideRight - wrapMode: Text.Wrap + 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: Style.current.xlPadding + Layout.topMargin: root.isNarrowMode ? 0 : Style.current.xlPadding visible: currentCollectible.properties.count > 0 StatusTabButton { @@ -80,9 +121,12 @@ Item { } } - StackLayout { + StatusScrollView { + id: scrollView + Layout.fillWidth: true + Layout.fillHeight: true Flow { - width: parent.width + width: scrollView.availableWidth spacing: 10 Repeater { model: currentCollectible.properties