diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 71110393..244a58ac 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -44,7 +44,6 @@ Rectangle { } } - StatusAppLayout { id: statusAppLayout anchors.top: demoApp.top @@ -173,57 +172,67 @@ Rectangle { text: "Chat" } - StatusChatList { + Column { anchors.top: headline.bottom anchors.topMargin: 16 - anchors.bottom: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + spacing: 8 - chatListItems.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) - } - } + StatusContactRequestsIndicatorListItem { + anchors.horizontalCenter: parent.horizontalCenter + title: "Contact requests" + requestsCount: 3 + sensor.onClicked: demoContactRequestsModal.open() } - popupMenu: StatusPopupMenu { + StatusChatList { + anchors.horizontalCenter: parent.horizontalCenter - property string chatId - - StatusMenuItem { - text: "View Profile" - icon.name: "group-chat" + chatListItems.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) + } + } } - StatusMenuSeparator {} + popupMenu: StatusPopupMenu { - StatusMenuItem { - text: "Mute chat" - icon.name: "notification" - } + property string chatId - StatusMenuItem { - text: "Mark as Read" - icon.name: "checkmark-circle" - } + StatusMenuItem { + text: "View Profile" + icon.name: "group-chat" + } - StatusMenuItem { - text: "Clear history" - icon.name: "close-circle" - } + StatusMenuSeparator {} - StatusMenuSeparator {} + StatusMenuItem { + text: "Mute chat" + icon.name: "notification" + } - StatusMenuItem { - text: "Delete chat" - icon.name: "delete" - type: StatusMenuItem.Type.Danger + 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 + } } } } @@ -508,6 +517,41 @@ Rectangle { } } + StatusModal { + id: demoContactRequestsModal + anchors.centerIn: parent + + header.title: "Contact Requests" + headerActionButton: StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 32 + height: 32 + + icon.width: 20 + icon.height: 20 + icon.name: "notification" + } + + content: StatusBaseText { + anchors.centerIn: parent + text: "Contact request will be shown here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + rightButtons: [ + StatusButton { + text: "Decline all" + type: StatusBaseButton.Type.Danger + onClicked: demoContactRequestsModal.close() + }, + StatusButton { + text: "Accept all" + onClicked: demoContactRequestsModal.close() + } + ] + } + StatusModal { id: demoCommunityDetailModal diff --git a/sandbox/ListItems.qml b/sandbox/ListItems.qml index 72e07fe2..6c24063b 100644 --- a/sandbox/ListItems.qml +++ b/sandbox/ListItems.qml @@ -243,4 +243,8 @@ GridLayout { iconButton.onClicked: tooltip.visible = !tooltip.visible } + StatusContactRequestsIndicatorListItem { + title: "Contact requests" + requestsCount: 3 + } } diff --git a/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml new file mode 100644 index 00000000..fd579613 --- /dev/null +++ b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml @@ -0,0 +1,30 @@ +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +StatusListItem { + id: statusContactRequestsListItem + + implicitHeight: 64 + implicitWidth: 288 + + color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" + + property int requestsCount: 0 + + components: [ + StatusBadge { + value: statusContactRequestsListItem.requestsCount + anchors.verticalCenter: parent.verticalCenter + border.width: 4 + border.color: color + }, + StatusIcon { + icon: "chevron-down" + rotation: 270 + color: Theme.palette.baseColor1 + } + ] +} + + diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir index 5f51052a..72521360 100644 --- a/src/StatusQ/Components/qmldir +++ b/src/StatusQ/Components/qmldir @@ -8,6 +8,7 @@ StatusChatListCategory 0.1 StatusChatListCategory.qml StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml StatusChatToolBar 0.1 StatusChatToolBar.qml +StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusListItem 0.1 StatusListItem.qml diff --git a/statusq.qrc b/statusq.qrc index 7ac4c3df..4ad461a8 100644 --- a/statusq.qrc +++ b/statusq.qrc @@ -21,6 +21,7 @@ src/StatusQ/Components/StatusChatListItem.qml src/StatusQ/Components/StatusChatListAndCategories.qml src/StatusQ/Components/StatusChatInfoToolBar.qml + src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml src/StatusQ/Components/StatusNavigationListItem.qml src/StatusQ/Components/StatusNavigationPanelHeadline.qml src/StatusQ/Components/StatusChatToolBar.qml