fix(RenameGroupPopup): fix name validation and scrolling

- increase the length limit to 30 and allow `&`, as per the spec - wrap the popup in a scroll view - pls some minor cleanups Fixes #16523
status-im · Oct 23, 2024 · 158154b · 158154b
1 parent d317df0
commit 158154b
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 146 deletions.
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml
@@ -61,22 +61,21 @@ Control {
         function getTagColor(isReadonly) {
             if(isReadonly)
                 return Theme.palette.baseColor1
-            return mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
+            return root.hovered ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
         }
     }
 
     implicitHeight: 30
     horizontalPadding: d.tagMargins
-    font.pixelSize: 15
+    font.pixelSize: Theme.primaryTextFontSize
     font.family: Theme.baseFont.name
 
     background: Rectangle {
         color: d.getTagColor(root.isReadonly)
-        radius: 8
+        radius: Theme.radius
     }
 
     contentItem: RowLayout {
-        id: tagRow
         spacing: 2
 
         StatusIcon {
@@ -99,7 +98,6 @@ Control {
             height: d.tagIconsSize
             icon: "close"
             MouseArea {
-                id: mouseArea
                 enabled: !root.isReadonly
                 anchors.fill: parent
                 hoverEnabled: true

diff --git a/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml b/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml
@@ -73,7 +73,6 @@ Item {
                     Layout.leftMargin: Theme.padding
                     Layout.alignment: Qt.AlignVCenter
                     visible: text !== ""
-                    font.pixelSize: 15
                     color: Theme.palette.baseColor1
                 }
                 Item {
@@ -115,7 +114,7 @@ Item {
                                 Layout.minimumWidth: 4
                                 Layout.fillHeight: true
                                 verticalAlignment: Text.AlignVCenter
-                                font.pixelSize: 15
+                                font.pixelSize: Theme.primaryTextFontSize
                                 color: Theme.palette.directColor1
 
                                 selectByMouse: true
@@ -193,7 +192,7 @@ Item {
                     Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                     Layout.rightMargin: Theme.padding
                     visible: text !== ""
-                    font.pixelSize: 10
+                    font.pixelSize: Theme.asideTextFontSize
                     color: Theme.palette.dangerColor1
                 }
             }
@@ -210,14 +209,12 @@ Item {
 
         StatusButton {
             objectName: "inlineSelectorConfirmButton"
-            Layout.alignment: Qt.AlignVCenter
             enabled: (listView.count > 0)
             text: qsTr("Confirm")
             onClicked: root.confirmed()
         }
 
         StatusButton {
-            Layout.alignment: Qt.AlignVCenter
             text: qsTr("Cancel")
             type: StatusBaseButton.Type.Danger
             onClicked: root.rejected()

diff --git a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml
@@ -216,7 +216,6 @@ Rectangle {
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.left: accountImage.right
                     anchors.leftMargin: Theme.smallPadding
-                    font.pixelSize: 15
                 }
 
                 MouseArea {

diff --git a/ui/app/AppLayouts/Chat/panels/qmldir b/ui/app/AppLayouts/Chat/panels/qmldir
@@ -1,3 +1,4 @@
 SuggestionBoxPanel 1.0 SuggestionBoxPanel.qml
 UserListPanel 1.0 UserListPanel.qml
 ChatAnchorButtonsPanel 1.0 ChatAnchorButtonsPanel.qml
+InlineSelectorPanel 1.0 InlineSelectorPanel.qml
diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
@@ -290,7 +290,6 @@ Item {
                                  && !d.sendingInProgress
                     }
 
-                    store: root.rootStore
                     usersModel: d.activeUsersStore.usersModel
                     sharedStore: root.sharedRootStore
 

diff --git a/ui/app/AppLayouts/Chat/views/CreateChatView.qml b/ui/app/AppLayouts/Chat/views/CreateChatView.qml
@@ -2,7 +2,6 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQml.Models 2.15
-import QtGraphicalEffects 1.15
 
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
@@ -46,7 +45,6 @@ Page {
     Behavior on anchors.bottomMargin { NumberAnimation { duration: 30 }}
 
     background: Rectangle {
-        anchors.fill: parent
         color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
     }
 
@@ -73,14 +71,14 @@ Page {
                         const ensName = member.displayName.includes(".eth") ? member.displayName : ""
                         root.rootStore.chatCommunitySectionModule.createOneToOneChat("", member.pubKey, ensName)
                     } else {
-                        var groupName = "";
-                        var pubKeys = [];
+                        var groupName = []
+                        var pubKeys = []
                         for (var i = 0; i < model.count; i++) {
                             const member = model.get(i)
-                            groupName += (member.displayName + (i === model.count - 1 ? "" : "&"))
+                            groupName.push(member.displayName)
                             pubKeys.push(member.pubKey)
                         }
-                        root.rootStore.chatCommunitySectionModule.createGroupChat("", groupName, JSON.stringify(pubKeys))
+                        root.rootStore.chatCommunitySectionModule.createGroupChat("", groupName.join("&"), JSON.stringify(pubKeys))
                     }
                 }
 
@@ -131,7 +129,6 @@ Page {
                 Layout.alignment: Qt.AlignTop
                 Layout.leftMargin: Theme.halfPadding
                 visible: contactsList.visible
-                font.pixelSize: 15
                 text: qsTr("Contacts")
                 color: Theme.palette.baseColor1
             }
@@ -182,7 +179,6 @@ Page {
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
             wrapMode: Text.WordWrap
-            font.pixelSize: 15
             color: Theme.palette.baseColor1
             text: qsTr("You can only send direct messages to your Contacts.\n
 Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")

diff --git a/ui/app/AppLayouts/Chat/views/MembersEditSelectorView.qml b/ui/app/AppLayouts/Chat/views/MembersEditSelectorView.qml
@@ -1,21 +1,21 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 
-import "../panels"
-import "../stores"
-import "private"
+import AppLayouts.Chat.stores 1.0
 
 import utils 1.0
 
 import SortFilterProxyModel 0.2
 
+import "private"
+
 MembersSelectorBase {
     id: root
 
@@ -55,7 +55,7 @@ MembersSelectorBase {
         readonly property string _pubKey: model.pubKey
 
         height: ListView.view.height
-        text: root.tagText(model.localNickname, model.displayName, model.alias)
+        text: model.preferredDisplayName
 
         isReadonly: {
             if (model.memberRole === Constants.memberRole.owner) return true

diff --git a/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml b/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml
@@ -1,6 +1,6 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQml.Models 2.2
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQml.Models 2.15
 
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
@@ -9,8 +9,6 @@ import "private"
 
 import utils 1.0
 
-import SortFilterProxyModel 0.2
-
 MembersSelectorBase {
     id: root
 
@@ -39,20 +37,18 @@ MembersSelectorBase {
     }
 
     onTextPasted: (text) => {
-        // When pated, process text immediately
-        contactLookupDelayTimer.stop() // when pasting, textChanged is still emited first
+        // When pasted, process text immediately
+        contactLookupDelayTimer.stop() // when pasting, textChanged is still emitted first
         d.lookupContact(text)
     }
 
-    model: SortFilterProxyModel {
-        sourceModel: d.selectedMembers
-    }
+    model: d.selectedMembers
 
     delegate: StatusTagItem {
         readonly property string _pubKey: model.pubKey
 
         height: ListView.view.height
-        text: root.tagText(model.localNickname, model.displayName, model.alias)
+        text: model.localNickname || model.displayName
 
         onClosed: root.entryRemoved(this)
     }
@@ -129,11 +125,7 @@ MembersSelectorBase {
                     return false
             }
 
-            d.selectedMembers.append({
-                                         "pubKey": pubKey,
-                                         "displayName": displayName,
-                                         "localNickname": localNickname
-                                     })
+            d.selectedMembers.append({pubKey, displayName, localNickname})
             return true
         }
 

diff --git a/ui/app/AppLayouts/Chat/views/private/MembersSelectorBase.qml b/ui/app/AppLayouts/Chat/views/private/MembersSelectorBase.qml
@@ -1,16 +1,13 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
+import StatusQ 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import "../../panels"
 
 import AppLayouts.Chat.stores 1.0 as ChatStores
+import AppLayouts.Chat.panels 1.0
 
 import utils 1.0
 import shared.controls.delegates 1.0
@@ -25,10 +22,6 @@ InlineSelectorPanel {
     readonly property int membersLimit: 20 // see: https://github.com/status-im/status-mobile/issues/13066
     property bool limitReached: model.count >= membersLimit
 
-    function tagText(localNickname, displayName, aliasName) {
-        return localNickname || displayName || aliasName
-    }
-
     property string pastedChatKey: ""
 
     label.text: qsTr("To:")
@@ -54,41 +47,32 @@ InlineSelectorPanel {
             return true
         }
 
-        function isPastedProfileLinkToContact(pubkey) {
-            return root.pastedChatKey === pubkey
-        }
-
         filters: [
-            ExpressionFilter {
+            FastExpressionFilter {
                 enabled: root.edit.text !== "" && root.pastedChatKey == ""
                 expression: {
                     root.edit.text // ensure expression is reevaluated when edit.text changes
                     return _suggestionsModel.searchPredicate(model.displayName, model.localNickname, model.alias)
                 }
+                expectedRoles: ["displayName", "localNickname", "alias"]
             },
-            ExpressionFilter {
+            FastExpressionFilter {
                 expression: {
                     root.model.count // ensure expression is reevaluated when members model changes
                     return _suggestionsModel.notAMemberPredicate(model.pubKey)
                 }
+                expectedRoles: ["pubKey"]
             },
-            ExpressionFilter {
-                enabled: root.pastedChatKey != ""
-                expression: {
-                    root.pastedChatKey // ensure expression is reevaluated when members model changes
-                    return _suggestionsModel.isPastedProfileLinkToContact(model.pubKey)
-                }
+            ValueFilter {
+                roleName: "pubKey"
+                value: root.pastedChatKey
+                enabled: root.pastedChatKey !== ""
             }
         ]
 
-        proxyRoles: ExpressionRole {
-            name: "title"
-            expression: model.localNickname || model.displayName || model.alias
-        }
-
         sorters: StringSorter {
-            roleName: "title"
-            numericMode: true
+            roleName: "preferredDisplayName"
+            caseSensitivity: Qt.CaseInsensitive
         }
     }