feat(Components): introduce `StatusChatListCategory`

A component used to render chat list groups.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListCategory {
    categoryId: ...
    name: "Public"
    opened: true // default `true`

    addButton.[...]: ... // `StatusChatListCategoryItemButton`
    menuButton.[...]: ... // `StatusChatListCategoryItemButton`
    toggleButton.[...]: ... // `StatusChatListCategoryItemButton`

    chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList`
    chatList.selectedChatId: ...
    chatList.onChatItemSelected: ...

    popupMenu: StatusPopupMenu {
        ...
    }
}
```

Closes #123
This commit is contained in:
Pascal Precht 2021-06-08 13:28:06 +02:00 committed by Pascal Precht
parent 72bdd2d9af
commit f4d211acbb
3 changed files with 108 additions and 11 deletions

View File

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

View File

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

View File

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