chore(CommunityNewAirdropView): Adjust MembersDropdown to updated design

status-im · May 8, 2023 · a5d339e · a5d339e
1 parent 1f3ae97
commit a5d339e
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 5 deletions.
diff --git a/storybook/pages/MembersDropdownPage.qml b/storybook/pages/MembersDropdownPage.qml
@@ -198,6 +198,39 @@ SplitView {
             sourceComponent: ColumnLayout {
                 readonly property MembersDropdown membersDropdown: loader.item
 
+                RowLayout {
+                    RadioButton {
+                        id: addModeRadioButton
+
+                        text: "add mode"
+                        checked: true
+
+                        Binding {
+                            target: membersDropdown
+                            property: "mode"
+                            value: addModeRadioButton.checked
+                                   ? MembersDropdown.Mode.Add
+                                   : MembersDropdown.Mode.Update
+                        }
+                    }
+
+                    RadioButton {
+                        text: "update mode"
+                    }
+
+                    CheckBox {
+                        id: forceButtonDisabledCheckBox
+
+                        text: "force button disabled"
+
+                        Binding {
+                            target: membersDropdown
+                            property: "forceButtonDisabled"
+                            value: forceButtonDisabledCheckBox.checked
+                        }
+                    }
+                }
+
                 RowLayout {
                     Label {
                         text: "maximum list height:"

diff --git a/ui/app/AppLayouts/Chat/controls/community/MembersDropdown.qml b/ui/app/AppLayouts/Chat/controls/community/MembersDropdown.qml
@@ -14,6 +14,7 @@ StatusDropdown {
     id: root
 
     property var selectedKeys: []
+    property bool forceButtonDisabled: false
     property int maximumListHeight: 288
 
     property alias model: listView.model
@@ -23,6 +24,12 @@ StatusDropdown {
 
     property bool fixedYPosition: !anchors.centerIn && margins < 0
 
+    enum Mode {
+        Add, Update
+    }
+
+    property int mode: MembersDropdown.Mode.Add
+
     signal backButtonClicked
     signal addButtonClicked
 
@@ -36,7 +43,10 @@ StatusDropdown {
     bottomInset: 10
     bottomPadding: padding + bottomInset
 
-    onOpened: filterInput.text = ""
+    onOpened: {
+        listView.positionViewAtBeginning()
+        filterInput.text = ""
+    }
 
     QtObject {
         id: d
@@ -45,6 +55,7 @@ StatusDropdown {
         readonly property int delegateHeight: 47
 
         readonly property int vPadding: root.topPadding + root.bottomPadding
+        readonly property int scrollBarWidth: 4
 
         readonly property int availableExternalHeight:
             (root.Overlay.overlay ? root.Overlay.overlay.height : 0) - root.bottomMargin -
@@ -122,6 +133,10 @@ StatusDropdown {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            verticalScrollBar {
+                implicitWidth: d.scrollBarWidth + ScrollBar.vertical.padding * 2
+            }
+
             visible: count > 0
 
             header: StatusCheckBox  {
@@ -225,10 +240,25 @@ StatusDropdown {
             Layout.fillWidth: true
 
             textFillWidth: true
-            enabled: root.selectedKeys.length > 0
-            text: enabled
-                  ? qsTr("Add %n member(s)", "", root.selectedKeys.length)
-                  : qsTr("Add")
+
+            enabled: {
+                if (root.forceButtonDisabled)
+                    return false
+
+                if (root.mode === MembersDropdown.Mode.Add)
+                    return root.selectedKeys.length > 0
+
+                return true
+            }
+
+            text: {
+                if (root.mode === MembersDropdown.Mode.Update)
+                    return qsTr("Update members")
+
+                return root.selectedKeys.length > 0
+                        ? qsTr("Add %n member(s)", "", root.selectedKeys.length)
+                        : qsTr("Add")
+            }
 
             onClicked: root.addButtonClicked()
         }

diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewAirdropView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewAirdropView.qml
@@ -308,13 +308,24 @@ StatusScrollView {
                 onCommunityMembersSelected: {
                     recipientTypeSelectionDropdown.close()
                     membersDropdown.selectedKeys = selectedKeysFilter.keys
+
+                    const hasSelection =  selectedKeysFilter.keys.length !== 0
+
+                    membersDropdown.mode = hasSelection
+                            ? MembersDropdown.Mode.Update
+                            : MembersDropdown.Mode.Add
+
                     airdropRecipientsSelector.openPopup(membersDropdown)
                 }
             }
 
             MembersDropdown {
                 id: membersDropdown
 
+                forceButtonDisabled:
+                    mode === MembersDropdown.Mode.Update &&
+                    JSON.stringify(selectedKeys) === JSON.stringify(selectedKeysFilter.keys)
+
                 model: SortFilterProxyModel {
                     sourceModel: membersModel