From 2ecfd542513b1a2f7f186931cf6f5cf972d386f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Mon, 15 May 2023 12:44:06 +0000
Subject: [PATCH] [FIX] mail: improve style from webclient redesign

1. show hover effect in discuss sidebar

With redesign of web client style, hover effect in discuss sidebar
was not longer working.

This comes from buttons hover effect no longer having precedence
to defined bg classnames, e.g. `bg-100`.

This commit fixes the issue by explicitly defining a style for the
background when hovering items in the discuss sidebar.

2. improved background color of discuss app in dark mode

The background color was too dark. This commit fixes the issue by
using `bg-view`, which is the preferred background to put
content in both white and dark theme.

3. Send button visual matches composer rounded border

Send button lacked its border. This commit fixes the issue by
including Send button inside the element that does the pretty rounded
border of composer. That way, the border of send button will not
longer be affected by change of button style.

Also make the send button active / inactive state more visible, by
using button link (green when active, muted when inactive).

Part-of: odoo/odoo#117357
---
 addons/mail/static/src/composer/composer.scss |  8 ++++
 addons/mail/static/src/composer/composer.xml  | 41 +++++++++++--------
 .../src/discuss_app/autoresize_input.xml      |  2 +-
 .../mail/static/src/discuss_app/discuss.xml   |  6 +--
 .../static/src/web/discuss_app/sidebar.scss   |  8 +++-
 .../static/src/web/discuss_app/sidebar.xml    | 14 +++----
 6 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/addons/mail/static/src/composer/composer.scss b/addons/mail/static/src/composer/composer.scss
index dff2d5de476..4283d5b5a90 100644
--- a/addons/mail/static/src/composer/composer.scss
+++ b/addons/mail/static/src/composer/composer.scss
@@ -32,6 +32,14 @@
     }
 }
 
+.o-mail-Composer-actions button {
+    opacity: 75%;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+        opacity: 100%;
+    }
+}
+
 .o-mail-Composer-input {
     padding-top: 10px; // carefully crafted to have the text in the middle in chat window
     padding-bottom: 10px;
diff --git a/addons/mail/static/src/composer/composer.xml b/addons/mail/static/src/composer/composer.xml
index 13631638bfe..371559c2133 100644
--- a/addons/mail/static/src/composer/composer.xml
+++ b/addons/mail/static/src/composer/composer.xml
@@ -31,7 +31,7 @@
                     t-att-class="{
                         'border-top border-bottom': compact and !props.composer.message,
                         'border': props.composer.message,
-                        'border border-end-0 rounded-start-3' : normal,
+                        'border rounded-3' : normal,
                         'border rounded-3 align-self-stretch flex-column' : extended,
                     }"
                 >
@@ -60,33 +60,27 @@
                             disabled="1"
                         />
                     </div>
-                    <div class="d-flex mx-3 bg-view"
+                    <div class="o-mail-Composer-actions d-flex bg-view"
                         t-att-class="{
-                            'px-1' : normal,
-                            'border-top p-1' : extended,
+                            'ms-1' : compact and store.isSmall,
+                            'mx-1 me-2' : compact and !store.isSmall,
+                            'ms-3' : normal,
+                            'mx-3 border-top p-1' : extended,
                         }"
                     >
                         <div class="d-flex flex-grow-1 align-items-center" >
-                            <button class="btn btn-light border-0 fa fa-smile-o rounded-pill" aria-label="Emojis" t-on-click="onClickAddEmoji" t-ref="emoji-picker"/>
+                            <button class="btn border-0 fa fa-smile-o rounded-pill" aria-label="Emojis" t-on-click="onClickAddEmoji" t-ref="emoji-picker"/>
                             <FileUploader t-if="allowUpload" multiUpload="true" onUploaded="(data) => { attachmentUploader.uploadData(data) }">
                                 <t t-set-slot="toggler">
-                                    <button t-att-disabled="!state.active" class="btn btn-light fa fa-paperclip border-0 rounded-pill" title="Attach files" aria-label="Attach files" type="button" t-on-click="onClickAddAttachment"/>
+                                    <button t-att-disabled="!state.active" class="btn fa fa-paperclip border-0 rounded-pill" title="Attach files" aria-label="Attach files" type="button" t-on-click="onClickAddAttachment"/>
                                 </t>
                             </FileUploader>
                         </div>
