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

Fixes https://github.com/status-im/status-desktop/issues/5625
This commit is contained in:
Alexandra Betouni 2022-05-19 12:02:36 +03:00 committed by GitHub
parent b918897241
commit e1db639340
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 143 deletions

View File

@ -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);
}

View File

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

View File

@ -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
}
}
}

View File

@ -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},

View File

@ -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

View File

@ -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);
}
}
}