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

ui/app/AppLayouts/Chat/CommunityColumn.qml

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

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
+    header.title: qsTrId("New channel")
-    height: 475
 
     onOpened: {
-        nameInput.text = "";
+        contentComponent.channelName.text = ""
         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()
 
     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"
+    content: ScrollView {
-    title: qsTrId("new-channel")
-
-    ScrollView {
-        property ScrollBar vScrollBar: ScrollBar.vertical
 
         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
+        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: popup.width
-            width: parent.width
 
-            Input {
+            Item {
-                id: nameInput
+                width: parent.width
-                //% "A cool name"
+                height: 76
-                placeholderText: qsTrId("a-cool-name")
-                maxLength: popup.maxChannelNameLength
 
-                onTextEdited: {
+                Input {
-                    text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
+                    id: nameInput
+                    width: parent.width - 32
+                    anchors.centerIn: parent
+                    placeholderText: qsTr("Channel name")
+                    maxLength: popup.maxChannelNameLength
 
-                    validationError = Utils.validateAndReturnError(text,
+                    onTextEdited: {
-                                                                   channelNameValidator,
+                        text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
-                                                                   qsTr("channel name"),
+
-                                                                   maxChannelNameLength)
+                        validationError = Utils.validateAndReturnError(text,
+                                                                        channelNameValidator,
+                                                                        qsTr("channel name"),
+                                                                        maxChannelNameLength)
+                    }
                 }
             }
 
-            StyledTextArea {
+            StatusModalDivider {
-                id: descriptionTextArea
+                topPadding: 8
-                //% "Channel description"
+                bottomPadding: 8
-                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)
-                }
             }
 
-            StyledText {
+            Item {
-                id: charLimit
+                height: descriptionTextArea.height + 26
-                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
-            }
 
-            // Separator {
+                anchors.left: parent.left
-            //     id: separator1
+                anchors.right: parent.right
-            //     anchors.top: charLimit.bottom
+                anchors.leftMargin: 16
-            //     anchors.topMargin: Style.current.bigPadding
+                anchors.rightMargin: 16
-            // }
 
-            // TODO: use the switch below to enable private channels
+                StyledTextArea {
-            // Item {
+                    id: descriptionTextArea
-            //     id: privateSwitcher
-            //     height: privateSwitch.height
-            //     width: parent.width
-            //     anchors.top: separator1.bottom
-            //     anchors.topMargin: Style.current.smallPadding * 2
 
-            //     StyledText {
+                    anchors.top: parent.top
-            //         //% "Private channel"
+                    anchors.topMargin: 10
-            //         text: qsTrId("private-channel")
-            //         anchors.verticalCenter: parent.verticalCenter
-            //     }
 
-            //     StatusSwitch {
+                    label: qsTr("Description")
-            //         id: privateSwitch
+                    placeholderText: qsTr("Describe the channel")
-            //         anchors.right: parent.right
-            //     }
-            // }
 
-            // StyledText {
+                    customHeight: 88
-            //     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 {
+                    text: popup.isEdit ? popup.channel.description : ""
-                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 {
+                    onTextChanged: {
-                        id: nbPinMessagesText
+                        if(text.length > maxChannelDescLength)
-                        text: chatsModel.messageView.pinnedMessagesList.count
+                        {
-                        anchors.verticalCenter: parent.verticalCenter
+                            textField.remove(maxChannelDescLength, text.length)
-                        padding: 0
+                            return
-                        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
                         }
+
+                        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 {
+                if (error) {
-        enabled: isFormValid()
+                    const errorJson = JSON.parse(error)
-        text: isEdit ?
+                    creatingError.text = errorJson.error
-              qsTr("Save") :
+                    return creatingError.open()
-              //% "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) {
+                // TODO Open the community once we have designs for it
-                const errorJson = JSON.parse(error)
+                popup.close()
-                creatingError.text = errorJson.error
-                return creatingError.open()
             }
-
-            // TODO Open the community once we have designs for it
-            popup.close()
         }
+    ]
 
-        MessageDialog {
+    MessageDialog {
-            id: creatingError
+        id: creatingError
-            //% "Error creating the community"
+        //% "Error creating the community"
-            title: qsTrId("error-creating-the-community")
+        title: qsTrId("error-creating-the-community")
-            icon: StandardIcon.Critical
+        icon: StandardIcon.Critical
-            standardButtons: StandardButton.Ok
+        standardButtons: StandardButton.Ok
-        }
     }
 }