-                        <button t-if="thread and thread.type === 'chatter'" class="btn btn-light fa fa-expand mx-1 border-0 rounded-pill" title="Full composer" aria-label="Full composer" type="button" t-on-click="onClickFullComposer"/>
+                        <button t-if="thread and thread.type === 'chatter'" class="btn fa fa-expand mx-1 border-0 rounded-pill" title="Full composer" aria-label="Full composer" type="button" t-on-click="onClickFullComposer"/>
                     </div>
+                    <t t-if="!extended" t-call="mail.Composer.sendButton"/>
                 </div>
-                <button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-secondary o-last border-start-0"
-                    t-att-class="{'mt-2': extended, 'rounded-0 rounded-end-3': !extended and !compact, 'align-self-stretch': !extended, 'border border-start-0': env.inDiscussApp}"
-                    t-on-click="sendMessage"
-                    type="button"
-                    t-att-disabled="isSendButtonDisabled"
-                    aria-label="Send"
-                >
-                    <t t-if="store.isSmall"><i class="fa fa-paper-plane-o"/></t>
-                    <t t-else="">Send</t>
-                </button>
+                <t t-if="extended" t-call="mail.Composer.sendButton"/>
             </div>
             <div class="o-mail-Composer-footer overflow-auto">
                 <AttachmentList
@@ -101,6 +95,19 @@
     <NavigableList t-if="suggestion" class="'o-mail-Composer-suggestionList'" t-props="navigableListProps"/>
 </t>
 
+<t t-name="mail.Composer.sendButton" owl="1">
+    <button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-link o-last border-start-0"
+        t-att-class="{'mt-2': extended, 'rounded-0 rounded-end-3': !extended and !compact, 'align-self-stretch': !extended, 'border-start-0': env.inDiscussApp}"
+        t-on-click="sendMessage"
+        type="button"
+        t-att-disabled="isSendButtonDisabled"
+        aria-label="Send"
+    >
+        <t t-if="store.isSmall"><i class="fa fa-paper-plane-o"/></t>
+        <t t-else="">Send</t>
+    </button>
+</t>
+
     <t t-name="mail.Composer.suggestionPartner" owl="1">
         <t t-set="partner" t-value="option.partner"/>
         <ImStatus t-if="partner" persona="partner"/>
diff --git a/addons/mail/static/src/discuss_app/autoresize_input.xml b/addons/mail/static/src/discuss_app/autoresize_input.xml
index 6484a15f4ba..740f682df68 100644
--- a/addons/mail/static/src/discuss_app/autoresize_input.xml
+++ b/addons/mail/static/src/discuss_app/autoresize_input.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.AutoresizeInput" owl="1">
     <input
-        class="o-mail-AutoresizeInput text-truncate p-1 border-1 bg-transparent border-transparent"
+        class="o-mail-AutoresizeInput text-truncate p-1 border-1 bg-view border-transparent"
         t-attf-class="{{ props.className }}"
         t-attf-placeholder="{{ props.placeholder }}"
         t-att-disabled="!props.enabled"
diff --git a/addons/mail/static/src/discuss_app/discuss.xml b/addons/mail/static/src/discuss_app/discuss.xml
index 40ed6520a1e..7cb015bf6dc 100644
--- a/addons/mail/static/src/discuss_app/discuss.xml
+++ b/addons/mail/static/src/discuss_app/discuss.xml
@@ -5,10 +5,10 @@
     <div class="o-mail-Discuss d-flex h-100 flex-grow-1 border-top" t-att-class="{ 'flex-column align-items-center bg-view': store.isSmall }" t-ref="root">
         <div t-if="store.isSmall and store.discuss.activeTab === 'mailbox'" class="w-100 border-bottom" t-call="mail.Discuss.mobileTopbar" t-ref="mobileTopbar"/>
         <div t-if="thread and !(store.isSmall and ['chat', 'channel'].includes(store.discuss.activeTab))" class="o-mail-Discuss-content d-flex flex-column h-100 w-100 bg-view overflow-auto" t-ref="content">
-            <div class="o-mail-Discuss-header px-3 bg-100 border-bottom d-flex flex-shrink-0 align-items-center" style="height:46px;">
+            <div class="o-mail-Discuss-header px-3 bg-view border-bottom d-flex flex-shrink-0 align-items-center" style="height:46px;">
                 <div t-if="thread and thread.model === 'discuss.channel'" class="o-mail-Discuss-threadAvatar position-relative align-self-center align-items-center mt-2 mb-2 me-2">
                     <img class="rounded" t-att-src="channelAvatar" alt="Thread Image"/>
