status-desktop/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml

234 lines
7.7 KiB
QML
Raw Normal View History

2020-12-11 20:29:46 +00:00
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Dialogs 1.3
import utils 1.0
2020-12-11 20:29:46 +00:00
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
StatusModal {
id: popup
property bool isEdit: false
property string channelName: ""
property string channelDescription: ""
readonly property int maxChannelNameLength: 30
readonly property int maxChannelDescLength: 140
2021-06-02 19:43:33 +00:00
signal createCommunityChannel(string chName, string chDescription)
signal editCommunityChannel(string chName, string chDescription)
signal openPinnedMessagesPopup()
2021-06-02 19:43:33 +00:00
//% "New channel"
header.title: qsTrId("create-channel-title")
2020-12-11 20:29:46 +00:00
onOpened: {
contentItem.channelName.input.text = ""
contentItem.channelName.input.forceActiveFocus(Qt.MouseFocusReason)
if (isEdit) {
//% "Edit #%1"
header.title = qsTrId("edit---1").arg(popup.channelName);
contentItem.channelName.input.text = popup.channelName
contentItem.channelDescription.input.text = popup.channelDescription
}
2020-12-11 20:29:46 +00:00
}
onClosed: destroy()
2020-12-11 20:29:46 +00:00
function isFormValid() {
return (scrollView.channelName.valid &&
scrollView.channelDescription.valid)
2020-12-11 20:29:46 +00:00
}
contentItem: ScrollView {
id: scrollView
2020-12-11 20:29:46 +00:00
property ScrollBar vScrollBar: ScrollBar.vertical
property alias channelName: nameInput
property alias channelDescription: descriptionTextArea
2020-12-11 20:29:46 +00:00
contentHeight: content.height
height: Math.min(content.height, 432)
width: popup.width
2020-12-11 20:29:46 +00:00
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
function scrollBackUp() {
vScrollBar.setPosition(0)
}
Column {
2020-12-11 20:29:46 +00:00
id: content
width: popup.width
StatusInput {
id: nameInput
charLimit: popup.maxChannelNameLength
input.placeholderText: qsTr("Channel name")
input.onTextChanged: {
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
input.cursorPosition = input.text.length
}
validationMode: StatusInput.ValidationMode.Always
validators: [StatusMinLengthValidator {
minLength: 1
errorMessage: Utils.getErrorMessage(nameInput.errors, qsTr("channel name"))
}]
2020-12-11 20:29:46 +00:00
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
2020-12-11 20:29:46 +00:00
}
StatusInput {
id: descriptionTextArea
label: qsTr("Description")
charLimit: 140
input.placeholderText: qsTr("Describe the channel")
input.multiline: true
input.implicitHeight: 88
validationMode: StatusInput.ValidationMode.Always
validators: [StatusMinLengthValidator {
minLength: 1
errorMessage: Utils.getErrorMessage(descriptionTextArea.errors, qsTr("channel description"))
}]
}
/* TODO: use the code below to enable private channels and message limit */
/* StatusListItem { */
/* width: parent.width */
/* height: 56 */
/* sensor.enabled: false */
//% "Private channel"
/* title: qsTrId("private-channel") */
/* components: [ */
/* StatusSwitch { */
/* id: privateSwitch */
/* } */
/* ] */
/* } */
/* StatusBaseText { */
/* width: parent.width - 32 */
/* anchors.left: parent.left */
/* anchors.right: parent.right */
/* anchors.rightMargin: 121 */
/* anchors.leftMargin: 16 */
/* color: Theme.palette.baseColor1 */
/* wrapMode: Text.WordWrap */
//% "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") */
/* } */
/* StatusModalDivider { */
/* topPadding: 8 */
/* bottomPadding: 8 */
/* } */
/* StatusListItem { */
/* width: parent.width */
/* height: 56 */
/* sensor.enabled: false */
//% "Message limit"
/* title: qsTrId("message-limit") */
/* components: [ */
/* StatusSwitch {} */
/* ] */
/* } */
/* StatusBaseText { */
/* width: parent.width - 32 */
/* anchors.left: parent.left */
/* anchors.right: parent.right */
/* anchors.rightMargin: 121 */
/* anchors.leftMargin: 16 */
/* color: Theme.palette.baseColor1 */
/* wrapMode: Text.WordWrap */
//% "Limit channel members to sending one message per chose time interval"
/* text: qsTrId("limit-channel-members-to-sending-one-message-per-chose-time-interval") */
/* } */
Item {
width: parent.width
height: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
//% "Pinned messages"
title: qsTrId("pinned-messages")
icon.name: "pin"
components: [
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
2020-12-11 20:29:46 +00:00
sensor.onClicked: {
popup.openPinnedMessagesPopup()
}
2020-12-11 20:29:46 +00:00
}
Item {
width: parent.width
height: 8
}
2020-12-11 20:29:46 +00:00
}
}
rightButtons: [
StatusButton {
enabled: isFormValid()
text: isEdit ?
//% "Save"
qsTrId("save") :
//% "Create"
qsTrId("create")
onClicked: {
if (!isFormValid()) {
scrollView.scrollBackUp()
return
}
let error = "";
if (!isEdit) {
popup.createCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text))
} else {
popup.editCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text))
}
if (error) {
const errorJson = JSON.parse(error)
creatingError.text = errorJson.error
return creatingError.open()
}
2020-12-11 20:29:46 +00:00
// TODO Open the community once we have designs for it
popup.close()
}
2020-12-11 20:29:46 +00:00
}
]
MessageDialog {
id: creatingError
//% "Error creating the community"
title: qsTrId("error-creating-the-community")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
2020-12-11 20:29:46 +00:00
}
}