diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 84e7df72..a3feb053 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -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 + } + } + } } } } diff --git a/sandbox/Models.qml b/sandbox/Models.qml index 9406ed19..a27f95bf 100644 --- a/sandbox/Models.qml +++ b/sandbox/Models.qml @@ -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 + } + ] } } diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml index 15fe3229..8e6ee0e0 100644 --- a/sandbox/controls/ListItems.qml +++ b/sandbox/controls/ListItems.qml @@ -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 } diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml index 89bd0f5a..c93b050b 100644 --- a/src/StatusQ/Components/StatusChatList.qml +++ b/src/StatusQ/Components/StatusChatList.qml @@ -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 diff --git a/src/StatusQ/Components/StatusChatListAndCategories.qml b/src/StatusQ/Components/StatusChatListAndCategories.qml index 2c17e241..c3103fc0 100644 --- a/src/StatusQ/Components/StatusChatListAndCategories.qml +++ b/src/StatusQ/Components/StatusChatListAndCategories.qml @@ -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 } } } diff --git a/src/StatusQ/Components/StatusChatListCategory.qml b/src/StatusQ/Components/StatusChatListCategory.qml index 806136de..eafd5596 100644 --- a/src/StatusQ/Components/StatusChatListCategory.qml +++ b/src/StatusQ/Components/StatusChatListCategory.qml @@ -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 diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml index e2b8b8be..f4440820 100644 --- a/src/StatusQ/Components/StatusChatListItem.qml +++ b/src/StatusQ/Components/StatusChatListItem.qml @@ -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 } } }