status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(GroupChat/Add-Remove-Contacts): Implement "Add / remove from group" button for group chats 

Added new option add / remove contacts in dropdown and created navigation to modify the loaded component in the toolbar.

Enabled addition of new members into a group chat by the admin.

Enabled removal of members of a group chat by the admin.

Added into `ChatContentView` components related to chat toolbar:
- `StatusTagSelector` and its corresponding logic
-  Moved `StatusChatInfoButton` from toolbar to content view.

Added `esc` key event to leave the group chat add / remove panel.

Updated `StatusQ` link.

Closes #5522
This commit is contained in:
Noelia 2022-05-13 19:11:02 +02:00 committed by Noelia
parent 78f985e484
commit 7c92d39359
10 changed files with 319 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/modules/main/chat_section/controller.nim
View File

@ -293,6 +293,9 @@ proc addGroupMembers*(self: Controller, chatId: string, pubKeys: seq[string]) =
proc removeMemberFromGroupChat*(self: Controller, communityID: string, chatId: string, pubKey: string) =
self.chatService.removeMemberFromGroupChat(communityID, chatId, pubKey)
proc removeMembersFromGroupChat*(self: Controller, communityID: string, chatId: string, pubKeys: seq[string]) =
self.chatService.removeMembersFromGroupChat(communityID, chatId, pubKeys)
proc renameGroupChat*(self: Controller, chatId: string, newName: string) =
let communityId = if self.isCommunitySection: self.sectionId else: ""
self.chatService.renameGroupChat(communityId, chatId, newName)

3
src/app/modules/main/chat_section/io_interface.nim
View File

@ -205,6 +205,9 @@ method addGroupMembers*(self: AccessInterface, chatId: string, pubKeys: string)
method removeMemberFromGroupChat*(self: AccessInterface, communityID: string, chatId: string, pubKey: string) {.base.} =
raise newException(ValueError, "No implementation available")
method removeMembersFromGroupChat*(self: AccessInterface, communityID: string, chatId: string, pubKeys: string) {.base.} =
raise newException(ValueError, "No implementation available")
method renameGroupChat*(self: AccessInterface, chatId: string, newName: string) {.base.} =
raise newException(ValueError, "No implementation available")

3
src/app/modules/main/chat_section/module.nim
View File

@ -686,6 +686,9 @@ method addGroupMembers*(self: Module, chatId: string, pubKeys: string) =
method removeMemberFromGroupChat*(self: Module, communityID: string, chatId: string, pubKey: string) =
self.controller.removeMemberFromGroupChat(communityID, chatId, pubKey)
method removeMembersFromGroupChat*(self: Module, communityID: string, chatId: string, pubKeys: string) =
self.controller.removeMembersFromGroupChat(communityID, chatId, self.convertPubKeysToJson(pubKeys))
method renameGroupChat*(self: Module, chatId: string, newName: string) =
self.controller.renameGroupChat(chatId, newName)

3
src/app/modules/main/chat_section/view.nim
View File

@ -186,6 +186,9 @@ QtObject:
proc removeMemberFromGroupChat*(self: View, communityID: string, chatId: string, pubKey: string) {.slot.} =
self.delegate.removeMemberFromGroupChat(communityID, chatId, pubKey)
proc removeMembersFromGroupChat*(self: View, communityID: string, chatId: string, pubKeys: string) {.slot.} =
self.delegate.removeMembersFromGroupChat(communityID, chatId, pubKeys)
proc renameGroupChat*(self: View, chatId: string, newName: string) {.slot.} =
self.delegate.renameGroupChat(chatId, newName)

6
src/app_service/service/chat/service.nim
View File

@ -464,6 +464,12 @@ QtObject:
except Exception as e:
error "error while removing member from group: ", msg = e.msg
proc removeMembersFromGroupChat*(self: Service, communityID: string, chatID: string, members: seq[string]) =
try:
for member in members:
self.removeMemberFromGroupChat(communityID, chatID, member)
except Exception as e:
error "error while removing members from group: ", msg = e.msg
proc renameGroupChat*(self: Service, communityID: string, chatID: string, name: string) =
try:

2
ui/StatusQ

@ -1 +1 @@
Subproject commit be0f49a8d80a8489e9f26f765167c3239c0c92c1
Subproject commit a4d0c1366256d4e552990bde63734b7ceea0ad80

180
ui/app/AppLayouts/Chat/panels/GroupChatPanel.qml Normal file
View File

