status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(Communities): replace `CreateChannelPopoup` with `StatusModal`

This commit is contained in:
Pascal Precht 2021-07-07 14:45:11 +02:00 committed by Iuri Matias
parent 78f7e0f4e0
commit 080767c338
2 changed files with 196 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/AppLayouts/Chat/CommunityColumn.qml
View File

@ -248,6 +248,7 @@ Item {
Component { Component {
id: createChannelPopup id: createChannelPopup
CreateChannelPopup { CreateChannelPopup {
anchors.centerIn: parent
pinnedMessagesPopupComponent: root.pinnedMessagesPopupComponent pinnedMessagesPopupComponent: root.pinnedMessagesPopupComponent
onClosed: { onClosed: {
destroy() destroy()

255
ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml
View File

@ -7,7 +7,14 @@ import "../components"
import "../../../../shared" import "../../../../shared"
import "../../../../shared/status" 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 string communityId
property QtObject channel property QtObject channel
property bool isEdit: false property bool isEdit: false
@ -24,44 +31,42 @@ ModalPopup {
property Component pinnedMessagesPopupComponent property Component pinnedMessagesPopupComponent
id: popup header.title: qsTrId("New channel")
height: 475
onOpened: { onOpened: {
nameInput.text = ""; contentComponent.channelName.text = ""
if (isEdit) { if (isEdit) {
nameInput.text = channel.name; header.title = qsTr("Edit #%1").arg(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
} }
nameInput.forceActiveFocus(Qt.MouseFocusReason) contentComponent.channelName.forceActiveFocus(Qt.MouseFocusReason)
} }
onClosed: destroy() onClosed: destroy()
function isFormValid() { function isFormValid() {
return Utils.validateAndReturnError(nameInput.text, return Utils.validateAndReturnError(contentComponent.channelName.text,
channelNameValidator, channelNameValidator,
qsTr("channel name"), qsTr("channel name"),
maxChannelNameLength) === "" maxChannelNameLength) === ""
&& Utils.validateAndReturnError(descriptionTextArea.text, && Utils.validateAndReturnError(contentComponent.channelDescription.text,
channelDescValidator, channelDescValidator,
qsTr("channel decription"), qsTr("channel decription"),
maxChannelDescLength) === "" maxChannelDescLength) === ""
} }
//% "New channel" content: ScrollView {
title: qsTrId("new-channel")
ScrollView {
property ScrollBar vScrollBar: ScrollBar.vertical
id: scrollView id: scrollView
anchors.fill: parent
rightPadding: Style.current.padding property ScrollBar vScrollBar: ScrollBar.vertical
anchors.rightMargin: - Style.current.halfPadding
property alias channelName: nameInput
property alias channelDescription: descriptionTextArea
contentHeight: content.height contentHeight: content.height
height: Math.min(content.height, 432)
width: popup.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true clip: true
@ -69,15 +74,19 @@ ModalPopup {
vScrollBar.setPosition(0) vScrollBar.setPosition(0)
} }
Item { Column {
id: content id: content
height: childrenRect.height width: popup.width
Item {
width: parent.width width: parent.width
height: 76
Input { Input {
id: nameInput id: nameInput
//% "A cool name" width: parent.width - 32
placeholderText: qsTrId("a-cool-name") anchors.centerIn: parent
placeholderText: qsTr("Channel name")
maxLength: popup.maxChannelNameLength maxLength: popup.maxChannelNameLength
onTextEdited: { onTextEdited: {
@ -89,18 +98,34 @@ ModalPopup {
maxChannelNameLength) maxChannelNameLength)
} }
} }
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
Item {
height: descriptionTextArea.height + 26
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
StyledTextArea { StyledTextArea {
id: descriptionTextArea 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.top: parent.top
anchors.topMargin: Style.current.bigPadding anchors.topMargin: 10
label: qsTr("Description")
placeholderText: qsTr("Describe the channel")
customHeight: 88 customHeight: 88
text: popup.isEdit ? popup.channel.description : ""
onTextChanged: { onTextChanged: {
if(text.length > maxChannelDescLength) if(text.length > maxChannelDescLength)
{ {
@ -110,7 +135,7 @@ ModalPopup {
validationError = Utils.validateAndReturnError(text, validationError = Utils.validateAndReturnError(text,
channelDescValidator, channelDescValidator,
qsTr("channel decription"), qsTr("channel description"),
maxChannelDescLength) maxChannelDescLength)
} }
} }
@ -118,102 +143,91 @@ ModalPopup {
StyledText { StyledText {
id: charLimit id: charLimit
text: `${descriptionTextArea.text.length}/${maxChannelDescLength}` text: `${descriptionTextArea.text.length}/${maxChannelDescLength}`
anchors.top: descriptionTextArea.bottom anchors.top: descriptionTextArea.top
anchors.topMargin: !descriptionTextArea.validationError ? 5 : - Style.current.smallPadding
anchors.right: descriptionTextArea.right anchors.right: descriptionTextArea.right
font.pixelSize: 12 font.pixelSize: 12
color: !descriptionTextArea.validationError ? Style.current.textColor : Style.current.danger color: !descriptionTextArea.validationError ? Theme.palette.baseColor1 : Theme.palette.dangerColor1
}
// Separator {
// id: separator1
// anchors.top: charLimit.bottom
// anchors.topMargin: Style.current.bigPadding
// }
// 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
// StyledText {
// //% "Private channel"
// text: qsTrId("private-channel")
// anchors.verticalCenter: parent.verticalCenter
// }
// StatusSwitch {
// id: privateSwitch
// anchors.right: parent.right
// }
// }
// 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")
// }
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
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
} }
} }
/* 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
} }
} }
} }
footer: StatusButton { rightButtons: [
StatusButton {
enabled: isFormValid() enabled: isFormValid()
text: isEdit ? text: isEdit ?
qsTr("Save") : qsTr("Save") :
//% "Create" qsTr("Create")
qsTrId("create")
anchors.right: parent.right
onClicked: { onClicked: {
if (!isFormValid()) { if (!isFormValid()) {
scrollView.scrollBackUp() scrollView.scrollBackUp()
@ -222,8 +236,8 @@ ModalPopup {
let error = ""; let error = "";
if (!isEdit) { if (!isEdit) {
error = chatsModel.createCommunityChannel(communityId, error = chatsModel.createCommunityChannel(communityId,
Utils.filterXSS(nameInput.text), Utils.filterXSS(popup.contentComponent.channelName.text),
Utils.filterXSS(descriptionTextArea.text), Utils.filterXSS(popup.contentComponent.channelDescription.text),
categoryId) categoryId)
// TODO: pass the private value when private channels // TODO: pass the private value when private channels
// are implemented // are implemented
@ -231,8 +245,8 @@ ModalPopup {
} else { } else {
error = chatsModel.editCommunityChannel(communityId, error = chatsModel.editCommunityChannel(communityId,
channel.id, channel.id,
Utils.filterXSS(nameInput.text), Utils.filterXSS(popup.contentComponent.channelName.text),
Utils.filterXSS(descriptionTextArea.text), Utils.filterXSS(popup.contentComponent.channelDescription.text),
categoryId) categoryId)
// TODO: pass the private value when private channels // TODO: pass the private value when private channels
// are implemented // are implemented
@ -248,6 +262,8 @@ ModalPopup {
// TODO Open the community once we have designs for it // TODO Open the community once we have designs for it
popup.close() popup.close()
} }
}
]
MessageDialog { MessageDialog {
id: creatingError id: creatingError
@ -257,5 +273,4 @@ ModalPopup {
standardButtons: StandardButton.Ok standardButtons: StandardButton.Ok
} }
} }
}