feat(Community Permissions): Update `Who holds` tokens dropdown design and flow according to the new design

- Updated initial dropdown view for assets and collectibles to directly show the list of corresponding elements.
- Updated assets and collectibles panel when an item is selected, according to new design.
- Updated collectibles logic when amount is 1.
- Added collectibles group item as part of the selectable's options.
- Updated `storybook` according to new changes.
- Created reusable `TokenItem` component.
- Updated `CommunityPermissionsHelpers`.

Closes #9043
This commit is contained in:
Noelia 2023-01-18 20:54:14 +01:00 committed by Noelia
parent 66c62e472f
commit 3136ffb54d
17 changed files with 574 additions and 647 deletions

View File

@ -29,6 +29,15 @@
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A489607", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A489607",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A492910" "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A492910"
], ],
"HoldingsDropdown": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499660&t=F5yiYQV2YGPBdrJ8-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499992&t=je3ZsbFwMntKAhKe-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22827%3A501381&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22733%3A502088&t=5QSRGGAhrksqBs8e-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22772%3A496580&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22772%3A496653&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22734%3A502737&t=7gqqAFbdG5KrPOmn-0"
],
"InDropdown": [ "InDropdown": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A482182", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A482182",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A482231", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A482231",
@ -65,12 +74,12 @@
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160" "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
], ],
"CommunityPermissionsSettingsPanel": [ "CommunityPermissionsSettingsPanel": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2992%3A367890&t=IfHHp5GSPo1j9m5j-0", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2992%3A367890&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480020&t=IfHHp5GSPo1j9m5j-0", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22137%3A484809&t=7gqqAFbdG5KrPOmn-0",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A484715&t=IfHHp5GSPo1j9m5j-0" "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
], ],
"CommunityPermissionsView": [ "CommunityPermissionsView": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A484715&t=IfHHp5GSPo1j9m5j-0" "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
], ],
"PermissionQualificationPanel": [ "PermissionQualificationPanel": [
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480089", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480089",

View File

@ -9,11 +9,6 @@ import AppLayouts.Chat.controls.community 1.0
Pane { Pane {
id: root id: root
function openFlow(flowType) {
holdingsDropdown.close()
holdingsDropdown.openFlow(flowType)
}
RowLayout { RowLayout {
Label { Label {
text: "Open flow:" text: "Open flow:"
@ -21,12 +16,19 @@ Pane {
Button { Button {
text: "Add" text: "Add"
onClicked: openFlow(HoldingsDropdown.FlowType.Add) onClicked: {
holdingsDropdown.close()
holdingsDropdown.open()
}
} }
Button { Button {
text: "Update" text: "Update"
onClicked: openFlow(HoldingsDropdown.FlowType.Update) onClicked: {
holdingsDropdown.close()
holdingsDropdown.setActiveTab(HoldingTypes.Type.Ens)
holdingsDropdown.openUpdateFlow()
}
} }
} }
@ -88,6 +90,9 @@ Pane {
} }
onOpened: contentItem.parent.parent = root onOpened: contentItem.parent.parent = root
Component.onCompleted: openFlow(HoldingsDropdown.FlowType.Add) Component.onCompleted: {
holdingsDropdown.close()
holdingsDropdown.open()
}
} }
} }

View File

@ -1,47 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import shared.controls 1.0
ColumnLayout {
id: root
property alias assetName: pickerButton.text
property url assetImage
property alias amountText: amountInput.text
property alias amount: amountInput.amount
readonly property bool amountValid: amountInput.valid && amountInput.text.length > 0
signal pickerClicked
function setAmount(amount) {
amountInput.setAmount(amount)
}
spacing: 0
StatusPickerButton {
id: pickerButton
Layout.fillWidth: true
Layout.preferredHeight: 36
bgColor: Theme.palette.baseColor5
contentColor: Theme.palette.directColor1
font.pixelSize: 13
asset.name: root.assetImage
onClicked: pickerClicked()
}
AmountInput {
id: amountInput
Layout.fillWidth: true
Layout.topMargin: 8
}
}

View File

@ -1,70 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import shared.controls 1.0
ColumnLayout {
id: root
property alias specificAmount: specificAmountSwitch.checked
property alias collectibleName: pickerButton.text
property url collectibleImage
property alias amountText: amountInput.text
property alias amount: amountInput.amount
readonly property bool amountValid: amountInput.valid && amountInput.text.length > 0
signal pickerClicked
function setAmount(amount) {
amountInput.setAmount(amount)
}
spacing: 0
StatusPickerButton {
id: pickerButton
Layout.fillWidth: true
Layout.preferredHeight: 36
bgColor: Theme.palette.baseColor5
contentColor: Theme.palette.directColor1
text: root.collectibleName
font.pixelSize: 13
asset.name: root.collectibleImage
onClicked: pickerClicked()
}
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: 16
Layout.rightMargin: 6
Layout.topMargin: 8
StatusBaseText {
Layout.fillWidth: true
text: qsTr("Specific amount")
font.pixelSize: 13
wrapMode: Text.WordWrap
elide: Text.ElideRight
}
StatusSwitch { id: specificAmountSwitch }
}
AmountInput {
id: amountInput
visible: specificAmountSwitch.checked
Layout.fillWidth: true
Layout.topMargin: 8
allowDecimals: false
}
}

View File

@ -6,10 +6,17 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1 import StatusQ.Controls.Validators 0.1
ColumnLayout { ColumnLayout {
id: root
property int mode: HoldingTypes.Mode.Add
property alias domainName: domainNameInput.text property alias domainName: domainNameInput.text
property alias domainNameValid: domainNameInput.valid property alias domainNameValid: domainNameInput.valid
property alias addButtonEnabled: addOrUpdateButton.enabled
signal addClicked
signal updateClicked
signal removeClicked
spacing: 0 spacing: 0
@ -56,4 +63,26 @@ ColumnLayout {
lineHeight: 18 lineHeight: 18
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
} }
StatusButton {
id: addOrUpdateButton
text: (root.mode === HoldingTypes.Mode.Add) ? qsTr("Add") : qsTr("Update")
Layout.topMargin: 40
Layout.preferredHeight: 44 // by design
Layout.fillWidth: true
onClicked: root.mode === HoldingTypes.Mode.Add
? root.addClicked() : root.updateClicked()
}
StatusFlatButton {
text: qsTr("Remove")
Layout.topMargin: 16 // by design
Layout.preferredHeight: 44 // by design
Layout.fillWidth: true
visible: root.mode === HoldingTypes.Mode.Update
type: StatusBaseButton.Type.Danger
onClicked: root.removeClicked()
}
} }

