From 18a042fdf1dcbe08304a872f00df1847a4024966 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Fri, 9 Jul 2021 12:09:03 +0200 Subject: [PATCH] refactor(Communities): replace `CreateCategoryPopup` with `StatusModal` --- ui/app/AppLayouts/Chat/CommunityColumn.qml | 1 + .../CommunityComponents/CommunityChannel.qml | 71 ---- .../CreateCategoryPopup.qml | 322 +++++++++--------- 3 files changed, 165 insertions(+), 229 deletions(-) delete mode 100644 ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml diff --git a/ui/app/AppLayouts/Chat/CommunityColumn.qml b/ui/app/AppLayouts/Chat/CommunityColumn.qml index 376cef69c2..3b745896eb 100644 --- a/ui/app/AppLayouts/Chat/CommunityColumn.qml +++ b/ui/app/AppLayouts/Chat/CommunityColumn.qml @@ -259,6 +259,7 @@ Item { Component { id: createCategoryPopup CreateCategoryPopup { + anchors.centerIn: parent onClosed: { destroy() } diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml deleted file mode 100644 index 200a9fabff..0000000000 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml +++ /dev/null @@ -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) - } - } - -} diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml index b877068f7c..92db04704d 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml +++ b/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 { - property ScrollBar vScrollBar: ScrollBar.vertical - + content: ScrollView { id: scrollView - anchors.fill: parent - rightPadding: Style.current.padding - anchors.rightMargin: - Style.current.halfPadding + + width: popup.width + 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,184 +62,184 @@ ModalPopup { vScrollBar.setPosition(0) } - Item { + Column { id: content - height: childrenRect.height width: parent.width - Input { - id: nameInput - placeholderText: qsTr("Category title") - maxLength: maxCategoryNameLength + StatusModalDivider { + bottomPadding: 8 + } - onTextEdited: { - validationError = Utils.validateAndReturnError(text, - categoryNameValidator, - qsTr("category name"), - maxCategoryNameLength) + 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 + + onTextEdited: { + validationError = Utils.validateAndReturnError(text, + categoryNameValidator, + qsTr("category name"), + 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 + StatusModalDivider { + topPadding: 8 + bottomPadding: 8 } - StatusSectionHeadline { - id: chatsTitle - text: qsTr("Channels") - anchors.top: sep.bottom - anchors.topMargin: Style.current.smallPadding + Item { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width - 32 + height: 34 + StatusBaseText { + text: qsTr("Channels") + anchors.bottom: parent.bottom + 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 - channelId: model.id - categoryId: model.categoryId - checked: popup.isEdit ? channels.indexOf(model.id) > - 1 : false - visible: popup.isEdit ? model.categoryId === popup.categoryId || model.categoryId === "" : model.categoryId === "" - onItemChecked: function(channelId, itemChecked){ - var idx = channels.indexOf(channelId) - if(itemChecked){ - if(idx === -1){ - channels.push(channelId) - } - } else { - if(idx > -1){ - channels.splice(idx, 1); + + delegate: StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + 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 + onCheckedChanged: { + var idx = channels.indexOf(model.id) + if(checked){ + if(idx === -1){ + channels.push(model.id) + } + } else { + if(idx > -1){ + channels.splice(idx, 1); + } + } } } - } + ] } } - Separator { - id: sep2 + StatusModalDivider { + visible: deleteCategoryButton.visible + topPadding: 8 + bottomPadding: 8 + } + + StatusListItem { + id: deleteCategoryButton + anchors.horizontalCenter: parent.horizontalCenter visible: isEdit - anchors.left: parent.left - anchors.right: parent.right - anchors.top: communityChannelList.bottom - anchors.topMargin: Style.current.padding - anchors.leftMargin: -Style.current.padding - anchors.rightMargin: -Style.current.padding - } - Item { - id: deleteCategory - visible: isEdit - anchors.top: sep2.bottom - anchors.topMargin: Style.current.padding - width: deleteBtn.width + deleteTxt.width + Style.current.padding - height: deleteBtn.height - - - StatusRoundButton { - id: deleteBtn - icon.name: "delete" - size: "medium" - type: "warn" - 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), - confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won’t be deleted.").arg(categoryName) - - }) - } - } - - Component { - id: deleteCategoryConfirmationDialogComponent - ConfirmationDialog { - btnType: "warn" - height: 216 - showCancelButton: true - onClosed: { - destroy() - } - onCancelButtonClicked: { - close(); - } - onConfirmButtonClicked: function(){ - const error = chatsModel.communities.deleteCommunityCategory(chatsModel.communities.activeCommunity.id, popup.categoryId) - if (error) { - creatingError.text = error - return creatingError.open() - } - close(); - popup.close() - } - } + title: qsTr("Delete category") + icon.name: "delete" + type: StatusListItem.Type.Danger + sensor.onClicked: { + openPopup(deleteCategoryConfirmationDialogComponent, { + 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(popup.contentComponent.categoryName.text) + + }) } } + StatusModalDivider { + topPadding: 8 + } + Component { + id: deleteCategoryConfirmationDialogComponent + ConfirmationDialog { + btnType: "warn" + height: 216 + showCancelButton: true + onClosed: { + destroy() + } + onCancelButtonClicked: { + close(); + } + onConfirmButtonClicked: function(){ + const error = chatsModel.communities.deleteCommunityCategory(chatsModel.communities.activeCommunity.id, popup.categoryId) + if (error) { + creatingError.text = error + return creatingError.open() + } + close(); + popup.close() + } + } + } } } - footer: StatusButton { - enabled: isFormValid() - text: isEdit ? - qsTr("Save") : - qsTr("Create") - anchors.right: parent.right - onClicked: { - if (!isFormValid()) { - scrollView.scrollBackUp() - return + rightButtons: [ + StatusButton { + enabled: isFormValid() + text: isEdit ? + qsTr("Save") : + qsTr("Create") + onClicked: { + if (!isFormValid()) { + scrollView.scrollBackUp() + return + } + + let error = "" + + if (isEdit) { + error = chatsModel.communities.editCommunityCategory(communityId, categoryId, Utils.filterXSS(nameInput.text), JSON.stringify(channels)) + } else { + error = chatsModel.communities.createCommunityCategory(communityId, Utils.filterXSS(popup.contentComponent.categoryName.text), JSON.stringify(channels)) + } + + if (error) { + categoryError.text = error + return categoryError.open() + } + + popup.close() } - - let error = "" - - 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)) - } - - if (error) { - categoryError.text = error - return categoryError.open() - } - - popup.close() } + ] - MessageDialog { - id: categoryError - title: isEdit ? - qsTr("Error editing the category") : - qsTr("Error creating the category") - icon: StandardIcon.Critical - standardButtons: StandardButton.Ok - } + MessageDialog { + id: categoryError + title: isEdit ? + qsTr("Error editing the category") : + qsTr("Error creating the category") + icon: StandardIcon.Critical + standardButtons: StandardButton.Ok } }