fix(StatusChatToolBar): ensure menu button stays highlighted

This introduces a new `popupMenu` property that can be used to pass
down a `StatusPopupMenu` to `StatusChatToolBar`.

The reason this is done is so that we get control over its `onClosed`
handler, which is used to remove the menu button's `highlighted` state.

The `highlighted` state is activated inside the component as well when
it's clicked.

Existing signals like `menuButtonClicked` still exist and can be leveraged
for further logic.

Closes #125
This commit is contained in:
Pascal Precht 2021-06-08 15:45:27 +02:00 committed by Pascal Precht
parent f4d211acbb
commit 90bad9e312
3 changed files with 31 additions and 6 deletions

View File

@ -161,10 +161,9 @@ Rectangle {
notificationCount: 1
onMenuButtonClicked: contextMenu.popup()
onNotificationButtonClicked: notificationCount = 0
StatusPopupMenu {
popupMenu: StatusPopupMenu {
id: contextMenu
StatusMenuItem {

View File

@ -14,10 +14,18 @@ Rectangle {
property alias chatInfoButton: statusChatInfoButton
property int notificationCount: 0
property Component popupMenu
signal chatInfoButtonClicked()
signal menuButtonClicked()
signal notificationButtonClicked()
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
StatusChatInfoButton {
id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter
@ -34,12 +42,18 @@ Rectangle {
spacing: 8
StatusFlatRoundButton {
id: menuButton
width: 32
height: 32
icon.name: "more"
type: StatusFlatRoundButton.Type.Secondary
visible: !!statusChatToolBar.popupMenu
onClicked: statusChatToolBar.menuButtonClicked()
onClicked: {
statusChatToolBar.menuButtonClicked()
highlighted = true
popupMenuSlot.item.popup()
}
}
Rectangle {
@ -47,9 +61,11 @@ Rectangle {
width: 1
color: Theme.palette.directColor7
anchors.verticalCenter: parent.verticalCenter
visible: menuButton.visible && notificationButton.visible
}
StatusFlatRoundButton {
id: notificationButton
width: 32
height: 32
@ -83,5 +99,15 @@ Rectangle {
}
}
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
}
}
}
}

View File

@ -35,6 +35,8 @@ Rectangle {
property alias hovered: sensor.containsMouse
property bool highlighted: false
property int type: StatusFlatRoundButton.Type.Primary
signal pressed(var mouse)
@ -47,8 +49,6 @@ Rectangle {
Secondary
}
/// Implementation
QtObject {
@ -86,7 +86,7 @@ Rectangle {
color: {
if (statusFlatRoundButton.enabled) {
return sensor.containsMouse ? backgroundSettings.hoverColor
return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
: backgroundSettings.color
} else {
return backgroundSettings.disabledColor