feat(JoinCommunity): Created JoinCommunityView page

Created new view to be used when a community needs permissions to join:
- Left panel blur layout created.
- Header panel blur layout created.
- Central panel blur layout created.
- Join permission overlay panel integrated.

Closes #9267

ui/StatusQ/src/StatusQ/Components/StatusMessage.qml

@@ -226,7 +226,7 @@ Control {
                     spacing: 2
                     Layout.alignment: Qt.AlignTop
                     Layout.fillWidth: true
-                    Layout.leftMargin: profileImage.visible ? 0 : root.messageDetails.sender.profileImage.assetSettings.width + parent.spacing
+                    Layout.leftMargin: profileImage.active ? 0 : root.messageDetails.sender.profileImage.assetSettings.width + parent.spacing
 
                     StatusPinMessageDetails {
                         active: root.isPinned && !editMode

ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml

@@ -0,0 +1,286 @@
+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
+        }
+    }
+}

ui/app/AppLayouts/Chat/views/communities/qmldir

@@ -1,3 +1,4 @@
 CommunityWelcomePermissionsView 1.0 CommunityWelcomePermissionsView.qml
 CommunityNewPermissionView 1.0 CommunityNewPermissionView.qml
 CommunityPermissionsView 1.0 CommunityPermissionsView.qml
+JoinCommunityView 1.0 JoinCommunityView.qml