From 76369d33b74afdbe9daa2af9024c044be4c75d00 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Mon, 14 Mar 2022 09:42:32 +0000
Subject: [PATCH] [REF] mail: `ChatterTopbar`, review and simplify scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2781992

closes odoo/odoo#86461

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../chatter_topbar/chatter_topbar.scss        | 80 ++-----------------
 .../chatter_topbar/chatter_topbar.xml         | 30 +++----
 2 files changed, 21 insertions(+), 89 deletions(-)

diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
index 036e6fc6cc2..876010aff53 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
@@ -3,103 +3,33 @@
 // ------------------------------------------------------------------
 
 .o_ChatterTopbar {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    // We need the +1 to handle the status bar border-bottom.
-    // The var is called `$o-statusbar-height`, but is used on button, therefore
-    // doesn't include the border-bottom.
     // We use min-height to allow multiples buttons lines on mobile.
-    min-height: $o-statusbar-height + 1;
-}
-
-.o_ChatterTopbar_actions {
-    border-bottom: $border-width solid;
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    flex-wrap: wrap-reverse; // reverse to ensure send buttons are directly above composer
+    min-height: $o-statusbar-height + $border-width;
 }
 
 .o_ChatterTopbar_button {
     margin-bottom: -$border-width; /* Needed to allow "overriding" of the bottom border */
 }
 
-.o_ChatterTopbar_buttonAttachmentsCountLoader {
-    margin-left: map-get($spacers, 1);
-}
-
-.o_ChatterTopbar_buttonCount {
-    padding-left: map-get($spacers, 1);
-}
-
 .o_ChatterTopbar_buttonClose {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    width: 34px;
-    height: 34px;
-}
-
-.o_ChatterTopbar_followerListMenu {
-    display: flex;
-}
-
-.o_ChatterTopbar_rightSection {
-    display: flex;
-    flex: 1 0 auto;
-    justify-content: flex-end;
+    width: $o-statusbar-height;
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_ChatterTopbar_actions {
-    border-color: transparent;
-
-    &.o-has-active-button {
-        border-color: $border-color;
-    }
-}
-
 .o_ChatterTopbar_button {
-    border-radius: 0;
-
     &:hover, &:focus {
-        background-color: gray('200');
+        background-color: $gray-200;
     }
 
     &.o-active {
         @include o-hover-text-color($o-brand-odoo, $link-hover-color);
-        background-color: gray('100');
-        border-right-color: $border-color;
-
-        &:not(:first-of-type),
-        &:first-of-type.o-bordered {
-            border-left-color: $border-color;
-        }
-
-        &.o-bordered {
-            border-top-color: $border-color;
-        }
+        background-color: $gray-100;
 
         &:focus {
-            background-color: gray('200');
+            background-color: $gray-200;
         }
     }
 }
-
-.o_ChatterTopbar_buttonClose {
-    border-radius: 0 0 10px 10px;
-    font-size: $font-size-lg;
-    background-color: gray('700');
-    color: gray('100');
-    cursor: pointer;
-
-    &:hover {
-        background-color: gray('600');
-        color: $white;
-    }
-}
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 3657adc02b2..fbf40a46ae1 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -3,14 +3,15 @@
 
     <t t-name="mail.ChatterTopbar" owl="1">
         <t t-if="chatter">
-            <div class="o_ChatterTopbar" t-attf-class="{{ className }}" t-ref="root">
-                <div class="o_ChatterTopbar_actions" t-att-class="{'o-has-active-button': chatter.composerView }">
+            <div class="o_ChatterTopbar justify-content-between d-flex" t-attf-class="{{ className }}" t-ref="root">
+                <div class="o_ChatterTopbar_actions flex-wrap-reverse flex-fill d-flex border-bottom" t-attf-class="{{ chatter.composerView ? 'o-has-active-button' : 'border-white' }}">
                     <t t-if="chatter.threadView">
-                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage"
+                        <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage btn btn-link"
                             type="button"
                             t-att-class="{
-                                'o-active': chatter.composerView and !chatter.composerView.composer.isLog,
+                                'o-active border-right': chatter.composerView and !chatter.composerView.composer.isLog,
                                 'o-bordered': chatter.hasExternalBorder,
+                                'border-top border-left': chatter.composerView and !chatter.composerView.composer.isLog and chatter.hasExternalBorder,
                             }"
                             t-att-disabled="chatter.isDisabled"
                             title="Send a message"
@@ -19,11 +20,12 @@
                         >
                             Send message
                         </button>
-                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonLogNote"
+                        <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonLogNote btn btn-link"
                             type="button"
                             t-att-class="{
-                                'o-active': chatter.composerView and chatter.composerView.composer.isLog,
+                                'o-active border-right border-left': chatter.composerView and chatter.composerView.composer.isLog,
                                 'o-bordered': chatter.hasExternalBorder,
+                                'border-top': chatter.composerView and chatter.composerView.composer.isLog and chatter.hasExternalBorder,
                             }"
                             t-att-disabled="chatter.isDisabled"
                             t-on-click="chatter.onClickLogNote"
@@ -34,20 +36,20 @@
                         </button>
                     </t>
                     <t t-if="chatter.hasActivities">
-                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonScheduleActivity" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickScheduleActivity" title="Schedule an activity" data-hotkey="shift+a">
+                        <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonScheduleActivity btn btn-link" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickScheduleActivity" title="Schedule an activity" data-hotkey="shift+a">
                             <i class="fa fa-clock-o"/>
                             Schedule activity
                         </button>
                     </t>
                     <div class="o-autogrow"/>
-                        <div class="o_ChatterTopbar_rightSection">
-                            <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickButtonAttachments">
+                        <div class="o_ChatterTopbar_rightSection flex-grow-1 flex-shrink-0 justify-content-end d-flex">
+                            <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments btn btn-link" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickButtonAttachments">
                                 <i class="fa fa-paperclip"/>
                                 <t t-if="!chatter.isShowingAttachmentsLoading">
-                                    <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/>
+                                    <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount pl-1" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/>
                                 </t>
                                 <t t-if="chatter.isShowingAttachmentsLoading">
-                                    <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin" aria-label="Attachment counter loading..."/>
+                                    <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin ms-1" aria-label="Attachment counter loading..."/>
                                 </t>
                             </button>
                             <t t-if="chatter.hasFollowers and chatter.thread">
@@ -67,9 +69,9 @@
                         </div>
                 </div>
                 <t t-if="chatter.hasTopbarCloseButton">
-                    <div class="o_ChatterTopbar_buttonClose" title="Close" t-on-click="chatter.onClickChatterTopbarClose">
-                        <i class="fa fa-times"/>
-                    </div>
+                    <button class="o_ChatterTopbar_buttonClose btn btn-dark flex-shrink-0 rounded-lg-bottom" title="Close" t-on-click="chatter.onClickChatterTopbarClose">
+                        <i class="oi oi-large oi-close"/>
+                    </button>
                 </t>
             </div>
         </t>