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
Michał Cieślak
parent
82643816f6
commit
52f5c31b3d
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue