feat(Components): introduce `StatusChatList`

This commit introduce a new `StautsChatList` component that can be used
to render `StatusChatListItem`s, typically for chat and community views.

The component expects a `chatListItems.model` that has the following properties:

```qml
ListModel {
		ListElement {
				chatId: "0"
				name: "#status"
				chatType: StatusChatListItem.Type.PublicChat
				muted: false
				hasUnreadMessages: false
				hasMention: false
				unreadMessagesCount: 0
				iconColor: "blue"
		}
		...
}
```

It also emits two possible signals:

- `onChatItemSelected(string id)`
- `onChatItemUnmuted(string id)`

Usage:

```qml
import StatusQ.Components 0.1

StatusChatList {
		selectedChatId: "0"
		chatListItems.model: demoChatListItems

		onChatItemSelected: ...
		onChatItemUnmuted: ...
}
```

Closes #100
This commit is contained in:
Pascal Precht 2021-06-07 11:16:18 +02:00 committed by Michał Cieślak
parent 82643816f6
commit 52f5c31b3d
4 changed files with 102 additions and 31 deletions

View File

@ -127,42 +127,22 @@ Rectangle {
leftPanel: Item {
anchors.fill: parent
Column {
StatusChatList {
anchors.top: parent.top
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
StatusChatListItem {
name: "#status"
type: StatusChatListItem.Type.PublicChat
selectedChatId: "0"
chatListItems.model: demoChatListItems
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)
}
StatusChatListItem {
name: "#status-desktop"
type: StatusChatListItem.Type.PublicChat
hasUnreadMessages: true
badge.value: 1
}
StatusChatListItem {
name: "Amazing Funny Squirrel"
type: StatusChatListItem.Type.OneToOneChat
selected: true
}
StatusChatListItem {
name: "Black Ops"
type: StatusChatListItem.Type.GroupChat
}
StatusChatListItem {
name: "Spectacular Growling Otter"
type: StatusChatListItem.Type.OneToOneChat
muted: true
}
}
}
@ -263,4 +243,55 @@ Rectangle {
}
}
}
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
}
}
}

View File

@ -0,0 +1,38 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Column {
id: statusChatList
spacing: 4
property string selectedChatId: ""
property alias chatListItems: statusChatListItems
signal chatItemSelected(string id)
signal chatItemUnmuted(string id)
Repeater {
id: statusChatListItems
delegate: StatusChatListItem {
chatId: model.chatId
name: model.name
type: model.chatType
muted: !!model.muted
hasUnreadMessages: !!model.hasUnreadMessages
hasMention: !!model.hasMention
badge.value: model.unreadMessagesCount || 0
selected: model.chatId === statusChatList.selectedChatId
icon.color: model.iconColor || ""
image.source: model.identicon || ""
onClicked: statusChatList.chatItemSelected(model.chatId)
onUnmute: statusChatList.chatItemUnmuted(model.chatId)
}
}
}

View File

@ -7,6 +7,7 @@ import StatusQ.Controls 0.1
Rectangle {
id: statusChatListItem
property string chatId: ""
property string name: ""
property alias badge: statusBadge
property bool hasUnreadMessages: false

View File

@ -1,6 +1,7 @@
module StatusQ.Components
StatusBadge 0.1 StatusBadge.qml
StatusChatList 0.1 StatusChatList.qml
StatusChatListItem 0.1 StatusChatListItem.qml
StatusChatToolBar 0.1 StatusChatToolBar.qml
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml