From 3136ffb54da0a5aa1d20d445d75efa9f68a029be Mon Sep 17 00:00:00 2001 From: Noelia Date: Wed, 18 Jan 2023 20:54:14 +0100 Subject: [PATCH] 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 --- storybook/figma.json | 17 +- storybook/pages/HoldingsDropdownPage.qml | 21 +- .../Chat/controls/community/AssetsPanel.qml | 47 -- .../controls/community/CollectiblesPanel.qml | 70 --- .../Chat/controls/community/EnsPanel.qml | 31 +- .../community/ExtendedDropdownContent.qml | 37 ++ .../Chat/controls/community/HoldingTypes.qml | 4 + .../controls/community/HoldingsDropdown.qml | 409 ++++++++---------- .../Chat/controls/community/HoldingsTabs.qml | 95 ---- .../community/ListDropdownContent.qml | 67 +-- .../community/ThumbnailsDropdownContent.qml | 108 ++--- .../Chat/controls/community/TokenItem.qml | 83 ++++ .../Chat/controls/community/TokenPanel.qml | 91 ++++ .../helpers/CommunityPermissionsHelpers.qml | 82 ++-- .../Chat/stores/CommunitiesStore.qml | 22 - .../CommunityNewPermissionView.qml | 29 +- .../communities/CommunityPermissionsView.qml | 8 +- 17 files changed, 574 insertions(+), 647 deletions(-) delete mode 100644 ui/app/AppLayouts/Chat/controls/community/AssetsPanel.qml delete mode 100644 ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml delete mode 100644 ui/app/AppLayouts/Chat/controls/community/HoldingsTabs.qml create mode 100644 ui/app/AppLayouts/Chat/controls/community/TokenItem.qml create mode 100644 ui/app/AppLayouts/Chat/controls/community/TokenPanel.qml diff --git a/storybook/figma.json b/storybook/figma.json index 1c22c9f4aa..15d9f643b0 100644 --- a/storybook/figma.json +++ b/storybook/figma.json @@ -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%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": [ "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", @@ -65,12 +74,12 @@ "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160" ], "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=2934%3A480020&t=IfHHp5GSPo1j9m5j-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=2992%3A367890&t=7gqqAFbdG5KrPOmn-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=22813%3A497277&t=7gqqAFbdG5KrPOmn-0" ], "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": [ "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480089", diff --git a/storybook/pages/HoldingsDropdownPage.qml b/storybook/pages/HoldingsDropdownPage.qml index edfabd002a..e8613ebd26 100644 --- a/storybook/pages/HoldingsDropdownPage.qml +++ b/storybook/pages/HoldingsDropdownPage.qml @@ -9,11 +9,6 @@ import AppLayouts.Chat.controls.community 1.0 Pane { id: root - function openFlow(flowType) { - holdingsDropdown.close() - holdingsDropdown.openFlow(flowType) - } - RowLayout { Label { text: "Open flow:" @@ -21,12 +16,19 @@ Pane { Button { text: "Add" - onClicked: openFlow(HoldingsDropdown.FlowType.Add) + onClicked: { + holdingsDropdown.close() + holdingsDropdown.open() + } } Button { 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 - Component.onCompleted: openFlow(HoldingsDropdown.FlowType.Add) + Component.onCompleted: { + holdingsDropdown.close() + holdingsDropdown.open() + } } } diff --git a/ui/app/AppLayouts/Chat/controls/community/AssetsPanel.qml b/ui/app/AppLayouts/Chat/controls/community/AssetsPanel.qml deleted file mode 100644 index 55e0a85cf7..0000000000 --- a/ui/app/AppLayouts/Chat/controls/community/AssetsPanel.qml +++ /dev/null @@ -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 - } -} diff --git a/ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml b/ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml deleted file mode 100644 index f2bfa59372..0000000000 --- a/ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml +++ /dev/null @@ -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 - } -} diff --git a/ui/app/AppLayouts/Chat/controls/community/EnsPanel.qml b/ui/app/AppLayouts/Chat/controls/community/EnsPanel.qml index 7ef8747d2b..2b62bae121 100644 --- a/ui/app/AppLayouts/Chat/controls/community/EnsPanel.qml +++ b/ui/app/AppLayouts/Chat/controls/community/EnsPanel.qml @@ -6,10 +6,17 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Controls.Validators 0.1 - ColumnLayout { + id: root + + property int mode: HoldingTypes.Mode.Add property alias domainName: domainNameInput.text property alias domainNameValid: domainNameInput.valid + property alias addButtonEnabled: addOrUpdateButton.enabled + + signal addClicked + signal updateClicked + signal removeClicked spacing: 0 @@ -56,4 +63,26 @@ ColumnLayout { lineHeight: 18 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() + } } diff --git a/ui/app/AppLayouts/Chat/controls/community/ExtendedDropdownContent.qml b/ui/app/AppLayouts/Chat/controls/community/ExtendedDropdownContent.qml index d96b9dcb09..bc1778869f 100644 --- a/ui/app/AppLayouts/Chat/controls/community/ExtendedDropdownContent.qml +++ b/ui/app/AppLayouts/Chat/controls/community/ExtendedDropdownContent.qml @@ -21,6 +21,7 @@ Item { readonly property bool canGoBack: root.state !== d.listView_depth1_State signal itemClicked(string key, string name, url iconSource) + signal navigateDeep(string key, var subItems) enum Type{ Assets, @@ -31,6 +32,14 @@ Item { 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 { id: d readonly property int filterItemsHeight: 36 @@ -44,6 +53,7 @@ Item { readonly property string listView_depth2_State: "LIST-DEPTH2" property var currentModel: root.store.collectiblesModel property var currentSubitems + property string currentItemKey: "" property string currentItemName: "" property url currentItemSource: "" @@ -61,6 +71,7 @@ Item { } function reset() { + d.currentItemKey = "" d.currentItemName = "" d.currentItemSource = "" d.currentModel = root.store.collectiblesModel @@ -85,6 +96,10 @@ Item { ? root.store.assetsModel : collectiblesFilteredModel//root.store.collectiblesModel isFilterOptionVisible: false } + PropertyChanges { + target: tokenGroupItem + visible: false + } PropertyChanges { target: searcher visible: type === ExtendedDropdownContent.Type.Collectibles @@ -102,6 +117,10 @@ Item { currentModel: d.currentSubitems isFilterOptionVisible: true } + PropertyChanges { + target: tokenGroupItem + visible: true + } }, State { name: d.thumbnailsViewState @@ -115,6 +134,10 @@ Item { currentModel: d.currentSubitems isFilterOptionVisible: true } + PropertyChanges { + target: tokenGroupItem + visible: true + } } ] @@ -247,6 +270,18 @@ Item { 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 { id: contentLoader @@ -292,9 +327,11 @@ Item { if(subItems && root.state === d.listView_depth1_State) { // One deep navigation d.currentSubitems = subItems + d.currentItemKey = key d.currentItemName = name d.currentItemSource = iconSource root.state = d.listView_depth2_State + root.navigateDeep(key, subItems) } else { d.reset() diff --git a/ui/app/AppLayouts/Chat/controls/community/HoldingTypes.qml b/ui/app/AppLayouts/Chat/controls/community/HoldingTypes.qml index 2c3709be13..b1c0f9c622 100644 --- a/ui/app/AppLayouts/Chat/controls/community/HoldingTypes.qml +++ b/ui/app/AppLayouts/Chat/controls/community/HoldingTypes.qml @@ -4,4 +4,8 @@ QtObject { enum Type { Asset, Collectible, Ens } + + enum Mode { + Add, Update + } } diff --git a/ui/app/AppLayouts/Chat/controls/community/HoldingsDropdown.qml b/ui/app/AppLayouts/Chat/controls/community/HoldingsDropdown.qml index 16155394ae..2cfbbc4204 100644 --- a/ui/app/AppLayouts/Chat/controls/community/HoldingsDropdown.qml +++ b/ui/app/AppLayouts/Chat/controls/community/HoldingsDropdown.qml @@ -9,7 +9,6 @@ import StatusQ.Core.Utils 0.1 import AppLayouts.Chat.helpers 1.0 - StatusDropdown { id: root @@ -20,7 +19,6 @@ StatusDropdown { property string collectibleKey: "" property real collectibleAmount: 1 - property bool collectiblesSpecificAmount: false property string ensDomainName: "" @@ -34,46 +32,18 @@ StatusDropdown { 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 { - Add, Update + Selected, List_Deep1, List_Deep2 } - function openFlow(flowType) { - switch (flowType) { - case HoldingsDropdown.FlowType.Add: - statesStack.push(d.addState) - break - case HoldingsDropdown.FlowType.Update: - statesStack.push(d.updateState) - break - default: - console.warn("Unknown flow type.") - return - } + function openUpdateFlow() { + d.currentHoldingMode = HoldingTypes.Mode.Update + if(d.currentHoldingType !== HoldingTypes.Type.Ens) { + if(statesStack.size === 0) + statesStack.push(HoldingsDropdown.FlowType.List_Deep1) + statesStack.push(HoldingsDropdown.FlowType.Selected) + } open() } @@ -81,50 +51,60 @@ StatusDropdown { 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 { id: d // 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 collectiblesReady: root.collectibleAmount > 0 && root.collectibleKey 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 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 collectibleAmountText: "" - - property int currentHoldingType: HoldingTypes.Type.Asset - + property string collectibleAmountText: "1" property bool ensDomainNameValid: false - signal addClicked - signal updateClicked - // By design values: readonly property int padding: 8 - readonly property int defaultWidth: 289 readonly property int extendedContentHeight: 380 - - readonly property int tabsAddModeBaseHeight: 232 - padding * 2 - readonly property int tabsAddModeExtendedHeight: 277 - padding * 2 - - readonly property int tabsUpdateModeBaseHeight: 284 - padding * 2 - readonly property int tabsUpdateModeExtendedHeight: tabsUpdateModeBaseHeight - + (tabsAddModeExtendedHeight - tabsAddModeBaseHeight) - + readonly property int tabBarHeigh: 36 + readonly property int tabBarTextSize: 13 readonly property int backButtonWidth: 56 readonly property int backButtonHeight: 24 readonly property int backButtonToContentSpace: 8 - readonly property string defaultAssetNameText: qsTr("Choose asset") - readonly property string defaultCollectibleNameText: qsTr("Choose collectible") + function setInitialFlow() { + statesStack.clear() + if(d.currentHoldingType !== HoldingTypes.Type.Ens) + statesStack.push(HoldingsDropdown.FlowType.List_Deep1) + else + statesStack.push(HoldingsDropdown.FlowType.Selected) + } } 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 { id: content @@ -163,9 +146,7 @@ StatusDropdown { Layout.preferredWidth: d.backButtonWidth Layout.preferredHeight: d.backButtonHeight - visible: statesStack.size > 1 - spacing: 0 leftPadding: 4 statusIcon: "next" @@ -175,6 +156,50 @@ StatusDropdown { 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 { id: loader Layout.fillWidth: true @@ -183,185 +208,144 @@ StatusDropdown { states: [ State { - name: d.addState - PropertyChanges {target: loader; sourceComponent: tabsView} + name: HoldingsDropdown.FlowType.Selected + 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 }, State { - name: d.updateState - extend: d.addState - PropertyChanges {target: d; holdingsTabMode: HoldingsTabs.Mode.Update} + name: HoldingsDropdown.FlowType.List_Deep1 + PropertyChanges {target: loader; sourceComponent: listLayout} + PropertyChanges {target: root; height: d.extendedContentHeight} + PropertyChanges {target: d; extendedDeepNavigation: false} }, State { - name: d.extendedState - PropertyChanges {target: loader; sourceComponent: extendedView} - PropertyChanges {target: root; height: d.extendedContentHeight} + name: HoldingsDropdown.FlowType.List_Deep2 + extend: HoldingsDropdown.FlowType.List_Deep1 + PropertyChanges {target: d; extendedDeepNavigation: true} } ] } + onClosed: root.reset() + Component { - id: tabsView + id: listLayout - HoldingsTabs { - id: holdingsTabs + ExtendedDropdownContent { + id: listPanel - readonly property var holdingTypes: [ - HoldingTypes.Type.Asset, HoldingTypes.Type.Collectible, HoldingTypes.Type.Ens - ] - readonly property var labels: [qsTr("Asset"), qsTr("Collectible"), qsTr("ENS")] + store: root.store + type: d.extendedDropdownType - readonly property bool extendedHeight: - d.currentHoldingType === HoldingTypes.Type.Collectible && collectiblesSpecificAmount || - d.currentHoldingType === HoldingTypes.Type.Ens + onItemClicked: { + if(d.extendedDropdownType === ExtendedDropdownContent.Type.Assets) + root.assetKey = key + else + root.collectibleKey = key - implicitHeight: extendedHeight - ? (mode === HoldingsTabs.Mode.Add ? d.tabsAddModeExtendedHeight : d.tabsUpdateModeExtendedHeight) - : (mode === HoldingsTabs.Mode.Add ? d.tabsAddModeBaseHeight : d.tabsUpdateModeBaseHeight) + statesStack.push(HoldingsDropdown.FlowType.Selected) + } - 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} - } - ] + onNavigateDeep: { + d.currentSubItems = subItems + d.currentItemKey = key + statesStack.push(HoldingsDropdown.FlowType.List_Deep2) + } - tabLabels: labels - state: d.currentHoldingType - mode: d.holdingsTabMode - - currentIndex: holdingTypes.indexOf(d.currentHoldingType) - onCurrentIndexChanged: d.currentHoldingType = holdingTypes[currentIndex] - - onAddClicked: d.addClicked() - onUpdateClicked: d.updateClicked() - onRemoveClicked: root.removeClicked() + Component.onCompleted: { + if(d.extendedDeepNavigation) + listPanel.goForward(d.currentItemKey, + CommunityPermissionsHelpers.getTokenNameByKey(store.collectiblesModel, d.currentItemKey), + CommunityPermissionsHelpers.getTokenIconByKey(store.collectiblesModel, d.currentItemKey), + d.currentSubItems) + } Connections { target: backButton function onClicked() { + if (listPanel.canGoBack) + listPanel.goBack() statesStack.pop() } } + + Connections { + target: root + + function onClosed() { listPanel.goBack() } + } } } Component { - id: assetsLayout + id: assetLayout - AssetsPanel { - id: assetsPanel - - assetName: d.defaultAssetNameText - amountText: d.assetAmountText - onAmountTextChanged: d.assetAmountText = amountText + TokenPanel { + id: assetPanel 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 - - onPickerClicked: { - d.extendedDropdownType = ExtendedDropdownContent.Type.Assets - statesStack.push(d.extendedState) - } - - 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 = "" - } - } + onAmountTextChanged: d.assetAmountText = amountText + onAddClicked: root.addAsset(root.assetKey, root.assetAmount) + onUpdateClicked: root.updateAsset(root.assetKey, root.assetAmount) + onRemoveClicked: root.removeClicked() Component.onCompleted: { if (d.assetAmountText.length === 0 && root.assetAmount) - assetsPanel.setAmount(root.assetAmount) + assetPanel.setAmount(root.assetAmount) } Connections { - target: d + target: backButton - function onAddClicked() { - root.addAsset(root.assetKey, root.assetAmount) - } - - function onUpdateClicked() { - root.updateAsset(root.assetKey, root.assetAmount) - } + function onClicked() { statesStack.pop() } } } } Component { - id: collectiblesLayout + id: collectibleLayout - CollectiblesPanel { - id: collectiblesPanel - - collectibleName: d.defaultCollectibleNameText - amountText: d.collectibleAmountText - onAmountTextChanged: d.collectibleAmountText = amountText + TokenPanel { + id: collectiblePanel 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 - - specificAmount: root.collectiblesSpecificAmount - onSpecificAmountChanged: root.collectiblesSpecificAmount = specificAmount - - onPickerClicked: { - d.extendedDropdownType = ExtendedDropdownContent.Type.Collectibles - statesStack.push(d.extendedState) - } + onAmountTextChanged: d.collectibleAmountText = amountText + onAddClicked: root.addCollectible(root.collectibleKey, root.collectibleAmount) + onUpdateClicked: root.updateCollectible(root.collectibleKey, root.collectibleAmount) + onRemoveClicked: root.removeClicked() Component.onCompleted: { - if (d.collectibleAmountText.length === 0 && root.collectibleAmount) - collectiblesPanel.setAmount(root.collectibleAmount) - } - - function getAmount() { - return specificAmount ? effectiveAmount : 1 + if (d.collectibleAmountText.length === 0 && root.collectibleAmount) + collectiblePanel.setAmount(root.collectibleAmount) } Connections { - target: d + target: backButton - function onAddClicked() { - 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 = "" - } + function onClicked() { statesStack.pop() } } } } @@ -370,52 +354,15 @@ StatusDropdown { id: ensLayout EnsPanel { + addButtonEnabled: d.ensReady domainName: root.ensDomainName + mode: d.currentHoldingMode + onDomainNameChanged: root.ensDomainName = domainName onDomainNameValidChanged: d.ensDomainNameValid = domainNameValid - - Connections { - target: d - - 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() - } - } + onAddClicked: root.addEns(root.ensDomainName) + onUpdateClicked: root.updateEns(root.ensDomainName) + onRemoveClicked: root.removeClicked() } } } diff --git a/ui/app/AppLayouts/Chat/controls/community/HoldingsTabs.qml b/ui/app/AppLayouts/Chat/controls/community/HoldingsTabs.qml deleted file mode 100644 index 93e829fff6..0000000000 --- a/ui/app/AppLayouts/Chat/controls/community/HoldingsTabs.qml +++ /dev/null @@ -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() - } - } -} diff --git a/ui/app/AppLayouts/Chat/controls/community/ListDropdownContent.qml b/ui/app/AppLayouts/Chat/controls/community/ListDropdownContent.qml index 2f3cd580dd..155b1f7728 100644 --- a/ui/app/AppLayouts/Chat/controls/community/ListDropdownContent.qml +++ b/ui/app/AppLayouts/Chat/controls/community/ListDropdownContent.qml @@ -53,61 +53,20 @@ StatusListView { } } }// End of Header - delegate: Rectangle { + delegate: TokenItem { width: ListView.view.width - height: 45 // by design - color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent" - RowLayout { - anchors.fill: parent - anchors.leftMargin: 6 - spacing: 8 - StatusRoundedImage { - Layout.alignment: Qt.AlignVCenter - image.source: model.iconSource - visible: model.iconSource.toString() !== "" - Layout.preferredWidth: 32 - 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 + key: model.key + name: model.name + shortName: !!model.shortName ? model.shortName : "" + iconSource: model.iconSource + subItems: model.subItems + enabled: true + onItemClicked: root.itemClicked(model.key, + model.name, + model.shortName, + model.iconSource, + model.subItems) + } section.property: "category" section.criteria: ViewSection.FullString section.delegate: Item { diff --git a/ui/app/AppLayouts/Chat/controls/community/ThumbnailsDropdownContent.qml b/ui/app/AppLayouts/Chat/controls/community/ThumbnailsDropdownContent.qml index ff4d33a669..b2821b6aa5 100644 --- a/ui/app/AppLayouts/Chat/controls/community/ThumbnailsDropdownContent.qml +++ b/ui/app/AppLayouts/Chat/controls/community/ThumbnailsDropdownContent.qml @@ -23,87 +23,45 @@ StatusScrollView { 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) 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 + GridLayout { + id: grid + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + columnSpacing: 8 + rowSpacing: 12 + columns: d.columns + + Repeater { + model: root.model + delegate: ColumnLayout { + spacing: 4 + Rectangle { + Layout.preferredWidth: 133 + Layout.preferredHeight: 133 + color: "transparent" + Image { + source: model.imageSource ? model.imageSource : "" + anchors.fill: parent } - StatusBaseText { - visible: root.subtitle - Layout.fillWidth: true - text: root.subtitle - color: Theme.palette.baseColor1 - font.pixelSize: 12 - clip: true - elide: Text.ElideRight + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onClicked: { root.itemClicked(model.key, model.name, model.iconSource) } } } - } - } - GridLayout { - id: grid - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - columnSpacing: 8 - rowSpacing: 12 - columns: d.columns - Repeater { - model: root.model - delegate: ColumnLayout { - spacing: 4 - Rectangle { - Layout.preferredWidth: 133 - Layout.preferredHeight: 133 - color: "transparent" - Image { - source: model.imageSource - anchors.fill: parent - } - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - onClicked: { root.itemClicked(model.key, model.name, model.iconSource) } - } - } - StatusBaseText { - Layout.alignment: Qt.AlignLeft - Layout.leftMargin: 8 - text: model.name - color: Theme.palette.directColor1 - font.pixelSize: 13 - clip: true - elide: Text.ElideRight - } + StatusBaseText { + Layout.alignment: Qt.AlignLeft + Layout.leftMargin: 8 + text: model.name + color: Theme.palette.directColor1 + font.pixelSize: 13 + elide: Text.ElideRight } } } diff --git a/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml b/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml new file mode 100644 index 0000000000..7eceb1eae4 --- /dev/null +++ b/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml @@ -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 + } + } +} diff --git a/ui/app/AppLayouts/Chat/controls/community/TokenPanel.qml b/ui/app/AppLayouts/Chat/controls/community/TokenPanel.qml new file mode 100644 index 0000000000..ca8b813acf --- /dev/null +++ b/ui/app/AppLayouts/Chat/controls/community/TokenPanel.qml @@ -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() + } +} diff --git a/ui/app/AppLayouts/Chat/helpers/CommunityPermissionsHelpers.qml b/ui/app/AppLayouts/Chat/helpers/CommunityPermissionsHelpers.qml index 5ac3727df6..8fb5cba5ed 100644 --- a/ui/app/AppLayouts/Chat/helpers/CommunityPermissionsHelpers.qml +++ b/ui/app/AppLayouts/Chat/helpers/CommunityPermissionsHelpers.qml @@ -2,38 +2,70 @@ pragma Singleton import QtQml 2.14 +import StatusQ.Core 0.1 + +import utils 1.0 + +import AppLayouts.Chat.controls.community 1.0 + QtObject { - readonly property QtObject _d: QtObject { - id: d - - function getByKey(model, key) { - for (let i = 0; i < model.count; i++) { - const item = model.get(i) - if (item.key === key) - return item - } + function getTokenByKey(model, key) { + if (!model) return null - } - } - function getAssetByKey(assetsModel, key) { - return d.getByKey(assetsModel, key) - } - - function getCollectibleByKey(collectiblesModel, key) { - for (let i = 0; i < collectiblesModel.count; i++) { - const item = collectiblesModel.get(i) - - if (!!item.subItems) { - const sub = d.getByKey(item.subItems, key) - if (sub) - return sub - } else if (item.key === key) { + for (let i = 0; i < model.count; i++) { + const item = model.get(i) + if (item.key === key) return item + + if (item.subItems) { + const subitem = getTokenByKey(item.subItems, key) + if (subitem !== null) + return subitem } } - return null } + + function getTokenNameByKey(model, key) { + const item = getTokenByKey(model, key) + if (item) + return item.name + return "" + } + + function getTokenShortNameByKey(model, key) { + const item = getTokenByKey(model, key) + if (item) + return item.shortName + return "" + } + + function getTokenIconByKey(model, key) { + const item = getTokenByKey(model, key) + if (item) + return item.iconSource + return "" + } + + 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 "" + } + } } diff --git a/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml b/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml index b872f29023..71d1e5ceb2 100644 --- a/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml +++ b/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml @@ -1,10 +1,5 @@ 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 { 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) { // TO BE REPLACED: Call to backend createPermission(holdings, permissions, isPrivate, channels, index) diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml index cbfc9a5350..c96d41a771 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml @@ -170,6 +170,10 @@ StatusScrollView { } return dirty } + + function holdingsTextFormat(type, name, amount) { + return CommunityPermissionsHelpers.setHoldingsTextFormat(type, name, amount) + } } contentWidth: mainLayout.width @@ -190,6 +194,9 @@ StatusScrollView { } StatusItemSelector { id: tokensSelector + + property int editedIndex + Layout.fillWidth: true icon: Style.svg("contact_verified") title: qsTr("Who holds") @@ -198,14 +205,13 @@ StatusScrollView { asset.height: 28 asset.width: asset.height addButton.visible: itemsModel.count < d.maxHoldingsItems - - property int editedIndex itemsModel: SortFilterProxyModel { sourceModel: d.dirtyValues.holdingsModel proxyRoles: ExpressionRole { 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: { - const modelItem = CommunityPermissionsHelpers.getAssetByKey( - store.assetsModel, key) + const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.assetsModel, key) addItem(HoldingTypes.Type.Asset, modelItem, amount) dropdown.close() } onAddCollectible: { - const modelItem = CommunityPermissionsHelpers.getCollectibleByKey( - store.collectiblesModel, key) + const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.collectiblesModel, key) addItem(HoldingTypes.Type.Collectible, modelItem, amount) dropdown.close() } @@ -244,8 +248,7 @@ StatusScrollView { } onUpdateAsset: { - const modelItem = CommunityPermissionsHelpers.getAssetByKey( - store.assetsModel, key) + const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.assetsModel, key) const name = modelItem.shortName ? modelItem.shortName : modelItem.name const imageSource = modelItem.iconSource.toString() @@ -255,8 +258,7 @@ StatusScrollView { } onUpdateCollectible: { - const modelItem = CommunityPermissionsHelpers.getCollectibleByKey( - store.collectiblesModel, key) + const modelItem = CommunityPermissionsHelpers.getTokenByKey(store.collectiblesModel, key) const name = modelItem.name const imageSource = modelItem.iconSource.toString() @@ -284,7 +286,7 @@ StatusScrollView { dropdown.parent = tokensSelector.addButton dropdown.x = tokensSelector.addButton.width + d.dropdownHorizontalOffset dropdown.y = 0 - dropdown.openFlow(HoldingsDropdown.FlowType.Add) + dropdown.open() } onItemClicked: { @@ -305,7 +307,6 @@ StatusScrollView { case HoldingTypes.Type.Collectible: dropdown.collectibleKey = modelItem.key dropdown.collectibleAmount = modelItem.amount - dropdown.collectiblesSpecificAmount = modelItem.amount !== 1 break case HoldingTypes.Type.Ens: dropdown.ensDomainName = modelItem.name @@ -314,8 +315,8 @@ StatusScrollView { console.warn("Unsupported holdings type.") } - dropdown.openFlow(HoldingsDropdown.FlowType.Update) dropdown.setActiveTab(modelItem.type) + dropdown.openUpdateFlow() editedIndex = index } diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml index 4ccc23ad53..0fb3eaa8da 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml @@ -10,6 +10,7 @@ import utils 1.0 import shared.popups 1.0 import AppLayouts.Chat.controls.community 1.0 +import AppLayouts.Chat.helpers 1.0 StatusScrollView { id: root @@ -23,6 +24,10 @@ StatusScrollView { QtObject { id: d property int permissionIndexToRemove + + function holdingsTextFormat(type, name, amount) { + return CommunityPermissionsHelpers.setHoldingsTextFormat(type, name, amount) + } } contentWidth: mainLayout.width @@ -47,7 +52,8 @@ StatusScrollView { proxyRoles: ExpressionRole { 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