diff --git a/ui/app/AppLayouts/Chat/CommunityColumn.qml b/ui/app/AppLayouts/Chat/CommunityColumn.qml index 2f4458af3a..376cef69c2 100644 --- a/ui/app/AppLayouts/Chat/CommunityColumn.qml +++ b/ui/app/AppLayouts/Chat/CommunityColumn.qml @@ -248,6 +248,7 @@ Item { Component { id: createChannelPopup CreateChannelPopup { + anchors.centerIn: parent pinnedMessagesPopupComponent: root.pinnedMessagesPopupComponent onClosed: { destroy() diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml index 038df365bd..2f64b44fd6 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml @@ -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 } }