Pascal Precht dcb0f4dce9 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.
2021-04-20 13:24:08 -04:00

185 lines
6.2 KiB
QML

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import QtQuick.Controls.Universal 2.12
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../ContactsColumn"
ModalPopup {
property QtObject community: chatsModel.communities.activeCommunity
property string communityId: community.id
property string name: community.name
property string description: community.description
property int access: community.access
property string source: ""
property string communityColor: ""
property int nbMembers: community.nbMembers
property bool isAdmin: false
height: stack.currentItem.height + modalHeader.height + modalFooter.height + Style.current.padding * 3
id: popup
onClosed: {
while (stack.depth > 1) {
stack.pop()
}
}
header: Item {
id: modalHeader
height: childrenRect.height
width: parent.width
property string title: stack.currentItem.headerTitle
property string description: stack.currentItem.headerDescription
property string imageSource: stack.currentItem.headerImageSource
property bool useLetterIdenticon: !!stack.currentItem.useLetterIdenticon
Loader {
id: communityImg
sourceComponent: !modalHeader.useLetterIdenticon ? commmunityImgCmp : letterIdenticonCmp
active: !!modalHeader.imageSource || modalHeader.useLetterIdenticon
}
Component {
id: commmunityImgCmp
RoundedImage {
source: modalHeader.imageSource
width: 40
height: 40
visible: !!modalHeader.imageSource
}
}
Component {
id: letterIdenticonCmp
StatusLetterIdenticon {
width: 40
height: 40
chatName: popup.name
color: popup.communityColor || Style.current.blue
}
}
StyledTextEdit {
id: communityName
text: modalHeader.title
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: communityImg.active ? communityImg.right : parent.left
anchors.leftMargin: communityImg.active ? Style.current.smallPadding : 0
font.bold: true
font.pixelSize: 17
readOnly: true
}
StyledText {
id: headerDescription
text: modalHeader.description
anchors.left: communityName.left
anchors.top: communityName.bottom
anchors.topMargin: 2
font.pixelSize: 15
font.weight: Font.Thin
color: Style.current.secondaryText
}
Separator {
anchors.top: headerDescription.bottom
anchors.topMargin: modalHeader.description === "" ? 0 : Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
anchors.leftMargin: -Style.current.padding
}
}
StackView {
id: stack
initialItem: profileOverview
width: parent.width
pushEnter: Transition { enabled: false }
pushExit: Transition { enabled: false }
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 {
headerTitle: qsTr("Members")
headerDescription: popup.nbMembers.toString()
}
}
Component {
id: profileOverview
CommunityProfilePopupOverview {
property bool useLetterIdenticon: !!!popup.source
headerTitle: popup.name
headerDescription: {
switch(access) {
//% "Public community"
case Constants.communityChatPublicAccess: return qsTrId("public-community");
//% "Invitation only community"
case Constants.communityChatInvitationOnlyAccess: return qsTrId("invitation-only-community");
//% "On request community"
case Constants.communityChatOnRequestAccess: return qsTrId("on-request-community");
//% "Unknown community"
default: return qsTrId("unknown-community");
}
}
headerImageSource: popup.source
description: popup.description
}
}
}
footer: Item {
id: modalFooter
visible: stack.depth > 1
width: parent.width
height: modalFooter.visible ? btnBack.height : 0
StatusRoundButton {
id: btnBack
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
type: globalSettings.theme === Universal.Dark ? "secondary" : "primary"
onClicked: {
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()
}
}
}
}