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

163 lines
5.5 KiB
QML
Raw Normal View History

2020-12-11 20:29:46 +00:00
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.13
import QtQuick.Dialogs 1.3
2020-12-11 20:38:10 +00:00
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
2020-12-11 20:29:46 +00:00
ModalPopup {
property string communityId
readonly property int maxDescChars: 140
property string nameValidationError: ""
id: popup
height: 600
onOpened: {
nameInput.text = "";
nameInput.forceActiveFocus(Qt.MouseFocusReason)
}
function validate() {
nameValidationError = ""
if (nameInput.text === "") {
2021-02-18 16:36:05 +00:00
//% "You need to enter a name"
nameValidationError = qsTrId("you-need-to-enter-a-name")
2020-12-11 20:29:46 +00:00
} else if (!(/^[a-z0-9\-\ ]+$/i.test(nameInput.text))) {
2021-02-18 16:36:05 +00:00
//% "Please restrict your name to letters, numbers, dashes and spaces"
nameValidationError = qsTrId("please-restrict-your-name-to-letters--numbers--dashes-and-spaces")
2020-12-11 20:29:46 +00:00
} else if (nameInput.text.length > 100) {
2021-02-18 16:36:05 +00:00
//% "Your name needs to be 100 characters or shorter"
nameValidationError = qsTrId("your-name-needs-to-be-100-characters-or-shorter")
2020-12-11 20:29:46 +00:00
}
return !nameValidationError && !descriptionTextArea.validationError
}
2021-02-18 16:36:05 +00:00
//% "New channel"
title: qsTrId("new-channel")
2020-12-11 20:29:46 +00:00
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
clip: true
function scrollBackUp() {
vScrollBar.setPosition(0)
}
Item {
id: content
height: childrenRect.height
width: parent.width
Input {
id: nameInput
2021-02-18 16:36:05 +00:00
//% "Channel name"
label: qsTrId("channel-name")
//% "A cool name"
placeholderText: qsTrId("a-cool-name")
2020-12-11 20:29:46 +00:00
validationError: popup.nameValidationError
}
StyledTextArea {
id: descriptionTextArea
2021-02-18 16:36:05 +00:00
//% "Channel description"
label: qsTrId("channel-description")
//% "What your channel is about"
placeholderText: qsTrId("what-your-channel-is-about")
//% "The description cannot exceed %1 characters"
validationError: descriptionTextArea.text.length > maxDescChars ? qsTrId("the-description-cannot-exceed--1-characters").arg(maxDescChars) : ""
2020-12-11 20:29:46 +00:00
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
}
Separator {
id: separator1
anchors.top: charLimit.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 {
2021-02-18 16:36:05 +00:00
//% "Private channel"
text: qsTrId("private-channel")
2020-12-11 20:29:46 +00:00
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
2021-02-18 16:36:05 +00:00
//% "By making a channel private, only members with selected permission will be able to access it"
text: qsTrId("by-making-a-channel-private--only-members-with-selected-permission-will-be-able-to-access-it")
2020-12-11 20:29:46 +00:00
}
}
}
footer: StatusButton {
2021-02-18 16:36:05 +00:00
//% "Create"
text: qsTrId("create")
2020-12-11 20:29:46 +00:00
anchors.right: parent.right
onClicked: {
if (!validate()) {
scrollView.scrollBackUp()
return
}
const error = chatsModel.communities.createCommunityChannel(communityId,
2020-12-11 20:29:46 +00:00
Utils.filterXSS(nameInput.text),
Utils.filterXSS(descriptionTextArea.text))
if (error) {
creatingError.text = error
return creatingError.open()
}
// TODO Open the community once we have designs for it
popup.close()
}
MessageDialog {
id: creatingError
2021-02-18 16:36:05 +00:00
//% "Error creating the community"
title: qsTrId("error-creating-the-community")
2020-12-11 20:29:46 +00:00
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
}
}