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

296 lines
9.4 KiB
QML
Raw Normal View History

2020-06-17 15:56:48 +00:00
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import "../../../../imports"
import "../../../../shared"
import "./"
ModalPopup {
id: popup
property var pubKeys: []
property bool selectChatMembers: true
property int memberCount: 1
readonly property int maxMembers: 10
property string channelNameValidationError: ""
2020-06-17 15:56:48 +00:00
onOpened: {
groupName.text = "";
searchBox.text = "";
selectChatMembers = true;
memberCount = 1;
pubKeys = [];
btnSelectMembers.state = "inactive";
for(var i in groupMembers.contentItem.children){
if (groupMembers.contentItem.children[i].isChecked !== null) {
groupMembers.contentItem.children[i].isChecked = false
}
}
data.clear();
2020-12-06 22:15:51 +00:00
const nbContacts = profileModel.contacts.list.rowCount()
for(let i = 0; i < nbContacts; i++){
2020-06-17 15:56:48 +00:00
data.append({
2020-12-06 22:15:51 +00:00
name: profileModel.contacts.list.rowData(i, "name"),
localNickname: profileModel.contacts.list.rowData(i, "localNickname"),
pubKey: profileModel.contacts.list.rowData(i, "pubKey"),
address: profileModel.contacts.list.rowData(i, "address"),
identicon: profileModel.contacts.list.rowData(i, "identicon"),
2020-11-30 17:03:52 +00:00
thumbnailImage: profileModel.contacts.list.rowData(i, "thumbnailImage"),
2020-06-22 12:16:44 +00:00
isUser: false,
2020-12-06 22:15:51 +00:00
isContact: profileModel.contacts.list.rowData(i, "isContact") !== "false"
2020-06-17 15:56:48 +00:00
});
}
data.append({
//% "(You)"
name: profileModel.profile.username + " " + qsTrId("(you)"),
2020-06-17 15:56:48 +00:00
pubKey: profileModel.profile.pubKey,
address: "",
2020-06-17 15:56:48 +00:00
identicon: profileModel.profile.identicon,
2020-11-30 17:03:52 +00:00
thumbnailImage: profileModel.profile.thumbnailImage,
2020-06-17 15:56:48 +00:00
isUser: true
});
2020-12-06 22:15:51 +00:00
noContactsRect.visible = !profileModel.contacts.list.hasAddedContacts();
svMembers.visible = !noContactsRect.visible;
if(!svMembers.visible){
memberCount = 0;
}
2020-06-17 15:56:48 +00:00
}
function validate() {
if (groupName.text === "") {
channelNameValidationError = qsTr("You need to enter a channel name")
} else if (!Utils.isValidChannelName(groupName.text)) {
channelNameValidationError = qsTr("The channel name can only contain lowercase letters, numbers and dashes")
} else {
channelNameValidationError = ""
}
return channelNameValidationError === ""
}
function doJoin() {
if (!validate()) {
return
}
if(pubKeys.length === 0) {
return;
}
chatsModel.groups.create(Utils.filterXSS(groupName.text), JSON.stringify(pubKeys));
2020-06-17 15:56:48 +00:00
popup.close();
}
header: Item {
height: 30
width: parent.width
StyledText {
2020-06-17 15:56:48 +00:00
id: lblNewGroup
//% "New group chat"
text: qsTrId("new-group-chat")
2020-06-17 15:56:48 +00:00
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.top: parent.top
}
StyledText {
2020-06-17 15:56:48 +00:00
anchors.top: lblNewGroup.bottom
//% "%1 / 10 members"
text: qsTrId("%1-/-10-members").arg(memberCount)
color: Style.current.darkGrey
2020-06-17 15:56:48 +00:00
font.pixelSize: 15
}
}
2020-06-18 13:54:08 +00:00
SearchBox {
2020-06-17 15:56:48 +00:00
id: searchBox
visible: selectChatMembers
iconWidth: 17
iconHeight: 17
2020-06-18 13:54:08 +00:00
customHeight: 44
fontPixelSize: 15
2020-06-17 15:56:48 +00:00
}
Input {
id: groupName
//% "Group name"
placeholderText: qsTrId("group-name")
2020-06-17 15:56:48 +00:00
visible: !selectChatMembers
validationError: channelNameValidationError
2020-06-17 15:56:48 +00:00
}
Rectangle {
id: noContactsRect
width: 260
anchors.top: groupName.bottom
anchors.topMargin: Style.current.xlPadding
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
id: noContacts
2020-08-26 15:52:26 +00:00
//% "You dont have any contacts yet. Invite your friends to start chatting."
text: qsTrId("you-don-t-have-any-contacts-yet--invite-your-friends-to-start-chatting-")
color: Style.current.darkGrey
anchors.top: parent.top
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
}
StyledButton {
//% "Invite friends"
label: qsTrId("invite-friends")
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: noContacts.bottom
anchors.topMargin: Style.current.xlPadding
onClicked: {
inviteFriendsPopup.open()
}
}
InviteFriendsPopup {
id: inviteFriendsPopup
}
}
2020-06-17 15:56:48 +00:00
ScrollView {
anchors.fill: parent
anchors.topMargin: 50
anchors.top: searchBox.bottom
Layout.fillWidth: true
Layout.fillHeight: true
id: svMembers
2020-06-17 15:56:48 +00:00
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: groupMembers.contentHeight > groupMembers.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ListView {
anchors.fill: parent
model: ListModel {
id: data
}
spacing: 0
clip: true
id: groupMembers
delegate: Contact {
isVisible: {
if(selectChatMembers){
return searchBox.text == "" || model.name.includes(searchBox.text)
} else {
return isChecked || isUser
}
}
showCheckbox: selectChatMembers && memberCount < maxMembers
pubKey: model.pubKey
2020-09-23 21:11:57 +00:00
isContact: !!model.isContact
2020-06-17 15:56:48 +00:00
isUser: model.isUser
name: !model.name.endsWith(".eth") && !!model.localNickname ?
model.localNickname : Utils.removeStatusEns(model.name)
2020-06-17 15:56:48 +00:00
address: model.address
2020-11-30 17:03:52 +00:00
identicon: model.thumbnailImage || model.identicon
2020-06-17 15:56:48 +00:00
onItemChecked: function(pubKey, itemChecked){
var idx = pubKeys.indexOf(pubKey)
if(itemChecked){
if(idx === -1){
2020-06-17 15:56:48 +00:00
pubKeys.push(pubKey)
}
} else {
if(idx > -1){
pubKeys.splice(idx, 1);
}
}
memberCount = pubKeys.length + 1;
btnSelectMembers.state = pubKeys.length > 0 ? "active" : "inactive"
}
}
}
}
footer: Item {
anchors.top: parent.bottom
anchors.right: parent.right
anchors.bottom: popup.bottom
anchors.left: parent.left
Button {
id: btnSelectMembers
visible: selectChatMembers
width: 44
height: 44
anchors.bottom: parent.bottom
anchors.right: parent.right
state: "inactive"
states: [
State {
name: "inactive"
PropertyChanges {
target: btnSelectMembersImg
source: "../../../img/arrow-right-btn-inactive.svg"
}
},
State {
name: "active"
PropertyChanges {
target: btnSelectMembersImg
source: "../../../img/arrow-right-btn-active.svg"
}
}
]
SVGImage {
id: btnSelectMembersImg
width: 50
height: 50
2020-06-17 15:56:48 +00:00
}
background: Rectangle {
color: "transparent"
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(pubKeys.length > 0)
selectChatMembers = false
searchBox.text = ""
groupName.forceActiveFocus(Qt.MouseFocusReason)
}
}
}
Button {
id: btnBack
visible: !selectChatMembers
width: 44
height: 44
anchors.bottom: parent.bottom
anchors.left: parent.left
SVGImage {
2020-06-17 15:56:48 +00:00
source: "../../../img/arrow-left-btn-active.svg"
width: 50
height: 50
2020-06-17 15:56:48 +00:00
}
background: Rectangle {
color: "transparent"
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
selectChatMembers = true
}
}
}
StyledButton {
visible: !selectChatMembers
anchors.bottom: parent.bottom
anchors.right: parent.right
//% "Create Group Chat"
label: qsTrId("create-group-chat")
2020-06-17 15:56:48 +00:00
disabled: groupName.text === ""
onClicked : doJoin()
}
}
}