[IMP] mail: display user avatar in chat-box header

PURPOSE

We are currently working toward turning every user avatar (i.e. the round
picture of the user) in a shortcut to open the chatbox to that user. It only
makes sense to also have the user avatar in the header of the chatbox
(like in Facebook)

SPECIFICATION

Replace the current IM status colored dot of the chatbox header by the same
avatar/im_status compound currently used in the chatter.

LINKS

Closes https://github.com/odoo/odoo/pull/51258
Task-2256061

closes odoo/odoo#51258

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

3 files changed, 25 insertions, 1 deletions

diff --git a/addons/mail/static/src/js/models/threads/abstract_thread.js b/addons/mail/static/src/js/models/threads/abstract_thread.js
index ed10e761d62..619bf95b8e3 100644
--- a/addons/mail/static/src/js/models/threads/abstract_thread.js
+++ b/addons/mail/static/src/js/models/threads/abstract_thread.js
@@ -98,6 +98,7 @@ var AbstractThread = Class.extend(Mixins.EventDispatcherMixin, {
     getTitle: function () {
         return this.getName();
     },
+    getType: function () {},
     /**
      * @returns {integer}
      */
diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss
index ed001ab3562..3a7f028f2f2 100644
--- a/addons/mail/static/src/scss/abstract_thread_window.scss
+++ b/addons/mail/static/src/scss/abstract_thread_window.scss
@@ -29,6 +29,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
     }
 
     .o_thread_window_header {
+        align-items: center;
         display: flex;
         flex: 0 0 auto;
         color: white;
@@ -55,6 +56,25 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
                 color: white;
             }
         }
+        .o_thread_window_avatar {
+            margin: -6px 6px -6px 0;
+            position: relative;
+
+            img {
+                height: 25px;
+                width: 25px;
+                border-radius: 50%;
+            }
+            span {
+                bottom: -4px;
+                right: -2px;
+                position: absolute;
+
+                .fa-circle-o {
+                    display: none;
+                }
+            }
+        }
 
         .o_thread_window_title {
             cursor: pointer;
diff --git a/addons/mail/static/src/xml/abstract_thread_window.xml b/addons/mail/static/src/xml/abstract_thread_window.xml
index 9bc83b79242..ae29a21b5ba 100644
--- a/addons/mail/static/src/xml/abstract_thread_window.xml
+++ b/addons/mail/static/src/xml/abstract_thread_window.xml
@@ -68,8 +68,11 @@
         <span t-if="widget.isMobile()">
             <a href="#" class="o_thread_window_close fa fa-1x fa-arrow-left" aria-label="Close chat window" title="Close chat window"/>
         </span>
+        <div t-if="thread and thread.getType() === 'dm_chat'" class="o_thread_window_avatar">
+            <img alt="" t-att-src="'/web/image/res.partner/' + thread.getDirectPartnerID() + '/image_128'"/>
+            <t t-call="mail.UserStatus"/>
+        </div>
         <span class="o_thread_window_title">
-            <t t-if="status" t-call="mail.UserStatus"/>
             <t t-esc="title"/>
             <span t-if="unreadCounter"> (<t t-esc="unreadCounter"/>)</span>
             <t t-if="thread and thread.hasTypingNotification() and thread.isSomeoneTyping()" t-call="mail.ThreadTypingIcon"/>