View File

@ -21,6 +21,7 @@ Item {
readonly property bool canGoBack: root.state !== d.listView_depth1_State readonly property bool canGoBack: root.state !== d.listView_depth1_State
signal itemClicked(string key, string name, url iconSource) signal itemClicked(string key, string name, url iconSource)
signal navigateDeep(string key, var subItems)
enum Type{ enum Type{
Assets, Assets,
@ -31,6 +32,14 @@ Item {
root.state = d.listView_depth1_State root.state = d.listView_depth1_State
} }
function goForward(key, itemName, itemSource, subItems) {
d.currentSubitems = subItems
d.currentItemKey = key
d.currentItemName = itemName
d.currentItemSource = itemSource
root.state = d.listView_depth2_State
}
QtObject { QtObject {
id: d id: d
readonly property int filterItemsHeight: 36 readonly property int filterItemsHeight: 36
@ -44,6 +53,7 @@ Item {
readonly property string listView_depth2_State: "LIST-DEPTH2" readonly property string listView_depth2_State: "LIST-DEPTH2"
property var currentModel: root.store.collectiblesModel property var currentModel: root.store.collectiblesModel
property var currentSubitems property var currentSubitems
property string currentItemKey: ""
property string currentItemName: "" property string currentItemName: ""
property url currentItemSource: "" property url currentItemSource: ""
@ -61,6 +71,7 @@ Item {
} }
function reset() { function reset() {
d.currentItemKey = ""
d.currentItemName = "" d.currentItemName = ""
d.currentItemSource = "" d.currentItemSource = ""
d.currentModel = root.store.collectiblesModel d.currentModel = root.store.collectiblesModel
@ -85,6 +96,10 @@ Item {
? root.store.assetsModel : collectiblesFilteredModel//root.store.collectiblesModel ? root.store.assetsModel : collectiblesFilteredModel//root.store.collectiblesModel
isFilterOptionVisible: false isFilterOptionVisible: false
} }
PropertyChanges {
target: tokenGroupItem
visible: false
}
PropertyChanges { PropertyChanges {
target: searcher target: searcher
visible: type === ExtendedDropdownContent.Type.Collectibles visible: type === ExtendedDropdownContent.Type.Collectibles
@ -102,6 +117,10 @@ Item {
currentModel: d.currentSubitems currentModel: d.currentSubitems
isFilterOptionVisible: true isFilterOptionVisible: true
} }
PropertyChanges {
target: tokenGroupItem
visible: true
}
}, },
State { State {
name: d.thumbnailsViewState name: d.thumbnailsViewState
@ -115,6 +134,10 @@ Item {
currentModel: d.currentSubitems currentModel: d.currentSubitems
isFilterOptionVisible: true isFilterOptionVisible: true
} }
PropertyChanges {
target: tokenGroupItem
visible: true
}
} }
] ]
@ -247,6 +270,18 @@ Item {
maximumHeight: 36 maximumHeight: 36
} }
TokenItem {
id: tokenGroupItem
Layout.fillWidth: true
key: d.currentItemKey
name: d.currentItemName
iconSource: d.currentItemSource
enabled: true
onItemClicked: root.itemClicked(d.currentItemKey,
d.currentItemName,
d.currentItemSource)
}
Loader { Loader {
id: contentLoader id: contentLoader
@ -292,9 +327,11 @@ Item {
if(subItems && root.state === d.listView_depth1_State) { if(subItems && root.state === d.listView_depth1_State) {
// One deep navigation // One deep navigation
d.currentSubitems = subItems d.currentSubitems = subItems
d.currentItemKey = key
d.currentItemName = name d.currentItemName = name
d.currentItemSource = iconSource d.currentItemSource = iconSource
root.state = d.listView_depth2_State root.state = d.listView_depth2_State
root.navigateDeep(key, subItems)
} }
else { else {
d.reset() d.reset()

View File

@ -4,4 +4,8 @@ QtObject {
enum Type { enum Type {
Asset, Collectible, Ens Asset, Collectible, Ens
} }
enum Mode {
Add, Update
}
} }

View File

@ -9,7 +9,6 @@ import StatusQ.Core.Utils 0.1
import AppLayouts.Chat.helpers 1.0 import AppLayouts.Chat.helpers 1.0
StatusDropdown { StatusDropdown {
id: root id: root
@ -20,7 +19,6 @@ StatusDropdown {
property string collectibleKey: "" property string collectibleKey: ""
property real collectibleAmount: 1 property real collectibleAmount: 1
property bool collectiblesSpecificAmount: false
property string ensDomainName: "" property string ensDomainName: ""
@ -34,46 +32,18 @@ StatusDropdown {
signal removeClicked signal removeClicked
function reset() {
d.currentHoldingType = HoldingTypes.Type.Asset
d.assetAmountText = ""
d.collectibleAmountText = ""
root.assetKey = ""
root.collectibleKey = ""
root.assetAmount = 0
root.collectibleAmount = 1
root.collectiblesSpecificAmount = false
root.ensDomainName = ""
statesStack.clear()
}
width: d.defaultWidth
padding: d.padding
// force keeping within the bounds of the enclosing window
margins: 0
onClosed: root.reset()
enum FlowType { enum FlowType {
Add, Update Selected, List_Deep1, List_Deep2
} }
function openFlow(flowType) { function openUpdateFlow() {
switch (flowType) { d.currentHoldingMode = HoldingTypes.Mode.Update
case HoldingsDropdown.FlowType.Add: if(d.currentHoldingType !== HoldingTypes.Type.Ens) {
statesStack.push(d.addState) if(statesStack.size === 0)
break statesStack.push(HoldingsDropdown.FlowType.List_Deep1)
case HoldingsDropdown.FlowType.Update:
statesStack.push(d.updateState)
break
default:
console.warn("Unknown flow type.")
return
}
statesStack.push(HoldingsDropdown.FlowType.Selected)
}
open() open()
} }
@ -81,50 +51,60 @@ StatusDropdown {
d.currentHoldingType = holdingType d.currentHoldingType = holdingType
} }
function reset() {
d.currentHoldingType = HoldingTypes.Type.Asset
d.currentHoldingMode = HoldingTypes.Mode.Add
d.assetAmountText = ""
d.collectibleAmountText = ""
root.assetKey = ""
root.collectibleKey = ""
root.assetAmount = 0
root.collectibleAmount = 1
root.ensDomainName = ""
d.setInitialFlow()
}
QtObject { QtObject {
id: d id: d
// Internal management properties and signals: // Internal management properties and signals:
readonly property var holdingTypes: [
HoldingTypes.Type.Asset, HoldingTypes.Type.Collectible, HoldingTypes.Type.Ens
]
readonly property bool assetsReady: root.assetAmount > 0 && root.assetKey readonly property bool assetsReady: root.assetAmount > 0 && root.assetKey
readonly property bool collectiblesReady: root.collectibleAmount > 0 && root.collectibleKey readonly property bool collectiblesReady: root.collectibleAmount > 0 && root.collectibleKey
readonly property bool ensReady: d.ensDomainNameValid readonly property bool ensReady: d.ensDomainNameValid
readonly property string addState: "ADD"
readonly property string updateState: "UPDATE"
readonly property string extendedState: "EXTENDED"
property int holdingsTabMode: HoldingsTabs.Mode.Add
property int extendedDropdownType: ExtendedDropdownContent.Type.Assets property int extendedDropdownType: ExtendedDropdownContent.Type.Assets
property int currentHoldingType: HoldingTypes.Type.Asset
property int currentHoldingMode: HoldingTypes.Mode.Add
property bool extendedDeepNavigation: false
property var currentSubItems
property string currentItemKey: ""
property string assetAmountText: "" property string assetAmountText: ""
property string collectibleAmountText: "" property string collectibleAmountText: "1"
property int currentHoldingType: HoldingTypes.Type.Asset
property bool ensDomainNameValid: false property bool ensDomainNameValid: false
signal addClicked
signal updateClicked
// By design values: // By design values:
readonly property int padding: 8 readonly property int padding: 8
readonly property int defaultWidth: 289 readonly property int defaultWidth: 289
readonly property int extendedContentHeight: 380 readonly property int extendedContentHeight: 380
readonly property int tabBarHeigh: 36
readonly property int tabsAddModeBaseHeight: 232 - padding * 2 readonly property int tabBarTextSize: 13
readonly property int tabsAddModeExtendedHeight: 277 - padding * 2
readonly property int tabsUpdateModeBaseHeight: 284 - padding * 2
readonly property int tabsUpdateModeExtendedHeight: tabsUpdateModeBaseHeight
+ (tabsAddModeExtendedHeight - tabsAddModeBaseHeight)
readonly property int backButtonWidth: 56 readonly property int backButtonWidth: 56
readonly property int backButtonHeight: 24 readonly property int backButtonHeight: 24
readonly property int backButtonToContentSpace: 8 readonly property int backButtonToContentSpace: 8
readonly property string defaultAssetNameText: qsTr("Choose asset") function setInitialFlow() {
readonly property string defaultCollectibleNameText: qsTr("Choose collectible") statesStack.clear()
if(d.currentHoldingType !== HoldingTypes.Type.Ens)
statesStack.push(HoldingsDropdown.FlowType.List_Deep1)
else
statesStack.push(HoldingsDropdown.FlowType.Selected)
}
} }
QtObject { QtObject {
@ -153,6 +133,9 @@ StatusDropdown {
} }
} }
width: d.defaultWidth
padding: d.padding
margins: 0 // force keeping within the bounds of the enclosing window
contentItem: ColumnLayout { contentItem: ColumnLayout {
id: content id: content
@ -163,9 +146,7 @@ StatusDropdown {
Layout.preferredWidth: d.backButtonWidth Layout.preferredWidth: d.backButtonWidth
Layout.preferredHeight: d.backButtonHeight Layout.preferredHeight: d.backButtonHeight
visible: statesStack.size > 1 visible: statesStack.size > 1
spacing: 0 spacing: 0
leftPadding: 4 leftPadding: 4
statusIcon: "next" statusIcon: "next"
@ -175,6 +156,50 @@ StatusDropdown {
text: qsTr("Back") text: qsTr("Back")
} }
StatusSwitchTabBar {
id: tabBar
visible: !backButton.visible
Layout.preferredHeight: d.tabBarHeigh
Layout.fillWidth: true
currentIndex: d.holdingTypes.indexOf(d.currentHoldingType)
state: d.currentHoldingType
states: [
State {
name: HoldingTypes.Type.Asset
PropertyChanges {target: loader; sourceComponent: listLayout}
PropertyChanges {target: root; height: d.extendedContentHeight}
PropertyChanges {target: d; extendedDropdownType: ExtendedDropdownContent.Type.Assets}
},
State {
name: HoldingTypes.Type.Collectible
PropertyChanges {target: loader; sourceComponent: listLayout}
PropertyChanges {target: root; height: d.extendedContentHeight}
PropertyChanges {target: d; extendedDropdownType: ExtendedDropdownContent.Type.Collectibles}
},
State {
name: HoldingTypes.Type.Ens
PropertyChanges {target: loader; sourceComponent: ensLayout}
PropertyChanges {target: root; height: undefined} // use implicit height
}
]
onCurrentIndexChanged: {
d.currentHoldingType = d.holdingTypes[currentIndex]
d.setInitialFlow()
}
Repeater {
id: tabLabelsRepeater
model: [qsTr("Asset"), qsTr("Collectible"), qsTr("ENS")]
StatusSwitchTabButton {
text: modelData
fontPixelSize: d.tabBarTextSize
}
}
}
Loader { Loader {
id: loader id: loader
Layout.fillWidth: true Layout.fillWidth: true
@ -183,185 +208,144 @@ StatusDropdown {
states: [ states: [
State { State {
name: d.addState name: HoldingsDropdown.FlowType.Selected
PropertyChanges {target: loader; sourceComponent: tabsView} PropertyChanges {target: loader; sourceComponent: (d.currentHoldingType === HoldingTypes.Type.Asset) ? assetLayout :
((d.currentHoldingType === HoldingTypes.Type.Collectible) ? collectibleLayout : ensLayout) }
PropertyChanges {target: root; height: undefined} // use implicit height PropertyChanges {target: root; height: undefined} // use implicit height
}, },
State { State {
name: d.updateState name: HoldingsDropdown.FlowType.List_Deep1
extend: d.addState PropertyChanges {target: loader; sourceComponent: listLayout}
PropertyChanges {target: d; holdingsTabMode: HoldingsTabs.Mode.Update} PropertyChanges {target: root; height: d.extendedContentHeight}
PropertyChanges {target: d; extendedDeepNavigation: false}
}, },
State { State {
name: d.extendedState name: HoldingsDropdown.FlowType.List_Deep2
PropertyChanges {target: loader; sourceComponent: extendedView} extend: HoldingsDropdown.FlowType.List_Deep1
PropertyChanges {target: root; height: d.extendedContentHeight} PropertyChanges {target: d; extendedDeepNavigation: true}
} }
] ]
} }
onClosed: root.reset()
Component { Component {
id: tabsView id: listLayout
HoldingsTabs { ExtendedDropdownContent {
id: holdingsTabs id: listPanel
readonly property var holdingTypes: [ store: root.store
HoldingTypes.Type.Asset, HoldingTypes.Type.Collectible, HoldingTypes.Type.Ens type: d.extendedDropdownType
]
readonly property var labels: [qsTr("Asset"), qsTr("Collectible"), qsTr("ENS")]
readonly property bool extendedHeight: onItemClicked: {
d.currentHoldingType === HoldingTypes.Type.Collectible && collectiblesSpecificAmount || if(d.extendedDropdownType === ExtendedDropdownContent.Type.Assets)
d.currentHoldingType === HoldingTypes.Type.Ens root.assetKey = key
else
root.collectibleKey = key
implicitHeight: extendedHeight statesStack.push(HoldingsDropdown.FlowType.Selected)
? (mode === HoldingsTabs.Mode.Add ? d.tabsAddModeExtendedHeight : d.tabsUpdateModeExtendedHeight)
: (mode === HoldingsTabs.Mode.Add ? d.tabsAddModeBaseHeight : d.tabsUpdateModeBaseHeight)
states: [
State {
name: HoldingTypes.Type.Asset
PropertyChanges {target: holdingsTabs; sourceComponent: assetsLayout; addOrUpdateButtonEnabled: d.assetsReady}
},
State {
name: HoldingTypes.Type.Collectible
PropertyChanges {target: holdingsTabs; sourceComponent: collectiblesLayout; addOrUpdateButtonEnabled: d.collectiblesReady}
},
State {
name: HoldingTypes.Type.Ens
PropertyChanges {target: holdingsTabs; sourceComponent: ensLayout; addOrUpdateButtonEnabled: d.ensReady}
} }
]
tabLabels: labels onNavigateDeep: {
state: d.currentHoldingType d.currentSubItems = subItems
mode: d.holdingsTabMode d.currentItemKey = key
statesStack.push(HoldingsDropdown.FlowType.List_Deep2)
}
currentIndex: holdingTypes.indexOf(d.currentHoldingType) Component.onCompleted: {
onCurrentIndexChanged: d.currentHoldingType = holdingTypes[currentIndex] if(d.extendedDeepNavigation)
listPanel.goForward(d.currentItemKey,
onAddClicked: d.addClicked() CommunityPermissionsHelpers.getTokenNameByKey(store.collectiblesModel, d.currentItemKey),
onUpdateClicked: d.updateClicked() CommunityPermissionsHelpers.getTokenIconByKey(store.collectiblesModel, d.currentItemKey),
onRemoveClicked: root.removeClicked() d.currentSubItems)
}
Connections { Connections {
target: backButton target: backButton
function onClicked() { function onClicked() {
if (listPanel.canGoBack)
listPanel.goBack()
statesStack.pop() statesStack.pop()
} }
} }
Connections {
target: root
function onClosed() { listPanel.goBack() }
}
} }
} }
Component { Component {
id: assetsLayout id: assetLayout
AssetsPanel { TokenPanel {
id: assetsPanel id: assetPanel
assetName: d.defaultAssetNameText
amountText: d.assetAmountText
onAmountTextChanged: d.assetAmountText = amountText
readonly property real effectiveAmount: amountValid ? amount : 0 readonly property real effectiveAmount: amountValid ? amount : 0
tokenName: CommunityPermissionsHelpers.getTokenNameByKey(store.assetsModel, root.assetKey)
tokenShortName: CommunityPermissionsHelpers.getTokenShortNameByKey(store.assetsModel, root.assetKey)
tokenImage: CommunityPermissionsHelpers.getTokenIconByKey(store.assetsModel, root.assetKey)
amountText: d.assetAmountText
tokenCategoryText: qsTr("Asset")
addOrUpdateButtonEnabled: d.assetsReady
mode: d.currentHoldingMode
onEffectiveAmountChanged: root.assetAmount = effectiveAmount onEffectiveAmountChanged: root.assetAmount = effectiveAmount
onAmountTextChanged: d.assetAmountText = amountText
onPickerClicked: { onAddClicked: root.addAsset(root.assetKey, root.assetAmount)
d.extendedDropdownType = ExtendedDropdownContent.Type.Assets onUpdateClicked: root.updateAsset(root.assetKey, root.assetAmount)
statesStack.push(d.extendedState) onRemoveClicked: root.removeClicked()
}
readonly property string assetKey: root.assetKey
onAssetKeyChanged: {
const modelItem = CommunityPermissionsHelpers.getAssetByKey(
store.assetsModel, assetKey)
if (modelItem) {
assetsPanel.assetName = modelItem.shortName
assetsPanel.assetImage = modelItem.iconSource
} else {
assetsPanel.assetName = d.defaultAssetNameText
assetsPanel.assetImage = ""
}
}
Component.onCompleted: { Component.onCompleted: {
if (d.assetAmountText.length === 0 && root.assetAmount) if (d.assetAmountText.length === 0 && root.assetAmount)
assetsPanel.setAmount(root.assetAmount) assetPanel.setAmount(root.assetAmount)
} }
Connections { Connections {
target: d target: backButton
function onAddClicked() { function onClicked() { statesStack.pop() }
root.addAsset(root.assetKey, root.assetAmount)
}
function onUpdateClicked() {
root.updateAsset(root.assetKey, root.assetAmount)
}
} }
} }
} }
Component { Component {
id: collectiblesLayout id: collectibleLayout
CollectiblesPanel { TokenPanel {
id: collectiblesPanel id: collectiblePanel
collectibleName: d.defaultCollectibleNameText
amountText: d.collectibleAmountText
onAmountTextChanged: d.collectibleAmountText = amountText
readonly property real effectiveAmount: amountValid ? amount : 0 readonly property real effectiveAmount: amountValid ? amount : 0
tokenName: CommunityPermissionsHelpers.getTokenNameByKey(store.collectiblesModel, root.collectibleKey)
tokenShortName: ""
tokenImage: CommunityPermissionsHelpers.getTokenIconByKey(store.collectiblesModel, root.collectibleKey)
amountText: d.collectibleAmountText
tokenCategoryText: qsTr("Collectible")
addOrUpdateButtonEnabled: d.collectiblesReady
allowDecimals: false
mode: d.currentHoldingMode
onEffectiveAmountChanged: root.collectibleAmount = effectiveAmount onEffectiveAmountChanged: root.collectibleAmount = effectiveAmount
onAmountTextChanged: d.collectibleAmountText = amountText
specificAmount: root.collectiblesSpecificAmount onAddClicked: root.addCollectible(root.collectibleKey, root.collectibleAmount)
onSpecificAmountChanged: root.collectiblesSpecificAmount = specificAmount onUpdateClicked: root.updateCollectible(root.collectibleKey, root.collectibleAmount)
onRemoveClicked: root.removeClicked()
onPickerClicked: {
d.extendedDropdownType = ExtendedDropdownContent.Type.Collectibles
statesStack.push(d.extendedState)
}
Component.onCompleted: { Component.onCompleted: {
if (d.collectibleAmountText.length === 0 && root.collectibleAmount) if (d.collectibleAmountText.length === 0 && root.collectibleAmount)
collectiblesPanel.setAmount(root.collectibleAmount) collectiblePanel.setAmount(root.collectibleAmount)
}
function getAmount() {
return specificAmount ? effectiveAmount : 1
} }
Connections { Connections {
target: d target: backButton
function onAddClicked() { function onClicked() { statesStack.pop() }
root.addCollectible(root.collectibleKey, collectiblesPanel.getAmount())
}
function onUpdateClicked() {
root.updateCollectible(root.collectibleKey, collectiblesPanel.getAmount())
}
}
readonly property string collectibleKey: root.collectibleKey
onCollectibleKeyChanged: {
const modelItem = CommunityPermissionsHelpers.getCollectibleByKey(
store.collectiblesModel, collectibleKey)
if (modelItem) {
collectiblesPanel.collectibleName = modelItem.name
collectiblesPanel.collectibleImage = modelItem.iconSource
} else {
collectiblesPanel.collectibleName = d.defaultCollectibleNameText
collectiblesPanel.collectibleImage = ""
}
} }
} }
} }
@ -370,52 +354,15 @@ StatusDropdown {
id: ensLayout id: ensLayout
EnsPanel { EnsPanel {
addButtonEnabled: d.ensReady
domainName: root.ensDomainName domainName: root.ensDomainName
mode: d.currentHoldingMode
onDomainNameChanged: root.ensDomainName = domainName onDomainNameChanged: root.ensDomainName = domainName
onDomainNameValidChanged: d.ensDomainNameValid = domainNameValid onDomainNameValidChanged: d.ensDomainNameValid = domainNameValid
onAddClicked: root.addEns(root.ensDomainName)
Connections { onUpdateClicked: root.updateEns(root.ensDomainName)
target: d onRemoveClicked: root.removeClicked()
function onAddClicked() {
root.addEns(root.ensDomainName)
}
function onUpdateClicked() {
root.updateEns(root.ensDomainName)
}
}
}
}
Component {
id: extendedView
ExtendedDropdownContent {
id: extendedDropdown
store: root.store
type: d.extendedDropdownType
onItemClicked: {
statesStack.pop()
if(d.extendedDropdownType === ExtendedDropdownContent.Type.Assets)
root.assetKey = key
else
root.collectibleKey = key
}
Connections {
target: backButton
function onClicked() {
if (extendedDropdown.canGoBack)
extendedDropdown.goBack()
else
statesStack.pop()
}
}
} }
} }
} }

View File

@ -1,95 +0,0 @@
import QtQuick 2.14
import StatusQ.Controls 0.1
Item {
id: root
property int mode: HoldingsTabs.Mode.Add
property alias tabLabels: tabLabelsRepeater.model
property alias sourceComponent: tabsLoader.sourceComponent
property alias addOrUpdateButtonEnabled: addOrUpdateButton.enabled
property alias currentIndex: tabBar.currentIndex
readonly property alias item: tabsLoader.item
signal addClicked
signal updateClicked
signal removeClicked
enum Mode {
Add, Update
}
function setCurrentIndex(index) {
tabBar.setCurrentIndex(index)
}
QtObject {
id: d
// values from design
readonly property int tabBarHeight: 36
readonly property int tabBarFontPixelSize: 13
readonly property int contentTopMargin: 16
readonly property int buttonsHeight: 44
readonly property int buttonsSpacing: 8
}
StatusSwitchTabBar {
id: tabBar
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
height: d.tabBarHeight
Repeater {
id: tabLabelsRepeater
StatusSwitchTabButton {
text: modelData
fontPixelSize: d.tabBarFontPixelSize
}
}
}
Loader {
id: tabsLoader
anchors.top: tabBar.bottom
anchors.right: parent.right
anchors.left: parent.left
anchors.topMargin: d.contentTopMargin
}
Column {
spacing: d.buttonsSpacing
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
StatusButton {
id: addOrUpdateButton
text: (root.mode === HoldingsTabs.Mode.Add ? qsTr("Add") : qsTr("Update"))
height: d.buttonsHeight
width: parent.width
onClicked: root.mode === HoldingsTabs.Mode.Add
? root.addClicked() : root.updateClicked()
}
StatusFlatButton {
text: qsTr("Remove")
height: d.buttonsHeight
width: parent.width
visible: root.mode === HoldingsTabs.Mode.Update
type: StatusBaseButton.Type.Danger
onClicked: root.removeClicked()
}
}
}

View File

@ -53,61 +53,20 @@ StatusListView {
} }
} }
}// End of Header }// End of Header
delegate: Rectangle { delegate: TokenItem {
width: ListView.view.width width: ListView.view.width
height: 45 // by design key: model.key
color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent" name: model.name
RowLayout { shortName: !!model.shortName ? model.shortName : ""
anchors.fill: parent iconSource: model.iconSource
anchors.leftMargin: 6 subItems: model.subItems
spacing: 8 enabled: true
StatusRoundedImage { onItemClicked: root.itemClicked(model.key,
Layout.alignment: Qt.AlignVCenter model.name,
image.source: model.iconSource model.shortName,
visible: model.iconSource.toString() !== "" model.iconSource,
Layout.preferredWidth: 32 model.subItems)
Layout.preferredHeight: Layout.preferredWidth
} }
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: 0
StatusBaseText {
Layout.fillWidth: true
text: model.name
color: Theme.palette.directColor1
font.pixelSize: 13
clip: true
elide: Text.ElideRight
}
StatusBaseText {
visible: !!model.shortName
Layout.fillWidth: true
text: !!model.shortName ? model.shortName : ""
color: Theme.palette.baseColor1
font.pixelSize: 12
clip: true
elide: Text.ElideRight
}
}
StatusIcon {
icon: "tiny/chevron-right"
visible: !!model.subItems && model.subItems.count > 0
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 16
color: Theme.palette.baseColor1
width: 16
height: 16
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: { root.itemClicked(model.key, model.name, model.shortName, model.iconSource, model.subItems) }
}
}// End of Item
section.property: "category" section.property: "category"
section.criteria: ViewSection.FullString section.criteria: ViewSection.FullString
section.delegate: Item { section.delegate: Item {

View File

@ -23,52 +23,11 @@ StatusScrollView {
readonly property int columns: 2 readonly property int columns: 2
} }
implicitHeight: Math.min(column.implicitHeight, root.maxHeight) implicitHeight: Math.min(grid.implicitHeight, root.maxHeight)
implicitWidth: d.imageSize * d.columns + grid.columnSpacing * (d.columns - 1) implicitWidth: d.imageSize * d.columns + grid.columnSpacing * (d.columns - 1)
clip: true clip: true
flickDeceleration: Flickable.VerticalFlick ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ColumnLayout {
id: column
spacing: 4
Item {
Layout.fillWidth: true
height: 45 // by design
RowLayout {
anchors.fill: parent
anchors.leftMargin: 8
spacing: 8
StatusRoundedImage {
Layout.alignment: Qt.AlignVCenter
image.source: root.titleImage
visible: root.titleImage.toString() !== ""
Layout.preferredWidth: 32
Layout.preferredHeight: Layout.preferredWidth
}
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: 0
StatusBaseText {
Layout.fillWidth: true
text: root.title
color: Theme.palette.directColor1
font.pixelSize: 13
clip: true
elide: Text.ElideRight
}
StatusBaseText {
visible: root.subtitle
Layout.fillWidth: true
text: root.subtitle
color: Theme.palette.baseColor1
font.pixelSize: 12
clip: true
elide: Text.ElideRight
}
}
}
}
GridLayout { GridLayout {
id: grid id: grid
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -76,6 +35,7 @@ StatusScrollView {
columnSpacing: 8 columnSpacing: 8
rowSpacing: 12 rowSpacing: 12
columns: d.columns columns: d.columns
Repeater { Repeater {
model: root.model model: root.model
delegate: ColumnLayout { delegate: ColumnLayout {
@ -85,7 +45,7 @@ StatusScrollView {
Layout.preferredHeight: 133 Layout.preferredHeight: 133
color: "transparent" color: "transparent"
Image { Image {
source: model.imageSource source: model.imageSource ? model.imageSource : ""
anchors.fill: parent anchors.fill: parent
} }
MouseArea { MouseArea {
@ -101,11 +61,9 @@ StatusScrollView {
text: model.name text: model.name
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: 13
clip: true
elide: Text.ElideRight elide: Text.ElideRight
} }
} }
} }
} }
} }
}

View File

@ -0,0 +1,83 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.12
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
Control {
id: root
property string key
property string name
property string shortName
property url iconSource
property var subItems
signal itemClicked(string key, string name, string shortName, url iconSource, var subItems)
leftPadding: 6 // by design
implicitHeight: 45 // by design
spacing: 8 // by design
background: Rectangle {
color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
MouseArea {
id: mouseArea
anchors.fill: parent
cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
onClicked: root.itemClicked(root.key,
root.name,
root.shortName,
root.iconSource,
root.subItems)
}
}
contentItem: RowLayout {
spacing: root.spacing
StatusRoundedImage {
Layout.alignment: Qt.AlignVCenter
image.source: root.iconSource
visible: root.iconSource.toString() !== ""
Layout.preferredWidth: 32
Layout.preferredHeight: Layout.preferredWidth
}
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: 0
StatusBaseText {
Layout.fillWidth: true
text: root.name
color: Theme.palette.directColor1
font.pixelSize: 13
elide: Text.ElideRight
}
StatusBaseText {
visible: !!root.shortName
Layout.fillWidth: true
text: !!root.shortName ? root.shortName : ""
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
}
}
StatusIcon {
icon: "tiny/chevron-right"
visible: !!root.subItems && root.subItems.count > 0
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 16
color: Theme.palette.baseColor1
width: 16
height: 16
}
}
}

View File

@ -0,0 +1,91 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import shared.controls 1.0
ColumnLayout {
id: root
property int mode: HoldingTypes.Mode.Add
property alias tokenName: item.name
property alias tokenShortName: item.shortName
property alias tokenImage: item.iconSource
property alias amountText: amountInput.text
property alias amount: amountInput.amount
property alias tokenCategoryText: tokenLabel.text
property alias addOrUpdateButtonEnabled: addOrUpdateButton.enabled
property alias allowDecimals: amountInput.allowDecimals
readonly property bool amountValid: amountInput.valid && amountInput.text.length > 0
signal addClicked
signal updateClicked
signal removeClicked
function setAmount(amount) {
amountInput.setAmount(amount)
}
QtObject {
id: d
// values from design
readonly property int defaultHeight: 44
readonly property int defaultSpacing: 8
}
spacing: d.defaultSpacing
StatusBaseText {
id: tokenLabel
Layout.topMargin: 2 * d.defaultSpacing
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: d.defaultSpacing
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
}
TokenItem {
id: item
Layout.fillWidth: true
enabled: false
}
AmountInput {
id: amountInput
Layout.fillWidth: true
Layout.bottomMargin: (validationError !== "") ? root.spacing : 0
customHeight: d.defaultHeight
allowDecimals: true
keepHeight: true
}
StatusButton {
id: addOrUpdateButton
text: (root.mode === HoldingTypes.Mode.Add) ? qsTr("Add") : qsTr("Update")
Layout.preferredHeight: d.defaultHeight
Layout.topMargin: d.defaultSpacing
Layout.fillWidth: true
onClicked: root.mode === HoldingTypes.Mode.Add
? root.addClicked() : root.updateClicked()
}
StatusFlatButton {
text: qsTr("Remove")
Layout.preferredHeight: d.defaultHeight
Layout.fillWidth: true
Layout.topMargin: d.defaultSpacing
visible: root.mode === HoldingTypes.Mode.Update
type: StatusBaseButton.Type.Danger
onClicked: root.removeClicked()
}
}

View File

@ -2,38 +2,70 @@ pragma Singleton
import QtQml 2.14 import QtQml 2.14
QtObject { import StatusQ.Core 0.1
readonly property QtObject _d: QtObject {
id: d import utils 1.0
import AppLayouts.Chat.controls.community 1.0
QtObject {
function getTokenByKey(model, key) {
if (!model)
return null
function getByKey(model, key) {
for (let i = 0; i < model.count; i++) { for (let i = 0; i < model.count; i++) {
const item = model.get(i) const item = model.get(i)
if (item.key === key) if (item.key === key)
return item return item
}
if (item.subItems) {
const subitem = getTokenByKey(item.subItems, key)
if (subitem !== null)
return subitem
}
}
return null return null
} }
function getTokenNameByKey(model, key) {
const item = getTokenByKey(model, key)
if (item)
return item.name
return ""
} }
function getAssetByKey(assetsModel, key) { function getTokenShortNameByKey(model, key) {
return d.getByKey(assetsModel, key) const item = getTokenByKey(model, key)
if (item)
return item.shortName
return ""
} }
function getCollectibleByKey(collectiblesModel, key) { function getTokenIconByKey(model, key) {
for (let i = 0; i < collectiblesModel.count; i++) { const item = getTokenByKey(model, key)
const item = collectiblesModel.get(i) if (item)
return item.iconSource
if (!!item.subItems) { return ""
const sub = d.getByKey(item.subItems, key)
if (sub)
return sub
} else if (item.key === key) {
return item
}
} }
return null function setHoldingsTextFormat(type, name, amount) {
switch (type) {
case HoldingTypes.Type.Asset:
return `${LocaleUtils.numberToLocaleString(amount)} ${name}`
case HoldingTypes.Type.Collectible:
if (amount === 1)
return name
return `${LocaleUtils.numberToLocaleString(amount)} ${name}`
case HoldingTypes.Type.Ens:
if (name === "*.eth")
return qsTr("Any ENS username")
if (name.startsWith("*."))
return qsTr("ENS username on '%1' domain").arg(name.substring(2))
return qsTr("ENS username '%1'").arg(name)
default:
return ""
}
} }
} }

View File

@ -1,10 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import AppLayouts.Chat.controls.community 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1 as SQ
import utils 1.0
QtObject { QtObject {
id: root id: root
@ -134,23 +129,6 @@ QtObject {
} }
} }
function setHoldingsTextFormat(type, name, amount) {
switch (type) {
case HoldingTypes.Type.Asset:
case HoldingTypes.Type.Collectible:
return `${LocaleUtils.numberToLocaleString(amount)} ${name}`
case HoldingTypes.Type.Ens:
if (name === "*.eth")
return qsTr("Any ENS username")
if (name.startsWith("*."))
return qsTr("ENS username on '%1' domain").arg(name.substring(2))
return qsTr("ENS username '%1'").arg(name)
default:
return ""
}
}
function editPermission(index, holdings, permissions, channels, isPrivate) { function editPermission(index, holdings, permissions, channels, isPrivate) {
// TO BE REPLACED: Call to backend // TO BE REPLACED: Call to backend
createPermission(holdings, permissions, isPrivate, channels, index) createPermission(holdings, permissions, isPrivate, channels, index)

View File

@ -170,6 +170,10 @@ StatusScrollView {
} }
return dirty return dirty
} }
function holdingsTextFormat(type, name, amount) {
return CommunityPermissionsHelpers.setHoldingsTextFormat(type, name, amount)
}
} }
contentWidth: mainLayout.width contentWidth: mainLayout.width
@ -190,6 +194,9 @@ StatusScrollView {
} }
StatusItemSelector { StatusItemSelector {
id: tokensSelector id: tokensSelector
property int editedIndex
Layout.fillWidth: true Layout.fillWidth: true
icon: Style.svg("contact_verified") icon: Style.svg("contact_verified")
title: qsTr("Who holds") title: qsTr("Who holds")
@ -198,14 +205,13 @@ StatusScrollView {
asset.height: 28 asset.height: 28
asset.width: asset.height asset.width: asset.height
addButton.visible: itemsModel.count < d.maxHoldingsItems addButton.visible: itemsModel.count < d.maxHoldingsItems
property int editedIndex
itemsModel: SortFilterProxyModel { itemsModel: SortFilterProxyModel {
sourceModel: d.dirtyValues.holdingsModel sourceModel: d.dirtyValues.holdingsModel
proxyRoles: ExpressionRole { proxyRoles: ExpressionRole {
name: "text" name: "text"
expression: root.store.setHoldingsTextFormat(model.type, model.name, model.amount) // Direct call for singleton function is not handled properly by SortFilterProxyModel that's why `holdingsTextFormat` is used instead.
expression: d.holdingsTextFormat(model.type, model.name, model.amount)
} }
} }
@ -222,15 +228,13 @@ StatusScrollView {
} }
onAddAsset: { onAddAsset: {
const modelItem = CommunityPermissionsHelpers.getAssetByKey( const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.assetsModel, key)
store.assetsModel, key)
addItem(HoldingTypes.Type.Asset, modelItem, amount) addItem(HoldingTypes.Type.Asset, modelItem, amount)
dropdown.close() dropdown.close()
} }
onAddCollectible: { onAddCollectible: {
const modelItem = CommunityPermissionsHelpers.getCollectibleByKey( const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.collectiblesModel, key)
store.collectiblesModel, key)
addItem(HoldingTypes.Type.Collectible, modelItem, amount) addItem(HoldingTypes.Type.Collectible, modelItem, amount)
dropdown.close() dropdown.close()
} }
@ -244,8 +248,7 @@ StatusScrollView {
} }
onUpdateAsset: { onUpdateAsset: {
const modelItem = CommunityPermissionsHelpers.getAssetByKey( const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.assetsModel, key)
store.assetsModel, key)
const name = modelItem.shortName ? modelItem.shortName : modelItem.name const name = modelItem.shortName ? modelItem.shortName : modelItem.name
const imageSource = modelItem.iconSource.toString() const imageSource = modelItem.iconSource.toString()
@ -255,8 +258,7 @@ StatusScrollView {
} }
onUpdateCollectible: { onUpdateCollectible: {
const modelItem = CommunityPermissionsHelpers.getCollectibleByKey( const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.collectiblesModel, key)
store.collectiblesModel, key)
const name = modelItem.name const name = modelItem.name
const imageSource = modelItem.iconSource.toString() const imageSource = modelItem.iconSource.toString()
@ -284,7 +286,7 @@ StatusScrollView {
dropdown.parent = tokensSelector.addButton dropdown.parent = tokensSelector.addButton
dropdown.x = tokensSelector.addButton.width + d.dropdownHorizontalOffset dropdown.x = tokensSelector.addButton.width + d.dropdownHorizontalOffset
dropdown.y = 0 dropdown.y = 0
dropdown.openFlow(HoldingsDropdown.FlowType.Add) dropdown.open()
} }
onItemClicked: { onItemClicked: {
@ -305,7 +307,6 @@ StatusScrollView {
case HoldingTypes.Type.Collectible: case HoldingTypes.Type.Collectible:
dropdown.collectibleKey = modelItem.key dropdown.collectibleKey = modelItem.key
dropdown.collectibleAmount = modelItem.amount dropdown.collectibleAmount = modelItem.amount
dropdown.collectiblesSpecificAmount = modelItem.amount !== 1
break break
case HoldingTypes.Type.Ens: case HoldingTypes.Type.Ens:
dropdown.ensDomainName = modelItem.name dropdown.ensDomainName = modelItem.name
@ -314,8 +315,8 @@ StatusScrollView {
console.warn("Unsupported holdings type.") console.warn("Unsupported holdings type.")
} }
dropdown.openFlow(HoldingsDropdown.FlowType.Update)
dropdown.setActiveTab(modelItem.type) dropdown.setActiveTab(modelItem.type)
dropdown.openUpdateFlow()
editedIndex = index editedIndex = index
} }

View File

@ -10,6 +10,7 @@ import utils 1.0
import shared.popups 1.0 import shared.popups 1.0
import AppLayouts.Chat.controls.community 1.0 import AppLayouts.Chat.controls.community 1.0
import AppLayouts.Chat.helpers 1.0
StatusScrollView { StatusScrollView {
id: root id: root
@ -23,6 +24,10 @@ StatusScrollView {
QtObject { QtObject {
id: d id: d
property int permissionIndexToRemove property int permissionIndexToRemove
function holdingsTextFormat(type, name, amount) {
return CommunityPermissionsHelpers.setHoldingsTextFormat(type, name, amount)
}
} }
contentWidth: mainLayout.width contentWidth: mainLayout.width
@ -47,7 +52,8 @@ StatusScrollView {
proxyRoles: ExpressionRole { proxyRoles: ExpressionRole {
name: "text" name: "text"
expression: root.store.setHoldingsTextFormat(model.type, model.name, model.amount) // Direct call for singleton function is not handled properly by SortFilterProxyModel that's why `holdingsTextFormat` is used instead.
expression: d.holdingsTextFormat(model.type, model.name, model.amount)
} }
} }
permissionName: model.permissionsObjectModel.text permissionName: model.permissionsObjectModel.text