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

sandbox/DemoApp.qml

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

src/StatusQ/Components/StatusChatToolBar.qml

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

src/StatusQ/Controls/StatusFlatRoundButton.qml

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