status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(CommunityOverview): Add Community Overview banners 

Closes: #5978
This commit is contained in:
Boris Melnik 2022-06-06 18:23:24 +03:00 committed by Iuri Matias
parent 7cacadd9be
commit 260f10a83e
6 changed files with 170 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/AppLayouts/Chat/ChatLayout.qml
View File

@ -33,6 +33,7 @@ StackLayout {
sourceComponent: CommunitySettingsView {
rootStore: root.rootStore
hasAddedContacts: root.contactsStore.myContactsModel.count > 0
chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
community: root.rootStore.mainModuleInst ? root.rootStore.mainModuleInst.activeSection
|| {} : {}

80
ui/app/AppLayouts/Chat/panels/communities/CommunityBanner.qml Normal file
View File

@ -0,0 +1,80 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 as StatusQControls
import shared.panels 1.0
import shared.status 1.0
import utils 1.0
Rectangle {
id: root
property alias text: bannerText.text
property alias buttonText: bannerButton.text
property alias icon: bannerIcon.source
implicitWidth: 272
implicitHeight: 182
border.color: Style.current.border
radius: 16
color: Style.current.transparent
signal buttonClicked()
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
propagateComposedEvents: true
onClicked: {
/* Prevents sending events to the component beneath
if Right Mouse Button is clicked. */
mouse.accepted = false;
}
}
Rectangle {
width: 70
height: 4
color: Style.current.background
anchors.top: parent.top
anchors.topMargin: -2
anchors.horizontalCenter: parent.horizontalCenter
}
SVGImage {
id: bannerIcon
anchors.top: parent.top
anchors.topMargin: -6
anchors.horizontalCenter: parent.horizontalCenter
width: 66
height: 50
}
StatusBaseText {
id: bannerText
anchors.top: parent.top
anchors.topMargin: 60
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
color: Theme.palette.directColor1
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.rightMargin: Style.current.xlPadding
anchors.left: parent.left
anchors.leftMargin: Style.current.xlPadding
}
StatusQControls.StatusButton {
id: bannerButton
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 22
onClicked: root.buttonClicked()
}
}

38
ui/app/AppLayouts/Chat/panels/communities/CommunityOverviewSettingsPanel.qml
View File

@ -1,4 +1,4 @@
import QtQuick 2.14
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
@ -9,9 +9,12 @@ import StatusQ.Components 0.1
import "../../layouts"
import utils 1.0
StackLayout {
id: root
property string communityId
property string name
property string description
property string introMessage
@ -30,6 +33,10 @@ StackLayout {
signal edited(Item item) // item containing edited fields (name, description, logoImagePath, color, options, etc..)
signal inviteNewPeopleClicked
signal airdropTokensClicked
signal backUpClicked
clip: true
SettingsPageLayout {
@ -119,6 +126,35 @@ StackLayout {
Item {
Layout.fillHeight: true
}
RowLayout {
CommunityBanner {
text: qsTr("Welcome to your community!")
buttonText: qsTr("Invite new people")
icon: Style.svg("chatEmptyHeader")
onButtonClicked: root.inviteNewPeopleClicked()
}
Item {
Layout.fillWidth: true
}
CommunityBanner {
text: qsTr("Try an airdrop to reward your community for engagement!")
buttonText: qsTr("Airdrop Tokens")
icon: Style.svg("communities/airdrop")
onButtonClicked: root.airdropTokensClicked()
}
Item {
Layout.fillWidth: true
}
CommunityBanner {
text: qsTr("Back up community key")
buttonText: qsTr("Back up")
icon: Style.svg("communities/backup-community")
onButtonClicked: root.backUpClicked()
}
}
}
}

43
ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml
View File

@ -16,6 +16,7 @@ import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import "../panels/communities"
import "../popups/community"
import "../layouts"
StatusAppTwoPanelLayout {
@ -34,6 +35,7 @@ StatusAppTwoPanelLayout {
property var rootStore
property var community
property var chatCommunitySectionModule
property bool hasAddedContacts: false
signal backToCommunityClicked
signal openLegacyPopupClicked // TODO: remove me when migration to new settings is done
@ -114,6 +116,7 @@ StatusAppTwoPanelLayout {
currentIndex: d.currentIndex
CommunityOverviewSettingsPanel {
communityId: root.community.id
name: root.community.name
description: root.community.description
introMessage: root.community.introMessage
@ -146,6 +149,22 @@ StatusAppTwoPanelLayout {
errorDialog.open()
}
}
onInviteNewPeopleClicked: {
Global.openPopup(inviteFriendsToCommunityPopup, {
community: root.community,
hasAddedContacts: root.hasAddedContacts,
communitySectionModule: root.chatCommunitySectionModule
})
}
onAirdropTokensClicked: { /* TODO in future */ }
onBackUpClicked: {
Global.openPopup(transferOwnershipPopup, {
privateKey: root.chatCommunitySectionModule.exportCommunity(root.communityId),
store: root.store
})
}
}
CommunityMembersSettingsPanel {
@ -199,4 +218,28 @@ StatusAppTwoPanelLayout {
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
Component {
id: transferOwnershipPopup
TransferOwnershipPopup {
anchors.centerIn: parent
}
}
Component {
id: inviteFriendsToCommunityPopup
InviteFriendsToCommunityPopup {
anchors.centerIn: parent
rootStore: root.rootStore
contactsStore: root.rootStore.contactStore
onClosed: {
destroy()
}
onSendInvites: {
const error = root.communitySectionModule.inviteUsersToCommunity(JSON.stringify(pubKeys))
processInviteResult(error)
}
}
}
}

4
ui/imports/assets/icons/communities/airdrop.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#4360DF" fill-opacity="0.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9991 10.25C15.0517 10.25 10.966 13.9342 10.3339 18.709C10.1968 19.7446 10.632 20.703 11.2768 21.3836L18.7287 29.2495C19.4189 29.9781 20.5793 29.9781 21.2695 29.2495L28.7214 21.3836C29.3662 20.703 29.8014 19.7446 29.6643 18.709C29.0321 13.9342 24.9465 10.25 19.9991 10.25ZM12.618 19.1546C12.155 19.0157 11.8606 18.5553 11.9723 18.085C12.8356 14.4523 16.1023 11.75 19.9991 11.75C23.8959 11.75 27.1626 14.4523 28.0258 18.0849C28.1376 18.5553 27.8432 19.0157 27.3802 19.1546C27.2039 19.2075 27.0511 19.2509 26.9899 19.2621C25.6686 19.5023 23.4648 19.75 19.9991 19.75C16.5333 19.75 14.3295 19.5023 13.0082 19.2621C12.947 19.2509 12.7943 19.2075 12.618 19.1546ZM13.4836 20.86C13.2445 20.8247 13.0889 21.1154 13.2551 21.2908L17.7644 26.0506C17.8406 26.1311 17.9717 26.0463 17.9295 25.9438L16.1785 21.6915C16.034 21.3406 15.7033 21.1029 15.3252 21.0705C14.7096 21.0178 14.0948 20.9504 13.4836 20.86ZM22.0684 25.9441C22.0262 26.0466 22.1572 26.1314 22.2335 26.051L26.7431 21.2908C26.9093 21.1153 26.7537 20.8247 26.5146 20.86C25.9034 20.9504 25.2885 21.0178 24.6728 21.0705C24.2947 21.1029 23.964 21.3406 23.8195 21.6915L22.0684 25.9441ZM22.2012 21.682C22.2926 21.4599 22.1238 21.2175 21.8837 21.2243C21.2986 21.2409 20.6712 21.25 19.9991 21.25C19.3269 21.25 18.6994 21.2409 18.1143 21.2243C17.8742 21.2175 17.7054 21.4599 17.7968 21.682L19.6939 26.2891C19.806 26.5616 20.1919 26.5616 20.3041 26.2891L22.2012 21.682Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

5
ui/imports/assets/icons/communities/backup-community.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" width="40" height="40" rx="20" fill="#4360DF" fill-opacity="0.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8561 24.8391C17.8561 26.0317 16.8846 26.9985 15.6861 26.9985C14.4877 26.9985 13.5161 26.0317 13.5161 24.8391C13.5161 23.6465 14.4877 22.6797 15.6861 22.6797C16.8846 22.6797 17.8561 23.6465 17.8561 24.8391ZM16.3481 24.8391C16.3481 25.2029 16.0517 25.4978 15.6861 25.4978C15.3206 25.4978 15.0242 25.2029 15.0242 24.8391C15.0242 24.4753 15.3206 24.1804 15.6861 24.1804C16.0517 24.1804 16.3481 24.4753 16.3481 24.8391Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6478 19.0812C25.6005 19.273 25.4442 19.4192 25.2489 19.4543L24.2802 19.6282C24.0611 19.6675 23.8941 19.8456 23.8698 20.0658L23.7137 21.4777C23.7007 21.5955 23.6461 21.7049 23.5596 21.7863L22.652 22.6412C22.5267 22.7592 22.4725 22.9326 22.498 23.1023C22.5419 23.3942 22.5646 23.693 22.5646 23.9971C22.5646 27.3124 19.8638 30 16.5323 30C13.2007 30 10.5 27.3124 10.5 23.9971C10.5 20.6817 13.2007 17.9941 16.5323 17.9941C17.2283 17.9941 17.8967 18.1114 18.5188 18.3272C18.709 18.3932 18.9224 18.3534 19.0661 18.2129L27.3142 10.1435C27.4083 10.0515 27.5348 10 27.6667 10H29.9971C30.3164 10 30.5547 10.2923 30.4891 10.6032L29.6655 14.5006C29.6295 14.6711 29.5069 14.8107 29.3419 14.869L28.4524 15.1836C28.3038 15.2362 28.1886 15.3551 28.1413 15.5048L27.7408 16.7717C27.6902 16.9316 27.5624 17.0557 27.4005 17.1022L26.3191 17.4125C26.1462 17.4621 26.0131 17.6 25.9702 17.7739L25.6478 19.0812ZM21.0565 23.9971C21.0565 23.6498 21.017 23.3117 20.9422 22.9871L20.9329 22.9595C20.8759 22.7914 20.8116 22.6264 20.7404 22.4649C20.7279 22.4366 20.7343 22.4035 20.7567 22.382L22.2095 20.9916C22.2389 20.9639 22.2574 20.9268 22.2618 20.8868L22.4939 18.7878C22.5182 18.5676 22.6852 18.3896 22.9043 18.3502L24.0176 18.1504C24.2129 18.1153 24.3693 17.9691 24.4166 17.7773L24.7137 16.5726C24.7566 16.3986 24.8896 16.2608 25.0626 16.2112L26.2049 15.8834C26.3668 15.8369 26.4946 15.7128 26.5451 15.5529L26.9282 14.3412C26.9755 14.1914 27.0908 14.0725 27.2394 14.0199L28.0401 13.7367C28.2051 13.6784 28.3277 13.5388 28.3637 13.3683L28.6533 11.998C28.7074 11.7417 28.5109 11.5007 28.2477 11.5007C28.139 11.5007 28.0347 11.5432 27.9572 11.6191L20.1873 19.2212L19.0987 20.2834C19.0968 20.2852 19.0938 20.2855 19.0916 20.284C18.3637 19.7862 17.4822 19.4949 16.5323 19.4949C14.0336 19.4949 12.0081 21.5106 12.0081 23.9971C12.0081 26.4836 14.0336 28.4993 16.5323 28.4993C19.0309 28.4993 21.0565 26.4836 21.0565 23.9971Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB