From 90bad9e312d8908b96b1ed9b6fbead8e7b022446 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Tue, 8 Jun 2021 15:45:27 +0200
Subject: [PATCH] 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                           |  3 +-
 src/StatusQ/Components/StatusChatToolBar.qml  | 28 ++++++++++++++++++-
 .../Controls/StatusFlatRoundButton.qml        |  6 ++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index 7f705d59..773c57ef 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -161,10 +161,9 @@ Rectangle {
 
                     notificationCount: 1
 
-                    onMenuButtonClicked: contextMenu.popup()
                     onNotificationButtonClicked: notificationCount = 0
 
-                    StatusPopupMenu {
+                    popupMenu: StatusPopupMenu {
                         id: contextMenu
 
                         StatusMenuItem {
diff --git a/src/StatusQ/Components/StatusChatToolBar.qml b/src/StatusQ/Components/StatusChatToolBar.qml
index ecec95f1..0e32f426 100644
--- a/src/StatusQ/Components/StatusChatToolBar.qml
+++ b/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
+            }
+        }
+    }
 }
 
diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml
index aa0ea77b..4e0056af 100644
--- a/src/StatusQ/Controls/StatusFlatRoundButton.qml
+++ b/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