[IMP] mail: chat window dropdown show active background

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>
This commit is contained in:
Alexandre Kühn
2023-10-27 13:02:18 +00:00
parent 8bbe9c8be3
commit af3d6bf4a6
3 changed files with 8 additions and 7 deletions
@@ -1,5 +1,5 @@
.o-mail-ChatWindow-command {
&:hover {
&:hover, &.o-active {
background-color: $gray-200;
}
}
@@ -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);
}
}
@@ -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>