From b38d3b837ba206c3e342faef3519157d0313b3e5 Mon Sep 17 00:00:00 2001
From: mano-odoo <mano@odoo.com>
Date: Thu, 2 Nov 2023 16:48:42 +0100
Subject: [PATCH] [FIX] web, mail: searchbar facet cog overlapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When discuss is not installed, hovering a facet in the searchbar makes
the cog overlap the icon/text.

This is due to the `o-bg-inherit` class which is set in the mail module.
Therefore if discuss is not installed, the SCSS for the background
doesn't exist.

This commit moves the `o-bg-inherit` as a new utility class `bg-inherit`
, allowing it to be used even if no apps are installed.

Therefore also renaming the occurences of `o-bg-inherit` into
`bg-inherit`.

task-3575837

closes odoo/odoo#140334

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/common/core.scss                | 4 ----
 addons/mail/static/src/core/common/im_status.xml            | 2 +-
 .../mail/static/src/core/common/message_reaction_menu.xml   | 2 +-
 .../mail/static/src/core/web/discuss_sidebar_mailboxes.xml  | 4 ++--
 addons/mail/static/src/core/web/notification_item.xml       | 2 +-
 .../static/src/discuss/core/common/channel_member_list.xml  | 2 +-
 .../src/discuss/core/web/discuss_sidebar_categories.xml     | 6 +++---
 addons/web/static/src/scss/bootstrap_review_backend.scss    | 5 +++++
 addons/web/static/src/search/search_bar/search_bar.xml      | 2 +-
 9 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/addons/mail/static/src/core/common/core.scss b/addons/mail/static/src/core/common/core.scss
index edf4529b370..cb55b44d9a6 100644
--- a/addons/mail/static/src/core/common/core.scss
+++ b/addons/mail/static/src/core/common/core.scss
@@ -2,10 +2,6 @@
     background-color: rgba(0, 0, 0, var(--bg-opacity, 1));
 }
 
-.o-bg-inherit {
-    background-color: inherit;
-}
-
 .o-discuss-badge {
     --o-discuss-badge-bg: #{$o-success}; // sync with --o-navbar-badge-bg
     color: white !important;
diff --git a/addons/mail/static/src/core/common/im_status.xml b/addons/mail/static/src/core/common/im_status.xml
index f8749c76c15..33489dc4c49 100644
--- a/addons/mail/static/src/core/common/im_status.xml
+++ b/addons/mail/static/src/core/common/im_status.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ImStatus">
-        <div class="o-mail-ImStatus d-flex justify-content-center flex-shrink-0 align-items-center rounded-circle o-bg-inherit" t-att-class="props.className" t-att-style="props.style">
+        <div class="o-mail-ImStatus d-flex justify-content-center flex-shrink-0 align-items-center rounded-circle bg-inherit" t-att-class="props.className" t-att-style="props.style">
             <span class="d-flex flex-column" name="icon">
                 <t t-if="!props.thread or !typingService.hasTypingMembers(props.thread)">
                     <i t-if="props.persona.im_status === 'online'" class="fa fa-circle text-success" title="Online" role="img" aria-label="User is online"/>
diff --git a/addons/mail/static/src/core/common/message_reaction_menu.xml b/addons/mail/static/src/core/common/message_reaction_menu.xml
index 0f2966a86fb..236f34530ba 100644
--- a/addons/mail/static/src/core/common/message_reaction_menu.xml
+++ b/addons/mail/static/src/core/common/message_reaction_menu.xml
@@ -18,7 +18,7 @@
                         <span class="d-flex flex-grow-1 align-items-center">
                             <span class="mx-2 text-truncate fs-6" t-esc="persona.name"/>
                             <div class="flex-grow-1"/>
-                            <button t-if="persona.eq(store.self)" class="btn btn-light fa fa-trash rounded-pill o-bg-inherit border-0" title="Remove" t-on-click.stop="() => this.messageService.removeReaction(state.reaction)"/>
+                            <button t-if="persona.eq(store.self)" class="btn btn-light fa fa-trash rounded-pill bg-inherit border-0" title="Remove" t-on-click.stop="() => this.messageService.removeReaction(state.reaction)"/>
                         </span>
                     </div>
                 </div>
diff --git a/addons/mail/static/src/core/web/discuss_sidebar_mailboxes.xml b/addons/mail/static/src/core/web/discuss_sidebar_mailboxes.xml
index c7b72ea1b51..4cc7971c8a0 100644
--- a/addons/mail/static/src/core/web/discuss_sidebar_mailboxes.xml
+++ b/addons/mail/static/src/core/web/discuss_sidebar_mailboxes.xml
@@ -19,12 +19,12 @@
         <button
             class="o-mail-DiscussSidebar-item btn d-flex align-items-center py-1 px-0 border-0 rounded-0 fw-normal text-reset"
             t-att-class="{
-                'o-bg-inherit': mailbox.notEq(store.discuss.thread),
+                'bg-inherit': mailbox.notEq(store.discuss.thread),
                 'o-active': mailbox.eq(store.discuss.thread),
             }"
             t-on-click="(ev) => this.openThread(ev, mailbox)"
         >