-                    <FileUploader t-if="thread.is_editable" acceptedFileExtensions="'.bmp, .jpg, .jpeg, .png, .svg'" showUploadingText="false" multiUpload="false" onUploaded="(data) => this.onFileUploaded(data)">
+                    <FileUploader t-if="thread.is_editable and thread.type !== 'chat'" acceptedFileExtensions="'.bmp, .jpg, .jpeg, .png, .svg'" showUploadingText="false" multiUpload="false" onUploaded="(data) => this.onFileUploaded(data)">
                         <t t-set-slot="toggler">
                             <a href="#" class="position-absolute z-index-1 h-100 w-100 rounded start-0 bottom-0" title="Upload Avatar">
                                 <i class="position-absolute top-50 start-50 fa fa-sm fa-pencil text-white"/>
@@ -63,7 +63,7 @@
                 </div>
             </div>
             <div class="overflow-auto bg-100 d-flex flex-grow-1">
-                <div class="bg-white d-flex flex-column flex-grow-1">
+                <div class="bg-view d-flex flex-column flex-grow-1">
                     <Call t-if="Object.keys(thread.rtcSessions).length > 0" thread="thread"/>
                     <Thread thread="thread" t-key="thread.localId" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
                     <Composer t-if="thread.type !== 'mailbox' or messageToReplyTo.thread === thread" t-key="thread.localId" composer="thread.composer" autofocus="true" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onDiscardCallback="() => messageToReplyTo.cancel()" dropzoneRef="contentRef"/>
diff --git a/addons/mail/static/src/web/discuss_app/sidebar.scss b/addons/mail/static/src/web/discuss_app/sidebar.scss
index 5fe0b705baa..14d0657dc19 100644
--- a/addons/mail/static/src/web/discuss_app/sidebar.scss
+++ b/addons/mail/static/src/web/discuss_app/sidebar.scss
@@ -6,8 +6,12 @@
         height: 15px;
     }
 
-    .o-mail-DiscussCategoryItem:hover .o-mail-DiscussCategoryItem-commands {
-        display: flex !important;
+    .o-mail-DiscussSidebar-item:hover {
+        background-color: $o-gray-300 !important;
+
+        .o-mail-DiscussCategoryItem-commands {
+            display: flex !important;
+        }
     }
 
     .o-mail-DiscussCategory-im-status {
diff --git a/addons/mail/static/src/web/discuss_app/sidebar.xml b/addons/mail/static/src/web/discuss_app/sidebar.xml
index a754ce47c6f..cead8673fef 100644
--- a/addons/mail/static/src/web/discuss_app/sidebar.xml
+++ b/addons/mail/static/src/web/discuss_app/sidebar.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.DiscussSidebar" owl="1">
-    <div class="o-mail-DiscussSidebar d-flex flex-column overflow-auto flex-shrink-0 h-100 pt-3 border-end bg-light">
+    <div class="o-mail-DiscussSidebar d-flex flex-column overflow-auto flex-shrink-0 h-100 pt-3 border-end bg-view">
         <div class="d-flex justify-content-center">
             <button t-on-click="onClickStartMeeting" class="btn btn-primary rounded" title="Start a meeting">
                 Start a meeting
@@ -32,10 +32,10 @@
 </t>
 
 <t t-name="mail.Mailbox" owl="1">
-    <button class="btn d-flex align-items-center py-1 px-0 border-0 rounded-0 fw-normal text-dark"
+    <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="{
-            'bg-100': mailbox.localId !== store.discuss.threadLocalId,
-            'o-active bg-200': mailbox.localId === store.discuss.threadLocalId,
+            'o-bg-inherit': mailbox.localId !== store.discuss.threadLocalId,
+            'o-active bg-300': mailbox.localId === store.discuss.threadLocalId,
         }"
         t-on-click="(ev) => this.openThread(ev, mailbox)"
     >
@@ -82,10 +82,10 @@
 
 <t t-name="mail.DiscussCategoryItem" owl="1">
     <t t-set="counter" t-value="threadService.getCounter(thread)"/>
-    <button class="o-mail-DiscussCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 text-reset"
+    <button class="o-mail-DiscussCategoryItem o-mail-DiscussSidebar-item btn btn-secondary d-flex align-items-center w-100 px-0 py-2 border-0 text-reset"
         t-att-class="{
-            'bg-100': threadLocalId !== store.discuss.threadLocalId,
-            'o-active bg-200': threadLocalId === store.discuss.threadLocalId,
+            'o-bg-inherit': threadLocalId !== store.discuss.threadLocalId,
+            'o-active bg-300': threadLocalId === store.discuss.threadLocalId,
             'o-unread': thread.message_unread_counter > 0,
         }"
         t-on-click="(ev) => this.openThread(ev, thread)"