status-desktop/ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.0

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1

import AppLayouts.Chat.panels.communities 1.0
import AppLayouts.Chat.views 1.0

import StatusQ.Layout 0.1

import utils 1.0

StatusSectionLayout {
    id: root

    // General properties:
    property bool amISectionAdmin: false
    property bool openCreateChat: false
    property string name
    property string communityDesc
    property color color
    property string channelName
    property string channelDesc
    property bool joinCommunity: true // Otherwise it means join channel action

    // Permission overlay view properties:
    property bool requirementsMet: true
    property bool isInvitationPending: false
    property bool isJoinRequestRejected: false
    property bool requiresRequest: false
    property var communityHoldings
    property var viewOnlyHoldings
    property var viewAndPostHoldings
    property var moderateHoldings

    // Blur view properties:
    property int membersCount
    property url image
    property var communityItemsModel
    property string chatDateTimeText
    property string listUsersText
    property var messagesModel

    signal infoButtonClicked
    signal adHocChatButtonClicked
    signal revealAddressClicked
    signal invitationPendingClicked

    QtObject {
        id: d

        readonly property int blurryRadius: 32
    }

    // Blur background:
    headerContent: RowLayout {
        anchors.fill: parent
        spacing: 30

        StatusChatInfoButton {
            id: headerInfoButton
            Layout.preferredHeight: parent.height
            Layout.minimumWidth: 100
            Layout.fillWidth: true
            title: root.joinCommunity ? root.name : root.channelName
            subTitle: root.joinCommunity ? root.communityDesc : root.channelDesc
            asset.color: root.color
            enabled: false
            type: StatusChatInfoButton.Type.CommunityChat
            layer.enabled: root.joinCommunity // Blured when joining community but not when entering channel
            layer.effect: fastBlur
        }

        RowLayout {
            Layout.preferredHeight: parent.height
            spacing: 10
            layer.enabled: true
            layer.effect: fastBlur

            StatusFlatRoundButton {
                id: search
                icon.name: "search"
                type: StatusFlatRoundButton.Type.Secondary
                enabled: false
            }

            StatusFlatRoundButton {
                icon.name: "group-chat"
                type: StatusFlatRoundButton.Type.Secondary
                enabled: false
            }

            StatusFlatRoundButton {
                icon.name: "more"
                type: StatusFlatRoundButton.Type.Secondary
                enabled: false
            }
        }
    }

    // Blur background:
    leftPanel: ColumnLayout {
        anchors.fill: parent

        CommunityColumnHeaderPanel {
            Layout.fillWidth: true
            name: root.name
            membersCount: root.membersCount
            image: root.image
            color: root.color
            amISectionAdmin: root.amISectionAdmin
            openCreateChat: root.openCreateChat
            onInfoButtonClicked: if(root.amISectionAdmin) root.infoButtonClicked()
            onAdHocChatButtonClicked: root.adHocChatButtonClicked()
        }

        ColumnLayout {
            Layout.fillWidth: true
            Layout.margins: Style.current.halfPadding
            layer.enabled: true
            layer.effect: fastBlur

            Repeater {
                model: root.communityItemsModel
                delegate: StatusChatListItem {
                    enabled: false
                    name: model.name
                    asset.color: root.color
                    selected: model.selected
                    type: StatusChatListItem.Type.CommunityChat
                    notificationsCount: model.notificationsCount
                    hasUnreadMessages: model.hasUnreadMessages
                }
            }
        }

        Item {
            // filler
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }

    // Blur background + Permissions base information content:
    centerPanel: ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // Blur background:
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: Math.min(centralPanelData.implicitHeight, parent.height - overlayPannel.implicitHeight)

            ColumnLayout {
                id: centralPanelData
                width: parent.width
                layer.enabled: true
                layer.effect: fastBlur

                StatusBaseText {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.topMargin: 30
                    Layout.bottomMargin: 30
                    text: root.chatDateTimeText
                    font.pixelSize: 13
                    color: Theme.palette.baseColor1
                }

                RowLayout {
                    Layout.alignment: Qt.AlignHCenter

                    StatusBaseText {
                        text: root.listUsersText
                        font.pixelSize: 13
                    }

                    StatusBaseText {
                        text: qsTr("joined the channel")
                        font.pixelSize: 13
                        color: Theme.palette.baseColor1
                    }
                }

                ListView {
                    Layout.fillWidth: true
                    Layout.preferredHeight: childrenRect.height + spacing
                    Layout.topMargin: 16
                    spacing: 16
                    model: root.messagesModel
                    delegate: StatusMessage {
                        width: ListView.view.width
                        timestamp: model.timestamp
                        enabled: false
                        messageDetails: StatusMessageDetails {
                            messageText: model.message
                            contentType: model.contentType
                            sender.displayName: model.senderDisplayName
                            sender.isContact: model.isContact
                            sender.trustIndicator: model.trustIndicator
                            sender.profileImage: StatusProfileImageSettings {
                                width: 40
                                height: 40
                                name: model.profileImage || ""
                                colorId: model.colorId
                            }
                        }
                    }
                }
            }
        }

        // Permissions base information content:
        Rectangle {
            id: panelBase

            Layout.fillWidth: true
            Layout.fillHeight: true
            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
            gradient: Gradient {
                GradientStop {
                    position: 0.000
                    color: "transparent"
                }
                GradientStop {
                    position: 0.180
                    color: panelBase.color
                }
            }

            StatusScrollView {
                id: scroll

                anchors.fill: parent
                ScrollBar.vertical.policy: ScrollBar.AsNeeded
                ScrollBar.horizontal.policy: ScrollBar.AsNeeded
                contentHeight: content.height
                contentWidth: content.width
                padding: 0

                Item {
                    id: content

                    height: Math.max(overlayPannel.implicitHeight, panelBase.height)
                    width: Math.max(overlayPannel.implicitWidth, panelBase.width)

                    JoinPermissionsOverlayPanel {
                        id: overlayPannel

                        anchors.centerIn: parent
                        Layout.maximumHeight: parent.height
                        topPadding: 2 * bottomPadding
                        joinCommunity: root.joinCommunity
                        requirementsMet: root.requirementsMet
                        isInvitationPending: root.isInvitationPending
                        isJoinRequestRejected: root.isJoinRequestRejected
                        requiresRequest: root.requiresRequest
                        communityName: root.name
                        communityHoldings: root.communityHoldings
                        channelName: root.channelName
                        viewOnlyHoldings: root.viewOnlyHoldings
                        viewAndPostHoldings: root.viewAndPostHoldings
                        moderateHoldings: root.moderateHoldings

                        onRevealAddressClicked: root.revealAddressClicked()
                        onInvitationPendingClicked: root.invitationPendingClicked()
                    }
                }
            }
        }
    }
    showRightPanel: false

    Component {
        id: fastBlur

        FastBlur {
            radius: d.blurryRadius
            transparentBorder: true
        }
    }
}