@ -0,0 +1,180 @@
import QtQuick 2.13
import QtQuick.Layouts 1.13
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import utils 1.0
RowLayout {
id: root
property var sectionModule
property var chatContentModule
property var rootStore
property int maxHeight
signal panelClosed()
QtObject {
id: d
property ListModel groupUsersModel: ListModel { }
property ListModel contactsModel: ListModel { }
property var addedMembersIds: []
property var removedMembersIds: []
function initialize () {
groupUsersModel.clear()
contactsModel.clear()
addedMembersIds = []
removedMembersIds = []
tagSelector.namesModel.clear()
}
}
ListView {
id: groupUsersModelListView
visible: false
model: root.chatContentModule.usersModule.model
delegate: Item {
property string publicId: model.id
property string name: model.name
property string icon: model.icon
property bool isAdmin: model.isAdmin
}
}
ListView {
id: contactsModelListView
visible: false
model: root.rootStore.contactsModel
delegate: Item {
property string publicId: model.pubKey
property string name: model.name
property string icon: model.icon
}
}
clip: true
Component.onCompleted: {
d.initialize()
// Build groupUsersModel type from model type (to fit with expected StatusTagSelector format
for (var i = 0; i < groupUsersModelListView.count; i ++) {
var entry = groupUsersModelListView.itemAtIndex(i)
// Add all group users different than me
if(!entry.isAdmin) {
d.groupUsersModel.insert(d.groupUsersModel.count,
{"publicId": entry.publicId,
"name": entry.name,
"icon": entry.icon})
}
}
// Build contactsModel type from model type (to fit with expected StatusTagSelector format
for (var j = 0; j < contactsModelListView.count; j ++) {
var entry2 = contactsModelListView.itemAtIndex(j)
d.contactsModel.insert(d.contactsModel.count,
{"publicId": entry2.publicId,
"name": entry2.name,
"icon": entry2.icon,
"isIdenticon": false,
"onlineStatus": false})
}
// Update contacts list used by StatusTagSelector
tagSelector.sortModel(d.contactsModel)
}
StatusTagSelector {
id: tagSelector
function memberExists(memberId) {
var exists = false
for (var i = 0; i < groupUsersModelListView.count; i ++) {
var entry = groupUsersModelListView.itemAtIndex(i)
if(entry.publicId === memberId) {
exists = true
break
}
}
return exists
}
function find(val, array) {
for(var i = 0; i < array.length; i++) {
if(array[i] === val) {
return true
}
}
return false
}
function addNewMember(memberId) {
if(find(memberId, d.addedMembersIds)) {
return
}
if(!memberExists(memberId)) {
d.addedMembersIds.push(memberId)
}
if(memberExists(memberId) && find(memberId, d.removedMembersIds)) {
d.removedMembersIds.pop(memberId)
}
}
function removeExistingMember(memberId) {
if(find(memberId, d.removedMembersIds)) {
return
}
if(memberExists(memberId)) {
d.removedMembersIds.push(memberId)
}
if(!memberExists(memberId) && find(memberId, d.addedMembersIds)) {
d.addedMembersIds.pop(memberId)
}
}
namesModel: d.groupUsersModel
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
maxHeight: root.maxHeight
nameCountLimit: 20
showSortedListOnlyWhenText: true
toLabelText: qsTr("To: ")
warningText: qsTr("USER LIMIT REACHED")
onTextChanged: sortModel(d.contactsModel)
onAddMember: addNewMember(memberId)
onRemoveMember: removeExistingMember(memberId)
ringSpecModelGetter: function(pubKey) {
return Utils.getColorHashAsJson(pubKey);
}
compressedKeyGetter: function(pubKey) {
return Utils.getCompressedPk(pubKey);
}
}
StatusButton {
id: confirmButton
implicitHeight: 44
Layout.alignment: Qt.AlignTop
text: "Confirm"
onClicked: {
if(root.chatContentModule.chatDetails.id &&((d.addedMembersIds.length > 0) || (d.removedMembersIds.length > 0))) {
// Add request:
root.sectionModule.addGroupMembers(root.chatContentModule.chatDetails.id, JSON.stringify(d.addedMembersIds))
// Remove request:
root.sectionModule.removeMembersFromGroupChat("", root.chatContentModule.chatDetails.id, JSON.stringify(d.removedMembersIds))
}
root.panelClosed()
}
}
}

197
ui/app/AppLayouts/Chat/views/ChatContentView.qml
View File

