[IMP] mail: various small ui improvements

including:
- decrease vertical spacing between user name and text
- decrease vertical spacing between messages
- align avatar width with first line of message
- bold channels more visible (color is actually white)
- decrease online status icon size and change its color
- hide the DM unpin icon, and show it only when hovering
- the add channel icons are less white
- offline user icon is now white
- the unpin icon is now visible when hovering on user name
- correctly display notifications in inbox

5 files changed, 47 insertions, 44 deletions

diff --git a/addons/mail/static/src/js/chat_manager.js b/addons/mail/static/src/js/chat_manager.js
index 0f8a0223260..5b37f1e35ef 100644
--- a/addons/mail/static/src/js/chat_manager.js
+++ b/addons/mail/static/src/js/chat_manager.js
@@ -41,7 +41,7 @@ function add_message (data, options) {
                 channel.hidden = false;
                 chat_manager.bus.trigger('new_channel', channel);
             }
-            if (!_.contains(["static", "public", "private"], channel.type) && (options.show_notification)) {
+            if (!_.contains(["public", "private"], channel.type) && (options.show_notification)) {
                 var query = { is_displayed: false };
                 chat_manager.bus.trigger('anyone_listening', channel, query);
                 if (!query.is_displayed) {
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index e76a027bd91..a402d103816 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -40,9 +40,6 @@
             .o_mail_partner_unpin {
                 padding: 2px 8px;
             }
-            &.o_unread_message {
-                font-weight: bold;
-            }
         }
         .o_mail_add_channel {
             width: 100%;
@@ -98,6 +95,7 @@
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
+@sidebar-icon-opacity: 0.6;
 .o_mail_chat {
     .o_mail_chat_sidebar {
         background-color: @gray;
@@ -107,18 +105,41 @@
             overflow: hidden;
             text-overflow: ellipsis;
             cursor: pointer;
+
+            &.o_active {
+                background-color: @gray-dark;
+            }
             &:hover {
                 background-color: @gray-dark;
+                .o_mail_partner_unpin {
+                    opacity: @sidebar-icon-opacity;
+                }
+            }
+            .o_mail_partner_unpin {
+                opacity: 0;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+            &.o_unread_message {
+                color: white;
+                font-weight: bold;
+            }
+
+            .o_user_status {
+                font-size: 10px;
+                position: relative;
+                bottom: 1px;
+                margin-right: 3px;
+                &.fa-circle {
+                    color: @odoo-brand-optional;
+                }
             }
 
             > .badge {
                 color: white;
                 background-color: @odoo-brand-optional;
             }
-
-            &.o_active {
-                background-color: @gray-dark;
-            }
         }
 
         .o_mail_add_channel {
@@ -128,10 +149,6 @@
             }
         }
 
-        .o_mail_chat_channel_unread {
-            font-weight: bold;
-        }
-
         .o_mail_sidebar_title {
             h4 {
                 font-size: 13px;
@@ -139,28 +156,12 @@
             }
             .o_add {
                 cursor: pointer;
+                opacity: @sidebar-icon-opacity;
                 &:hover {
-                    background-color: @gray-dark;
+                    opacity: 1;
                 }
             }
         }
-
-        // .o_mail_chat_add_more_search {
-        //      padding: @padding-base-vertical @padding-base-horizontal;
-        //     .o_mail_chat_add_more_text {
-        //         color: @gray-lighter;
-        //         display: inline-block;
-        //         font-style: italic;
-        //         cursor: pointer;
-        //         font-size: @font-size-base;
-        //     }
-        //     .o_mail_chat_add_more_text:hover {
-        //         text-decoration: underline;
-        //         color: white;
-        //         cursor: pointer;
-        //     }
-        // }
-
     }
 
     .o_mail_chat_content {
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 61b3c571868..3cf421299de 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -1,4 +1,4 @@
-@mail-thread-avatar-size: 50px;
+@mail-thread-avatar-size: 36px;
 
 .o_mail_thread {
     .o_thread_show_more {
@@ -27,17 +27,11 @@
         .o_thread_message_avatar {
             .o-flex(0, 0, @mail-thread-avatar-size);
             margin-right: 10px;
-            @media (max-width: @screen-xs-max) {
-                .o-flex(0, 0, @mail-thread-avatar-size/2);
-            }
 
             .o_thread_message_avatar_img {
                 display: block;
                 margin: 0 auto; // center the avatar
                 max-width: @mail-thread-avatar-size;
-                @media (max-width: @screen-xs-max) {
-                    max-width: @mail-thread-avatar-size/2;
-                }
             }
         }
 
@@ -48,8 +42,20 @@
                 font-style: italic;
             }
 
+            .o_mail_redirect {
+                cursor: pointer;
+            }
+
             > p {
                 margin: 0 0 9px; // Required by the old design to override a general rule on p's
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            .o_mail_info {
+                margin-bottom: 2px;
+                .text-muted();
             }
 
             .o_thread_message_star, .o_thread_message_needaction {
@@ -62,10 +68,6 @@
                     color: gold;
                 }
             }
-
-            .o_mail_redirect {
-                cursor: pointer;
-            }
         }
     }
 }
diff --git a/addons/mail/static/src/xml/client_action.xml b/addons/mail/static/src/xml/client_action.xml
index 63c5c7a1c60..b9271646d0e 100644
--- a/addons/mail/static/src/xml/client_action.xml
+++ b/addons/mail/static/src/xml/client_action.xml
@@ -59,7 +59,7 @@
     <t t-name="mail.chat.SidebarItems">
         <t t-foreach="channels" t-as="channel">
             <div t-if="channel.type === channel_type" class="o_mail_chat_channel_item" t-att-data-channel-id="channel.id">
-                <i t-if="display_status" t-att-class="'fa ' + (channel.status == 'online' ? 'fa-circle' : 'fa-circle-o')"/>
+                <span><i t-if="display_status" t-att-class="'o_user_status fa ' + (channel.status == 'online' ? 'fa-circle' : 'fa-circle-o')"/></span>
                 <t t-esc="channel.name"/>
                 <span t-if="display_close_button" class="fa fa-times pull-right o_mail_partner_unpin" t-att-title="_t('Close')" t-att-data-channel-id="channel.id"/>
             </div>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 1a0240282d4..596e06a6419 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -44,7 +44,7 @@
                         t-att-class="'fa fa-lg o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
                         t-att-data-message-id="message.id" t-att-title="_t('Mark as Todo')"/>
                 </span>
-                <p class="text-muted">
+                <p class="o_mail_info">
                     <t t-if="message.is_note">
                         Note by
                     </t>
@@ -65,7 +65,7 @@
                 <t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">
                     <t t-call="mail.ChatThread.MessageTracking"/>
                 </t>
-                <div t-if="message.subject" class="o_mail_subject">Subject: <t t-esc="message.subject"/></div>
+                <p t-if="message.subject" class="o_mail_subject">Subject: <t t-esc="message.subject"/></p>
                 <t t-if="!(message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0)">
                     <t t-raw="message.body"/>
                 </t>