From 9ee2f5472aaeb902c4d9634818d75a9da458b19d Mon Sep 17 00:00:00 2001
From: Carlos Valverde <cvs@odoo.com>
Date: Tue, 26 Apr 2022 12:45:01 +0000
Subject: [PATCH] [REF] mail: `discuss_sidebar_category` scss refactoring

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

Task-2825261

Part-of: odoo/odoo#88925
---
 .../discuss_sidebar_category.scss             | 87 -------------------
 .../discuss_sidebar_category.xml              | 19 ++--
 2 files changed, 10 insertions(+), 96 deletions(-)

diff --git a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.scss b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.scss
index a0cbbd7a971..d24f7d0be98 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.scss
+++ b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.scss
@@ -1,95 +1,8 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_DiscussSidebarCategory_addingItemInput {
-    margin-left: $o-mail-discuss-sidebar-category-item-avatar-left-margin;
-    margin-right: $o-mail-discuss-sidebar-scrollbar-width;
-}
-
-.o_DiscussSidebarCategory_command {
-    margin-left: $o-mail-discuss-sidebar-category-item-margin;
-    margin-right:$o-mail-discuss-sidebar-category-item-margin;
-
-    &:first-child {
-        margin-left: 0;
-    }
-
-    &:last-child {
-        margin-right: 0;
-    }
-}
-
-.o_DiscussSidebarCategory_commands {
-    display: flex;
-}
-
-.o_DiscussSidebarCategory_header {
-    display: flex;
-    align-items: center;
-    margin: 5px 0;
-}
-
-.o_DiscussSidebarCategory_headerItem {
-    margin-left: $o-mail-discuss-sidebar-category-item-margin;
-    margin-right: $o-mail-discuss-sidebar-category-item-margin;
-
-    &:last-child {
-        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
-    }
-}
-
-.o_DiscussSidebarCategory_title {
-    display: flex;
-    align-items: baseline;
-}
-
 .o_DiscussSidebarCategory_titleIcon {
     width: $o-mail-discuss-sidebar-category-title-icon-size;
     height: $o-mail-discuss-sidebar-category-title-icon-size;
 }
 
-
-// ------------------------------------------------------------------
-// style
-// ------------------------------------------------------------------
-
-.o_DiscussSidebarCategory_addingItemInput {
-    outline: none;
-}
-
-.o_DiscussSidebarCategory_command {
-    cursor: pointer;
-
-    &:not(:hover) {
-        color: gray('600');
-    }
-}
-
-.o_DiscussSidebarCategory_counter {
-    background-color: $o-brand-primary;
-    color: gray('300');
-}
-
 .o_DiscussSidebarCategory_headerItem {
     user-select: none;
 }
-
-.o_DiscussSidebarCategory_title {
-    cursor: pointer;
-
-    &:not(:hover)
-    {
-        color: gray('600');
-    }
-}
-
-.o_DiscussSidebarCategory_titleIcon {
-    font-size: 0.75em;
-}
-
-.o_DiscussSidebarCategory_titleText {
-    font-size: $font-size-sm;
-    text-transform: uppercase;
-    font-weight: bolder;
-}
diff --git a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
index 8aa0f62cd5e..5128f91afc8 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
@@ -3,23 +3,24 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCategory" owl="1">
         <t t-if="category">
+            <t t-set="o_DiscussSidebarCategory_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
             <div class="o_DiscussSidebarCategory" t-attf-class="{{ className }}" t-att-data-category-local-id="category.localId" t-ref="root">
-                <div class="o_DiscussSidebarCategory_header">
-                    <div class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem" t-on-click="category.onClick">
-                        <i class="o_DiscussSidebarCategory_titleIcon" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
-                        <span class="o_DiscussSidebarCategory_titleText"><t t-esc="category.name"/></span>
+                <div class="o_DiscussSidebarCategory_header d-flex align-items-center my-1">
+                    <div t-attf-class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem d-flex align-items-baseline mx-1 {{ o_DiscussSidebarCategory_hoverItem }}" t-on-click="category.onClick">
+                        <i class="o_DiscussSidebarCategory_titleIcon small" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
+                        <span class="o_DiscussSidebarCategory_titleText btn-sm p-0 text-uppercase font-weight-bolder"><t t-esc="category.name"/></span>
                     </div>
                     <div class="o-autogrow o_DiscussSidebarCategory_headerItem"/>
-                    <div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem">
+                    <div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem d-flex mr-3">
                         <t t-if="category.hasViewCommand">
-                            <i class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandView fa fa-cog" title="View or join channels" t-on-click="category.onClickCommandView" role="img"/>
+                            <i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandView fa fa-cog {{ o_DiscussSidebarCategory_hoverItem }}" title="View or join channels" t-on-click="category.onClickCommandView" role="img"/>
                         </t>
                         <t t-if="category.hasAddCommand and category.isOpen">
-                            <i class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
+                            <i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus {{ o_DiscussSidebarCategory_hoverItem }} ml-1" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
                         </t>
                     </div>
                     <t t-if="!category.isOpen and category.counter > 0">
-                        <div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge badge-pill">
+                        <div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge badge-pill badge-primary me-3">
                             <t t-esc="category.counter"/>
                         </div>
                     </t>
@@ -29,7 +30,7 @@
                         <t t-if="category.addingItemAutocompleteInputView">
                             <div class="o_DiscussSidebarCategory_addingItem d-flex mb-2">
                                 <AutocompleteInput
-                                    className="'o_DiscussSidebarCategory_addingItemInput flex-grow-1'"
+                                    className="'o_DiscussSidebarCategory_addingItemInput form-control mx-4 rounded'"
                                     record="category.addingItemAutocompleteInputView"
                                     select="category.onAddItemAutocompleteSelect"
                                     source="category.onAddItemAutocompleteSource"