refactor(Communities): replace `CreateChannelPopoup` with `StatusModal`
This commit is contained in:
Pascal Precht
Iuri Matias
parent
78f7e0f4e0
commit
080767c338
|
|
@ -248,6 +248,7 @@ Item {
|
|||
Component {
|
||||
id: createChannelPopup
|
||||
CreateChannelPopup {
|
||||
anchors.centerIn: parent
|
||||
pinnedMessagesPopupComponent: root.pinnedMessagesPopupComponent
|
||||
onClosed: {
|
||||
destroy()
|
||||
|
|
|
|||
|
|
@ -7,7 +7,14 @@ import "../components"
|
|||
import "../../../../shared"
|
||||
import "../../../../shared/status"
|
||||
|
||||
ModalPopup {
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusModal {
|
||||
id: popup
|
||||
property string communityId
|
||||
property QtObject channel
|
||||
property bool isEdit: false
|
||||
|
|
@ -24,44 +31,42 @@ ModalPopup {
|
|||
|
||||
property Component pinnedMessagesPopupComponent
|
||||
|
||||
id: popup
|
||||
height: 475
|
||||
header.title: qsTrId("New channel")
|
||||
|
||||
onOpened: {
|
||||
nameInput.text = "";
|
||||
contentComponent.channelName.text = ""
|
||||
if (isEdit) {
|
||||
nameInput.text = channel.name;
|
||||
title = qsTr("Edit #%1").arg(channel.name);
|
||||
descriptionTextArea.text = channel.description;
|
||||
// TODO: re-enable once private channels are implemented
|
||||
// privateSwitch.checked = channel.private
|
||||
header.title = qsTr("Edit #%1").arg(channel.name);
|
||||
}
|
||||
nameInput.forceActiveFocus(Qt.MouseFocusReason)
|
||||
contentComponent.channelName.forceActiveFocus(Qt.MouseFocusReason)
|
||||
}
|
||||
|
||||
onClosed: destroy()
|
||||
|
||||
function isFormValid() {
|
||||
return Utils.validateAndReturnError(nameInput.text,
|
||||
return Utils.validateAndReturnError(contentComponent.channelName.text,
|
||||
channelNameValidator,
|
||||
qsTr("channel name"),
|
||||
maxChannelNameLength) === ""
|
||||
&& Utils.validateAndReturnError(descriptionTextArea.text,
|
||||
&& Utils.validateAndReturnError(contentComponent.channelDescription.text,
|
||||
channelDescValidator,
|
||||
qsTr("channel decription"),
|
||||
maxChannelDescLength) === ""
|
||||
}
|
||||
|
||||
//% "New channel"
|
||||
title: qsTrId("new-channel")
|
||||
|
||||
ScrollView {
|
||||
property ScrollBar vScrollBar: ScrollBar.vertical
|
||||
content: ScrollView {
|
||||
|
||||
id: scrollView
|
||||
anchors.fill: parent
|
||||
rightPadding: Style.current.padding
|
||||
anchors.rightMargin: - Style.current.halfPadding
|
||||
|
||||
property ScrollBar vScrollBar: ScrollBar.vertical
|
||||
|
||||
property alias channelName: nameInput
|
||||
property alias channelDescription: descriptionTextArea
|
||||
|
||||
contentHeight: content.height
|
||||
height: Math.min(content.height, 432)
|
||||
width: popup.width
|
||||
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
clip: true
|
||||
|
||||
|
|
@ -69,193 +74,203 @@ ModalPopup {
|
|||
vScrollBar.setPosition(0)
|
||||
}
|
||||
|
||||
Item {
|
||||
Column {
|
||||
id: content
|
||||
height: childrenRect.height
|
||||
width: parent.width
|
||||
width: popup.width
|
||||
|
||||
Input {
|
||||
id: nameInput
|
||||
//% "A cool name"
|
||||
placeholderText: qsTrId("a-cool-name")
|
||||
maxLength: popup.maxChannelNameLength
|
||||
Item {
|
||||
width: parent.width
|
||||
height: 76
|
||||
|
||||
onTextEdited: {
|
||||
text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
|
||||
Input {
|
||||
id: nameInput
|
||||
width: parent.width - 32
|
||||
anchors.centerIn: parent
|
||||
placeholderText: qsTr("Channel name")
|
||||
maxLength: popup.maxChannelNameLength
|
||||
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
channelNameValidator,
|
||||
qsTr("channel name"),
|
||||
maxChannelNameLength)
|
||||
onTextEdited: {
|
||||
text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
|
||||
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
channelNameValidator,
|
||||
qsTr("channel name"),
|
||||
maxChannelNameLength)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledTextArea {
|
||||
id: descriptionTextArea
|
||||
//% "Channel description"
|
||||
label: qsTrId("channel-description")
|
||||
//% "What your channel is about"
|
||||
placeholderText: qsTrId("what-your-channel-is-about")
|
||||
|
||||
anchors.top: nameInput.bottom
|
||||
anchors.topMargin: Style.current.bigPadding
|
||||
customHeight: 88
|
||||
|
||||
onTextChanged: {
|
||||
if(text.length > maxChannelDescLength)
|
||||
{
|
||||
textField.remove(maxChannelDescLength, text.length)
|
||||
return
|
||||
}
|
||||
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
channelDescValidator,
|
||||
qsTr("channel decription"),
|
||||
maxChannelDescLength)
|
||||
}
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: charLimit
|
||||
text: `${descriptionTextArea.text.length}/${maxChannelDescLength}`
|
||||
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
|
||||
}
|
||||
Item {
|
||||
height: descriptionTextArea.height + 26
|
||||
|
||||
// Separator {
|
||||
// id: separator1
|
||||
// anchors.top: charLimit.bottom
|
||||
// anchors.topMargin: Style.current.bigPadding
|
||||
// }
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
// TODO: use the switch below to enable private channels
|
||||
// Item {
|
||||
// id: privateSwitcher
|
||||
// height: privateSwitch.height
|
||||
// width: parent.width
|
||||
// anchors.top: separator1.bottom
|
||||
// anchors.topMargin: Style.current.smallPadding * 2
|
||||
StyledTextArea {
|
||||
id: descriptionTextArea
|
||||
|
||||
// StyledText {
|
||||
// //% "Private channel"
|
||||
// text: qsTrId("private-channel")
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
// }
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 10
|
||||
|
||||
// StatusSwitch {
|
||||
// id: privateSwitch
|
||||
// anchors.right: parent.right
|
||||
// }
|
||||
// }
|
||||
label: qsTr("Description")
|
||||
placeholderText: qsTr("Describe the channel")
|
||||
|
||||
// StyledText {
|
||||
// id: privateExplanation
|
||||
// anchors.top: privateSwitcher.bottom
|
||||
// color: Style.current.secondaryText
|
||||
// wrapMode: Text.WordWrap
|
||||
// anchors.topMargin: Style.current.smallPadding * 2
|
||||
// width: parent.width
|
||||
// //% "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")
|
||||
// }
|
||||
customHeight: 88
|
||||
|
||||
CommunityPopupButton {
|
||||
id: memberBtn
|
||||
label: qsTr("Pinned messages")
|
||||
iconName: "../pin"
|
||||
txtColor: Style.current.textColor
|
||||
onClicked: openPopup(pinnedMessagesPopupComponent)
|
||||
anchors.top: charLimit.bottom
|
||||
anchors.topMargin: Style.current.bigPadding
|
||||
|
||||
Item {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: childrenRect.width
|
||||
height: memberBtn.height
|
||||
text: popup.isEdit ? popup.channel.description : ""
|
||||
|
||||
StyledText {
|
||||
id: nbPinMessagesText
|
||||
text: chatsModel.messageView.pinnedMessagesList.count
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
padding: 0
|
||||
font.pixelSize: 15
|
||||
color: Style.current.secondaryText
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
id: caret
|
||||
anchors.left: nbPinMessagesText.right
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: "../../../img/caret.svg"
|
||||
width: 13
|
||||
height: 7
|
||||
rotation: -90
|
||||
ColorOverlay {
|
||||
anchors.fill: parent
|
||||
source: parent
|
||||
color: Style.current.secondaryText
|
||||
onTextChanged: {
|
||||
if(text.length > maxChannelDescLength)
|
||||
{
|
||||
textField.remove(maxChannelDescLength, text.length)
|
||||
return
|
||||
}
|
||||
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
channelDescValidator,
|
||||
qsTr("channel description"),
|
||||
maxChannelDescLength)
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: charLimit
|
||||
text: `${descriptionTextArea.text.length}/${maxChannelDescLength}`
|
||||
anchors.top: descriptionTextArea.top
|
||||
anchors.right: descriptionTextArea.right
|
||||
font.pixelSize: 12
|
||||
color: !descriptionTextArea.validationError ? Theme.palette.baseColor1 : Theme.palette.dangerColor1
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: use the code below to enable private channels and message limit */
|
||||
/* StatusListItem { */
|
||||
/* width: parent.width */
|
||||
/* height: 56 */
|
||||
/* sensor.enabled: false */
|
||||
/* title: qsTr("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 */
|
||||
/* text: qsTr("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 */
|
||||
/* title: qsTr("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 */
|
||||
/* text: qsTr("Limit channel members to sending one message per chose time interval") */
|
||||
/* } */
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: qsTr("Pinned messages")
|
||||
icon.name: "pin"
|
||||
label: chatsModel.messageView.pinnedMessagesList.count
|
||||
components: [
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
|
||||
sensor.onClicked: openPopup(pinnedMessagesPopupComponent)
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
enabled: isFormValid()
|
||||
text: isEdit ?
|
||||
qsTr("Save") :
|
||||
qsTr("Create")
|
||||
onClicked: {
|
||||
if (!isFormValid()) {
|
||||
scrollView.scrollBackUp()
|
||||
return
|
||||
}
|
||||
let error = "";
|
||||
if (!isEdit) {
|
||||
error = chatsModel.createCommunityChannel(communityId,
|
||||
Utils.filterXSS(popup.contentComponent.channelName.text),
|
||||
Utils.filterXSS(popup.contentComponent.channelDescription.text),
|
||||
categoryId)
|
||||
// TODO: pass the private value when private channels
|
||||
// are implemented
|
||||
//privateSwitch.checked)
|
||||
} else {
|
||||
error = chatsModel.editCommunityChannel(communityId,
|
||||
channel.id,
|
||||
Utils.filterXSS(popup.contentComponent.channelName.text),
|
||||
Utils.filterXSS(popup.contentComponent.channelDescription.text),
|
||||
categoryId)
|
||||
// TODO: pass the private value when private channels
|
||||
// are implemented
|
||||
//privateSwitch.checked)
|
||||
}
|
||||
|
||||
footer: StatusButton {
|
||||
enabled: isFormValid()
|
||||
text: isEdit ?
|
||||
qsTr("Save") :
|
||||
//% "Create"
|
||||
qsTrId("create")
|
||||
anchors.right: parent.right
|
||||
onClicked: {
|
||||
if (!isFormValid()) {
|
||||
scrollView.scrollBackUp()
|
||||
return
|
||||
}
|
||||
let error = "";
|
||||
if (!isEdit) {
|
||||
error = chatsModel.createCommunityChannel(communityId,
|
||||
Utils.filterXSS(nameInput.text),
|
||||
Utils.filterXSS(descriptionTextArea.text),
|
||||
categoryId)
|
||||
// TODO: pass the private value when private channels
|
||||
// are implemented
|
||||
//privateSwitch.checked)
|
||||
} else {
|
||||
error = chatsModel.editCommunityChannel(communityId,
|
||||
channel.id,
|
||||
Utils.filterXSS(nameInput.text),
|
||||
Utils.filterXSS(descriptionTextArea.text),
|
||||
categoryId)
|
||||
// TODO: pass the private value when private channels
|
||||
// are implemented
|
||||
//privateSwitch.checked)
|
||||
}
|
||||
if (error) {
|
||||
const errorJson = JSON.parse(error)
|
||||
creatingError.text = errorJson.error
|
||||
return creatingError.open()
|
||||
}
|
||||
|
||||
if (error) {
|
||||
const errorJson = JSON.parse(error)
|
||||
creatingError.text = errorJson.error
|
||||
return creatingError.open()
|
||||
// TODO Open the community once we have designs for it
|
||||
popup.close()
|
||||
}
|
||||
|
||||
// TODO Open the community once we have designs for it
|
||||
popup.close()
|
||||
}
|
||||
]
|
||||
|
||||
MessageDialog {
|
||||
id: creatingError
|
||||
//% "Error creating the community"
|
||||
title: qsTrId("error-creating-the-community")
|
||||
icon: StandardIcon.Critical
|
||||
standardButtons: StandardButton.Ok
|
||||
}
|
||||
MessageDialog {
|
||||
id: creatingError
|
||||
//% "Error creating the community"
|
||||
title: qsTrId("error-creating-the-community")
|
||||
icon: StandardIcon.Critical
|
||||
standardButtons: StandardButton.Ok
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue