From 5f8a8838f8ce616613180ec7d7e006d97d48cac7 Mon Sep 17 00:00:00 2001
From: Carlos Valverde <cvs@odoo.com>
Date: Fri, 29 Apr 2022 15:29:45 +0000
Subject: [PATCH] [REF] mail: `discuss_sidebar_mailbox` scss refactoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Current SCSS is replaced with global Bootstrap classes, in
order to reduce code lines and to increase performance.

Task-2834810

closes odoo/odoo#90174

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../discuss_sidebar_mailbox.scss              | 57 -------------------
 .../discuss_sidebar_mailbox.xml               | 15 ++---
 2 files changed, 8 insertions(+), 64 deletions(-)
 delete mode 100644 addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.scss

diff --git a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.scss b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.scss
deleted file mode 100644
index 9382695dc7d..00000000000
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_DiscussSidebarMailbox {
-    display: flex;
-    align-items: center;
-    padding: map-get($spacers, 1) 0;
-}
-
-
-.o_DiscussSidebarMailbox_item {
-    margin-left: $o-mail-discuss-sidebar-category-item-margin;
-    margin-right: $o-mail-discuss-sidebar-category-item-margin;
-
-    &:first-child {
-        margin-left: $o-mail-discuss-sidebar-category-item-avatar-left-margin;
-    }
-
-    &:last-child {
-        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
-    }
-}
-
-
-.o_DiscussSidebarMailbox_name {
-    @include text-truncate();
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_DiscussSidebarMailbox {
-    cursor: pointer;
-
-    &.o-active {
-        background-color: gray('200')
-    }
-
-    &:hover {
-        background-color: gray('300');
-    }
-
-    &.o-starred-box {
-        .o_DiscussSidebarMailbox_counter {
-            border-color: gray('400');
-            background-color: gray('400');
-            color: gray('300');
-        }
-    }
-}
-
-.o_DiscussSidebarMailbox_counter {
-    background-color: $o-brand-primary;
-    color: gray('300');
-}
diff --git a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
index a3b5472eb0b..00a2e59f1b5 100644
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
@@ -1,23 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarMailbox" owl="1">
-        <div class="o_DiscussSidebarMailbox"
+        <button class="o_DiscussSidebarMailbox btn d-flex align-items-center py-1 px-0 border-0 rounded-0 font-weight-normal text-dark"
             t-att-class="{
-                'o-active': discussSidebarMailboxView.mailbox === messaging.discuss.thread,
+                'bg-100': discussSidebarMailboxView.mailbox !== messaging.discuss.thread,
+                'o-active bg-200': discussSidebarMailboxView.mailbox === messaging.discuss.thread,
                 'o-starred-box': discussSidebarMailboxView.mailbox === messaging.starred,
             }" t-attf-class="{{ className }}" t-on-click="discussSidebarMailboxView.mailbox.onClick" t-att-data-thread-local-id="discussSidebarMailboxView.mailbox.localId" t-att-data-thread-name="discussSidebarMailboxView.mailbox.displayName"
             t-ref="root"
         >
-            <ThreadIcon className="'o_DiscussSidebarMailbox_item'" thread="discussSidebarMailboxView.mailbox"/>
-            <div class="o_DiscussSidebarMailbox_item o_DiscussSidebarMailbox_name">
+            <ThreadIcon className="'o_DiscussSidebarMailbox_item ms-4 me-2'" thread="discussSidebarMailboxView.mailbox"/>
+            <div class="o_DiscussSidebarMailbox_item o_DiscussSidebarMailbox_name me-2 text-truncate">
                 <t t-esc="discussSidebarMailboxView.mailbox.displayName"/>
             </div>
-            <div class="o-autogrow o_DiscussSidebarMailbox_item"/>
+            <div t-attf-class="o-autogrow o_DiscussSidebarMailbox_item {{ discussSidebarMailboxView.mailbox.counter === 0 ? 'me-3': '' }}"/>
             <t t-if="discussSidebarMailboxView.mailbox.counter > 0">
-                <div class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge badge-pill">
+                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge badge-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'badge-primary' }} ms-1 me-3 border-0">
                     <t t-esc="discussSidebarMailboxView.mailbox.counter"/>
                 </div>
             </t>
-        </div>
+        </button>
     </t>
 </templates>