@ -57,95 +57,120 @@ ColumnLayout {
if(chatContentRoot.height > 0) {
chatInput.forceInputActiveFocus()
}
}
Keys.onEscapePressed: { topBar.toolbarComponent = statusChatInfoButton }
// Chat toolbar content option 1:
Component {
id: statusChatInfoButton
StatusChatInfoButton {
width: Math.min(implicitWidth, parent.width)
title: chatContentModule? chatContentModule.chatDetails.name : ""
subTitle: {
if(!chatContentModule)
return ""
// In some moment in future this should be part of the backend logic.
// (once we add transaltion on the backend side)
switch (chatContentModule.chatDetails.type) {
case Constants.chatType.oneToOne:
return (chatContentModule.isMyContact(chatContentModule.chatDetails.id) ?
//% "Contact"
qsTrId("chat-is-a-contact") :
//% "Not a contact"
qsTrId("chat-is-not-a-contact"))
case Constants.chatType.publicChat:
//% "Public chat"
return qsTrId("public-chat")
case Constants.chatType.privateGroupChat:
let cnt = chatContentRoot.usersStore.usersModule.model.count
//% "%1 members"
if(cnt > 1) return qsTrId("-1-members").arg(cnt);
//% "1 member"
return qsTrId("1-member");
case Constants.chatType.communityChat:
return Utils.linkifyAndXSS(chatContentModule.chatDetails.description).trim()
default:
return ""
}
}
image.source: chatContentModule? chatContentModule.chatDetails.icon : ""
ringSettings.ringSpecModel: chatContentModule && chatContentModule.chatDetails.type === Constants.chatType.oneToOne ?
Utils.getColorHashAsJson(chatContentModule.chatDetails.id) : ""
icon.color: chatContentModule?
chatContentModule.chatDetails.type === Constants.chatType.oneToOne ?
Utils.colorForPubkey(chatContentModule.chatDetails.id)
: chatContentModule.chatDetails.color
: ""
icon.emoji: chatContentModule? chatContentModule.chatDetails.emoji : ""
icon.emojiSize: "24x24"
type: chatContentModule? chatContentModule.chatDetails.type : Constants.chatType.unknown
pinnedMessagesCount: chatContentModule? chatContentModule.pinnedMessagesModel.count : 0
muted: chatContentModule? chatContentModule.chatDetails.muted : false
onPinnedMessagesCountClicked: {
if(!chatContentModule) {
console.debug("error on open pinned messages - chat content module is not set")
return
}
Global.openPopup(pinnedMessagesPopupComponent, {
store: rootStore,
messageStore: messageStore,
pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
messageToPin: ""
})
}
onUnmute: {
if(!chatContentModule) {
console.debug("error on unmute chat - chat content module is not set")
return
}
chatContentModule.unmuteChat()
}
sensor.enabled: {
if(!chatContentModule)
return false
return chatContentModule.chatDetails.type !== Constants.chatType.publicChat &&
chatContentModule.chatDetails.type !== Constants.chatType.communityChat
}
onClicked: {
switch (chatContentModule.chatDetails.type) {
case Constants.chatType.privateGroupChat:
Global.openPopup(groupInfoPopupComponent, {
chatContentModule: chatContentModule,
chatDetails: chatContentModule.chatDetails
})
break;
case Constants.chatType.oneToOne:
Global.openProfilePopup(chatContentModule.chatDetails.id)
break;
}
}
}
}
// Chat toolbar content option 2:
Component {
id: contactsSelector
GroupChatPanel {
sectionModule: chatSectionModule
chatContentModule: chatContentRoot.chatContentModule
rootStore: chatContentRoot.rootStore
maxHeight: chatContentRoot.height
onPanelClosed: topBar.toolbarComponent = statusChatInfoButton
}
}
StatusChatToolBar {
id: topBar
z: parent.z + 1
Layout.fillWidth: true
chatInfoButton.title: chatContentModule? chatContentModule.chatDetails.name : ""
chatInfoButton.subTitle: {
if(!chatContentModule)
return ""
// In some moment in future this should be part of the backend logic.
// (once we add transaltion on the backend side)
switch (chatContentModule.chatDetails.type) {
case Constants.chatType.oneToOne:
return (chatContentModule.isMyContact(chatContentModule.chatDetails.id) ?
//% "Contact"
qsTrId("chat-is-a-contact") :
//% "Not a contact"
qsTrId("chat-is-not-a-contact"))
case Constants.chatType.publicChat:
//% "Public chat"
return qsTrId("public-chat")
case Constants.chatType.privateGroupChat:
let cnt = chatContentRoot.usersStore.usersModule.model.count
//% "%1 members"
if(cnt > 1) return qsTrId("-1-members").arg(cnt);
//% "1 member"
return qsTrId("1-member");
case Constants.chatType.communityChat:
return Utils.linkifyAndXSS(chatContentModule.chatDetails.description).trim()
default:
return ""
}
}
chatInfoButton.image.source: chatContentModule? chatContentModule.chatDetails.icon : ""
chatInfoButton.ringSettings.ringSpecModel: chatContentModule && chatContentModule.chatDetails.type === Constants.chatType.oneToOne ?
Utils.getColorHashAsJson(chatContentModule.chatDetails.id) : ""
chatInfoButton.icon.color: chatContentModule?
chatContentModule.chatDetails.type === Constants.chatType.oneToOne ?
Utils.colorForPubkey(chatContentModule.chatDetails.id)
: chatContentModule.chatDetails.color
: ""
chatInfoButton.icon.emoji: chatContentModule? chatContentModule.chatDetails.emoji : ""
chatInfoButton.icon.emojiSize: "24x24"
chatInfoButton.type: chatContentModule? chatContentModule.chatDetails.type : Constants.chatType.unknown
chatInfoButton.pinnedMessagesCount: chatContentModule? chatContentModule.pinnedMessagesModel.count : 0
chatInfoButton.muted: chatContentModule? chatContentModule.chatDetails.muted : false
chatInfoButton.onPinnedMessagesCountClicked: {
if(!chatContentModule) {
console.debug("error on open pinned messages - chat content module is not set")
return
}
Global.openPopup(pinnedMessagesPopupComponent, {
store: rootStore,
messageStore: messageStore,
pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
messageToPin: ""
})
}
chatInfoButton.onUnmute: {
if(!chatContentModule) {
console.debug("error on unmute chat - chat content module is not set")
return
}
chatContentModule.unmuteChat()
}
chatInfoButton.sensor.enabled: {
if(!chatContentModule)
return false
return chatContentModule.chatDetails.type !== Constants.chatType.publicChat &&
chatContentModule.chatDetails.type !== Constants.chatType.communityChat
}
chatInfoButton.onClicked: {
switch (chatContentModule.chatDetails.type) {
case Constants.chatType.privateGroupChat:
Global.openPopup(groupInfoPopupComponent, {
chatContentModule: chatContentModule,
chatDetails: chatContentModule.chatDetails
})
break;
case Constants.chatType.oneToOne:
Global.openProfilePopup(chatContentModule.chatDetails.id)
break;
}
}
toolbarComponent: statusChatInfoButton
membersButton.visible: {
if(!chatContentModule || chatContentModule.chatDetails.type === Constants.chatType.publicChat)
@ -258,7 +283,7 @@ ColumnLayout {
)
}
onAddRemoveGroupMember: {
chatContentRoot.rootStore.addRemoveGroupMember();
topBar.toolbarComponent = contactsSelector
}
onFetchMoreMessages: {
chatContentRoot.rootStore.messageStore.requestMoreMessages();
@ -298,7 +323,7 @@ ColumnLayout {
Connections {
target: mainModule
onOnlineStatusChanged: {
if (connected == isConnected) return;
if (connected === isConnected) return;
isConnected = connected;
if(isConnected){
timer.setTimeout(function(){

20
ui/app/AppLayouts/Chat/views/ChatContextMenuView.qml
View File

@ -46,6 +46,8 @@ StatusPopupMenu {
signal fetchMoreMessages(int timeFrame)
signal addRemoveGroupMember()
width: root.amIChatAdmin && (root.chatType === Constants.chatType.privateGroupChat) ? 207 : implicitWidth
StatusMenuItem {
id: viewProfileMenuItem
text: {
@ -72,18 +74,12 @@ StatusPopupMenu {
}
}
// TODO needs to be implemented
// This should open up the ad-hoc group chat creation view
// Design https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=417%3A243810
// StatusMenuItem {
// text: qsTr("Add / remove from group")
// icon.name: "notification"
// enabled: (root.chatType === Constants.chatType.privateGroupChat &&
// amIChatAdmin)
// onTriggered: {
// root.addRemoveGroupMember();
// }
// }
StatusMenuItem {
text: qsTr("Add / remove from group")
icon.name: "add-to-dm"
enabled: root.amIChatAdmin && (root.chatType === Constants.chatType.privateGroupChat)
onTriggered: { root.addRemoveGroupMember() }
}
StatusMenuSeparator {
visible: viewProfileMenuItem.enabled

1
ui/app/AppLayouts/Chat/views/CreateChatView.qml
View File

@ -88,6 +88,7 @@ Page {
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
}
// TODO: Could it be replaced to `GroupChatPanel`?
header: RowLayout {
id: headerRow
width: parent.width