feat(ProfileShowcase): Assets panel navigation button

- Added new button to navigate to accounts tab form assets tab.
- Added needed support in storybook to cover the new use case.

Closes #13337
This commit is contained in:
Noelia 2024-02-09 12:05:51 +01:00 committed by Noelia
parent 8c939ad3a3
commit 9d4f1f6aa7
4 changed files with 74 additions and 4 deletions

View File

@ -1,5 +1,6 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1 as CoreUtils
@ -70,17 +71,22 @@ SplitView {
StatusScrollView { // wrapped in a ScrollView on purpose; to simulate SettingsContentBase.qml
SplitView.fillWidth: true
SplitView.preferredHeight: 500
ProfileShowcaseAssetsPanel {
id: showcasePanel
width: 500
baseModel: walletAssetStore.groupedAccountAssetsModel
showcaseModel: inShowcaseAssetsModel
addAccountsButtonVisible: !hasAllAccountsChecker.checked
formatCurrencyAmount: function (amount, symbol) {
return ({amount: amount,
symbol: symbol.toUpperCase(),
displayDecimals: 4,
stripTrailingZeroes: false})
}
onNavigateToAccountsTab: logs.logEvent("ProfileShowcaseAccountsPanel::onNavigateToAccountsTab")
}
}
@ -92,9 +98,19 @@ SplitView {
logsView.logText: logs.logText
Button {
text: "Reset (clear settings)"
onClicked: showcasePanel.settings.reset()
ColumnLayout {
Button {
text: "Reset (clear settings)"
onClicked: showcasePanel.settings.reset()
}
CheckBox {
id: hasAllAccountsChecker
text: "Has the user already shared all of their accounts"
checked: true
}
}
}
}
@ -105,3 +121,4 @@ SplitView {
// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-238808&t=RkXAEv3G6mp3EUvl-0
// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-239912&t=RkXAEv3G6mp3EUvl-0
// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-240991&t=RkXAEv3G6mp3EUvl-0
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?type=design&node-id=2460%3A30679&mode=design&t=6rs9xMrPv4sGZKe4-1

View File

@ -1,14 +1,23 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import utils 1.0
import shared.panels 1.0
import AppLayouts.Profile.controls 1.0
ProfileShowcasePanel {
id: root
required property bool addAccountsButtonVisible
property var formatCurrencyAmount: function(amount, symbol){}
signal navigateToAccountsTab()
keyRole: "symbol"
roleNames: ["symbol", "name", "address", "communityId", "enabledNetworkBalance", "decimals"].concat(showcaseRoles)
filterFunc: (modelData) => modelData.symbol !== "" && !showcaseModel.hasItemInShowcase(modelData.symbol)
@ -43,4 +52,36 @@ ProfileShowcasePanel {
root.showcaseEntryChanged()
}
}
additionalComponent: root.addAccountsButtonVisible ? addMoreAccountsComponent : null
Component {
id: addMoreAccountsComponent
ColumnLayout {
spacing: Style.current.halfPadding
visible: root.addAccountsButtonVisible
Separator {
Layout.fillWidth: true
Layout.topMargin: Style.current.padding
Layout.bottomMargin: Style.current.padding
}
StatusBaseText {
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Style.current.additionalTextSize
text: qsTr("Dont see some of your assets?")
}
StatusFlatButton {
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Style.current.additionalTextSize
text: qsTr("Add accounts to showcase")
onClicked: root.navigateToAccountsTab()
}
}
}
}

View File

@ -30,6 +30,7 @@ Control {
property string showcasePlaceholderBanner
property Component draggableDelegateComponent
property Component showcaseDraggableDelegateComponent
property Component additionalComponent
signal showcaseEntryChanged()
@ -337,6 +338,13 @@ Control {
}
}
Loader {
id: additionalComponent
Layout.fillWidth: true
sourceComponent: root.additionalComponent
}
Item { Layout.fillHeight: true }
}
}

View File

@ -219,12 +219,16 @@ SettingsContentBase {
// assets
ProfileShowcaseAssetsPanel {
id: profileShowcaseAssetsPanel
baseModel: root.walletAssetsStore.groupedAccountAssetsModel // TODO: instantiate an assets model in profile module
showcaseModel: root.profileStore.profileShowcaseAssetsModel
onShowcaseEntryChanged: priv.hasAnyProfileShowcaseChanges = true
addAccountsButtonVisible: root.profileStore.profileShowcaseAccountsModel.hiddenCount > 0
formatCurrencyAmount: function(amount, symbol) {
return root.currencyStore.formatCurrencyAmount(amount, symbol)
}
onShowcaseEntryChanged: priv.hasAnyProfileShowcaseChanges = true
onNavigateToAccountsTab: profileTabBar.currentIndex = 2
}
// web