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

Fixes https://github.com/status-im/status-desktop/issues/5625
2022-05-19 12:02:36 +03:00 · 2022-05-19 12:02:36 +03:00 · e1db639340
parent b918897241
commit e1db639340
6 changed files with 93 additions and 143 deletions
--- a/sandbox/demoapp/CreateChatView.qml
+++ b/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);
            }
--- a/sandbox/demoapp/StatusAppChatView.qml
+++ b/sandbox/demoapp/StatusAppChatView.qml
@ -129,7 +129,7 @@ StatusAppThreePanelLayout {
        Component {
            id: createChatView
            CreateChatView {
-                contactsModel: Models.dummyContactsModel
+                contactsModel: Models.membersListModel
            }
        }

--- a/sandbox/demoapp/StatusAppCommunityView.qml
+++ b/sandbox/demoapp/StatusAppCommunityView.qml
@ -259,15 +259,14 @@ StatusAppThreePanelLayout {
            delegate: StatusMemberListItem {
                implicitWidth: parent.width
                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
+                userName: model.name
+                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
            }
        }
    }
--- a/sandbox/demoapp/data/Models.qml
+++ b/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"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            name: "Maria"
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
            isMutualContact: true
-            isOnline: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            onlineStatus: true
+            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"
-            userName: ""
-            chatKey: ""
+            nickName: ""
+            name: "carmen.eth"
+            publicId: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
            isMutualContact: false
-            isOnline: false
-            source: ""
+            onlineStatus: false
+            icon: ""
            isIdenticon: false            
        }
        ListElement {
            nickName: "This girl I know from work"
-            userName:  "annabelle"
-            chatKey: ""
+            name: "annabelle"
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
            trustIndicator: StatusContactVerificationIcons.TrustedType.None
            isMutualContact: false
-            isOnline: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
+            onlineStatus: true
+            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"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            name: "mark.eth"
+            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
            isMutualContact: true
-            isOnline: false
-            source: ""
+            onlineStatus: false
+            icon: ""
            isIdenticon: false
            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
                             ListElement {colorId: 28; segmentLength: 1},
--- a/src/StatusQ/Components/StatusMemberListItem.qml
+++ b/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
--- a/src/StatusQ/Components/StatusTagSelector.qml
+++ b/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.topMargin: 8
-            anchors.bottomMargin: 8
-            clip: true
+            anchors {
+                fill: parent
+                topMargin: 16
+                leftMargin: 8
+                rightMargin: 8
+            }
            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AsNeeded
            }
@ -336,10 +353,11 @@ Item {
            onCountChanged: {
                userListView.currentIndex = 0;
            }
-            delegate: Item {
-                id: wrapper
-                anchors.right: parent.right
+            delegate: StatusMemberListItem {
                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 {
-                    id: rectangle
-                    anchors.fill: parent
-                    anchors.rightMargin: 8
-                    anchors.leftMargin: 8
-                    radius: 8
-                    visible: wrapper.ListView.isCurrentItem
-                    color: Theme.palette.baseColor2
-                }
-
-                StatusSmartIdenticon {
-                    id: contactImage
-                    anchors.left: parent.left
-                    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);
-                    }
+                nickName: model.nickName
+                userName: model.name
+                chatKey: root.compressedKeyGetter(model.publicId)
+                trustIndicator: model.trustIndicator
+                isMutualContact: model.isMutualContact
+                image.source: model.icon
+                image.isIdenticon: model.isIdenticon
+                isOnline: model.onlineStatus
+                statusListItemIcon.badge.border.color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
+                ringSettings.ringSpecModel: root.ringSpecModelGetter(publicId)
+                color: (sensor.containsMouse || highlighted) ? Theme.palette.baseColor2 : "transparent"
+                onClicked: {
+                    root.insertTag(model.name, model.publicId);
                }
            }
        }