feat(StatusTagSelector): Replaced member delegate w/ StatusMemberLisItm (#676)

Fixes https://github.com/status-im/status-desktop/issues/5625

ui/StatusQ/sandbox/demoapp/CreateChatView.qml

@@ -30,6 +30,34 @@ Page {
             toLabelText: qsTr("To: ")
             warningText: qsTr("USER LIMIT REACHED")
             listLabel: qsTr("Contacts")
+            ringSpecModelGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getColorHashAsJson(pubKey)
+                var index = -1;
+                if (!!contactsModel) {
+                    for (var i = 0; i < contactsModel.count; i++) {
+                        if (contactsModel.get(i).publicId === pubKey) {
+                            index = i;
+                        }
+                    }
+                    return contactsModel.get(index).ringSpecModel;
+                } else {
+                    return null;
+                }
+            }
+            compressedKeyGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getCompressedPk(pubKey);
+                var possibleCharacters = pubKey.split('');
+                var randomStringLength = 12; // assuming you want random strings of 12 characters
+                var randomString = [];
+                for (var i=0; i<randomStringLength; ++i) {
+                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
+                    var nextChar = possibleCharacters[index];
+                    randomString.push(nextChar);
+                }
+                return randomString.join().toString().replace(/,/g, '');
+            }
             onTextChanged: {
                 sortModel(root.contactsModel);
             }

ui/StatusQ/sandbox/demoapp/StatusAppChatView.qml

@@ -129,7 +129,7 @@ StatusAppThreePanelLayout {
         Component {
             id: createChatView
             CreateChatView {
-                contactsModel: Models.dummyContactsModel
+                contactsModel: Models.membersListModel
             }
         }
 

ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml

@@ -259,15 +259,14 @@ StatusAppThreePanelLayout {
             delegate: StatusMemberListItem {
                 implicitWidth: parent.width
                 nickName: model.nickName
-                userName: model.userName
+                userName: model.name
-                chatKey: model.chatKey
+                chatKey: model.publicId
                 trustIndicator: model.trustIndicator
                 isMutualContact: model.isMutualContact
-                image.source: model.source
+                image.source: model.icon
                 image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
+                isOnline: model.onlineStatus
                 ringSettings.ringSpecModel: model.ringSpecModel
-                ringSettings.distinctiveColors: Theme.palette.identiconRingColors
             }
         }
     }

ui/StatusQ/sandbox/demoapp/data/Models.qml

