feat(StatusChatToolBar): add members and search button

This commit adds the members and search button which are needed for certain
features in Status Desktop. In views where these aren't needed, each button
can be set `visible: false` individually:

```qml
StatusChatToolBar {
    ...
    membersButton.visible: false
    searchButton.visible: false
}
```

Closes #243
This commit is contained in:
Pascal Precht 2021-07-09 13:59:40 +02:00 committed by Pascal Precht
parent ac5c84529e
commit e93dab2ba0
2 changed files with 37 additions and 13 deletions

View File

@ -255,6 +255,8 @@ Rectangle {
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1 chatInfoButton.pinnedMessagesCount: 1
searchButton.visible: false
membersButton.visible: false
notificationCount: 1 notificationCount: 1
onNotificationButtonClicked: notificationCount = 0 onNotificationButtonClicked: notificationCount = 0

View File

@ -14,6 +14,8 @@ Rectangle {
property alias chatInfoButton: statusChatInfoButton property alias chatInfoButton: statusChatInfoButton
property alias menuButton: menuButton property alias menuButton: menuButton
property alias notificationButton: notificationButton property alias notificationButton: notificationButton
property alias membersButton: membersButton
property alias searchButton: searchButton
property int notificationCount: 0 property int notificationCount: 0
property Component popupMenu property Component popupMenu
@ -21,6 +23,8 @@ Rectangle {
signal chatInfoButtonClicked() signal chatInfoButtonClicked()
signal menuButtonClicked() signal menuButtonClicked()
signal notificationButtonClicked() signal notificationButtonClicked()
signal membersButtonClicked()
signal searchButtonClicked()
onPopupMenuChanged: { onPopupMenuChanged: {
if (!!popupMenu) { if (!!popupMenu) {
@ -44,6 +48,24 @@ Rectangle {
spacing: 8 spacing: 8
StatusFlatRoundButton {
id: searchButton
width: 32
height: 32
icon.name: "search"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.searchButtonClicked()
}
StatusFlatRoundButton {
id: membersButton
width: 32
height: 32
icon.name: "group-chat"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.membersButtonClicked()
}
StatusFlatRoundButton { StatusFlatRoundButton {
id: menuButton id: menuButton
width: 32 width: 32
@ -55,8 +77,17 @@ Rectangle {
onClicked: { onClicked: {
statusChatToolBar.menuButtonClicked() statusChatToolBar.menuButtonClicked()
highlighted = true highlighted = true
let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y) popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height) }
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
}
}
} }
} }
@ -65,7 +96,8 @@ Rectangle {
width: 1 width: 1
color: Theme.palette.directColor7 color: Theme.palette.directColor7
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: menuButton.visible && notificationButton.visible visible: notificationButton.visible &&
(menuButton.visible || membersButton.visible || searchButton.visible)
} }
StatusFlatRoundButton { StatusFlatRoundButton {
@ -103,15 +135,5 @@ Rectangle {
} }
} }
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
}
}
}
} }