mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-28 22:41:09 +00:00
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
This commit is contained in:
Noelia
Alexandra Betouni
parent
fd67989c2d
commit
8e45d6c50e
@ -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
|
||||
|
||||
286
ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml
Normal file
286
ui/app/AppLayouts/Chat/views/communities/JoinCommunityView.qml
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
CommunityWelcomePermissionsView 1.0 CommunityWelcomePermissionsView.qml
|
||||
CommunityNewPermissionView 1.0 CommunityNewPermissionView.qml
|
||||
CommunityPermissionsView 1.0 CommunityPermissionsView.qml
|
||||
JoinCommunityView 1.0 JoinCommunityView.qml
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user