feat(Community Permissions): Update Who holds tokens dropdown desig…

…n 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
status-im · Jan 24, 2023 · 3136ffb · 3136ffb
1 parent 66c62e4
commit 3136ffb
Show file tree

Hide file tree

Showing 17 changed files with 569 additions and 642 deletions.
diff --git 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
@@ -9,24 +9,26 @@ import AppLayouts.Chat.controls.community 1.0
 Pane {
     id: root
 
-    function openFlow(flowType) {
-        holdingsDropdown.close()
-        holdingsDropdown.openFlow(flowType)
-    }
-
     RowLayout {
         Label {
             text: "Open flow:"
         }
 
         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
diff --git a/ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml b/ui/app/AppLayouts/Chat/controls/community/CollectiblesPanel.qml
diff --git 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
@@ -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
@@ -4,4 +4,8 @@ QtObject {
     enum Type {
         Asset, Collectible, Ens
     }
+
+    enum Mode {
+        Add, Update
+    }
 }