diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index e7b49e3b..7f705d59 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -210,20 +210,56 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter spacing: 4 - StatusChatListCategoryItem { - id: publicCategory - title: "Public" - onClicked: opened = !opened - onToggleButtonClicked: opened = !opened + StatusChatList { + id: statusChatList + anchors.horizontalCenter: parent.horizontalCenter + chatListItems.model: demoCommunityChatListItems } - StatusChatList { - anchors.horizontalCenter: parent.horizontalCenter + StatusChatListCategory { + name: "Public" - selectedChatId: "0" - chatListItems.model: demoCommunityChatListItems - onChatItemSelected: selectedChatId = id - visible: publicCategory.opened + chatList.chatListItems.model: demoCommunityChatListItems + chatList.selectedChatId: "0" + chatList.onChatItemSelected: chatList.selectedChatId = id + popupMenu: categoryPopupCmp + } + + StatusChatListCategory { + name: "Development" + + chatList.chatListItems.model: demoCommunityChatListItems + chatList.onChatItemSelected: chatList.selectedChatId = id + popupMenu: categoryPopupCmp + } + } + + Component { + id: categoryPopupCmp + + StatusPopupMenu { + StatusMenuItem { + text: "Mute Category" + icon.name: "notification" + } + + StatusMenuItem { + text: "Mark as Read" + icon.name: "checkmark-circle" + } + + StatusMenuItem { + text: "Edit Category" + icon.name: "edit" + } + + StatusMenuSeparator {} + + StatusMenuItem { + text: "Delete Category" + icon.name: "delete" + type: StatusMenuItem.Type.Danger + } } } } diff --git a/src/StatusQ/Components/StatusChatListCategory.qml b/src/StatusQ/Components/StatusChatListCategory.qml new file mode 100644 index 00000000..00d1337a --- /dev/null +++ b/src/StatusQ/Components/StatusChatListCategory.qml @@ -0,0 +1,60 @@ +import QtQuick 2.13 + +import StatusQ.Components 0.1 +import StatusQ.Popups 0.1 + +Column { + id: statusChatListCategory + + spacing: 0 + + property string categoryId: "" + property string name: "" + property bool opened: true + + property alias addButton: statusChatListCategoryItem.addButton + property alias menuButton: statusChatListCategoryItem.menuButton + property alias toggleButton: statusChatListCategoryItem.toggleButton + property alias chatList: statusChatList + + property Component popupMenu + + onPopupMenuChanged: { + if (!!popupMenu) { + popupMenuSlot.sourceComponent = popupMenu + } + } + + StatusChatListCategoryItem { + id: statusChatListCategoryItem + title: statusChatListCategory.name + opened: statusChatListCategory.opened + + onClicked: statusChatListCategory.opened = !opened + onToggleButtonClicked: statusChatListCategory.opened = !opened + onMenuButtonClicked: { + highlighted = true + menuButton.highlighted = true + popupMenuSlot.item.popup() + } + } + + StatusChatList { + id: statusChatList + + anchors.horizontalCenter: parent.horizontalCenter + visible: statusChatListCategory.opened + } + + Loader { + id: popupMenuSlot + active: !!statusChatListCategory.popupMenu + onLoaded: { + popupMenuSlot.item.closeHandler = function () { + statusChatListCategoryItem.highlighted = false + statusChatListCategoryItem.menuButton.highlighted = false + } + } + } +} + diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir index dc0bf29e..d6677654 100644 --- a/src/StatusQ/Components/qmldir +++ b/src/StatusQ/Components/qmldir @@ -3,6 +3,7 @@ module StatusQ.Components StatusBadge 0.1 StatusBadge.qml StatusChatList 0.1 StatusChatList.qml StatusChatListItem 0.1 StatusChatListItem.qml +StatusChatListCategory 0.1 StatusChatListCategory.qml StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml StatusChatToolBar 0.1 StatusChatToolBar.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml