status-desktop/ui/imports/shared/views/chat/InvitationBubbleView.qml

348 lines
11 KiB
QML

import QtQuick 2.3
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.14
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import shared.panels 1.0
import shared.popups 1.0
Item {
id: root
implicitHeight: loader.height
implicitWidth: loader.width
property var store
property string communityId
QtObject {
id: d
property var invitedCommunity
property bool invitationPending
readonly property int margin: 12
function getCommunity() {
try {
const communityJson = root.store.getSectionByIdJson(communityId)
if (!communityJson) {
root.store.requestCommunityInfo(communityId)
return null
}
return JSON.parse(communityJson);
} catch (e) {
console.error("Error parsing community", e)
}
return null
}
function reevaluate() {
invitedCommunity = getCommunity()
invitationPending = root.store.isCommunityRequestPending(communityId)
}
}
Component.onCompleted: {
d.reevaluate()
}
Connections {
target: root.store.communitiesModuleInst
onCommunityChanged: function (communityId) {
if (communityId === root.communityId) {
d.reevaluate()
}
}
}
Connections {
target: root.store.communitiesModuleInst
onCommunityAdded: function (communityId) {
if (communityId === root.communityId) {
d.reevaluate()
}
}
}
Connections {
target: root.store.communitiesModuleInst
onCommunityAccessRequested: function (communityId) {
if (communityId === root.communityId) {
d.reevaluate()
}
}
}
Loader {
id: loader
active: !!d.invitedCommunity
sourceComponent: Rectangle {
id: rectangleBubble
width: 270
height: columnLayout.implicitHeight
radius: 16
color: Style.current.background
border.color: Style.current.border
border.width: 1
states: [
State {
name: "pending"
when: d.invitationPending
PropertyChanges {
target: joinBtn
text: qsTr("Pending")
enabled: false
}
},
State {
name: "requiresEns"
when: d.invitedCommunity.ensOnly && !userProfile.ensName
PropertyChanges {
target: joinBtn
text: qsTr("Membership requires an ENS username")
enabled: false
}
},
State {
name: "inviteOnly"
when: d.invitedCommunity.access === Constants.communityChatInvitationOnlyAccess
PropertyChanges {
target: joinBtn
text: qsTr("You need to be invited")
enabled: false
}
},
State {
name: "joined"
when: (d.invitedCommunity.joined && d.invitedCommunity.isMember) ||
(d.invitedCommunity.access === Constants.communityChatPublicAccess &&
d.invitedCommunity.joined)
PropertyChanges {
target: joinBtn
text: qsTr("View")
}
},
State {
name: "requestToJoin"
when: d.invitedCommunity.access === Constants.communityChatOnRequestAccess &&
!d.invitedCommunity.joined
PropertyChanges {
target: joinBtn
text: qsTr("Request Access")
}
},
State {
name: "unjoined"
when: d.invitedCommunity.access === Constants.communityChatPublicAccess &&
!d.invitedCommunity.joined
PropertyChanges {
target: joinBtn
text: qsTr("Join")
}
}
]
ColumnLayout {
id: columnLayout
width: parent.width
spacing: 0
ColumnLayout {
id: invitationDescriptionLayout
Layout.leftMargin: d.margin
Layout.rightMargin: d.margin
Layout.topMargin: 8
Layout.bottomMargin: 8
spacing: 4
StatusBaseText {
id: title
Layout.fillWidth: true
text: d.invitedCommunity.verifed ? qsTr("Verified community invitation") : qsTr("Community invitation")
color: d.invitedCommunity.verifed ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
font.weight: Font.Medium
font.pixelSize: 13
}
StatusBaseText {
id: invitedYou
Layout.fillWidth: true
visible: text != ""
text: {
// Not Refactored Yet
return ""
// if (root.store.chatsModelInst.channelView.activeChannel.chatType === Constants.chatType.oneToOne) {
// return isCurrentUser ?
// qsTr("You invited %1 to join a community").arg(root.store.chatsModelInst.userNameOrAlias(root.store.chatsModelInst.channelView.activeChannel.id))
// : qsTr("%1 invited you to join a community").arg(displayUserName)
// } else {
// return isCurrentUser ?
// qsTr("You shared a community")
// : qsTr("A community has been shared")
// }
}
wrapMode: Text.WordWrap
font.pixelSize: 15
}
}
Rectangle {
Layout.fillWidth: true
implicitHeight: 1
color: Style.current.separator
}
RowLayout {
id: communityDescriptionLayout
Layout.leftMargin: d.margin
Layout.rightMargin: d.margin
Layout.topMargin: 12
Layout.bottomMargin: 12
spacing: 12
StatusSmartIdenticon {
Layout.alignment: Qt.AlignTop
Layout.preferredWidth: 40
Layout.preferredHeight: 40
name: d.invitedCommunity.name
asset {
width: 40
height: 40
name: d.invitedCommunity.image
color: d.invitedCommunity.color
isImage: true
}
}
ColumnLayout {
spacing: 2
StatusBaseText {
Layout.fillWidth: true
text: d.invitedCommunity.name
font.weight: Font.Bold
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
font.pixelSize: 17
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.fillWidth: true
text: d.invitedCommunity.description
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.fillWidth: true
text: qsTr("%n member(s)", "", d.invitedCommunity.nbMembers)
font.pixelSize: 13
font.weight: Font.Medium
color: Theme.palette.baseColor1
}
}
}
Rectangle {
Layout.fillWidth: true
implicitHeight: 1
color: Style.current.separator
}
StatusFlatButton {
id: joinBtn
Layout.fillWidth: true
Layout.preferredHeight: 44
text: qsTr("Unsupported state")
onClicked: {
if (rectangleBubble.state === "joined") {
root.store.setActiveCommunity(communityId);
return
}
if (rectangleBubble.state === "unjoined") {
Global.openPopup(communityIntroDialog, { joinMethod: () => {
let error = root.store.joinCommunity(communityId, userProfile.name)
if (error) joiningError.showError(error)
} });
}
else if (rectangleBubble.state === "requestToJoin") {
Global.openPopup(communityIntroDialog, { joinMethod: () => {
let error = root.store.requestToJoinCommunity(communityId, userProfile.name)
if (error) joiningError.showError(error)
} });
}
}
Component.onCompleted: {
// FIXME: extract StatusButtonBackground or expose radius property in StatusBaseButton
background.radius = 16
}
}
}
}
}
Component {
id: communityIntroDialog
CommunityIntroDialog {
anchors.centerIn: parent
property var joinMethod: () => {}
name: d.invitedCommunity ? d.invitedCommunity.name : ""
introMessage: d.invitedCommunity ? d.invitedCommunity.introMessage : ""
imageSrc: d.invitedCommunity ? d.invitedCommunity.image : ""
onJoined: joinMethod()
}
}
MessageDialog {
id: joiningError
function showError(error) {
joiningError.text = error
joiningError.open()
}
title: qsTr("Error joining the community")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
}