From ee2a497b9a24e9999c487bd2798e85cddb1bce4c Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Wed, 11 May 2022 11:28:50 +0000
Subject: [PATCH] [REF] mail: `ThreadViewTopbar`, 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-2850473

closes odoo/odoo#91116

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../thread_view_topbar.scss                   | 86 +------------------
 .../thread_view_topbar/thread_view_topbar.xml | 36 ++++----
 2 files changed, 20 insertions(+), 102 deletions(-)

diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
index 6e60808e7cd..90072828dc3 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
@@ -7,18 +7,8 @@
 }
 
 .o_ThreadViewTopbar_avatar {
-    height: 26px;
-    width: 26px;
-    object-fit: cover;
-}
-
-.o_ThreadViewTopbar_editableItem {
-    border: $border-width solid;
-}
-
-.o_ThreadViewTopbar_threadDescriptionSeparator {
-    width: $border-width;
-    height: $font-size-sm;
+    height: $o-mail-partner-avatar-size;
+    width: $o-mail-partner-avatar-size;
 }
 
 .o_ThreadViewTopbar_title {
@@ -29,83 +19,11 @@
 // Style
 // ------------------------------------------------------------------
 
-.o_ThreadViewTopbar {
-    background-color: gray('100');
-}
-
-.o_ThreadViewTopbar_button {
-    background: none;
-    border: none;
-    outline: none;
-
-    &.o-active {
-        color: gray('700');
-    }
-
-    &:not(.o-active) {
-        color: gray('500');
-    }
-
-    @include hover-focus () {
-        outline: none;
-        color: gray('600');
-    }
-}
-
 // use selector specificity to override bootstrap style
 input.o_ThreadViewTopbar_guestNameInput {
     width: 150px;
 }
 
-.o_ThreadViewTopbar_invitePopoverView .popover-body {
-    padding: 0; // cancel unwanted padding
-}
-
-.o_ThreadViewTopbar_threadDescriptionSeparator {
-    background-color: $border-color;
-}
-
 .o_ThreadViewTopbar_threadName {
     max-width: map-get($sizes, 75);
-
-    &:not(.o-threadNameEditable) {
-        border-color: transparent; // presence of border even if invisible to prevent flicker
-    }
-
-    &.o-threadNameEditable {
-        background-color: $white;
-        border-color: $border-color;
-    }
-}
-
-.o_ThreadViewTopbar_threadDescription {
-
-    &:not(.o-threadDescriptionEditable) {
-        border-color: transparent; // presence of border even if invisible to prevent flicker
-    }
-
-    &.o-threadDescriptionEditable {
-        background-color: $white;
-        border-color: $border-color;
-    }
-}
-
-.o_ThreadViewTopbar_threadAddDescriptionEmptyLabel {
-    color: gray('400');
-    cursor: pointer;
-
-    &:hover {
-        color: gray('900');
-    }
-}
-
-.o_ThreadViewTopbar_userName {
-    &:not(.o-userNameEditable) {
-        border-color: transparent;
-    }
-
-    &.o-userNameEditable {
-        background-color: $white;
-        border-color: $border-color;
-    }
 }
diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
index 4457a113c53..acd89935180 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
@@ -3,14 +3,14 @@
 
     <t t-name="mail.ThreadViewTopbar" owl="1">
         <t t-if="threadViewTopbar">
-            <div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3 bg-100" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="threadViewTopbar.thread">
                     <ThreadIcon className="'o_ThreadViewTopbar_threadIcon mr-2 align-self-center'" thread="threadViewTopbar.thread"/>
                 </t>
                 <div class="o_ThreadViewTopbar_title d-flex flex-grow-1 align-self-center align-items-center">
                     <t t-if="threadViewTopbar.thread">
                         <t t-if="!threadViewTopbar.isEditingThreadName">
-                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem flex-shrink-0 px-1 text-truncate lead font-weight-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-att-class="{ 'o-threadNameEditable': threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest }">
+                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate font-weight-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-white' : 'border-light' }}">
                                 <t t-esc="threadViewTopbar.thread.displayName"/>
                             </div>
                         </t>
@@ -19,20 +19,20 @@
                         </t>
                     </t>
                     <t t-if="!threadViewTopbar.thread">
-                        <div class="o_ThreadViewTopbar_threadName flex-shrink-0 px-1 text-truncate lead font-weight-bold">
+                        <div class="o_ThreadViewTopbar_threadName lead flex-shrink-0 px-1 text-truncate font-weight-bold">
                             Discuss
                         </div>
                     </t>
                     <t t-if="threadViewTopbar.hasDescriptionArea">
-                        <div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2"/>
+                        <div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2 py-2 border-left"/>
                         <t t-if="!threadViewTopbar.isEditingThreadDescription">
                             <t t-if="threadViewTopbar.thread.description">
-                                <div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem text-truncate px-1" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-att-class="{ 'o-threadDescriptionEditable': threadViewTopbar.isDescriptionHighlighted }">
+                                <div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem px-1 border text-truncate" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-attf-class="{{ threadViewTopbar.isDescriptionHighlighted ? 'o-threadDescriptionEditable bg-white' : 'border-light' }}">
                                     <t t-esc="threadViewTopbar.thread.description"/>
                                 </div>
                             </t>
                             <t t-if="!threadViewTopbar.thread.description">
-                                <div class="o_ThreadViewTopbar_threadAddDescriptionEmptyLabel text-truncate" t-on-click="threadViewTopbar.onClickTopbarThreadDescription">
+                                <div class="o_ThreadViewTopbar_threadAddDescriptionEmptyLabel text-truncate text-900 opacity-50 opacity-100-hover o_cursor_pointer" t-on-click="threadViewTopbar.onClickTopbarThreadDescription">
                                     Add a description
                                 </div>
                             </t>
@@ -50,16 +50,16 @@
                         <button class="o_ThreadViewTopbar_unstarAllButton btn btn-secondary" t-att-disabled="threadViewTopbar.threadView.messages.length === 0" t-on-click="threadViewTopbar.onClickUnstarAll">Unstar all</button>
                     </t>
                     <t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasCallFeature and threadViewTopbar.thread.rtcSessions.length === 0">
-                        <button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Call" t-on-click="threadViewTopbar.onClickPhone">
-                            <i class="fa fa-lg fa-phone"/>
+                        <button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Call" t-on-click="threadViewTopbar.onClickPhone">
+                            <i class="fa fa-lg fa-phone text-800"/>
                         </button>
-                        <button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Video Call" t-on-click="threadViewTopbar.onClickCamera">
-                            <i class="fa fa-lg fa-video-camera"/>
+                        <button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Video Call" t-on-click="threadViewTopbar.onClickCamera">
+                            <i class="fa fa-lg fa-video-camera text-800"/>
                         </button>
                     </t>
                     <t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasInviteFeature">
-                        <button class="o_ThreadViewTopbar_inviteButton o_ThreadViewTopbar_button" t-att-class="{ 'o-active': threadViewTopbar.invitePopoverView }" title="Add users" t-on-click="threadViewTopbar.onClickInviteButton" t-ref="inviteButton">
-                            <i class="fa fa-lg fa-user-plus"/>
+                        <button class="o_ThreadViewTopbar_inviteButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none"  t-attf-class="{{ threadViewTopbar.invitePopoverView ? 'opacity-100 opacity-75-hover o-active' : 'opacity-75 opacity-100-hover' }}" title="Add users" t-on-click="threadViewTopbar.onClickInviteButton" t-ref="inviteButton">
+                            <i class="fa fa-lg fa-user-plus" t-attf-class="{{ threadViewTopbar.invitePopoverView ? 'text-800' : 'text-600' }}"/>
                         </button>
                         <t t-if="threadViewTopbar.invitePopoverView">
                             <PopoverView className="'o_ThreadViewTopbar_invitePopoverView'" record="threadViewTopbar.invitePopoverView"/>
@@ -67,22 +67,22 @@
                     </t>
                     <!-- FIXME: guests should be able to see members but there currently is no route for it, so hide it for now -->
                     <t t-if="!messaging.isCurrentUserGuest and threadViewTopbar.thread and threadViewTopbar.thread.hasMemberListFeature and threadViewTopbar.threadView.hasMemberList and !threadViewTopbar.threadView.isMemberListOpened">
-                        <button class="o_ThreadViewTopbar_showMemberListButton o_ThreadViewTopbar_button" title="Show Member List" t-on-click="threadViewTopbar.onClickShowMemberList">
-                            <i class="fa fa-lg fa-users"/>
+                        <button class="o_ThreadViewTopbar_showMemberListButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-75 opacity-100-hover" title="Show Member List" t-on-click="threadViewTopbar.onClickShowMemberList">
+                            <i class="fa fa-lg fa-users text-600"/>
                         </button>
                     </t>
                     <t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasMemberListFeature and threadViewTopbar.threadView.hasMemberList and threadViewTopbar.threadView.isMemberListOpened">
-                        <button class="o_ThreadViewTopbar_hideMemberListButton o_ThreadViewTopbar_button o-active" title="Hide Member List" t-on-click="threadViewTopbar.onClickHideMemberList">
-                            <i class="fa fa-lg fa-users"/>
+                        <button class="o_ThreadViewTopbar_hideMemberListButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" title="Hide Member List" t-on-click="threadViewTopbar.onClickHideMemberList">
+                            <i class="fa fa-lg fa-users text-800"/>
                         </button>
                     </t>
                 </div>
                 <!-- FIXME: handle display on mobile -->
                 <t t-if="threadViewTopbar.threadView.threadViewer.discussPublicView and !messaging.device.isSmall">
                     <div class="o_ThreadViewTopbar_userInfo d-flex align-items-center">
-                        <img class="o_ThreadViewTopbar_avatar ml-1 mr-1 rounded-circle" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
+                        <img class="o_ThreadViewTopbar_avatar mx-1 rounded-circle o_object_fit_cover" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
                         <t t-if="!threadViewTopbar.isEditingGuestName">
-                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 font-weight-bold text-truncate" t-att-class="{ 'o-userNameEditable': threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest }" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
+                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border font-weight-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-white' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
                                 <t t-esc="messaging.isCurrentUserGuest ? messaging.currentGuest.name : messaging.currentUser.nameOrDisplayName"/>
                             </span>
                         </t>