diff --git a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml index 09700a208d..8b52c26d80 100644 --- a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml +++ b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml @@ -4,7 +4,9 @@ import QtQuick.Controls 2.13 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 + import shared.panels 1.0 +import utils 1.0 import "collectibles" @@ -23,33 +25,12 @@ Item { height: parent.height sourceComponent: { - if (!root.areCollectionsLoaded) - { - return loading - } else if (root.collectiblesModel.collectionCount === 0) { + if (root.areCollectionsLoaded && root.collectiblesModel.collectionCount === 0) return empty; - } else if (root.collectiblesModel.count === 0) { - return loading - } return loaded; } } - Component { - id: loading - - Item { - id: loadingIndicator - height: 164 - StatusLoadingIndicator { - width: 20 - height: 20 - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - Component { id: empty Item { @@ -68,19 +49,16 @@ Item { StatusGridView { id: gridView anchors.fill: parent - model: root.collectiblesModel + model: root.areCollectionsLoaded ? root.collectiblesModel : Constants.dummyModelItems cellHeight: 229 cellWidth: 176 - delegate: Item { + delegate: CollectibleView { height: gridView.cellHeight width: gridView.cellWidth - CollectibleView { - collectibleModel: model - anchors.fill: parent - anchors.bottomMargin: 4 - onCollectibleClicked: { - root.collectibleClicked(slug, collectibleId); - } + collectibleModel: root.areCollectionsLoaded ? model : undefined + isLoadingDelegate: !root.areCollectionsLoaded + onCollectibleClicked: { + root.collectibleClicked(slug, collectibleId); } } } diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml index 923839efc3..a56e03c9e8 100644 --- a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml +++ b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml @@ -5,23 +5,30 @@ import QtQuick.Layouts 1.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 + Item { id: root + property var collectibleModel + property bool isLoadingDelegate + + signal collectibleClicked(string slug, int collectibleId) + + QtObject { + id: d + readonly property bool modeDataValid: !!root.collectibleModel && root.collectibleModel !== undefined + readonly property bool isLoaded: modeDataValid ? root.collectibleModel.collectionCollectiblesLoaded : false + } implicitHeight: 225 implicitWidth: 176 - signal collectibleClicked(string slug, int collectibleId) - - readonly property bool isLoaded: root.collectibleModel.collectionCollectiblesLoaded - ColumnLayout { - //Layout.fillHeight: true - //Layout.fillWidth: true width: parent.width anchors.horizontalCenter: parent.horizontalCenter spacing: 0 @@ -34,38 +41,46 @@ Item { implicitWidth: 160 implicitHeight: 160 radius: 12 - image.source: root.collectibleModel.imageUrl + image.source: d.modeDataValid ? root.collectibleModel.imageUrl : "" border.color: Theme.palette.baseColor2 border.width: 1 showLoadingIndicator: true - color: root.collectibleModel.backgroundColor + color: d.modeDataValid ? root.collectibleModel.backgroundColor : "transparent" + Loader { + anchors.fill: parent + active: root.isLoadingDelegate + sourceComponent: LoadingComponent {radius: image.radius} + } } - StatusBaseText { + StatusTextWithLoadingState { id: collectibleLabel - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.leftMargin: 8 Layout.topMargin: 9 - Layout.preferredWidth: 144 + Layout.preferredWidth: isLoadingDelegate ? 134 : 144 Layout.preferredHeight: 21 horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter font.pixelSize: 15 - color: Theme.palette.directColor1 + customColor: Theme.palette.directColor1 font.weight: Font.DemiBold elide: Text.ElideRight - text: isLoaded ? root.collectibleModel.name : "..." + text: isLoadingDelegate ? Constants.dummyText : d.isLoaded && d.modeDataValid ? root.collectibleModel.name : "..." + loading: root.isLoadingDelegate } - StatusBaseText { + StatusTextWithLoadingState { id: collectionLabel - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - Layout.topMargin: 0 - Layout.preferredWidth: 144 + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.leftMargin: 8 + Layout.preferredWidth: isLoadingDelegate ? 88 : 144 Layout.preferredHeight: 18 horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter font.pixelSize: 13 - color: Theme.palette.baseColor1 + customColor: Theme.palette.baseColor1 elide: Text.ElideRight - text: root.collectibleModel.collectionName + text: isLoadingDelegate ? Constants.dummyText : d.modeDataValid ? root.collectibleModel.collectionName : "" + loading: root.isLoadingDelegate } } @@ -75,16 +90,16 @@ Item { border.width: 1 border.color: Theme.palette.primaryColor1 color: Theme.palette.indirectColor3 - visible: root.isLoaded && mouse.containsMouse + visible: d.isLoaded && mouse.containsMouse } MouseArea { id: mouse anchors.fill: parent hoverEnabled: true onClicked: { - if (root.isLoaded) { + if (d.isLoaded) { root.collectibleClicked(root.collectibleModel.collectionSlug, root.collectibleModel.id); } } } -} \ No newline at end of file +} diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml index 156525813b..55b10a930c 100644 --- a/ui/imports/utils/Constants.qml +++ b/ui/imports/utils/Constants.qml @@ -656,6 +656,7 @@ QtObject { readonly property string generatedWalletType: "generated" readonly property string dummyText: "Dummy" + readonly property int dummyModelItems: 25 readonly property string windows: "windows" readonly property string linux: "linux"