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 `CreateCategoryPopup` with `StatusModal`

This commit is contained in:
Pascal Precht 2021-07-09 12:09:03 +02:00 committed by Iuri Matias
parent 080767c338
commit 18a042fdf1
3 changed files with 165 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

71
ui/app/AppLayouts/Chat/CommunityComponents/CommunityChannel.qml
View File

@ -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)
}
}
}

178
ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml
View File

@ -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,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 {
id: chatsTitle
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 32
height: 34
StatusBaseText {
text: qsTr("Channels")
anchors.top: sep.bottom
anchors.topMargin: Style.current.smallPadding
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
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
visible: popup.isEdit ? model.categoryId === popup.categoryId || model.categoryId === "" : model.categoryId === ""
onItemChecked: function(channelId, itemChecked){
var idx = channels.indexOf(channelId)
if(itemChecked){
onCheckedChanged: {
var idx = channels.indexOf(model.id)
if(checked){
if(idx === -1){
channels.push(channelId)
channels.push(model.id)
}
} else {
if(idx > -1){
@ -118,58 +147,37 @@ ModalPopup {
}
}
}
]
}
}
Separator {
id: sep2
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
StatusModalDivider {
visible: deleteCategoryButton.visible
topPadding: 8
bottomPadding: 8
}
Item {
id: deleteCategory
StatusListItem {
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
StatusRoundButton {
id: deleteBtn
title: qsTr("Delete category")
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: {
type: StatusListItem.Type.Danger
sensor.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)
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 {
@ -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
}
}
}