status-desktop/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml

351 lines
11 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
2020-06-11 17:50:36 +00:00
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
2020-06-11 17:50:36 +00:00
import "./"
ModalPopup {
id: popup
property bool addMembers: false
property int currMemberCount: 1
property int memberCount: 1
readonly property int maxMembers: 10
property var pubKeys: []
property var channel
property bool isAdmin: false
function resetSelectedMembers(){
pubKeys = [];
memberCount = channel.members.rowCount();
currMemberCount = memberCount;
2020-12-11 20:38:10 +00:00
contactList.membersData.clear();
const contacts = getContactListObject()
2020-12-11 20:38:10 +00:00
contacts.forEach(function (contact) {
if(popup.channel.contains(contact.pubKey) ||
2020-12-11 20:38:10 +00:00
!contact.isContact) {
return;
}
contactList.membersData.append(contact)
})
}
onClosed: {
popup.destroy();
}
onOpened: {
addMembers = false;
popup.isAdmin = popup.channel.isAdmin(profileModel.profile.pubKey)
btnSelectMembers.enabled = false;
resetSelectedMembers();
}
function doAddMembers(){
if(pubKeys.length === 0) return;
chatsModel.groups.addMembers(popup.channel.id, JSON.stringify(pubKeys));
popup.close();
}
2020-06-11 17:50:36 +00:00
header: Item {
height: children[0].height
width: parent.width
StatusLetterIdenticon {
2020-06-11 17:50:36 +00:00
id: letterIdenticon
width: 36
height: 36
anchors.top: parent.top
color: popup.channel.color
2021-03-02 20:43:32 +00:00
chatId: popup.channel.id
chatName: popup.channel.name
2020-06-11 17:50:36 +00:00
}
StyledTextEdit {
2020-06-11 17:50:36 +00:00
id: groupName
//% "Add members"
text: addMembers ? qsTrId("add-members") : popup.channel.name
2020-06-11 17:50:36 +00:00
anchors.top: parent.top
anchors.topMargin: 2
2020-06-11 17:50:36 +00:00
anchors.left: letterIdenticon.right
anchors.leftMargin: Style.current.smallPadding
2020-06-11 17:50:36 +00:00
font.bold: true
font.pixelSize: 14
readOnly: true
wrapMode: Text.WordWrap
}
StyledText {
2020-06-11 17:50:36 +00:00
text: {
let cnt = memberCount;
if(addMembers){
//% "%1 / 10 members"
return qsTrId("%1-/-10-members").arg(cnt)
} else {
//% "%1 members"
if(cnt > 1) return qsTrId("%1-members").arg(cnt);
//% "1 member"
return qsTrId("1-member");
}
2020-06-11 17:50:36 +00:00
}
width: 160
anchors.left: letterIdenticon.right
anchors.leftMargin: Style.current.smallPadding
2020-06-11 17:50:36 +00:00
anchors.top: groupName.bottom
anchors.topMargin: 2
font.pixelSize: 14
color: Style.current.darkGrey
2020-06-11 17:50:36 +00:00
}
2020-06-15 12:51:04 +00:00
Rectangle {
id: editGroupNameBtn
visible: !addMembers && popup.isAdmin
2020-06-15 12:51:04 +00:00
height: 24
width: 24
anchors.verticalCenter: groupName.verticalCenter
2020-06-15 12:51:04 +00:00
anchors.leftMargin: 4
anchors.left: groupName.right
radius: 8
SVGImage {
2020-06-15 12:51:04 +00:00
id: editGroupImg
source: "../../../img/edit-group.svg"
height: 16
width: 16
2020-06-15 12:51:04 +00:00
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
id: closeModalMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onExited: {
editGroupNameBtn.color = Style.current.white
2020-06-15 12:51:04 +00:00
}
onEntered: {
editGroupNameBtn.color = Style.current.grey
2020-06-15 12:51:04 +00:00
}
onClicked: renameGroupPopup.open()
}
}
RenameGroupPopup {
id: renameGroupPopup
}
2020-06-11 17:50:36 +00:00
}
Item {
id: addMembersItem
anchors.fill: parent
SearchBox {
id: searchBox
visible: addMembers
iconWidth: 17
iconHeight: 17
customHeight: 44
fontPixelSize: 15
}
2020-12-11 20:38:10 +00:00
NoFriendsRectangle {
id: noContactsRect
2020-12-11 20:38:10 +00:00
visible: contactList.membersData.count === 0
anchors.top: searchBox.bottom
anchors.topMargin: Style.current.xlPadding
anchors.horizontalCenter: parent.horizontalCenter
}
2020-12-11 20:38:10 +00:00
ContactList {
id: contactList
visible: addMembers && contactList.membersData.count > 0
anchors.fill: parent
anchors.topMargin: 50
anchors.top: searchBox.bottom
2020-12-11 20:38:10 +00:00
selectMode: memberCount < maxMembers
searchString: searchBox.text.toLowerCase()
onItemChecked: function(pubKey, itemChecked){
var idx = pubKeys.indexOf(pubKey)
if(itemChecked){
if(idx === -1){
pubKeys.push(pubKey)
}
} else {
if(idx > -1){
pubKeys.splice(idx, 1);
}
}
memberCount = popup.channel.members.rowCount() + pubKeys.length;
2020-12-11 20:38:10 +00:00
btnSelectMembers.enabled = pubKeys.length > 0
}
}
}
2020-06-11 17:50:36 +00:00
Item {
id: groupInfoItem
2020-06-11 17:50:36 +00:00
anchors.fill: parent
Separator {
id: separator
visible: !addMembers
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
2020-06-11 17:50:36 +00:00
}
ListView {
id: memberList
anchors.fill: parent
anchors.top: separator.bottom
2020-06-11 17:50:36 +00:00
anchors.bottom: popup.bottom
anchors.topMargin: addMembers ? 30 : 15
anchors.bottomMargin: Style.current.padding
anchors.leftMargin: 15
anchors.rightMargin: 15
spacing: 15
2020-06-11 17:50:36 +00:00
Layout.fillWidth: true
Layout.fillHeight: true
model: popup.channel.members
delegate: Item {
id: contactRow
width: parent.width
height: identicon.height
property string nickname: appMain.getUserNickname(model.pubKey)
StatusImageIdenticon {
id: identicon
anchors.left: parent.left
source: appMain.getProfileImage(model.pubKey)|| model.identicon
2020-06-11 17:50:36 +00:00
}
StyledText {
text: !model.userName.endsWith(".eth") && !!contactRow.nickname ?
contactRow.nickname : Utils.removeStatusEns(model.userName)
anchors.left: identicon.right
anchors.leftMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 13
StyledText {
2021-01-19 15:02:47 +00:00
visible: model.pubKey === profileModel.profile.pubKey
anchors.left: parent.right
anchors.leftMargin: 5
2021-02-18 16:36:05 +00:00
//% "(You)"
text: qsTrId("-you-")
2021-01-19 15:02:47 +00:00
color: Style.current.secondaryText
font.pixelSize: parent.font.pixelSize
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
2020-11-30 17:03:52 +00:00
onClicked: {
const userProfileImage = appMain.getProfileImage(model.pubKey)
2020-11-30 17:03:52 +00:00
openProfilePopup(model.userName, model.pubKey, userProfileImage || model.identicon, '', contactRow.nickname)
}
2020-06-11 17:50:36 +00:00
}
}
StyledText {
id: adminLabel
visible: model.isAdmin
//% "Admin"
text: qsTrId("group-chat-admin")
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 13
2021-01-19 15:02:47 +00:00
color: Style.current.secondaryText
2020-06-11 17:50:36 +00:00
}
StyledText {
id: moreActionsBtn
visible: !model.isAdmin && popup.isAdmin
text: "..."
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 20
font.bold: true
2021-01-19 15:02:47 +00:00
color: Style.current.secondaryText
MouseArea {
anchors.fill: parent
onClicked: {
contextMenu.popup(-contextMenu.width / 2 + moreActionsBtn.width / 2, moreActionsBtn.height + 10)
}
cursorShape: Qt.PointingHandCursor
PopupMenu {
id: contextMenu
Action {
icon.source: "../../../img/make-admin.svg"
icon.width: 16
icon.height: 16
//% "Make Admin"
text: qsTrId("make-admin")
onTriggered: chatsModel.groups.makeAdmin(popup.channel.id, model.pubKey)
}
Action {
icon.source: "../../../img/remove-from-group.svg"
icon.width: 16
icon.height: 16
icon.color: Style.current.red
//% "Remove From Group"
text: qsTrId("remove-from-group")
onTriggered: chatsModel.groups.kickMember(popup.channel.id, model.pubKey)
}
}
2020-06-11 17:50:36 +00:00
}
}
}
}
}
footer: Item {
visible: popup.isAdmin
width: parent.width
height: children[0].height
StatusButton {
visible: !addMembers
anchors.right: parent.right
//% "Add members"
text: qsTrId("add-members")
anchors.bottom: parent.bottom
onClicked: {
addMembers = true;
}
}
StatusRoundButton {
id: btnBack
visible: addMembers
anchors.bottom: parent.bottom
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
onClicked : {
addMembers = false;
resetSelectedMembers();
}
}
StatusButton {
id: btnSelectMembers
visible: addMembers
enabled: memberCount >= currMemberCount
anchors.right: parent.right
//% "Add selected"
text: qsTrId("add-selected")
anchors.bottom: parent.bottom
onClicked: doAddMembers()
}
}
content: addMembers ? addMembersItem : groupInfoItem
2020-06-11 17:50:36 +00:00
}