feat(StatusTagSelector): Replaced member delegate w/ StatusMemberLisItm (#676)
Fixes https://github.com/status-im/status-desktop/issues/5625
This commit is contained in:
parent
b918897241
commit
e1db639340
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -129,7 +129,7 @@ StatusAppThreePanelLayout {
|
|||
Component {
|
||||
id: createChatView
|
||||
CreateChatView {
|
||||
contactsModel: Models.dummyContactsModel
|
||||
contactsModel: Models.membersListModel
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue