[IMP] mail: various ui improvements

- less tweaks
- improve default channel name
- clean origin channel names in Inbox and Starred
- reduce fadeout duration in threads

addons/mail/data/mail_channel_demo.xml

@@ -4,15 +4,15 @@
 
         <!-- Discussion groups, done in 2 steps to remove creator from followers -->
         <record model="mail.channel" id="channel_1">
-            <field name="name">Best Sales Practices</field>
+            <field name="name">sales</field>
             <field name="description">Discussion about best sales practices and deals.</field>
         </record>
         <record model="mail.channel" id="channel_2">
-            <field name="name">Board meetings</field>
+            <field name="name">board-meetings</field>
             <field name="description">Board meetings, budgets, strategic plans</field>
         </record>
         <record model="mail.channel" id="channel_3">
-            <field name="name">R&amp;D</field>
+            <field name="name">rd</field>
             <field name="description">Research and development discussion group</field>
         </record>
 

addons/mail/static/src/js/thread.js

@@ -132,7 +132,8 @@ var Thread = Widget.extend({
     remove_message_and_render: function (message_id, messages, options) {
         var self = this;
         this.$('.o_thread_message[data-message-id=' + message_id + ']').fadeOut({
-            done: function () { self.render(messages, options); }
+            done: function () { self.render(messages, options); },
+            duration: 200,
         });
     },
 

addons/mail/static/src/less/client_action.less

@@ -15,9 +15,10 @@
     .o-flex-flow(row, nowrap);
 
     .o_mail_chat_sidebar {
-        .o-flex(0, 0, 200px);
+        .o-flex(0, 0, 220px);
         overflow: auto;
         padding: 8px 0;
+        font-weight: 300;
 
         @media (max-width: @screen-xs-max) {
             flex: none;
@@ -25,32 +26,30 @@
         }
 
         .o_mail_sidebar_title {
-            .o-webclient-padding(@top: 5px, @bottom: 5px);
             .o-flex-display();
+            padding: 5px 8px 5px @odoo-horizontal-padding;
             align-items: center;
             justify-content: space-between;
             h4 {
                 text-transform: uppercase;
             }
             .o_add {
-                padding: 8px;
+                padding: 6px;
             }
         }
         .o_mail_chat_channel_item {
             width: 100%;
-            .o-webclient-padding(@top: 5px, @bottom: 5px);
-            padding-left: 1.5*@odoo-horizontal-padding; // larger padding than titles
+            padding: 5px 8px 5px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
             > .badge {
                 margin: 0;
             }
             .o_mail_partner_unpin {
-                padding: 2px 8px;
+                padding: 2px 6px;
             }
         }
         .o_mail_add_channel {
             width: 100%;
-            .o-webclient-padding(@top: 5px, @bottom: 5px);
-            padding-left: 1.5*@odoo-horizontal-padding; // larger padding than titles
+            padding: 5px 8px 5px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
             position: relative;
 
             > input {
@@ -109,8 +108,8 @@
 @sidebar-icon-opacity: 0.6;
 .o_mail_chat {
     .o_mail_chat_sidebar {
-        background-color: @gray;
-        color: @gray-lighter;
+        background-color: darken(@gray, 8%);
+        color: lighten(@gray, 50%);
 
         .o_mail_chat_channel_item {
             overflow: hidden;
@@ -118,13 +117,13 @@
             cursor: pointer;
 
             &:hover {
-                background-color: darken(@gray, 8%);;
+                background-color: darken(@gray, 12%);;
                 .o_mail_partner_unpin {
                     opacity: @sidebar-icon-opacity;
                 }
             }
             &.o_active {
-                background-color: @gray-dark;
+                background-color: darken(@gray, 15%);
             }
             .o_mail_partner_unpin {
                 opacity: 0;

addons/mail/static/src/less/thread.less

@@ -73,14 +73,12 @@
                 .o_mail_mailto, .o_mail_mailto:hover {
                     .text-muted();
                 }
-                .o_channel_redirect {
-                    color: gray;
-                }
             }
 
             .o_thread_message_star, .o_thread_message_needaction {
                 cursor: pointer;
                 opacity: 0;
+                padding: 4px;
                 &.fa-star {
                     opacity: @mail-thread-icon-opacity;
                     color: gold;

addons/mail/static/src/xml/thread.xml

@@ -84,7 +84,7 @@
                         on <a class="o_mail_redirect" href="#" t-att-data-oe-model="message.model" t-att-data-oe-id="message.res_id"><t t-esc="message.record_name"/></a>
                     </t>
                     <t t-if="message.origin_id &amp;&amp; (message.origin_id !== options.channel_id)">
-                        (in channel <a class="o_channel_redirect" t-att-data-oe-id="message.origin_id" href="#"><t t-esc="message.origin_name"/>)</a>
+                        (from <a class="o_channel_redirect" t-att-data-oe-id="message.origin_id" href="#"><t t-esc="message.origin_name"/>)</a>
                     </t>
                 </p>
                 <t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">