refactor(Communities): replace CreateCategoryPopup with StatusModal

ui/app/AppLayouts/Chat/CommunityColumn.qml

@@ -259,6 +259,7 @@ Item {
     Component {
         id: createCategoryPopup
         CreateCategoryPopup {
+            anchors.centerIn: parent
             onClosed: {
                 destroy()
             }

ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml

@@ -1,71 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import "../../../../imports"
-import "../../../../shared"
-import "../../../../shared/status"
-
-Rectangle {
-    property string name: "channel-name"
-    property string channelId: "channel-id"
-    property bool isEdit: false
-    property alias checked: chk.checked
-    property string categoryId: ""
-    property var onItemChecked
-    property bool isHovered: false
-    id: container
-    height: visible ? 52 : 0
-    width: 425
-    anchors.left: parent.left
-    border.width: 0
-    radius: Style.current.radius
-    color: isHovered ? Style.current.backgroundHover : Style.current.transparent
-
-    StatusIdenticon {
-        id: channelImage
-        height: 36
-        width: 36
-        chatId: name
-        chatName: name
-        chatType: Constants.chatTypePublic
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.verticalCenter: parent.verticalCenter
-    }
-
-    StyledText {
-        id: channelName
-        text: "#" + name
-        elide: Text.ElideRight
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        font.pixelSize: 15
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: channelImage.right
-        anchors.leftMargin: Style.current.halfPadding
-    }
-
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: container.isHovered = true
-        onExited: container.isHovered = false
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: {
-            chk.checked = !chk.checked
-        }
-    }
-
-    StatusCheckBox  {
-        id: chk
-        anchors.top: channelImage.top
-        anchors.topMargin: 6
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        onClicked: {
-            onItemChecked(container.channelId, chk.checked)
-        }
-    }
-
-}

ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml

@@ -4,9 +4,14 @@ import QtGraphicalEffects 1.13
 import QtQuick.Dialogs 1.3
 import "../../../../imports"
 import "../../../../shared"
-import "../../../../shared/status"
 
-ModalPopup {
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
     property string communityId
     property string categoryId
     property string categoryName: ""
@@ -19,35 +24,36 @@ ModalPopup {
                                                  | Utils.Validate.TextLength
 
     id: popup
-    height: 453
 
     onOpened: {
         if(isEdit){
-            nameInput.text = categoryName
+            popup.contentComponent.categoryName.text = categoryName
             channels = JSON.parse(chatsModel.communities.activeCommunity.getChatIdsByCategory(categoryId))
         }
-        nameInput.forceActiveFocus(Qt.MouseFocusReason)
+        popup.contentComponent.categoryName.forceActiveFocus(Qt.MouseFocusReason)
     }
     onClosed: destroy()
 
     function isFormValid() {
-        return Utils.validateAndReturnError(nameInput.text,
+        return Utils.validateAndReturnError(popup.contentComponent.categoryName.text,
                                             categoryNameValidator,
                                             qsTr("category name"),
                                             maxCategoryNameLength) === ""
     }
 
-    title: isEdit ?
+    header.title: isEdit ?
             qsTr("Edit category") : 
             qsTr("New category")
 
-    ScrollView {
+    content: ScrollView {
-        property ScrollBar vScrollBar: ScrollBar.vertical
-
         id: scrollView
-        anchors.fill: parent
+
-        rightPadding: Style.current.padding
+        width: popup.width
-        anchors.rightMargin: - Style.current.halfPadding
+        height: Math.min(content.height, 432)
+
+        property ScrollBar vScrollBar: ScrollBar.vertical
+        property alias categoryName: nameInput
+
         contentHeight: content.height
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
         clip: true
@@ -56,13 +62,25 @@ ModalPopup {
             vScrollBar.setPosition(0)
         }
 
-        Item {
+        Column {
             id: content
-            height: childrenRect.height
             width: parent.width
 
+            StatusModalDivider {
+                bottomPadding: 8
+            }
+
+            Item {
+                width: parent.width
+                height: 76
                 Input {
                     id: nameInput
+                    width: parent.width -32
+
+                    anchors.centerIn: parent
+                    anchors.left: undefined
+                    anchors.right: undefined
+
                     placeholderText: qsTr("Category title")
                     maxLength: maxCategoryNameLength
 
@@ -73,43 +91,54 @@ ModalPopup {
                                                                       maxCategoryNameLength)
                     }
                 }
-
-            Separator {
-                id: sep
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: nameInput.bottom
-                anchors.topMargin: Style.current.padding
-                anchors.leftMargin: -Style.current.padding
-                anchors.rightMargin: -Style.current.padding
             }
 
-            StatusSectionHeadline {
+            StatusModalDivider {
-                id: chatsTitle
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            Item {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width - 32
+                height: 34
+                StatusBaseText {
                     text: qsTr("Channels")
-                anchors.top: sep.bottom
+                    anchors.bottom: parent.bottom
-                anchors.topMargin: Style.current.smallPadding
+                    anchors.bottomMargin: 4
+                    font.pixelSize: 15
+                    color: Theme.palette.baseColor1
+                }
             }
 
             ListView {
                 id: communityChannelList
                 height: childrenRect.height
                 model: chatsModel.communities.activeCommunity.chats
-                anchors.top: chatsTitle.bottom
-                anchors.topMargin: Style.current.smallPadding
                 anchors.left: parent.left
                 anchors.right: parent.right
-                delegate: CommunityChannel {
+
-                    name: model.name
+                delegate: StatusListItem {
-                    channelId: model.id
+                    anchors.horizontalCenter: parent.horizontalCenter
-                    categoryId: model.categoryId
+                    width: parent.width - 32
+                    visible: popup.isEdit ? 
+                        model.category === popup.categoryId || model.categoryId === "" : 
+                        model.categoryId === ""
+
+                    title: "#" + model.name
+                    icon.isLetterIdenticon: true
+                    icon.background.color: model.color
+                    sensor.onClicked: channelItemCheckbox.checked = !channelItemCheckbox.checked
+
+                    components: [
+                        StatusCheckBox {
+                            id: channelItemCheckbox
                             checked: popup.isEdit ? channels.indexOf(model.id) > - 1 : false
-                    visible: popup.isEdit ? model.categoryId === popup.categoryId || model.categoryId === "" : model.categoryId === ""
+                            onCheckedChanged: {
-                    onItemChecked: function(channelId, itemChecked){
+                                var idx = channels.indexOf(model.id)
-                        var idx = channels.indexOf(channelId)
+                                if(checked){
-                        if(itemChecked){
                                     if(idx === -1){
-                                channels.push(channelId)
+                                        channels.push(model.id)
                                     }
                                 } else {
                                     if(idx > -1){
@@ -118,58 +147,37 @@ ModalPopup {
                                 }
                             }
                         }
+                    ]
+                }
             }
 
-            Separator {
+            StatusModalDivider {
-                id: sep2
+                visible: deleteCategoryButton.visible
-                visible: isEdit
+                topPadding: 8
-                anchors.left: parent.left
+                bottomPadding: 8
-                anchors.right: parent.right
-                anchors.top: communityChannelList.bottom
-                anchors.topMargin: Style.current.padding
-                anchors.leftMargin: -Style.current.padding
-                anchors.rightMargin: -Style.current.padding
             }
 
-            Item {
+            StatusListItem {
-                id: deleteCategory
+                id: deleteCategoryButton
+                anchors.horizontalCenter: parent.horizontalCenter
                 visible: isEdit
-                anchors.top: sep2.bottom
-                anchors.topMargin: Style.current.padding
-                width: deleteBtn.width + deleteTxt.width + Style.current.padding
-                height: deleteBtn.height
 
-
+                title: qsTr("Delete category")
-                StatusRoundButton {
-                    id: deleteBtn
                 icon.name: "delete"
-                    size: "medium"
+                type: StatusListItem.Type.Danger
-                    type: "warn"
+                sensor.onClicked: {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    id: deleteTxt
-                    text: qsTr("Delete category")
-                    color: Style.current.red
-                    anchors.left: deleteBtn.right
-                    anchors.leftMargin: Style.current.padding
-                    anchors.verticalCenter: deleteBtn.verticalCenter
-                    font.pixelSize: 15
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
                     openPopup(deleteCategoryConfirmationDialogComponent, {
-                            title: qsTr("Delete %1 category").arg(categoryName),
+                        title: qsTr("Delete %1 category").arg(popup.contentComponent.categoryName.text),
-                            confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won’t be deleted.").arg(categoryName)
+                        confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won’t be deleted.").arg(popup.contentComponent.categoryName.text)
                         
                     })
                 }
             }
 
+            StatusModalDivider {
+                topPadding: 8
+            }
+
             Component {
                 id: deleteCategoryConfirmationDialogComponent
                 ConfirmationDialog {
@@ -194,17 +202,14 @@ ModalPopup {
                 }
             }
         }
-
-
-        }
     }
 
-    footer: StatusButton {
+    rightButtons: [
+        StatusButton {
             enabled: isFormValid()
             text: isEdit ?
                 qsTr("Save") :
                 qsTr("Create")
-        anchors.right: parent.right
             onClicked: {
                 if (!isFormValid()) {
                     scrollView.scrollBackUp()
@@ -213,10 +218,10 @@ ModalPopup {
 
                 let error = ""
 
-            if(isEdit){
+                if (isEdit) {
                     error = chatsModel.communities.editCommunityCategory(communityId, categoryId, Utils.filterXSS(nameInput.text), JSON.stringify(channels))
                 } else {
-                error = chatsModel.communities.createCommunityCategory(communityId, Utils.filterXSS(nameInput.text), JSON.stringify(channels))
+                    error = chatsModel.communities.createCommunityCategory(communityId, Utils.filterXSS(popup.contentComponent.categoryName.text), JSON.stringify(channels))
                 }
 
                 if (error) {
@@ -226,6 +231,8 @@ ModalPopup {
 
                 popup.close()
             }
+        }
+    ]
 
     MessageDialog {
         id: categoryError
@@ -235,5 +242,4 @@ ModalPopup {
         icon: StandardIcon.Critical
         standardButtons: StandardButton.Ok
     }
-    }
 }