status-desktop/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
Lukáš Tinkl 8791d028e6 feat: Integrate the new manage assets/collectibles panels into Settings
- display a customized floating bubble to save/apply the settings
- display a toast message on Apply with an action to jump to Wallet main
page
- add home/end/pgup/pgdown keyboard shortcuts to StatusScrollView to be
able to navigate more easily in long list views
- some smaller fixes and cleanups in wallet and settings related views

Fixes https://github.com/status-im/status-desktop/issues/12762
2023-11-22 18:29:31 +01:00

107 lines
3.4 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import shared.panels 1.0
import utils 1.0
import "collectibles"
Item {
id: root
property var collectiblesModel
width: parent.width
signal collectibleClicked(int chainId, string contractAddress, string tokenId, string uid)
Loader {
id: contentLoader
width: parent.width
height: parent.height
sourceComponent: {
/* TODO: Issue #11635
if (!root.collectiblesModel.hasMore && root.collectiblesModel.count === 0)
return empty;
*/
return loaded;
}
}
Component {
id: empty
Item {
StyledText {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: Style.current.secondaryText
text: qsTr("Collectibles will appear here")
}
}
}
Component {
id: loaded
StatusGridView {
id: gridView
anchors.fill: parent
model: root.collectiblesModel
cellHeight: 229
cellWidth: 176
delegate: CollectibleView {
height: gridView.cellHeight
width: gridView.cellWidth
title: model.name ? model.name : "..."
subTitle: model.collectionName ?? ""
mediaUrl: model.mediaUrl ?? ""
mediaType: model.mediaType ?? ""
fallbackImageUrl: model.imageUrl ?? ""
backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent"
isLoading: !!model.isLoading
privilegesLevel: model.communityPrivilegesLevel ?? Constants.TokenPrivilegesLevel.Community
ornamentColor: model.communityColor ?? "transparent"
communityId: model.communityId ?? ""
onClicked: root.collectibleClicked(model.chainId, model.contractAddress, model.tokenId, model.uid)
}
ScrollBar.vertical: StatusScrollBar {}
// For some reason fetchMore is not working properly.
// Adding some logic here as a workaround.
visibleArea.onYPositionChanged: checkLoadMore()
visibleArea.onHeightRatioChanged: checkLoadMore()
Connections {
target: gridView
function onVisibleChanged() {
checkLoadMore()
}
}
Connections {
target: root.collectiblesModel
function onHasMoreChanged() {
checkLoadMore()
}
function onIsFetchingChanged() {
checkLoadMore()
}
}
function checkLoadMore() {
// If there is no more items to load or we're already fetching, return
if (!gridView.visible || !root.collectiblesModel.hasMore || root.collectiblesModel.isFetching)
return
// Only trigger if close to the bottom of the list
if (visibleArea.yPosition + visibleArea.heightRatio > 0.9)
root.collectiblesModel.loadMore()
}
}
}
}