-            <ThreadIcon className="'ms-4 me-2 o-bg-inherit'" thread="mailbox"/>
+            <ThreadIcon className="'ms-4 me-2 bg-inherit'" thread="mailbox"/>
             <div class="me-2 text-truncate" t-esc="mailbox.name"/>
             <div t-attf-class="flex-grow-1 {{ mailbox.counter === 0 ? 'me-3': '' }}"/>
             <span
diff --git a/addons/mail/static/src/core/web/notification_item.xml b/addons/mail/static/src/core/web/notification_item.xml
index 382701f9da4..979d6ab04b5 100644
--- a/addons/mail/static/src/core/web/notification_item.xml
+++ b/addons/mail/static/src/core/web/notification_item.xml
@@ -4,7 +4,7 @@
 <t t-name="mail.NotificationItem">
     <ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
         <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': props.muted === 1, 'opacity-50': props.muted === 2 }" t-on-click="onClick" t-ref="root">
-            <div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
+            <div class="position-relative bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
                 <img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
                 <t t-slot="icon"/>
             </div>
diff --git a/addons/mail/static/src/discuss/core/common/channel_member_list.xml b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
index 9dae850552d..fd3f55d8c59 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member_list.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
@@ -28,7 +28,7 @@
 
     <t t-name="discuss.channel_member">
         <div class="o-discuss-ChannelMember d-flex align-items-center p-2 bg-view" t-att-class="{ 'cursor-pointer': canOpenChatWith(member) }" t-on-click.stop="() => this.openChatAvatar(member)">
-            <div class="o-bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
+            <div class="bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
                 <img class="w-100 h-100 rounded o_object_fit_cover"
                      t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
                 <ImStatus persona="member.persona" className="'position-absolute top-100 start-100 translate-middle mt-n1 ms-n1'"/>
diff --git a/addons/mail/static/src/discuss/core/web/discuss_sidebar_categories.xml b/addons/mail/static/src/discuss/core/web/discuss_sidebar_categories.xml
index 09fd22f2722..6f016708cfd 100644
--- a/addons/mail/static/src/discuss/core/web/discuss_sidebar_categories.xml
+++ b/addons/mail/static/src/discuss/core/web/discuss_sidebar_categories.xml
@@ -43,16 +43,16 @@
         <t t-set="counter" t-value="threadService.getCounter(thread)"/>
         <button class="o-mail-DiscussSidebarChannel o-mail-DiscussSidebar-item btn btn-secondary d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 text-reset"
             t-att-class="{
-                'o-bg-inherit': thread.notEq(store.discuss.thread),
+                'bg-inherit': thread.notEq(store.discuss.thread),
                 'o-active': thread.eq(store.discuss.thread),
                 'o-unread': thread.message_unread_counter > 0 and !thread.muteUntilDateTime,
                 'opacity-50': thread.muteUntilDateTime,
             }"
             t-on-click="(ev) => this.openThread(ev, thread)"
         >
-            <div class="o-bg-inherit position-relative d-flex ms-4 flex-shrink-0" style="width:30px;height:30px">
+            <div class="bg-inherit position-relative d-flex ms-4 flex-shrink-0" style="width:30px;height:30px">
                 <img class="w-100 h-100 rounded" t-att-src="thread.imgUrl" alt="Thread Image"/>
-                <ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussSidebarChannel-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle o-bg-inherit'"/>
+                <ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussSidebarChannel-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle bg-inherit'"/>
             </div>
             <span class="ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread fw-bolder': thread.message_unread_counter > 0 and !thread.muteUntilDateTime }">
                 <t t-esc="thread.displayName"/>
diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss
index 14a9098eceb..e87e93fc18e 100644
--- a/addons/web/static/src/scss/bootstrap_review_backend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_backend.scss
@@ -267,6 +267,11 @@ $-o-bg-colors-custom: null;
     }
 }
 
+// 6. Adds a bg-inherit custom utility class
+.bg-inherit {
+    background-color: inherit;
+}
+
 // Cards
 // ============================================================================
 .card-body {
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index ff3c6b1da85..7bb3b368715 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -28,7 +28,7 @@
 
                     <!-- Editable facets' overlay -->
                     <span t-if="facet.domain"
-                        class="position-absolute start-0 top-0 bottom-0 end-0 o-bg-inherit opacity-0 opacity-100-hover"
+                        class="position-absolute start-0 top-0 bottom-0 end-0 bg-inherit opacity-0 opacity-100-hover"
                         t-att-class="{'px-2 transition-base': !facet.icon}"
                         >
                         <i class="fa fa-fw fa-cog"/>