From dcb0f4dce93325419f90eccb02c52aaf5f174d22 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Tue, 20 Apr 2021 14:31:36 +0200 Subject: [PATCH] fix(Communities): make invite popup push onto modal stackview The popup to invite friends to communities has so far always been a brand new popup that's opened on top of possible existing popups. The design however, expects that the same section should be shown as part of a wizard-like process inside of the existing community profile overview popup, when entered from there. This commit extracts the invite friends popup section into component that can be reused as stack view, as well as modal content, to implement both scenarios. --- .../CommunityProfilePopup.qml | 25 ++++++- ...CommunityProfilePopupInviteFriendsView.qml | 57 ++++++++++++++++ .../CommunityProfilePopupMembersList.qml | 2 +- .../InviteFriendsToCommunityPopup.qml | 68 +++++-------------- 4 files changed, 98 insertions(+), 54 deletions(-) create mode 100644 ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupInviteFriendsView.qml diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml index fb6aa1c544..17e5e023da 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml @@ -89,7 +89,7 @@ ModalPopup { Separator { anchors.top: headerDescription.bottom - anchors.topMargin: Style.current.padding + anchors.topMargin: modalHeader.description === "" ? 0 : Style.current.padding anchors.left: parent.left anchors.right: parent.right anchors.rightMargin: -Style.current.padding @@ -108,6 +108,19 @@ ModalPopup { popEnter: Transition { enabled: false } popExit: Transition { enabled: false } + Component { + id: inviteFriendsView + CommunityProfilePopupInviteFriendsView { + headerTitle: qsTr("Invite friends") + contactListSearch.chatKey.text: "" + contactListSearch.pubKey: "" + contactListSearch.pubKeys: [] + contactListSearch.ensUsername: "" + contactListSearch.existingContacts.visible: profileModel.contacts.list.hasAddedContacts() + contactListSearch.noContactsRect.visible: !contactListSearch.existingContacts.visible + } + } + Component { id: membersList CommunityProfilePopupMembersList { @@ -156,6 +169,16 @@ ModalPopup { stack.pop() } } + + StatusButton { + text: qsTr("Invite") + anchors.right: parent.right + enabled: stack.currentItem.contactListSearch !== undefined && stack.currentItem.contactListSearch.pubKeys.length > 0 + onClicked: { + stack.currentItem.sendInvites(stack.currentItem.contactListSearch.pubKeys) + stack.pop() + } + } } } diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupInviteFriendsView.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupInviteFriendsView.qml new file mode 100644 index 0000000000..610395051b --- /dev/null +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupInviteFriendsView.qml @@ -0,0 +1,57 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Dialogs 1.3 +import QtQuick.Layouts 1.13 +import QtGraphicalEffects 1.13 +import "../../../../imports" +import "../../../../shared" +import "../../../../shared/status" + +Item { + id: root + + property string headerTitle: "" + property string headerDescription: "" + property string headerImageSource: "" + + property alias contactListSearch: contactFieldAndList + + height: 400 + + function sendInvites(pubKeys) { + const error = chatsModel.communities.inviteUsersToCommunityById(popup.communityId, JSON.stringify(pubKeys)) + if (error) { + console.error('Error inviting', error) + contactFieldAndList.validationError = error + return + } + contactFieldAndList.successMessage = qsTr("Invite successfully sent") + } + + TextWithLabel { + id: shareCommunity + anchors.top: parent.top + anchors.topMargin: 0 + //% "Share community" + label: qsTrId("share-community") + text: `${Constants.communityLinkPrefix}${communityId.substring(0, 4)}...${communityId.substring(communityId.length -2)}` + textToCopy: Constants.communityLinkPrefix + communityId + } + + Separator { + id: sep + anchors.left: parent.left + anchors.right: parent.right + anchors.top: shareCommunity.bottom + anchors.topMargin: Style.current.smallPadding + anchors.leftMargin: -Style.current.padding + anchors.rightMargin: -Style.current.padding + } + + ContactsListAndSearch { + id: contactFieldAndList + anchors.top: sep.bottom + anchors.topMargin: Style.current.smallPadding + showCheckbox: true + } +} diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml index b17eafed86..f610a4e6f4 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml @@ -21,7 +21,7 @@ Item { width: parent.width type: globalSettings.theme === Universal.Dark ? "secondary" : "primary" iconName: "invite" - onClicked: openPopup(inviteFriendsToCommunityPopup) + onClicked: stack.push(inviteFriendsView) } Separator { diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/InviteFriendsToCommunityPopup.qml b/ui/app/AppLayouts/Chat/CommunityComponents/InviteFriendsToCommunityPopup.qml index 77b2ad0c38..ba6c19f4fe 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/InviteFriendsToCommunityPopup.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/InviteFriendsToCommunityPopup.qml @@ -15,13 +15,13 @@ ModalPopup { property var goBack onOpened: { - contactFieldAndList.chatKey.text = "" - contactFieldAndList.pubKey = "" - contactFieldAndList.pubKeys = [] - contactFieldAndList.ensUsername = "" - contactFieldAndList.chatKey.forceActiveFocus(Qt.MouseFocusReason) - contactFieldAndList.existingContacts.visible = profileModel.contacts.list.hasAddedContacts() - contactFieldAndList.noContactsRect.visible = !contactFieldAndList.existingContacts.visible + contactFieldAndList.contactListSearch.chatKey.text = "" + contactFieldAndList.contactListSearch.pubKey = "" + contactFieldAndList.contactListSearch.pubKeys = [] + contactFieldAndList.contactListSearch.ensUsername = "" + contactFieldAndList.contactListSearch.chatKey.forceActiveFocus(Qt.MouseFocusReason) + contactFieldAndList.contactListSearch.existingContacts.visible = profileModel.contacts.list.hasAddedContacts() + contactFieldAndList.contactListSearch.noContactsRect.visible = !contactFieldAndList.contactListSearch.existingContacts.visible } //% "Invite friends" @@ -29,51 +29,15 @@ ModalPopup { height: 630 - function sendInvites(pubKeys) { - const error = chatsModel.communities.inviteUsersToCommunityById(popup.communityId, JSON.stringify(pubKeys)) - if (error) { - console.error('Error inviting', error) - contactFieldAndList.validationError = error - return - } - contactFieldAndList.successMessage = qsTr("Invite successfully sent") - } - - Item { + CommunityProfilePopupInviteFriendsView { + id: contactFieldAndList anchors.fill: parent - - TextWithLabel { - id: shareCommunity - anchors.top: parent.top - //% "Share community" - label: qsTrId("share-community") - text: `${Constants.communityLinkPrefix}${communityId.substring(0, 4)}...${communityId.substring(communityId.length -2)}` - textToCopy: Constants.communityLinkPrefix + communityId - } - - Separator { - id: sep - anchors.left: parent.left - anchors.right: parent.right - anchors.top: shareCommunity.bottom - anchors.topMargin: Style.current.smallPadding - anchors.leftMargin: -Style.current.padding - anchors.rightMargin: -Style.current.padding - } - - ContactsListAndSearch { - id: contactFieldAndList - anchors.top: sep.bottom - anchors.topMargin: Style.current.smallPadding - anchors.bottom: parent.bottom - showCheckbox: true - onUserClicked: function (isContact, pubKey, ensName) { - if (isContact) { - // those are just added to the list to by added by the bunch - return - } - sendInvites([pubKey]) + contactListSearch.onUserClicked: { + if (isContact) { + // those are just added to the list to by added by the bunch + return } + contactFieldAndList.sendInvites([pubKey]) } } @@ -99,11 +63,11 @@ ModalPopup { id: inviteBtn anchors.bottom: parent.bottom anchors.right: parent.right - enabled: contactFieldAndList.pubKeys.length > 0 + enabled: contactFieldAndList.contactListSearch.pubKeys.length > 0 //% "Invite" text: qsTrId("invite-button") onClicked : { - sendInvites(contactFieldAndList.pubKeys) + contactFieldAndList.sendInvites(contactFieldAndList.contactListSearch.pubKeys) } } }