mirror of
https://github.com/status-im/StatusQ.git
synced 2025-02-24 10:38:28 +00:00
7bca27455f
This is a wrapping component that can be used to render community chat
lists and categories. It takes care of rendering categories, the top
chat list, as well as becominng scrollable in case the content outgrows
the available space.
Usage:
```qml
import StatusQ.Components 0.1
StatusChatListAndCategories {
chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out
categoryListModel: ... // available categories (need to have `id` and `name`)
selectedChatId: ...
showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels
onChatItemSelected: ... // `id` is available for selected chat id
categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items
property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items
...
}
popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click
}
```
Closes #133
457 lines
14 KiB
QML
457 lines
14 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Controls 2.14
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Layout 0.1
|
|
import StatusQ.Popups 0.1
|
|
|
|
Rectangle {
|
|
id: demoApp
|
|
height: 602
|
|
width: 902
|
|
border.width: 1
|
|
border.color: Theme.palette.baseColor2
|
|
|
|
Row {
|
|
anchors.top: demoApp.top
|
|
anchors.left: demoApp.left
|
|
anchors.topMargin: 14
|
|
anchors.leftMargin: 14
|
|
|
|
spacing: 6
|
|
z: statusAppLayout.z + 1
|
|
|
|
Rectangle {
|
|
color: "#E24640"
|
|
height: 12
|
|
width: 12
|
|
radius: 6
|
|
}
|
|
Rectangle {
|
|
color: "#FFC12F"
|
|
height: 12
|
|
width: 12
|
|
radius: 6
|
|
}
|
|
Rectangle {
|
|
color: "#2ACB42"
|
|
height: 12
|
|
width: 12
|
|
radius: 6
|
|
}
|
|
}
|
|
|
|
|
|
StatusAppLayout {
|
|
id: statusAppLayout
|
|
anchors.top: demoApp.top
|
|
anchors.left: demoApp.left
|
|
anchors.topMargin: demoApp.border.width
|
|
anchors.leftMargin: demoApp.border.width
|
|
|
|
height: demoApp.height - demoApp.border.width * 2
|
|
width: demoApp.width - demoApp.border.width * 2
|
|
|
|
appNavBar: StatusAppNavBar {
|
|
|
|
id: navBar
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
icon.name: "chat"
|
|
tooltip.text: "Chat"
|
|
checked: appView.sourceComponent == statusAppChatView
|
|
onClicked: {
|
|
appView.sourceComponent = statusAppChatView
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
ListElement {
|
|
name: "Status Community"
|
|
tooltipText: "Status Community"
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
id: communityBtn
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
name: model.name
|
|
tooltip.text: model.tooltipText
|
|
icon.color: Theme.palette.miscColor6
|
|
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
|
checked: appView.sourceComponent == statusAppCommunityView
|
|
onClicked: {
|
|
appView.sourceComponent = statusAppCommunityView
|
|
}
|
|
|
|
popupMenu: StatusPopupMenu {
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Invite People")
|
|
icon.name: "share-ios"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("View Community")
|
|
icon.name: "group"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Edit Community")
|
|
icon.name: "edit"
|
|
enabled: false
|
|
}
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Leave Community")
|
|
icon.name: "arrow-right"
|
|
icon.width: 14
|
|
iconRotation: 180
|
|
type: StatusMenuItem.Type.Danger
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
navBarTabButtons: [
|
|
StatusNavBarTabButton {
|
|
icon.name: "wallet"
|
|
tooltip.text: "Wallet"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "browser"
|
|
tooltip.text: "Browser"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "status-update"
|
|
tooltip.text: "Timeline"
|
|
},
|
|
StatusNavBarTabButton {
|
|
id: profileNavButton
|
|
icon.name: "profile"
|
|
badge.visible: true
|
|
badge.anchors.rightMargin: 4
|
|
badge.anchors.topMargin: 5
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
|
|
badge.border.width: 2
|
|
|
|
tooltip.text: "Profile"
|
|
}
|
|
]
|
|
}
|
|
|
|
appView: Loader {
|
|
id: appView
|
|
anchors.fill: parent
|
|
sourceComponent: statusAppChatView
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: statusAppChatView
|
|
|
|
StatusAppTwoPanelLayout {
|
|
|
|
leftPanel: StatusChatListAndCategories {
|
|
anchors.fill: parent
|
|
anchors.topMargin: 64
|
|
|
|
chatList.model: demoChatListItems
|
|
selectedChatId: "0"
|
|
onChatItemSelected: selectedChatId = id
|
|
onChatItemUnmuted: {
|
|
for (var i = 0; i < demoChatListItems.count; i++) {
|
|
let item = demoChatListItems.get(i);
|
|
if (item.chatId === id) {
|
|
demoChatListItems.setProperty(i, "muted", false)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
rightPanel: Item {
|
|
anchors.fill: parent
|
|
|
|
StatusChatToolBar {
|
|
anchors.top: parent.top
|
|
width: parent.width
|
|
|
|
chatInfoButton.title: "Amazing Funny Squirrel"
|
|
chatInfoButton.subTitle: "Contact"
|
|
chatInfoButton.icon.color: Theme.palette.miscColor7
|
|
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
|
chatInfoButton.pinnedMessagesCount: 1
|
|
|
|
notificationCount: 1
|
|
|
|
onNotificationButtonClicked: notificationCount = 0
|
|
|
|
popupMenu: StatusPopupMenu {
|
|
id: contextMenu
|
|
|
|
StatusMenuItem {
|
|
text: "Mute Chat"
|
|
icon.name: "notification"
|
|
}
|
|
StatusMenuItem {
|
|
text: "Mark as Read"
|
|
icon.name: "checkmark-circle"
|
|
}
|
|
StatusMenuItem {
|
|
text: "Clear History"
|
|
icon.name: "close-circle"
|
|
}
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
StatusMenuItem {
|
|
text: "Leave Chat"
|
|
icon.name: "arrow-right"
|
|
icon.width: 14
|
|
iconRotation: 180
|
|
type: StatusMenuItem.Type.Danger
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: statusAppCommunityView
|
|
|
|
StatusAppTwoPanelLayout {
|
|
|
|
|
|
|
|
|
|
leftPanel: Item {
|
|
anchors.fill: parent
|
|
|
|
StatusChatInfoToolBar {
|
|
id: statusChatInfoToolBar
|
|
anchors.top: parent.top
|
|
|
|
chatInfoButton.title: "Cryptokitties"
|
|
chatInfoButton.subTitle: "128 Members"
|
|
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
|
chatInfoButton.icon.color: Theme.palette.miscColor6
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
popupMenu: StatusPopupMenu {
|
|
|
|
StatusMenuItem {
|
|
text: "Create channel"
|
|
icon.name: "channel"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: "Create category"
|
|
icon.name: "channel-category"
|
|
}
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
StatusMenuItem {
|
|
text: "Invite people"
|
|
icon.name: "share-ios"
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
StatusChatListAndCategories {
|
|
anchors.top: statusChatInfoToolBar.bottom
|
|
anchors.topMargin: 8
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width
|
|
|
|
chatList.model: demoCommunityChatListItems
|
|
categoryList.model: demoCommunityCategoryItems
|
|
|
|
showCategoryActionButtons: true
|
|
onChatItemSelected: selectedChatId = id
|
|
|
|
categoryPopupMenu: StatusPopupMenu {
|
|
|
|
property string categoryId
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
|
|
popupMenu: StatusPopupMenu {
|
|
StatusMenuItem {
|
|
text: "Create channel"
|
|
icon.name: "channel"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: "Create category"
|
|
icon.name: "channel-category"
|
|
}
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
StatusMenuItem {
|
|
text: "Invite people"
|
|
icon.name: "share-ios"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
rightPanel: Item {
|
|
anchors.fill: parent
|
|
|
|
StatusChatToolBar {
|
|
anchors.top: parent.top
|
|
width: parent.width
|
|
|
|
chatInfoButton.title: "general"
|
|
chatInfoButton.subTitle: "Community Chat"
|
|
chatInfoButton.icon.color: Theme.palette.miscColor6
|
|
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ListModel {
|
|
id: demoChatListItems
|
|
ListElement {
|
|
chatId: "0"
|
|
name: "#status"
|
|
chatType: StatusChatListItem.Type.PublicChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
hasMention: false
|
|
unreadMessagesCount: 0
|
|
iconColor: "blue"
|
|
}
|
|
ListElement {
|
|
chatId: "1"
|
|
name: "#status-desktop"
|
|
chatType: StatusChatListItem.Type.PublicChat
|
|
muted: false
|
|
hasUnreadMessages: true
|
|
iconColor: "red"
|
|
unreadMessagesCount: 1
|
|
}
|
|
ListElement {
|
|
chatId: "2"
|
|
name: "Amazing Funny Squirrel"
|
|
chatType: StatusChatListItem.Type.OneToOneChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
iconColor: "green"
|
|
identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
|
unreadMessagesCount: 0
|
|
}
|
|
ListElement {
|
|
chatId: "3"
|
|
name: "Black Ops"
|
|
chatType: StatusChatListItem.Type.GroupChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
iconColor: "purple"
|
|
unreadMessagesCount: 0
|
|
}
|
|
ListElement {
|
|
chatId: "4"
|
|
name: "Spectacular Growing Otter"
|
|
chatType: StatusChatListItem.Type.OneToOneChat
|
|
muted: true
|
|
hasUnreadMessages: false
|
|
iconColor: "Orange"
|
|
unreadMessagesCount: 0
|
|
}
|
|
}
|
|
|
|
ListModel {
|
|
id: demoCommunityChatListItems
|
|
ListElement {
|
|
chatId: "0"
|
|
name: "general"
|
|
chatType: StatusChatListItem.Type.CommunityChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
hasMention: false
|
|
unreadMessagesCount: 0
|
|
iconColor: "orange"
|
|
}
|
|
ListElement {
|
|
chatId: "1"
|
|
name: "random"
|
|
chatType: StatusChatListItem.Type.CommunityChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
hasMention: false
|
|
unreadMessagesCount: 0
|
|
iconColor: "orange"
|
|
categoryId: "public"
|
|
}
|
|
ListElement {
|
|
chatId: "2"
|
|
name: "watercooler"
|
|
chatType: StatusChatListItem.Type.CommunityChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
hasMention: false
|
|
unreadMessagesCount: 0
|
|
iconColor: "orange"
|
|
categoryId: "public"
|
|
}
|
|
ListElement {
|
|
chatId: "3"
|
|
name: "language-design"
|
|
chatType: StatusChatListItem.Type.CommunityChat
|
|
muted: false
|
|
hasUnreadMessages: false
|
|
hasMention: false
|
|
unreadMessagesCount: 0
|
|
iconColor: "orange"
|
|
categoryId: "dev"
|
|
}
|
|
}
|
|
|
|
ListModel {
|
|
id: demoCommunityCategoryItems
|
|
ListElement {
|
|
categoryId: "public"
|
|
name: "Public"
|
|
}
|
|
ListElement {
|
|
categoryId: "dev"
|
|
name: "Development"
|
|
}
|
|
}
|
|
}
|