diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml index 20fcf00be9..68176513dd 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml +++ b/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 diff --git a/ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml b/ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml new file mode 100644 index 0000000000..4c5f46be64 --- /dev/null +++ b/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 + } + } +} diff --git a/ui/app/AppLayouts/Chat/views/communities/qmldir b/ui/app/AppLayouts/Chat/views/communities/qmldir index 21a05f921d..3c1a051234 100644 --- a/ui/app/AppLayouts/Chat/views/communities/qmldir +++ b/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