feat(Components): introduce `StatusContactRequestsIndicatorListItem`

Usage:

```qml
import StatusQ.Components 0.1

StatusContactRequestsIndicatorListItem {
    title: "Contact requests"
    requestsCount: 3
    sensor.onClicked: ...
}
```

Closes #175
This commit is contained in:
Pascal Precht 2021-06-23 14:57:29 +02:00 committed by Michał Cieślak
parent bad322e146
commit 48146b2fcf
5 changed files with 119 additions and 39 deletions

View File

@ -44,7 +44,6 @@ Rectangle {
} }
} }
StatusAppLayout { StatusAppLayout {
id: statusAppLayout id: statusAppLayout
anchors.top: demoApp.top anchors.top: demoApp.top
@ -173,15 +172,24 @@ Rectangle {
text: "Chat" text: "Chat"
} }
StatusChatList { Column {
anchors.top: headline.bottom anchors.top: headline.bottom
anchors.topMargin: 16 anchors.topMargin: 16
anchors.bottom: parent.bottom width: parent.width
spacing: 8
StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter
title: "Contact requests"
requestsCount: 3
sensor.onClicked: demoContactRequestsModal.open()
}
StatusChatList {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
chatListItems.model: demoChatListItems chatListItems.model: demoChatListItems
selectedChatId: "0" selectedChatId: "0"
onChatItemSelected: selectedChatId = id onChatItemSelected: selectedChatId = id
onChatItemUnmuted: { onChatItemUnmuted: {
for (var i = 0; i < demoChatListItems.count; i++) { for (var i = 0; i < demoChatListItems.count; i++) {
@ -228,6 +236,7 @@ Rectangle {
} }
} }
} }
}
rightPanel: Item { rightPanel: Item {
anchors.fill: parent anchors.fill: parent
@ -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 { StatusModal {
id: demoCommunityDetailModal id: demoCommunityDetailModal

View File

@ -243,4 +243,8 @@ GridLayout {
iconButton.onClicked: tooltip.visible = !tooltip.visible iconButton.onClicked: tooltip.visible = !tooltip.visible
} }
StatusContactRequestsIndicatorListItem {
title: "Contact requests"
requestsCount: 3
}
} }

View File

@ -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
}
]
}

View File

@ -8,6 +8,7 @@ StatusChatListCategory 0.1 StatusChatListCategory.qml
StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
StatusChatToolBar 0.1 StatusChatToolBar.qml StatusChatToolBar 0.1 StatusChatToolBar.qml
StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusListItem 0.1 StatusListItem.qml StatusListItem 0.1 StatusListItem.qml

View File

@ -21,6 +21,7 @@
<file>src/StatusQ/Components/StatusChatListItem.qml</file> <file>src/StatusQ/Components/StatusChatListItem.qml</file>
<file>src/StatusQ/Components/StatusChatListAndCategories.qml</file> <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
<file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file> <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
<file>src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
<file>src/StatusQ/Components/StatusNavigationListItem.qml</file> <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
<file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file> <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
<file>src/StatusQ/Components/StatusChatToolBar.qml</file> <file>src/StatusQ/Components/StatusChatToolBar.qml</file>