mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-18 10:32:53 +00:00
refactor(StatusChatList): updates due to chat & communities models refactored
Updated Models.qml for chats and communities models to reflect changes due to refactor in the actual backend.`StatusChatList` and `StatusChatListAndCategories` components updated accordingly.
This commit is contained in:
Sale Djenic
Michał Cieślak
parent
0f3d6fccde
commit
1529070e24
@ -1,7 +1,10 @@
|
||||
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
|
||||
import StatusQ.Platform 0.1
|
||||
@ -182,16 +185,514 @@ Rectangle {
|
||||
|
||||
Component {
|
||||
id: statusAppChatView
|
||||
StatusAppChatView { }
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: searchInputWrapper
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
height: searchInput.height
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: actionButton.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
height: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 0
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
id: actionButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "add"
|
||||
state: "default"
|
||||
|
||||
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
|
||||
states: [
|
||||
State {
|
||||
name: "default"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 0
|
||||
highlighted: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "pressed"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 45
|
||||
highlighted: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "default"
|
||||
to: "pressed"
|
||||
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Clockwise
|
||||
easing.type: Easing.InCubic
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "pressed"
|
||||
to: "default"
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Counterclockwise
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
StatusPopupMenu {
|
||||
id: chatContextMenu
|
||||
|
||||
onOpened: {
|
||||
actionButton.state = "pressed"
|
||||
}
|
||||
|
||||
onClosed: {
|
||||
actionButton.state = "default"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start new chat"
|
||||
icon.name: "private-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start group chat"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Join public chat"
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Communities"
|
||||
icon.name: "communities"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
model: models.demoChatListItems
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < models.demoChatListItems.count; i++) {
|
||||
let item = models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
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: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
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
|
||||
StatusAppCommunityView {
|
||||
communityDetailModalTitle: demoCommunityDetailModal.header.title
|
||||
communityDetailModalImage: demoCommunityDetailModal.header.image.source
|
||||
onChatInfoButtonClicked: {
|
||||
demoCommunityDetailModal.open();
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
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
|
||||
chatInfoButton.onClicked: demoCommunityDetailModal.open()
|
||||
|
||||
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"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
model: models.demoCommunityChatListItems
|
||||
showCategoryActionButtons: true
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
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: "Delete chat"
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: 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
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
|
||||
"",
|
||||
demoCommunityDetailModal.header.image.source);
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusChatToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locationModel: models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: ["John", "Nick", "Maria", "Mike"]
|
||||
delegate: Row {
|
||||
width: parent.width
|
||||
height: 30
|
||||
spacing: 8
|
||||
Rectangle {
|
||||
width: 24
|
||||
height: 24
|
||||
radius: width/2
|
||||
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
|
||||
}
|
||||
StatusBaseText {
|
||||
height: parent.height
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
text: modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,119 +6,188 @@ QtObject {
|
||||
property var demoChatListItems: ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
itemId: "x012340000"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
mentionsCount: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "blue"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
itemId: "x012340001"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
mentionsCount: 1
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
muted: false
|
||||
active: false
|
||||
position: 1
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
itemId: "x012340002"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
position: 2
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
position: 3
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
position: 4
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
isIdenticon: true
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 2
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340003"
|
||||
name: "Black Ops"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "purple"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 3
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340004"
|
||||
name: "Spectacular Growing Otter"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 4
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340005"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "green"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 5
|
||||
subItems: []
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityChatListItems: ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
itemId: "x012340000"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
position: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
position: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
position: 0
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityCategoryItems: ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
itemId: "x012340001"
|
||||
name: "Public"
|
||||
position: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.Unknown0
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 1
|
||||
subItems: [
|
||||
ListElement {
|
||||
itemId: "x012340002"
|
||||
parentItemId: "x012340001"
|
||||
name: "random"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 4
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
},
|
||||
ListElement {
|
||||
itemId: "x012340003"
|
||||
parentItemId: "x012340001"
|
||||
name: "watercooler"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
itemId: "x012340004"
|
||||
name: "Development"
|
||||
position: 1
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.Unknown0
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 2
|
||||
subItems: [
|
||||
ListElement {
|
||||
itemId: "x012340005"
|
||||
parentItemId: "x012340004"
|
||||
name: "language-design"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: true
|
||||
active: false
|
||||
position: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -85,7 +85,8 @@ GridLayout {
|
||||
StatusChatListItem {
|
||||
name: "has-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
badge.value: 1
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
@ -100,7 +101,7 @@ GridLayout {
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
badge.value: 1
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
@ -130,7 +131,7 @@ GridLayout {
|
||||
selected: true
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
badge.value: 1
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -15,8 +15,7 @@ Column {
|
||||
width: 288
|
||||
|
||||
property string categoryId: ""
|
||||
property string selectedChatId: ""
|
||||
property alias chatListItems: delegateModel
|
||||
property var model: []
|
||||
property bool draggableItems: false
|
||||
|
||||
property alias statusChatListItems: statusChatListItems
|
||||
@ -24,8 +23,6 @@ Column {
|
||||
property Component popupMenu
|
||||
|
||||
property var filterFn
|
||||
property var profileImageFn
|
||||
property var chatNameFn
|
||||
|
||||
signal chatItemSelected(string id)
|
||||
signal chatItemUnmuted(string id)
|
||||
@ -39,17 +36,16 @@ Column {
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
|
||||
model: statusChatList.model
|
||||
delegate: Item {
|
||||
id: draggable
|
||||
width: statusChatListItem.width
|
||||
height: statusChatListItem.height
|
||||
|
||||
property alias chatListItem: statusChatListItem
|
||||
|
||||
visible: {
|
||||
if (!!statusChatList.filterFn) {
|
||||
return statusChatList.filterFn(model, statusChatList.categoryId)
|
||||
return statusChatList.filterFn(model)
|
||||
}
|
||||
return true
|
||||
}
|
||||
@ -96,31 +92,19 @@ Column {
|
||||
StatusChatListItem {
|
||||
|
||||
id: statusChatListItem
|
||||
|
||||
property string profileImage: ""
|
||||
|
||||
opacity: dragSensor.active ? 0.0 : 1.0
|
||||
Component.onCompleted: {
|
||||
if (typeof statusChatList.profileImageFn === "function") {
|
||||
profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
|
||||
}
|
||||
}
|
||||
originalOrder: model.position
|
||||
chatId: model.chatId || model.id
|
||||
categoryId: model.categoryId || ""
|
||||
name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
|
||||
type: model.chatType
|
||||
muted: !!model.muted
|
||||
hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
|
||||
hasMention: model.mentionsCount > 0
|
||||
badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
|
||||
model.unviewedMessagesCount || 0 :
|
||||
model.mentionsCount || 0
|
||||
selected: (model.chatId || model.id) === statusChatList.selectedChatId
|
||||
|
||||
icon.color: model.color || ""
|
||||
image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
|
||||
image.source: profileImage || model.identityImage || model.identicon || ""
|
||||
chatId: model.itemId
|
||||
categoryId: model.parentItemId
|
||||
name: model.name
|
||||
type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
|
||||
muted: model.muted
|
||||
hasUnreadMessages: model.hasUnreadMessages
|
||||
notificationsCount: model.notificationsCount
|
||||
selected: model.active
|
||||
icon.color: model.color
|
||||
image.isIdenticon: model.isIdenticon
|
||||
image.source: model.icon
|
||||
|
||||
sensor.cursorShape: dragSensor.cursorShape
|
||||
onClicked: {
|
||||
@ -132,7 +116,7 @@ Column {
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler((model.chatId || model.id))
|
||||
originalOpenHandler(model.itemId)
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,10 +136,10 @@ Column {
|
||||
return
|
||||
}
|
||||
if (!statusChatListItem.selected) {
|
||||
statusChatList.chatItemSelected(model.chatId || model.id)
|
||||
statusChatList.chatItemSelected(model.itemId)
|
||||
}
|
||||
}
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.itemId)
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,9 +188,8 @@ Column {
|
||||
type: draggable.chatListItem.type
|
||||
muted: draggable.chatListItem.muted
|
||||
dragged: true
|
||||
hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
|
||||
hasMention: draggable.chatListItem.hasMention
|
||||
badge.value: draggable.chatListItem.badge.value
|
||||
hasUnreadMessages: model.hasUnreadMessages
|
||||
notificationsCount: model.notificationsCount
|
||||
selected: draggable.chatListItem.selected
|
||||
|
||||
icon.color: draggable.chatListItem.icon.color
|
||||
|
||||
@ -20,11 +20,9 @@ Item {
|
||||
text: "More"
|
||||
}
|
||||
|
||||
property string selectedChatId: ""
|
||||
property var model: []
|
||||
property bool showCategoryActionButtons: false
|
||||
property bool showPopupMenu: true
|
||||
property alias chatList: statusChatList.chatListItems
|
||||
property alias categoryList: delegateModel
|
||||
property alias sensor: sensor
|
||||
property bool draggableItems: false
|
||||
property bool draggableCategories: false
|
||||
@ -71,26 +69,25 @@ Item {
|
||||
StatusChatList {
|
||||
id: statusChatList
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: chatListItems.count > 0
|
||||
selectedChatId: statusChatListAndCategories.selectedChatId
|
||||
visible: statusChatList.model.count > 0
|
||||
onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
|
||||
onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
|
||||
onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
|
||||
draggableItems: statusChatListAndCategories.draggableItems
|
||||
model: statusChatListAndCategories.model
|
||||
filterFn: function (model) {
|
||||
return !!!model.categoryId
|
||||
return (model.subItems.count === 0)
|
||||
}
|
||||
popupMenu: statusChatListAndCategories.chatListPopupMenu
|
||||
}
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
|
||||
model: statusChatListAndCategories.model
|
||||
delegate: Item {
|
||||
id: draggable
|
||||
width: statusChatListCategory.width
|
||||
height: statusChatListCategory.height
|
||||
|
||||
property alias chatListCategory: statusChatListCategory
|
||||
|
||||
StatusChatListCategory {
|
||||
@ -99,7 +96,7 @@ Item {
|
||||
property bool dragActive: false
|
||||
property real startY: 0
|
||||
property real startX: 0
|
||||
|
||||
|
||||
opacity: dragActive ? 0.0 : 1.0
|
||||
|
||||
dragSensor.drag.target: draggedListCategoryLoader.item
|
||||
@ -136,16 +133,15 @@ Item {
|
||||
menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
|
||||
|
||||
originalOrder: model.position
|
||||
categoryId: model.categoryId
|
||||
categoryId: model.itemId
|
||||
name: model.name
|
||||
showActionButtons: statusChatListAndCategories.showCategoryActionButtons
|
||||
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
|
||||
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
|
||||
|
||||
chatList.chatListItems.model: statusChatListAndCategories.chatList.model
|
||||
chatList.selectedChatId: statusChatListAndCategories.selectedChatId
|
||||
chatList.model: model.subItems
|
||||
chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
|
||||
chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
|
||||
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
|
||||
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
|
||||
chatList.draggableItems: statusChatListAndCategories.draggableItems
|
||||
|
||||
popupMenu: statusChatListAndCategories.categoryPopupMenu
|
||||
@ -154,7 +150,7 @@ Item {
|
||||
// Used to set the initial value of "opened" when the
|
||||
// model is bound/changed.
|
||||
opened: {
|
||||
let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
|
||||
let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
|
||||
return openedState !== undefined ? openedState : true // defaults to open
|
||||
}
|
||||
|
||||
@ -163,7 +159,7 @@ Item {
|
||||
// as the state would be lost each time the model is
|
||||
// changed.
|
||||
onOpenedChanged: {
|
||||
statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
|
||||
statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
|
||||
}
|
||||
}
|
||||
|
||||
@ -212,8 +208,7 @@ Item {
|
||||
name: draggable.chatListCategory.name
|
||||
showActionButtons: draggable.chatListCategory.showActionButtons
|
||||
|
||||
chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
|
||||
chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
|
||||
chatList.model: draggable.chatListCategory.chatList.model
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,11 +35,11 @@ Column {
|
||||
StatusChatListCategoryItem {
|
||||
id: statusChatListCategoryItem
|
||||
title: statusChatListCategory.name
|
||||
visible: (model.subItems.count > 0)
|
||||
opened: statusChatListCategory.opened
|
||||
sensor.pressAndHoldInterval: 150
|
||||
|
||||
showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
|
||||
|
||||
highlighted: statusChatListCategory.dragged
|
||||
sensor.onClicked: {
|
||||
if (sensor.enabled) {
|
||||
@ -68,7 +68,7 @@ Column {
|
||||
visible: statusChatListCategory.opened
|
||||
categoryId: statusChatListCategory.categoryId
|
||||
filterFn: function (model) {
|
||||
return !!model.categoryId && model.categoryId == statusChatList.categoryId
|
||||
return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
|
||||
}
|
||||
|
||||
popupMenu: statusChatListCategory.chatListPopupMenu
|
||||
|
||||
@ -18,7 +18,7 @@ Rectangle {
|
||||
property string name: ""
|
||||
property alias badge: statusBadge
|
||||
property bool hasUnreadMessages: false
|
||||
property bool hasMention: false
|
||||
property int notificationsCount: 0
|
||||
property bool muted: false
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 24
|
||||
@ -98,8 +98,8 @@ Rectangle {
|
||||
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
|
||||
return 0.4
|
||||
}
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
return statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
statusBadge.visible ||
|
||||
@ -141,16 +141,16 @@ Rectangle {
|
||||
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
|
||||
return Theme.palette.directColor5
|
||||
}
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
return statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
hoverHander.hovered ||
|
||||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||
}
|
||||
font.weight: !statusChatListItem.muted &&
|
||||
(statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
(statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
statusBadge.visible) ? Font.Bold : Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
@ -189,7 +189,8 @@ Rectangle {
|
||||
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
|
||||
border.width: 4
|
||||
border.color: color
|
||||
visible: statusBadge.value > 0
|
||||
value: statusChatListItem.notificationsCount
|
||||
visible: statusChatListItem.notificationsCount > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user