Skip to content

Commit

Permalink
feat: Manage Collectibles panel UI component & model
Browse files Browse the repository at this point in the history
- implements a QML panel to organize collectibles
- factors out the delegates to separate files to be reusable with the
Assets tab
- TODO: adds QML tests to assess the UI functionality (move,
show/hide, save/load)

Fixes: #12379
  • Loading branch information
caybro committed Nov 9, 2023
1 parent 7183621 commit ab4faca
Show file tree
Hide file tree
Showing 12 changed files with 714 additions and 219 deletions.
153 changes: 153 additions & 0 deletions storybook/pages/ManageCollectiblesPanelPage.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

import StatusQ 0.1
import StatusQ.Core 0.1

import AppLayouts.Wallet.panels 1.0

import utils 1.0

import Storybook 1.0
import Models 1.0

SplitView {
id: root

Logs { id: logs }

orientation: Qt.Horizontal

ListModel {
id: collectiblesModel

function randomizeData() {
}

readonly property var data: [
{
uid: "123",
name: "Punx not dead!",
collectionUid: "",
collectionName: "",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.cryptoPunks,
isLoading: false
},
{
uid: "34545656768",
name: "Kitty 1",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty1Big,
isLoading: false
},
{
uid: "123456",
name: "Kitty 2",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty2Big,
isLoading: false
},
{
uid: "12345645459537432",
name: "Big Kitty",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty3Big,
isLoading: false
},
{
uid: "691",
name: "KILLABEAR #691",
collectionUid: "",
collectionName: "",
communityId: "bbrz",
communityName: "Bearz",
communityImage: "https://i.seadn.io/gae/PKf2citPklcR_Ssd8bJvOUSRnsM9GJQBaC93GPVIMFqBdYSMRsSc1KPaD_0nq4WqAq6u1VPDAOQO9aOrXnk2ghTGgzKA8p6TMhAqlg?auto=format&dpr=1&w=384",
imageUrl: "https://assets.killabears.com/content/killabears/img/691-e81f892696a8ae700e0dbc62eb072060679a2046d1ef5eb2671bdb1fad1f68e3.png",
isLoading: true
},
{
uid: "8876",
name: "KILLABEAR #2385",
collectionUid: "",
collectionName: "",
communityId: "bbrz",
communityName: "Bearz",
communityImage: "https://i.seadn.io/gae/PKf2citPklcR_Ssd8bJvOUSRnsM9GJQBaC93GPVIMFqBdYSMRsSc1KPaD_0nq4WqAq6u1VPDAOQO9aOrXnk2ghTGgzKA8p6TMhAqlg?auto=format&dpr=1&w=384",
imageUrl: "https://assets.killabears.com/content/killabears/transparent-512/2385-86ba13cc6945ed0aea7c32a363a96be2f218898358745ae07b947452cb7e4e79.png",
isLoading: false
}
]

Component.onCompleted: append(data)
}

StatusScrollView { // wrapped in a ScrollView on purpose; to simulate SettingsContentBase.qml
SplitView.fillWidth: true
SplitView.preferredHeight: 500
ManageCollectiblesPanel {
id: showcasePanel
width: 500
baseModel: ctrlEmptyModel.checked ? null : collectiblesModel
}
}

LogsAndControlsPanel {
id: logsAndControlsPanel

SplitView.minimumWidth: 150
SplitView.preferredWidth: 250

logsView.logText: logs.logText

ColumnLayout {
Label {
Layout.fillWidth: true
text: "Dirty: %1".arg(showcasePanel.dirty ? "true" : "false")
}

Button {
text: "Save"
onClicked: showcasePanel.saveSettings()
}

Button {
enabled: showcasePanel.dirty
text: "Revert"
onClicked: showcasePanel.revert()
}

Button {
enabled: false
text: "Random data (TODO)"
onClicked: {
collectiblesModel.clear()
collectiblesModel.randomizeData()
}
}

Button {
text: "Clear settings"
onClicked: showcasePanel.clearSettings()
}

Switch {
id: ctrlEmptyModel
text: "Empty model"
}
}
}
}

// category: Panels
77 changes: 77 additions & 0 deletions storybook/src/Models/ManageCollectiblesModel.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import QtQuick 2.15
import QtQml.Models 2.15

import Models 1.0

ListModel {
function randomizeData() {
// TODO
}

readonly property var data: [
{
uid: "123",
name: "Punx not dead!",
collectionUid: "",
collectionName: "",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.cryptoPunks,
isLoading: false
},
{
uid: "34545656768",
name: "Kitty 1",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty1Big,
isLoading: false
},
{
uid: "123456",
name: "Kitty 2",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty2Big,
isLoading: false
},
{
uid: "12345645459537432",
name: "Big Kitty",
collectionUid: "KT",
collectionName: "Kitties",
communityId: "",
communityName: "",
imageUrl: ModelsData.collectibles.kitty3Big,
isLoading: false
},
{
uid: "691",
name: "KILLABEAR #691",
collectionUid: "",
collectionName: "",
communityId: "bbrz",
communityName: "Bearz",
communityImage: "https://i.seadn.io/gae/PKf2citPklcR_Ssd8bJvOUSRnsM9GJQBaC93GPVIMFqBdYSMRsSc1KPaD_0nq4WqAq6u1VPDAOQO9aOrXnk2ghTGgzKA8p6TMhAqlg?auto=format&dpr=1&w=384",
imageUrl: "https://assets.killabears.com/content/killabears/img/691-e81f892696a8ae700e0dbc62eb072060679a2046d1ef5eb2671bdb1fad1f68e3.png",
isLoading: true
},
{
uid: "8876",
name: "KILLABEAR #2385",
collectionUid: "",
collectionName: "",
communityId: "bbrz",
communityName: "Bearz",
communityImage: "https://i.seadn.io/gae/PKf2citPklcR_Ssd8bJvOUSRnsM9GJQBaC93GPVIMFqBdYSMRsSc1KPaD_0nq4WqAq6u1VPDAOQO9aOrXnk2ghTGgzKA8p6TMhAqlg?auto=format&dpr=1&w=384",
imageUrl: "https://assets.killabears.com/content/killabears/transparent-512/2385-86ba13cc6945ed0aea7c32a363a96be2f218898358745ae07b947452cb7e4e79.png",
isLoading: false
}
]

Component.onCompleted: append(data)
}
1 change: 1 addition & 0 deletions storybook/src/Models/ModelsData.qml
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ QtObject {
readonly property string custom: Style.png("collectibles/SNT")
readonly property string doodles: Style.png("collectibles/Doodles")
readonly property string mana: Style.png("collectibles/MANA-token-icon")
readonly property string cryptoPunks: Style.png("collectibles/CryptoPunks")
}

readonly property QtObject networks: QtObject {
Expand Down
1 change: 1 addition & 0 deletions storybook/src/Models/qmldir
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ FlatTokensModel 1.0 FlatTokensModel.qml
IconModel 1.0 IconModel.qml
LinkPreviewModel 1.0 LinkPreviewModel.qml
MintedTokensModel 1.0 MintedTokensModel.qml
ManageCollectiblesModel 1.0 ManageCollectiblesModel.qml
ManageTokensModel 1.0 ManageTokensModel.qml
RecipientModel 1.0 RecipientModel.qml
SourceOfTokensModel 1.0 SourceOfTokensModel.qml
Expand Down
3 changes: 3 additions & 0 deletions ui/StatusQ/src/wallet/managetokenscontroller.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ void ManageTokensController::saveSettings()
{
Q_ASSERT(!m_settingsKey.isEmpty());

for (auto model: m_allModels)
model->applySort();

// gather the data to save
SerializedTokenData result;
for (auto model: {m_regularTokensModel, m_communityTokensModel})
Expand Down
2 changes: 1 addition & 1 deletion ui/StatusQ/src/wallet/managetokensmodel.h
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const auto kTokenImageRoleName = QByteArrayLiteral("imageUrl");
} // namespace

struct TokenData {
QString symbol, name, communityId, communityName, communityImage, collectionUid, collectionName, image;
QString symbol, name, communityId, communityName, communityImage, collectionUid, collectionName, image; // FIXME add collectible's backgroundColor to model
QVariant balance, currencyBalance;
int customSortOrderNo{-1};
};
Expand Down
13 changes: 7 additions & 6 deletions ui/app/AppLayouts/Wallet/controls/ManageTokenMenuButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ StatusFlatButton {
property bool isGroup
property string groupId
property bool isCommunityAsset
property bool isCollectible

readonly property bool hideEnabled: model.symbol !== "ETH"
readonly property bool menuVisible: menuLoader.active
Expand Down Expand Up @@ -74,13 +75,13 @@ StatusFlatButton {
enabled: !root.inHidden && root.hideEnabled && !root.isGroup && !root.isCommunityAsset
type: StatusAction.Type.Danger
icon.name: "hide"
text: qsTr("Hide asset")
text: root.isCollectible ? qsTr("Hide collectible") : qsTr("Hide asset")
onTriggered: root.showHideRequested(root.currentIndex, false)
}
StatusAction {
enabled: root.inHidden
icon.name: "show"
text: qsTr("Show asset")
text: root.isCollectible ? qsTr("Show collectible") : qsTr("Show asset")
onTriggered: root.showHideRequested(root.currentIndex, true)
}

Expand All @@ -93,14 +94,14 @@ StatusFlatButton {
type: StatusAction.Type.Danger

StatusAction {
text: qsTr("This asset")
text: root.isCollectible ? qsTr("This collectible") : qsTr("This asset")
onTriggered: {
root.showHideRequested(root.currentIndex, false)
communitySubmenu.dismiss()
}
}
StatusAction {
text: qsTr("All assets from this community")
text: root.isCollectible ? qsTr("All collectibles from this community") : qsTr("All assets from this community")
onTriggered: {
root.showHideGroupRequested(root.groupId, false)
communitySubmenu.dismiss()
Expand All @@ -113,13 +114,13 @@ StatusFlatButton {
enabled: !root.inHidden && root.isGroup
type: StatusAction.Type.Danger
icon.name: "hide"
text: qsTr("Hide all assets from this community")
text: root.isCollectible ? qsTr("Hide all collectibles from this community") : qsTr("Hide all assets from this community")
onTriggered: root.showHideGroupRequested(root.groupId, false)
}
StatusAction {
enabled: root.inHidden && root.groupId
icon.name: "show"
text: qsTr("Show all assets from this community")
text: root.isCollectible ? qsTr("Show all collectibles from this community") : qsTr("Show all assets from this community")
onTriggered: root.showHideGroupRequested(root.groupId, true)
}
}
Expand Down
15 changes: 15 additions & 0 deletions ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import QtQuick 2.15

import StatusQ.Core.Theme 0.1

import shared.controls 1.0

InformationTag {
tagPrimaryLabel.font.weight: Font.Medium
customBackground: Component {
Rectangle {
color: Theme.palette.baseColor4
radius: 20
}
}
}
Loading

0 comments on commit ab4faca

Please sign in to comment.