status-desktop/ui/app/AppLayouts/Chat/views/communities/CommunityWelcomePermissions...

140 lines
5.5 KiB
QML

import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import utils 1.0
Flickable {
id: root
signal addPermission()
contentWidth: mainLayout.width
contentHeight: mainLayout.height + mainLayout.anchors.topMargin
clip: true
flickableDirection: Flickable.AutoFlickIfNeeded
ColumnLayout {
id: mainLayout
width: 560 // by design
spacing: 24
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: contentColumn.implicitHeight + contentColumn.anchors.topMargin + contentColumn.anchors.bottomMargin
color: "transparent"
radius: 16
border.color: Theme.palette.baseColor5
clip: true
ColumnLayout {
id: contentColumn
anchors.fill: parent
anchors.margins: 16
anchors.bottomMargin: 32
spacing: 8
clip: true
Image {
Layout.preferredWidth: 257
Layout.preferredHeight: Layout.preferredWidth
Layout.alignment: Qt.AlignHCenter
source: Style.png("community/permissions21_3_1")
mipmap: true
}
StatusBaseText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
text: qsTr("Permissions")
font.pixelSize: 17
font.weight: Font.Bold
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
text: qsTr("You can manage your community by creating and issuing membership and access permissions")
lineHeight: 1.2
font.pixelSize: 15
color: Theme.palette.baseColor1
wrapMode: Text.WordWrap
}
ColumnLayout {
id: checkersColumn
property int rowChildSpacing: 10
property color rowIconColor: Theme.palette.primaryColor1
property string rowIconName: "checkmark-circle"
property int rowFontSize: 15
property color rowTextColor: Theme.palette.directColor1
property double rowTextLineHeight: 1.2
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
spacing: 10
RowLayout {
Layout.fillWidth: true
spacing: checkersColumn.rowChildSpacing
StatusIcon {
icon: checkersColumn.rowIconName
color: checkersColumn.rowIconColor
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
text: qsTr("Give individual members access to private channels")
lineHeight: checkersColumn.rowTextLineHeight
font.pixelSize: checkersColumn.rowFontSize
color: checkersColumn.rowTextColor
wrapMode: Text.WordWrap
}
}
RowLayout {
Layout.fillWidth: true
spacing: checkersColumn.rowChildSpacing
StatusIcon {
icon: checkersColumn.rowIconName
color: checkersColumn.rowIconColor
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
text: qsTr("Monetise your community with subscriptions and fees")
lineHeight: checkersColumn.rowTextLineHeight
font.pixelSize: checkersColumn.rowFontSize
color: Theme.palette.directColor1
wrapMode: Text.WordWrap
}
}
RowLayout {
Layout.fillWidth: true
spacing: checkersColumn.rowChildSpacing
StatusIcon {
icon: checkersColumn.rowIconName
color: checkersColumn.rowIconColor
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
text: qsTr("Require holding a token or NFT to obtain exclusive membership rights")
lineHeight: checkersColumn.rowTextLineHeight
font.pixelSize: checkersColumn.rowFontSize
color: checkersColumn.rowTextColor
wrapMode: Text.WordWrap
}
}
}
}
}
StatusButton {
text: qsTr("Add permission")
height: 44
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
onClicked: root.addPermission()
}
}
}