[IMP] mail: various ui improvements

including:
- reset scroll position to bottom when leaving channel
- allow clicking on the avatar image
- hide stars when message is of type notification
- sort channel names
- add # before channel names
- rename Whole company channel in general
- replace \n and \r in messages by <br/>
- lighten the hover color of sidebar items in the client action
- Display @ before mentions

8 files changed, 34 insertions, 13 deletions

diff --git a/addons/mail/data/mail_channel_data.xml b/addons/mail/data/mail_channel_data.xml
index f5dd0cac3a2..7f3b6b03ec8 100644
--- a/addons/mail/data/mail_channel_data.xml
+++ b/addons/mail/data/mail_channel_data.xml
@@ -3,9 +3,9 @@
     <data noupdate="1">
 
         <record model="mail.channel" id="channel_all_employees">
-            <field name="name">Whole Company</field>
+            <field name="name">general</field>
             <field name="group_ids" eval="[(4, ref('base.group_user'))]"/>
-            <field name="description">General annoucements for all employees.</field>
+            <field name="description">General announcements for all employees.</field>
         </record>
 
         <!-- notify all employees of module installation -->
diff --git a/addons/mail/static/src/js/chat_manager.js b/addons/mail/static/src/js/chat_manager.js
index 4e8e75f7840..51598896654 100644
--- a/addons/mail/static/src/js/chat_manager.js
+++ b/addons/mail/static/src/js/chat_manager.js
@@ -168,6 +168,7 @@ function add_channel (data, options) {
     } else {
         channel = make_channel(data, options);
         channels.push(channel);
+        channels = _.sortBy(channels, function (channel) { return channel.name.toLowerCase(); });
         if (!options.silent) {
             chat_manager.bus.trigger("new_channel", channel);
         }
@@ -206,6 +207,9 @@ function make_channel (data, options) {
         channel.name = data.direct_partner[0].name;
         channel.status = data.direct_partner[0].im_status;
     }
+    if ((channel.type === 'public') || (channel.type === 'private')) {
+        channel.name = '#' + channel.name;
+    }
     return channel;
 }
 
diff --git a/addons/mail/static/src/js/client_action.js b/addons/mail/static/src/js/client_action.js
index 303518092ce..f65bcd7f43b 100644
--- a/addons/mail/static/src/js/client_action.js
+++ b/addons/mail/static/src/js/client_action.js
@@ -332,6 +332,7 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
                     var msg = _.str.sprintf(_t('You unsubscribed from <b>%s</b>.'), channel.name);
                     self.do_notify(_t("Unsubscribed"), msg);
                 }
+                delete self.channels_scrolltop[channel.id];
             });
     },
 
diff --git a/addons/mail/static/src/js/composer.js b/addons/mail/static/src/js/composer.js
index 89550789366..dc2b47bf582 100644
--- a/addons/mail/static/src/js/composer.js
+++ b/addons/mail/static/src/js/composer.js
@@ -88,8 +88,9 @@ var Composer = Widget.extend({
     preprocess_message: function () {
         // Return a deferred as this function is extended with asynchronous
         // behavior for the chatter composer
+        var value = this.$input.val().replace(/\n|\r/g, '<br/>');
         return $.when({
-            content: this.mention_preprocess_message(this.$input.val()),
+            content: this.mention_preprocess_message(value),
             attachment_ids: _.pluck(this.get('attachment_ids'), 'id'),
             partner_ids: _.pluck(this.get('mention_selected_partners'), 'id'),
         });
@@ -395,7 +396,7 @@ var Composer = Widget.extend({
                 var match = matches[i];
                 var end_index = match.index + match[0].length;
                 var partner_name = match[0].substring(1);
-                var processed_text = _.str.sprintf("<a href='#' class='o_mail_redirect' data-oe-model='res.partner' data-oe-id='%s'>%s</a>", partners[i].id, partner_name);
+                var processed_text = _.str.sprintf("<a href='#' class='o_mail_redirect' data-oe-model='res.partner' data-oe-id='%s'>@%s</a>", partners[i].id, partner_name);
                 var subtext = message.substring(start_index, end_index).replace(match[0], processed_text);
                 substrings.push(subtext);
                 start_index = end_index;
diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less
index 2e570f6cc86..143bcbcfcbb 100644
--- a/addons/mail/static/src/less/chatter.less
+++ b/addons/mail/static/src/less/chatter.less
@@ -42,7 +42,7 @@
 .o_followers {
     float: right;
     @media (max-width: @screen-xs-max) {
-        display: none; // Hide the followers in mobile
+        display: none !important; // Hide the followers in mobile
     }
 
     .o_followers_actions {
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index a402d103816..4e63a2b956f 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -106,15 +106,15 @@
             text-overflow: ellipsis;
             cursor: pointer;
 
-            &.o_active {
-                background-color: @gray-dark;
-            }
             &:hover {
-                background-color: @gray-dark;
+                background-color: darken(@gray, 8%);;
                 .o_mail_partner_unpin {
                     opacity: @sidebar-icon-opacity;
                 }
             }
+            &.o_active {
+                background-color: @gray-dark;
+            }
             .o_mail_partner_unpin {
                 opacity: 0;
                 &:hover {
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 99787dd03ed..869a4ba85aa 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -44,6 +44,9 @@
             opacity: @mail-thread-side-date-opacity;
         }
 
+        .o_mail_redirect {
+            cursor: pointer;
+        }
 
         .o_thread_message_core {
             .o-flex(1, 1, auto);
@@ -52,8 +55,9 @@
                 font-style: italic;
             }
 
-            .o_mail_redirect {
-                cursor: pointer;
+            .o_mail_notification {
+                font-style: italic;
+                color: gray;
             }
 
             > p {
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 5678bb3e832..ad287839c3e 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -33,7 +33,18 @@
     <t t-name="mail.ChatThread.Message">
         <div class="o_thread_message" t-att-data-message-id="message.id">
             <div t-if="options.display_avatar" class="o_thread_message_sidebar">
-                <img t-if="message.avatar_src &amp;&amp; message.display_author" t-att-src="message.avatar_src" class="o_thread_message_avatar"/>
+                <t t-if="!message.mailto &amp;&amp; message.author_id[0]">
+                    <img t-if="message.avatar_src &amp;&amp; message.display_author"
+                        t-att-src="message.avatar_src"
+                        data-oe-model="res.partner"
+                        t-att-data-oe-id="message.author_id[0]"
+                        class="o_thread_message_avatar o_mail_redirect"/>
+                </t>
+                <t t-if="message.mailto || !message.author_id[0]">
+                    <img t-if="message.avatar_src &amp;&amp; message.display_author"
+                        t-att-src="message.avatar_src"
+                        class="o_thread_message_avatar"/>
+                </t>
                 <span t-if="!message.display_author" t-att-title="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LLL')" class="o_thread_message_side_date">
                     <t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/>
                 </span>
@@ -43,7 +54,7 @@
                     <i t-if="message.is_needaction &amp;&amp; options.display_needactions"
                        class="fa fa-check o_thread_message_needaction"
                        t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>
-                    <i t-if="options.display_stars"
+                    <i t-if="options.display_stars &amp;&amp; message.message_type != 'notification'"
                         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>