fix(@desktop/wallet): adjust collectible details screen to design
This commit is contained in:
parent
bc446f93b7
commit
bd986a5b6b
|
@ -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())
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -69,9 +69,12 @@ QtObject:
|
|||
)
|
||||
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:
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue