status-desktop/ui/app/AppLayouts/Chat/CommunityComponents/CreateCommunityPopup.qml

302 lines
11 KiB
QML

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.13
import QtQuick.Dialogs 1.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
readonly property int maxDescChars: 140
property string nameValidationError: ""
property string colorValidationError: ""
property string selectedImageValidationError: ""
property string selectedImage: ""
id: popup
height: 600
onOpened: {
nameInput.text = "";
nameInput.forceActiveFocus(Qt.MouseFocusReason)
}
function validate() {
nameValidationError = ""
colorValidationError = ""
selectedImageValidationError = ""
if (nameInput.text === "") {
nameValidationError = qsTr("You need to enter a name")
} else if (!(/^[a-z0-9\-\ ]+$/i.test(nameInput.text))) {
nameValidationError = qsTr("Please restrict your name to letters, numbers, dashes and spaces")
} else if (nameInput.text.length > 100) {
nameValidationError = qsTr("Your name needs to be 100 characters or shorter")
}
if (selectedImage === "") {
selectedImageValidationError = qsTr("You need to select an image")
}
if (colorPicker.text === "") {
colorValidationError = qsTr("You need to enter a color")
} else if (!Utils.isHexColor(colorPicker.text)) {
colorValidationError = qsTr("This field needs to be an hexadecimal color (eg: #4360DF)")
}
return !nameValidationError && !descriptionTextArea.validationError && !colorValidationError
}
title: qsTr("New community")
ScrollView {
property ScrollBar vScrollBar: ScrollBar.vertical
id: scrollView
anchors.fill: parent
rightPadding: Style.current.padding
anchors.rightMargin: - Style.current.halfPadding
contentHeight: content.height
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
clip: true
function scrollBackUp() {
vScrollBar.setPosition(0)
}
Item {
id: content
height: childrenRect.height
width: parent.width
Input {
id: nameInput
label: qsTr("Name your community")
placeholderText: qsTr("A catchy name")
validationError: popup.nameValidationError
}
StyledTextArea {
id: descriptionTextArea
label: qsTr("Give it a short description")
placeholderText: qsTr("What your community is about")
validationError: descriptionTextArea.text.length > maxDescChars ? qsTr("The description cannot exceed 140 characters") : ""
anchors.top: nameInput.bottom
anchors.topMargin: Style.current.bigPadding
customHeight: 88
}
StyledText {
id: charLimit
text: `${descriptionTextArea.text.length}/${maxDescChars}`
anchors.top: descriptionTextArea.bottom
anchors.topMargin: !descriptionTextArea.validationError ? 5 : - Style.current.smallPadding
anchors.right: descriptionTextArea.right
font.pixelSize: 12
color: !descriptionTextArea.validationError ? Style.current.textColor : Style.current.danger
}
StyledText {
id: thumbnailText
text: qsTr("Thumbnail image")
anchors.top: descriptionTextArea.bottom
anchors.topMargin: Style.current.smallPadding
font.pixelSize: 15
color: Style.current.secondaryText
}
Rectangle {
id: addImageButton
color: imagePreview.visible ? "transparent" : Style.current.inputBackground
width: 128
height: width
radius: width / 2
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: thumbnailText.bottom
anchors.topMargin: Style.current.padding
FileDialog {
id: imageDialog
//% "Please choose an image"
title: qsTrId("please-choose-an-image")
folder: shortcuts.pictures
nameFilters: [
//% "Image files (*.jpg *.jpeg *.png)"
qsTrId("image-files----jpg---jpeg---png-")
]
onAccepted: {
selectedImage = imageDialog.fileUrls[0]
}
}
Image {
id: imagePreview
visible: !!popup.selectedImage
source: popup.selectedImage
fillMode: Image.PreserveAspectCrop
width: parent.width
height: parent.height
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
anchors.centerIn: parent
width: imagePreview.width
height: imagePreview.height
radius: imagePreview.width / 2
}
}
}
Item {
id: addImageCenter
visible: !imagePreview.visible
width: uploadText.width
height: childrenRect.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
SVGImage {
id: imageImg
source: "../../../img/images_icon.svg"
width: 20
height: 18
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
id: uploadText
text: qsTr("Upload")
anchors.top: imageImg.bottom
anchors.topMargin: 5
font.pixelSize: 15
color: Style.current.secondaryText
}
}
Rectangle {
color: Style.current.primary
width: 40
height: width
radius: width / 2
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
SVGImage {
source: "../../../img/plusSign.svg"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: 13
height: 13
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: imageDialog.open()
}
}
Input {
id: colorPicker
label: qsTr("Community color")
placeholderText: qsTr("Pick a color")
anchors.top: addImageButton.bottom
anchors.topMargin: Style.current.smallPadding
validationError: popup.colorValidationError
StatusIconButton {
icon.name: "caret"
iconRotation: -90
iconColor: Style.current.textColor
icon.width: 13
icon.height: 7
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
anchors.top: parent.top
anchors.topMargin: colorPicker.textField.height / 2 - height / 2 + Style.current.bigPadding
onClicked: colorDialog.open()
}
ColorDialog {
id: colorDialog
title: qsTr("Please choose a color")
onAccepted: {
colorPicker.text = colorDialog.color
}
}
}
Separator {
id: separator1
anchors.top: colorPicker.bottom
anchors.topMargin: Style.current.bigPadding
}
Item {
id: privateSwitcher
height: privateSwitch.height
width: parent.width
anchors.top: separator1.bottom
anchors.topMargin: Style.current.smallPadding * 2
StyledText {
text: qsTr("Private community")
anchors.verticalCenter: parent.verticalCenter
}
StatusSwitch {
id: privateSwitch
anchors.right: parent.right
}
}
StyledText {
id: privateExplanation
anchors.top: privateSwitcher.bottom
wrapMode: Text.WordWrap
anchors.topMargin: Style.current.smallPadding * 2
width: parent.width
text: privateSwitch.checked ?
qsTr("Only members with an invite link will be able to join your community. Private communities are not listed inside Status") :
qsTr("Your community will be public for anyone to join. Public communities are listed inside Status for easy discovery")
}
}
}
footer: StatusButton {
text: qsTr("Create")
anchors.right: parent.right
onClicked: {
if (!validate()) {
scrollView.scrollBackUp()
return
}
const error = chatsModel.createCommunity(Utils.filterXSS(nameInput.text),
Utils.filterXSS(descriptionTextArea.text),
colorPicker.text,
popup.selectedImage)
if (error) {
creatingError.text = error
return creatingError.open()
}
// TODO Open the community once we have designs for it
popup.close()
}
MessageDialog {
id: creatingError
title: qsTr("Error creating the community")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
}
}