status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@desktop/wallet): adjust collectible details screen to design

This commit is contained in:
Dario Gabriel Lipicar 2022-11-28 18:05:57 -03:00 committed by dlipicar
parent bc446f93b7
commit bd986a5b6b
9 changed files with 216 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/modules/main/wallet_section/collectibles/current_collectible/controller.nim
View File

@ -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())

3
src/app/modules/main/wallet_section/collectibles/current_collectible/io_interface.nim
View File

@ -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

9
src/app/modules/main/wallet_section/collectibles/current_collectible/module.nim
View File

@ -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)

75
src/app/modules/main/wallet_section/collectibles/current_collectible/view.nim
View File

@ -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()

2
src/app/modules/main/wallet_section/collectibles/module.nim
View File

@ -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

7
src/app_service/service/collectible/service.nim
View File

@ -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:

96
ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml
View File

@ -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
}
}
}

2
ui/app/AppLayouts/Wallet/views/RightTabView.qml
View File

@ -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:

82
ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml
View File

@ -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