feat(CommunitySettings): Created base welcome settings view

- Component parametrised and renamed to `CommunityWelcomeSettingsView`. It will be the base class for some of the community settings functionalities.
- Updated `CommunityPermissionsSettingsPanel` to use the new welcome screen class.
This commit is contained in:
Noelia 2023-02-17 12:53:18 +01:00 committed by Noelia
parent bd1a778a0a
commit 17fc999ca0
4 changed files with 130 additions and 131 deletions

View File

@ -4,6 +4,8 @@ import AppLayouts.Chat.layouts 1.0
import AppLayouts.Chat.views.communities 1.0
import AppLayouts.Chat.stores 1.0
import utils 1.0
SettingsPageLayout {
id: root
@ -126,15 +128,26 @@ SettingsPageLayout {
// Community Permissions possible view contents:
Component {
id: welcomeView
CommunityWelcomePermissionsView {
CommunityWelcomeSettingsView {
viewWidth: root.viewWidth
image: Style.png("community/permissions21_3_1")
title: qsTr("Permissions")
subtitle: qsTr("You can manage your community by creating and issuing membership and access permissions")
checkersModel: [
qsTr("Give individual members access to private channels"),
qsTr("Monetise your community with subscriptions and fees"),
qsTr("Require holding a token or NFT to obtain exclusive membership rights")
]
}
}
Component {
id: newPermissionView
CommunityNewPermissionView {
id: newPermissionViewItem
viewWidth: root.viewWidth
rootStore: root.rootStore
store: root.store

View File

@ -1,129 +0,0 @@
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
StatusScrollView {
id: root
property int viewWidth: 560 // by design
contentWidth: mainLayout.width
contentHeight: mainLayout.height + mainLayout.anchors.topMargin
ColumnLayout {
id: mainLayout
width: root.viewWidth
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
}
}
}
}
}
}
}

View File

@ -0,0 +1,115 @@
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
StatusScrollView {
id: root
property int viewWidth: 560 // by design
property alias image: imageItem.source
property alias title: titleItem.text
property alias subtitle: subtitleItem.text
property alias checkersModel: checkersItems.model
contentWidth: mainLayout.width
contentHeight: mainLayout.height + mainLayout.anchors.topMargin
ColumnLayout {
id: mainLayout
width: root.viewWidth
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 {
id: imageItem
Layout.preferredWidth: 257
Layout.preferredHeight: Layout.preferredWidth
Layout.alignment: Qt.AlignHCenter
mipmap: true
}
StatusBaseText {
id: titleItem
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 17
font.weight: Font.Bold
color: Theme.palette.directColor1
}
StatusBaseText {
id: subtitleItem
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
lineHeight: 1.2
font.pixelSize: 15
color: Theme.palette.baseColor1
wrapMode: Text.WordWrap
}
ColumnLayout {
id: checkersColumn
readonly property int rowChildSpacing: 10
readonly property color rowIconColor: Theme.palette.primaryColor1
readonly property string rowIconName: "checkmark-circle"
readonly property int rowFontSize: 15
readonly property color rowTextColor: Theme.palette.directColor1
readonly property double rowTextLineHeight: 1.2
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
Layout.topMargin: 8
spacing: 10
Repeater {
id: checkersItems
RowLayout {
Layout.fillWidth: true
spacing: checkersColumn.rowChildSpacing
StatusIcon {
icon: checkersColumn.rowIconName
color: checkersColumn.rowIconColor
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
text: modelData
lineHeight: checkersColumn.rowTextLineHeight
font.pixelSize: checkersColumn.rowFontSize
color: checkersColumn.rowTextColor
wrapMode: Text.WordWrap
}
}
}
}
}
}
}
}

View File

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