@@ -4,58 +4,6 @@ import StatusQ.Components 0.1
 
 QtObject {
 
-    property ListModel dummyContactsModel: ListModel {
-        ListElement {
-            publicId: "0x0"
-            name: "Maria"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 3
-        }
-        ListElement {
-            publicId: "0x1"
-            name: "James"
-            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            isIdenticon: false
-            onlineStatus: 1
-        }
-        ListElement {
-            publicId: "0x2"
-            name: "Paul"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 2
-        }
-        ListElement {
-            publicId: "0x3"
-            name: "Tracy"
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            onlineStatus: 3
-        }
-        ListElement {
-            publicId: "0x4"
-            name: "Nick"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 3
-        }
-        ListElement {
-            publicId: "0x5"
-            name: "Steven"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 2
-        }
-        ListElement {
-            publicId: "0x6"
-            name: "Helen"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 3
-        }
-    }
-
     property var demoChatListItems: ListModel {
         id: demoChatListItems
         ListElement {
@@ -896,12 +844,12 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         id: membersList
         ListElement {
             nickName: "This is an example"
-            userName: "annabelle"
+            name: "Maria"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             isMutualContact: true
-            isOnline: true
+            onlineStatus: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                             nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             ringSpecModel: [ ListElement {colorId: 13; segmentLength: 5},
@@ -913,23 +861,23 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                              ListElement {colorId: 28; segmentLength: 3} ]
         }
         ListElement {
-            nickName: "carmen.eth"
+            nickName: ""
-            userName: ""
+            name: "carmen.eth"
-            chatKey: ""
+            publicId: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             isMutualContact: false
-            isOnline: false
+            onlineStatus: false
-            source: ""
+            icon: ""
             isIdenticon: false            
         }
         ListElement {
             nickName: "This girl I know from work"
-            userName:  "annabelle"
+            name: "annabelle"
-            chatKey: ""
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             isMutualContact: false
-            isOnline: true
+            onlineStatus: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                      ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             ringSpecModel: [ ListElement {colorId: 11; segmentLength: 1},
@@ -942,12 +890,12 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
         ListElement {
             nickName: "Mark Cuban"
-            userName: "annabelle"
+            name: "mark.eth"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             isMutualContact: true
-            isOnline: false
+            onlineStatus: false
-            source: ""
+            icon: ""
             isIdenticon: false
             ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
                              ListElement {colorId: 28; segmentLength: 1},

ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml

@@ -79,7 +79,7 @@ StatusListItem {
         // Subtitle composition:
         function composeSubtitile() {
             var compose = ""
-            if(root.userName !== "")
+            if(root.userName !== "" && root.nickName !== "")
                 compose = "(" + root.userName + ")"
 
             if(compose !== "" && root.chatKey !== "")
@@ -99,7 +99,7 @@ StatusListItem {
     }
 
     // root object settings:
-    title: root.nickName
+    title: (root.nickName === "") ? root.userName : root.nickName
     statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
         isMutualContact: root.isMutualContact
         trustIndicator: root.trustIndicator

ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml

@@ -98,6 +98,21 @@ Item {
         This property sets the tags count limit.
     */
     property int nameCountLimit: 5
+
+    /*!
+        \qmlproperty var StatusTagSelector::ringSpecModel
+        This property holds the function to calculate the ring spec model
+        based on the public key.
+    */
+    property var ringSpecModelGetter: (pubKey) => { /*return ringSpecModel*/ }
+
+    /*!
+        \qmlproperty var StatusTagSelector::compressKey
+        This property holds the function to calculate the compressed
+        key based on the public key.
+    */
+    property var compressedKeyGetter: (pubKey) => { /*return compressed key;*/ }
+
     /*!
         \qmlproperty ListModel StatusTagSelector::sortedList
         This property holds the sorted list model.
@@ -142,6 +157,8 @@ Item {
                 if (entry.name.toLowerCase().includes(text.toLowerCase()) &&
                     !find(namesModel, function(item) { return item.name === entry.name })) {
                     sortedList.append({"publicId": entry.publicId, "name": entry.name,
+                                       "nickName": entry.nickName, "trustIndicator": entry.trustIndicator,
+                                       "isMutualContact": entry.isMutualContact, "ringSpecModel": entry.ringSpecModel,
                                        "icon": entry.icon, "isIdenticon": entry.isIdenticon,
                                        "onlineStatus": entry.onlineStatus});
                     userListView.model = sortedList;
@@ -306,14 +323,12 @@ Item {
         background: Rectangle {
             id: bgRect
             anchors.fill: parent
+            anchors.margins: 8
             visible: (root.sortedList.count > 0)
             color: Theme.palette.statusPopupMenu.backgroundColor
             radius: 8
             layer.enabled: true
             layer.effect: DropShadow {
-                width: bgRect.width
-                height: bgRect.height
-                x: bgRect.x
                 source: bgRect
                 horizontalOffset: 0
                 verticalOffset: 4
@@ -325,10 +340,12 @@ Item {
         }
         contentItem: ListView {
             id: userListView
-            anchors.fill: parent
+            anchors {
-            anchors.topMargin: 8
+                fill: parent
-            anchors.bottomMargin: 8
+                topMargin: 16
-            clip: true
+                leftMargin: 8
+                rightMargin: 8
+            }
             ScrollBar.vertical: ScrollBar {
                 policy: ScrollBar.AsNeeded
             }
@@ -336,10 +353,11 @@ Item {
             onCountChanged: {
                 userListView.currentIndex = 0;
             }
-            delegate: Item {
+            delegate: StatusMemberListItem {
-                id: wrapper
-                anchors.right: parent.right
                 anchors.left: parent.left
+                anchors.leftMargin: bgRect.visible ? 8 : 0
+                anchors.right: parent.right
+                anchors.rightMargin: bgRect.visible ? 8 : 0
                 height: visible ? 64 : 0
                 visible: {
                     for (let i = 0; i < namesModel.count; i++) {
@@ -349,62 +367,19 @@ Item {
                     }
                     return true
                 }
-                Rectangle {
+                nickName: model.nickName
-                    id: rectangle
+                userName: model.name
-                    anchors.fill: parent
+                chatKey: root.compressedKeyGetter(model.publicId)
-                    anchors.rightMargin: 8
+                trustIndicator: model.trustIndicator
-                    anchors.leftMargin: 8
+                isMutualContact: model.isMutualContact
-                    radius: 8
+                image.source: model.icon
-                    visible: wrapper.ListView.isCurrentItem
+                image.isIdenticon: model.isIdenticon
-                    color: Theme.palette.baseColor2
+                isOnline: model.onlineStatus
-                }
+                statusListItemIcon.badge.border.color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
-
+                ringSettings.ringSpecModel: root.ringSpecModelGetter(publicId)
-                StatusSmartIdenticon {
+                color: (sensor.containsMouse || highlighted) ? Theme.palette.baseColor2 : "transparent"
-                    id: contactImage
+                onClicked: {
-                    anchors.left: parent.left
+                    root.insertTag(model.name, model.publicId);
-                    anchors.leftMargin: 16//Style.current.padding
-                    anchors.verticalCenter: parent.verticalCenter
-                    name: model.name
-                    icon: StatusIconSettings {
-                        width: 40
-                        height: 40
-                        letterSize: 15
-                    }
-                    image: StatusImageSettings {
-                        width: 40
-                        height: 40
-                        source: model.icon
-                        isIdenticon: model.isIdenticon
-                    }
-                }
-
-                StatusBaseText {
-                    id: contactInfo
-                    text: model.name
-                    anchors.right: parent.right
-                    anchors.rightMargin: 8
-                    anchors.left: contactImage.right
-                    anchors.leftMargin: 16
-                    anchors.verticalCenter: parent.verticalCenter
-                    elide: Text.ElideRight
-                    color: Theme.palette.directColor1
-                    font.weight: Font.Medium
-                    font.pixelSize: 15
-                }
-
-                MouseArea {
-                    id: sensor
-                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-                    acceptedButtons: Qt.LeftButton | Qt.RightButton
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onContainsMouseChanged: {
-                        if (containsMouse)
-                            userListView.currentIndex = index;
-                    }
-                    onClicked: {
-                        root.insertTag(model.name, model.publicId);
-                    }
                 }
             }
         }