From af3d6bf4a6854fbd260960636df175ecfa6b6471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Thu, 26 Oct 2023 16:29:33 +0200
Subject: [PATCH] [IMP] mail: chat window dropdown show active background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, when the command dropdown was open by clicking
on avatar/chat window header name, the clickable area was the same
as the rest of chat window header.

As a result, the dropdown was shown without some UI to help see the
toggler that is responsible from this dropdown.

This commit highlights the toggler of dropdown when it is open, so
that it looks nicer when the dropdown is open as we clearly see the
toggler of this dropdown.

closes odoo/odoo#139920

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../mail/static/src/core/common/chat_window.dark.scss |  2 +-
 addons/mail/static/src/core/common/chat_window.scss   | 11 ++++++-----
 addons/mail/static/src/core/common/chat_window.xml    |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/addons/mail/static/src/core/common/chat_window.dark.scss b/addons/mail/static/src/core/common/chat_window.dark.scss
index fcf5b52d7fb..69b354b89b8 100644
--- a/addons/mail/static/src/core/common/chat_window.dark.scss
+++ b/addons/mail/static/src/core/common/chat_window.dark.scss
@@ -1,5 +1,5 @@
 .o-mail-ChatWindow-command {
-    &:hover {
+    &:hover, &.o-active {
         background-color: $gray-200;
     }
 }
diff --git a/addons/mail/static/src/core/common/chat_window.scss b/addons/mail/static/src/core/common/chat_window.scss
index e0eb91c800f..b38335b14a0 100644
--- a/addons/mail/static/src/core/common/chat_window.scss
+++ b/addons/mail/static/src/core/common/chat_window.scss
@@ -12,11 +12,12 @@
         height: $o-mail-Discuss-headerHeight;
     }
 
-    .o-mail-ChatWindow-command {
-        color: inherit !important;
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-        }
+}
+
+.o-mail-ChatWindow-command {
+    color: inherit !important;
+    &:hover, &.o-active {
+        background-color: rgba(0, 0, 0, 0.05);
     }
 }
 
diff --git a/addons/mail/static/src/core/common/chat_window.xml b/addons/mail/static/src/core/common/chat_window.xml
index 6ac41b4a922..364e94344d3 100644
--- a/addons/mail/static/src/core/common/chat_window.xml
+++ b/addons/mail/static/src/core/common/chat_window.xml
@@ -15,7 +15,7 @@
     >
         <div class="o-mail-ChatWindow-header d-flex align-items-center flex-shrink-0 bg-100" t-on-click="onClickHeader" t-att-class="{ 'cursor-pointer': !ui.isSmall, 'border-bottom': !props.chatWindow.folded }">
             <t t-if="threadActions.actions.length > 3">
-                <Dropdown position="'bottom-start'" onStateChanged="state => this.onActionsMenuStateChanged(state)" togglerClass="`o-mail-ChatWindow-command d-flex btn align-items-center text-truncate p-0 p-1 ${ !ui.isSmall ? 'ms-2' : '' }`" menuClass="'d-flex flex-column py-0'" class="'d-flex text-truncate'" disabled="state.editingName" title="actionsMenuTitleText">
+                <Dropdown position="'bottom-start'" onStateChanged="state => this.onActionsMenuStateChanged(state)" togglerClass="`o-mail-ChatWindow-command d-flex btn align-items-center text-truncate p-0 p-1 ${ !ui.isSmall ? 'ms-2' : '' } ${state.actionsMenuOpened ? 'o-active' : ''}`" menuClass="'d-flex flex-column py-0'" class="'d-flex text-truncate'" disabled="state.editingName" title="actionsMenuTitleText">
                     <t t-set-slot="toggler">
                         <t t-call="mail.ChatWindow.headerContent"/>
                     </t>