From 1f78ae3c180120d51ff1ea1325d4aa832ca1b28d Mon Sep 17 00:00:00 2001
From: stefanorigano <sri@odoo.com>
Date: Sun, 20 Aug 2017 18:25:44 +0200
Subject: [PATCH 1/4] [REF] web, mail: change minors top-menu design

- Remove carets
- Fix badges position
- Vertical align user avatar
- If a dropdown is open, the menu-toggle should appear active
- Dropdown menus' widths should be at least as the dropdown-toggle
---
 addons/mail/static/src/less/systray.less |  8 ++++++--
 addons/web/static/src/less/navbar.less   | 13 +++++++++++--
 addons/web/static/src/xml/base.xml       |  3 +--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/addons/mail/static/src/less/systray.less b/addons/mail/static/src/less/systray.less
index 9c1d0905a77..66de1e9016b 100644
--- a/addons/mail/static/src/less/systray.less
+++ b/addons/mail/static/src/less/systray.less
@@ -3,11 +3,15 @@
     > a {
         opacity: 1;
         > i {
+            .o-transform(translateY(4px));
             font-size: larger;
         }
     }
     &.o_no_notification > a {
         opacity: 0.5;
+        > i {
+            .o-transform(translateY(0px));
+        }
         .o_notification_counter {
             display: none;
         }
@@ -21,9 +25,9 @@
         color: white;
         padding: 0em 0.3em;
         font-size: 0.7em;
-        top: 7%;
+        top: 19%;
         position: absolute;
-        margin: 0px 0px 0px 8px;
+        margin: 0px 0px 0px 6px;
     }
     .o_mail_navbar_dropdown {
         width: 350px;
diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/less/navbar.less
index d000ed4f469..5c8f718f98c 100644
--- a/addons/web/static/src/less/navbar.less
+++ b/addons/web/static/src/less/navbar.less
@@ -122,6 +122,7 @@
 
     .open .dropdown-menu {
         max-height: 90vh; // the dropdown should not overstep the viewport
+        min-width: 100%;
         overflow: auto;
         margin-top: 0;
 
@@ -134,8 +135,16 @@
         .o-menu-indentation(3);
     }
 
-    .oe_topbar_avatar {
-        height: 15px;
+    .open .dropdown-toggle {
+        background-color: @odoo-navbar-inverse-link-hover-bg;
+    }
+    .o_user_menu {
+        margin-left: 6px;
+
+        .oe_topbar_avatar {
+            height: 17px;
+            .o-transform(translateY(-2px));
+        }
     }
 
     @media (max-width: @screen-xs-max) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c03bccb50f5..71d6b43c60b 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -214,7 +214,6 @@
     <li class="o_debug_manager">
         <a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown">
             <span class="fa fa-bug"/>
-            <b class="caret"/>
         </a>
         <ul class="dropdown-menu o_debug_dropdown" role="menu"/>
     </li>
@@ -1353,7 +1352,7 @@
     <li class="o_user_menu">
         <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
             <img class="img-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'"/>
-            <span class="oe_topbar_name"/> <span class="caret"></span>
+            <span class="oe_topbar_name"/>
         </a>
         <ul class="dropdown-menu" role="menu">
             <li><a href="#" data-menu="documentation">Documentation</a></li>

From 378fe92b6096d50648d6aa4aa22e8629f4531c14 Mon Sep 17 00:00:00 2001
From: stefanorigano <sri@odoo.com>
Date: Sat, 26 Aug 2017 13:48:45 +0200
Subject: [PATCH 2/4] [REF] web: add btn-links variations

Create variations for btn-link with UI color classes.
These btns appear as default text (muted necessary) and they will use
an UI color on hover.
---
 .../static/src/less/bootstrap_overridden.less | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/addons/web/static/src/less/bootstrap_overridden.less b/addons/web/static/src/less/bootstrap_overridden.less
index 4a677d8da87..1f3f22cac3a 100644
--- a/addons/web/static/src/less/bootstrap_overridden.less
+++ b/addons/web/static/src/less/bootstrap_overridden.less
@@ -108,9 +108,43 @@
 }
 
 //== Buttons
+// Mixin to define variations for btn-links and muted btn-links
+.o-btn-link-variant(@color, @color-active) {
+    text-transform: none;
+    .o-hover-text-color(@default-color: @color, @hover-color: @color-active);
+
+    &, &:hover, &:focus, &:active, &.active {
+        border-color: transparent;
+        background-color: transparent
+    }
+
+    &.text-muted, .text-muted {
+        .o-hover-opacity();
+        .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
+    }
+}
 .btn-icon {
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
+.btn-link {
+    font-weight: @btn-font-weight;
+
+    &.btn-default {
+        .o-btn-link-variant(@text-color, @headings-color);
+    }
+    &.btn-success, &.text-success {
+        .o-btn-link-variant(@text-color, @brand-success);
+    }
+    &.btn-warning, &.text-warning {
+        .o-btn-link-variant(@text-color, @brand-warning);
+    }
+    &.btn-danger, &.text-danger {
+        .o-btn-link-variant(@text-color, @brand-danger);
+    }
+    &.btn-info, &.text-info {
+        .o-btn-link-variant(@text-color, darken(@brand-info, 20%));
+    }
+}
 
 //== Printing improvements
 @media print {

From 12b818d3759fc9eba19fa8a8ae8d050fe0c5fdc1 Mon Sep 17 00:00:00 2001
From: stefanorigano <sri@odoo.com>
Date: Tue, 8 Aug 2017 09:22:41 +0200
Subject: [PATCH 3/4] [REF] mail: introduce new chatter/discuss design

- Improve overall design
- Better use of UI colours
- Replace planned activities icon
- Vertically align kanban icons
- Remove the 'bell shtcut' and followers caret
- Use a mixin to style the chatter (inline, not inline, compact)
---
 addons/mail/static/src/js/chatter.js          |  16 +-
 addons/mail/static/src/js/client_action.js    |  17 +-
 addons/mail/static/src/js/window_manager.js   |   2 +-
 addons/mail/static/src/less/chat_window.less  |  32 +--
 addons/mail/static/src/less/chatter.less      | 223 ++++++++++++++++--
 .../mail/static/src/less/client_action.less   | 129 +++++-----
 addons/mail/static/src/less/composer.less     |  14 +-
 .../static/src/less/extended_chat_window.less |  23 +-
 .../mail/static/src/less/mail_activity.less   | 121 +++++++++-
 addons/mail/static/src/less/thread.less       |  10 +-
 addons/mail/static/src/xml/activity.xml       | 109 ++++++---
 addons/mail/static/src/xml/chatter.xml        |  40 ++--
 addons/mail/static/src/xml/client_action.xml  |  21 +-
 addons/mail/static/src/xml/composer.xml       |  40 ++--
 .../static/src/xml/extended_chat_window.xml   |   2 +-
 addons/mail/static/src/xml/followers.xml      |   1 -
 addons/mail/static/src/xml/systray.xml        |   2 +-
 addons/mail/static/src/xml/thread.xml         |   7 +-
 .../static/src/xml/web_kanban_activity.xml    |   2 +-
 19 files changed, 579 insertions(+), 232 deletions(-)

diff --git a/addons/mail/static/src/js/chatter.js b/addons/mail/static/src/js/chatter.js
index f5a85948762..f02eaadd42e 100644
--- a/addons/mail/static/src/js/chatter.js
+++ b/addons/mail/static/src/js/chatter.js
@@ -122,15 +122,19 @@ var Chatter = Widget.extend(chat_mixin, {
     // private
     _closeComposer: function (force) {
         if (this.composer && (this.composer.is_empty() || force)) {
+            this.$el.removeClass('o_chatter_composer_active');
+            this.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
             this.composer.do_hide();
             this.composer.clear_composer();
             this._muteNewMessageButton(false);
         }
     },
     _muteNewMessageButton: function (mute) {
-        this.$('.o_chatter_button_new_message')
-            .toggleClass('btn-primary', !mute)
-            .toggleClass('btn-default', mute);
+        // TOCHECK: If this function exist for design pourposes only, it can be removed
+
+        // this.$('.o_chatter_button_new_message')
+        //     .toggleClass('btn-primary', !mute)
+        //     .toggleClass('btn-default', mute);
     },
     _openComposer: function (options) {
         var self = this;
@@ -168,6 +172,12 @@ var Chatter = Widget.extend(chat_mixin, {
             });
             self.composer.on('need_refresh', self, self.trigger_up.bind(self, 'reload'));
             self.composer.on('close_composer', null, self._closeComposer.bind(self, true));
+
+            // TOCHECK: Toggle active chatter classes. It may be inproved?
+            self.$el.addClass('o_chatter_composer_active');
+            self.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
+            self.$('.o_chatter_button_new_message').toggleClass('o_active', !self.composer.options.is_log);
+            self.$('.o_chatter_button_log_note').toggleClass('o_active', self.composer.options.is_log);
         });
         this._muteNewMessageButton(true);
     },
diff --git a/addons/mail/static/src/js/client_action.js b/addons/mail/static/src/js/client_action.js
index a3cbc75a949..ac1f337415c 100644
--- a/addons/mail/static/src/js/client_action.js
+++ b/addons/mail/static/src/js/client_action.js
@@ -280,22 +280,27 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
     },
 
     select_message: function(message_id) {
+        var self = this;
+
         this.$el.addClass('o_mail_selection_mode');
         var message = chat_manager.get_message(message_id);
         this.selected_message = message;
         var subject = "Re: " + message.record_name;
         this.extended_composer.set_subject(subject);
-        if (this.channel.type !== 'static') {
-            this.basic_composer.toggle(false);
-        }
-        this.extended_composer.toggle(true);
+
+        this.basic_composer.$el.toggleClass('o_hidden', self.channel.type !== 'static');
+        this.extended_composer.$el.addClass('o_hidden');
+
         this.thread.scroll_to({id: message_id, duration: 200, only_if_necessary: true});
         this.extended_composer.focus('body');
     },
 
     unselect_message: function() {
-        this.basic_composer.toggle(this.channel.type !== 'static' && !this.channel.mass_mailing);
-        this.extended_composer.toggle(this.channel.type !== 'static' && this.channel.mass_mailing);
+        var self = this;
+
+        this.basic_composer.$el.toggleClass('o_hidden', !(self.channel.type !== 'static' && !self.channel.mass_mailing));
+        this.extended_composer.$el.toggleClass('o_hidden', !(self.channel.type !== 'static' && self.channel.mass_mailing));
+
         if (!config.device.touch) {
             var composer = this.channel.mass_mailing ? this.extended_composer : this.basic_composer;
             composer.focus();
diff --git a/addons/mail/static/src/js/window_manager.js b/addons/mail/static/src/js/window_manager.js
index 556e2f7b549..1e3ad352dd3 100644
--- a/addons/mail/static/src/js/window_manager.js
+++ b/addons/mail/static/src/js/window_manager.js
@@ -14,7 +14,7 @@ var QWeb = core.qweb;
 
 // chat window management
 //----------------------------------------------------------------
-var CHAT_WINDOW_WIDTH = 300 + 5;  // 5 pixels between windows
+var CHAT_WINDOW_WIDTH = 325 + 5;  // 5 pixels between windows
 var chat_sessions = [];
 var new_chat_session;
 var display_state = {
diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index 131b83fcc05..b7daa8d720f 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -1,5 +1,5 @@
 @o-chat-window-bg: white;
-@o-chat-window-width: 300px;
+@o-chat-window-width: 325px;
 
 .o_chat_window {
     .o-flex-display();
@@ -11,9 +11,9 @@
     max-height: 100%;
     font-size: 12px;
     background-color: @o-chat-window-bg;
-    border: 1px solid gray;
-    border-radius: 3px;
+    border-radius: 3px 3px 0 0;
     z-index: 3;
+    box-shadow: -5px -5px 20px fade(black, 28%);
 
     @media (max-width: @screen-xs-max) {
         width: 100%;
@@ -31,8 +31,10 @@
         .o-flex-display();
         .o-flex(0, 0, auto);
         color: white;
+        padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
+        border-radius: 3px 3px 0 0;
+        border-bottom: 1px solid @gray-lighter-dark;
         background-color: @odoo-brand-primary;
-        padding: 5px;
 
         @media (max-width: @screen-xs-max) {
             height: @navbar-height;
@@ -53,9 +55,7 @@
                 color: white;
                 padding: 3px;
                 margin-left: 5px;
-                &:hover {
-                    background-color: darken(@odoo-brand-primary, 10%);
-                }
+                .o-hover-opacity(0.7, 1);
             }
         }
 
@@ -64,6 +64,8 @@
     .o_mail_thread {
         .o-flex(1, 1, auto);
         overflow: auto;
+        border: 1px solid @gray-lighter-dark;
+        border-width: 0 1px;
 
         .o_thread_date_separator {
             margin-top: 0px;
@@ -82,11 +84,7 @@
     }
 
     .o_chat_composer {
-        .o-flex(0, 0, auto);
-        > input {
-            padding: 5px;
-            width: 100%;
-        }
+        .o-chat-composer-design(@mini-composer: true);
     }
 }
 
@@ -94,13 +92,18 @@
     width: auto;
     height: 28px;
     color: white;
-    background-color: @odoo-brand-primary;
+    background-color: @gray-dark;
     cursor: pointer;
+    box-shadow: none;
 
     @media (max-width: @screen-xs-max) {
         display: none;
     }
 
+    .o_chat_header {
+        border-radius: 0;
+    }
+
     .o_chat_window_dropdown_toggler {
         padding: 5px;
 
@@ -111,7 +114,7 @@
             font-size: smaller;
         }
     }
-    &.open .o_chat_window_dropdown_toggler .o_total_unread_counter {
+    &.open .o_chat_window_dropdown_toggler .o_total_unread_counter, .o_chat_window_expand {
         display: none;
     }
 
@@ -127,7 +130,6 @@
             }
             &:hover {
                 background-color: darken(@odoo-brand-primary, 10%);
-                color: white;
             }
         }
     }
diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less
index dde2eacbc2b..131990db82e 100644
--- a/addons/mail/static/src/less/chatter.less
+++ b/addons/mail/static/src/less/chatter.less
@@ -1,33 +1,222 @@
-.o_chatter {
-    width: 100%;
+@o-mail-chatter-gap: 10px;
 
-    .o_chat_composer {
-        margin-top: 10px;
+// Define the chat_composer design/layout as a mixin
+.o-chat-composer-design(@inline: false, @mini-composer: false) {
+    // All designs/layouts
+    & {
+        position: relative;
+        .o-flex-display();
+        .o-flex(0, 0, auto);
+        .o-align-items(flex-start);
+        margin: 1px 0;
+        border-top: none;
+        background: @gray-lighter;
 
-        .o_chatter_composer_info {
-            display: inline-block;
-            margin-bottom: 5px;
-            color: @odoo-main-color-muted;
-            font-style: italic;
+        .o_composer, .o_composer_subject {
+            position: relative;
+            background: white;
+
+            textarea, input {
+                border: none;
+            }
         }
 
         .o_composer {
-            margin-top: 10px;
-            .o_composer_input {
-                width: 100%;
-                .box-sizing(content-box);
-                resize: vertical;
-                margin-bottom: 5px;
+            textarea {
+                resize: none;
+            }
+
+            .btn-icon {
+                .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
+                border: none;
+            }
+
+            .o_composer_button_full_composer {
+                .o-position-absolute(0, 0);
             }
         }
     }
 
-    .o_mail_thread {
-        margin-top: 10px;
+    // Both inline e not-inline design. Mini-composer disabled.
+    & when (@mini-composer = false) {
+        padding:  @mail-thread-avatar-size*0.5;
+        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
+        border: 1px solid @gray-lighter-dark;
+        border-top: none;
+
+        .o_chatter_avatar {
+            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
+        }
+
+        .o_composer_container, .o_composer_send {
+            .o-flex-display();
+        }
+
+        .o_chatter_composer_info, .o_composer_suggested_partners {
+            .o-flex(0, 0, 100%);
+            margin-bottom: @o-mail-chatter-gap*0.5;
+        }
+
+        .o_composer_container {
+            position: relative;
+            .o-flex-flow(column, nowrap);
+        }
+
+        .o_composer {
+            margin-bottom: @o-mail-chatter-gap;
+            border-radius: 2px;
+            textarea {
+                padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
+            }
+        }
+
+        .o_composer, .o_composer_subject {
+            border: 1px solid @gray-lighter-dark;
+
+            textarea, input {
+                padding: 0 0 @o-mail-chatter-gap;
+                border: none;
+            }
+        }
+        .o_composer_subject {
+            border-bottom: 0;
+            border-radius: 2px 2px 0 0;
+        }
+
+        .o_chatter_composer_tools {
+            border-top: 1px solid @gray-lighter-dark;
+        }
     }
 
+    // Not-inline design.
+    & when (@inline = false) and (@mini-composer = false) {
+        .o-flex-flow(row, wrap);
+
+        .o_composer_container, .o_composer_button_send {
+            .o-flex(1, 0, 100%);
+        }
+        .o_composer, .o_composer_subject {
+            padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
+        }
+    }
+
+    // Inline design.
+    & when (@inline = true) and (@mini-composer = false) {
+        .o_composer_container {
+            .o-flex(1, 0, auto);
+        }
+        .o_composer {
+            padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap;
+            border-radius: 2px 0 0 2px;
+            border-right: 0;
+        }
+        .o_composer_input {
+            .o-flex-display();
+            .o-flex-flow(row, wrap);
+        }
+        .o_composer_text_field {
+            .o-flex(1, 1, 50%);
+            margin: 0;
+            padding: 0;
+        }
+        .o_chatter_composer_tools {
+            .o-flex(0, 1, auto);
+        }
+        .o_composer_attachments_list {
+            .o-flex(1, 0, 100%);
+        }
+
+        .o_chatter_composer_tools {
+            border: none;
+            border-left: 1px solid @gray-lighter-dark;
+            padding-left: @o-mail-chatter-gap*0.5;
+            .o-transform(translateY(-@o-mail-chatter-gap*0.5));
+        }
+
+        .o_composer_button_send {
+            .o-flex(0, 0, auto);
+            border-radius: 0 3px 3px 0;
+            // Make the button appear as the same size as the subject input
+            padding: 10px @padding-base-horizontal;
+            border: 1px solid darken(@odoo-brand-optional, 5%);
+            border-left-width: 0;
+        }
+    }
+
+    // Mini-composer enabled
+    & when (@mini-composer = true) {
+        .o_composer_container {
+            border-top: 1px solid @gray-lighter-dark;
+            width: 100%;
+        }
+        .o_composer_input {
+            .o-flex-display();
+            .o-flex-flow(row, nowrap);
+            padding: @o-mail-chatter-gap;
+
+            textarea.o_composer_text_field {
+                .o-flex(1, 1, auto);
+                padding-top: @o-mail-chatter-gap*0.5;
+            }
+
+            .o_chatter_composer_tools {
+                .o-flex(0, 0, auto);
+            }
+        }
+
+        .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list {
+            display: none;
+        }
+    }
+
+}
+
+// Default chatter layout.
+// Extended in enterprise by form_view.less to achieve the side-chatter
+.o_chatter {
+    width: 100%;
+    padding-top: 0!important;
+
     .o_spinner {
         text-align: center;
         font-size: large;
     }
+
+    .o_chatter_topbar {
+        height: @odoo-statusbar-height;
+        position: relative;
+        margin: @grid-gutter-width*0.5 -@grid-gutter-width*0.5 0;
+        padding: 0 @grid-gutter-width*0.5;
+        .o-flex-display();
+
+        > .btn {
+            height: @odoo-statusbar-height + 1;
+            border: 1px solid transparent;
+        }
+
+        > .o_followers {
+            height: @odoo-statusbar-height + 1;
+            border-bottom: 1px solid transparent;
+            .o-flex(1,1,auto);
+        }
+    }
+
+    .o_chat_composer {
+        .o-chat-composer-design();
+    }
+
+    &.o_chatter_composer_active .o_chatter_topbar {
+        > .btn, > .o_followers{
+            border-radius: @border-radius-small @border-radius-small 0 0;
+            border-width: 0 0 1px;
+            border-bottom-color: @gray-lighter-dark;
+
+            &.o_active {
+                color: @odoo-brand-primary;
+                background-color: @gray-lighter;
+                border-color: @gray-lighter-dark;
+                border-width: 1px 1px 0;
+            }
+        }
+    }
 }
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 53ac45d8d3f..df1e3bc8560 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -2,6 +2,7 @@
 // Layout
 // ------------------------------------------------------------------
 @mail-chat-sidebar-width: 250px;
+
 .o_mail_chat {
     .o-position-absolute(0, 0, 0, 0);
     height: 100%;
@@ -44,8 +45,7 @@
         height: 100%;
         float: left;
         overflow: auto;
-        padding: 8px 0;
-        font-weight: 300;
+        padding: @odoo-horizontal-padding 0;
 
         @media (max-width: @screen-xs-max) {
             width: 100%;
@@ -53,9 +53,13 @@
             display: none;
         }
 
+        @media (min-width: @screen-lg-min) {
+            width: @mail-chat-sidebar-width + 50px;
+        }
+
         .o_mail_sidebar_title {
             .o-flex-display();
-            padding: 12px 8px 5px @odoo-horizontal-padding;
+            padding: 6px @odoo-horizontal-padding 0 @odoo-horizontal-padding;
             align-items: center;
             justify-content: space-between;
             h4 {
@@ -72,7 +76,8 @@
         .o_mail_chat_channel_item {
             .o-flex-display();
             width: 100%;
-            padding: 2px 8px 2px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
+            padding: 2px @odoo-horizontal-padding 2px (@odoo-horizontal-padding + 23px); // compensate icon
+
             .o_channel_name {
                 .o-flex(1, 1, auto);
                 .o-text-overflow();
@@ -90,21 +95,27 @@
                 margin-left: 3px;
             }
 
+            &.o_mail_chat_title_main {
+                padding: @padding-base-vertical @odoo-horizontal-padding;
+                margin-bottom: 2px;
+            }
         }
+
+        .o_mail_chat_channel_item + .o_mail_sidebar_title {
+            margin-top: @padding-base-vertical;
+        }
+
         .o_mail_add_channel {
             width: 100%;
-            padding: 5px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
+            padding: 5px (@odoo-horizontal-padding + 23px); // compensate icon
             position: relative;
 
             > input {
                 width: 100%;
                 padding: 2px 5px;
-                padding-left: 12px;
             }
             > span {
-                position: absolute;
-                top: 7px;
-                left: 27px;
+                .o-position-absolute(7px, @left:27px);
             }
         }
     }
@@ -123,6 +134,10 @@
             margin-left: 0;
         }
 
+        @media (min-width: @screen-lg-min) {
+            margin-left: @mail-chat-sidebar-width + 50px;
+        }
+
         .o_mail_thread {
             .o-flex(1, 0, 0);
             overflow: auto;
@@ -133,33 +148,15 @@
                 text-align: justify;
             }
         }
-        .o_chat_composer {
-            .o-flex(0, 0, auto);
-            .o-webclient-padding(@top: 2px, @bottom: 8px);
 
-            .o_composer {
-                .o-flex-display();
+        .o_chat_composer:not(.o_chat_composer_extended) {
+            .o-chat-composer-design(@inline: true);
 
-                .o_composer_input {
-                    .o-flex(1, 1, auto);
-                    margin-right: 5px;
-                    > textarea {
-                        padding: 5px;
-                        border: none;
-                    }
-                }
-                &.o_extended_composer .o_composer_input {
-                    margin-right: 0;
-                }
-            }
-
-            .o_composer_buttons {
-                .o-flex(0, 0, auto);
-                .o_composer_button_send {
-                    float: right;
-                }
-            }
         }
+        .o_chat_composer.o_chat_composer_extended {
+            .o-chat-composer-design(@inline: false);
+        }
+
         .o_mail_snackbar {
             .o-position-absolute(15px, 15px);
             padding-top: 10px;
@@ -174,24 +171,27 @@
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
-@sidebar-icon-opacity: 0.6;
+@sidebar-icon-opacity: 0.7;
+
 .o_mail_chat {
     .o_mail_chat_sidebar {
-        background-color: darken(@gray, 8%);
-        color: lighten(@gray, 60%);
-        opacity: 0.9;
+        background-color: @gray-dark;
+        color: @gray-lighter-dark;
 
         .o_mail_chat_channel_item {
             cursor: pointer;
 
             &:hover {
-                background-color: darken(@gray, 12%);;
+                background-color: darken(@gray-dark,2%);
+
                 .o_mail_partner_unpin {
                     opacity: @sidebar-icon-opacity;
                 }
             }
+
             &.o_active {
-                background-color: darken(@gray, 15%);
+                background-color: @gray-darker;
+                box-shadow: inset 3px 0 0 @odoo-brand-optional;
             }
 
             .o_mail_hash {
@@ -199,10 +199,7 @@
             }
 
             .o_mail_partner_unpin {
-                opacity: 0;
-                &:hover {
-                    opacity: 1;
-                }
+                .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
             }
             &.o_unread_message {
                 color: white;
@@ -212,7 +209,23 @@
             > .badge {
                 color: white;
                 background-color: @odoo-brand-optional;
+                font-size: 10px;
+                line-height: 16px;
+                height: 18px;
             }
+
+            &.o_mail_chat_title_main {
+                font-size: @font-size-base;
+
+                &.o_mail_chat_title_starred > .badge {
+                    background-color: @gray-light;
+                    border-color: @gray-light;
+                }
+            }
+        }
+
+        > hr {
+            border-color: @gray;
         }
 
         .o_mail_add_channel {
@@ -227,35 +240,24 @@
 
         .o_mail_sidebar_title {
             h4 {
-                font-size: 13px;
+                margin: 0;
+                font-size: @font-size-small;
                 text-transform: uppercase;
+                color: @gray-light;
                 &.o_mail_open_channels:hover {
                     color: white;
                 }
             }
             .o_add {
                 cursor: pointer;
-                opacity: @sidebar-icon-opacity;
-                &:hover {
-                    opacity: 1;
-                }
+                .o-hover-opacity(@sidebar-icon-opacity, 1);
+                .o-hover-text-color(@gray-light, white);
             }
         }
     }
 
     .o_mail_chat_content {
         background-color: white;
-
-        .o_chat_composer {
-            border-top: 1px solid @odoo-brand-optional;
-            background-color: @odoo-brand-optional;
-
-            .o_attachment {
-                .o_attachment_name, .o_attachment_delete {
-                    color: white;
-                }
-            }
-        }
     }
 
     &.o_mail_selection_mode {
@@ -270,15 +272,14 @@
     }
 }
 
-// User status bullet
 .o_mail_user_status {
-    font-size: 10px;
+    font-size: 1em;
     position: relative;
-    bottom: 1px;
+
     &.o_user_online {
-        color: @odoo-brand-optional;
+        color: @brand-success;
     }
     &.o_user_idle {
-        color: orange;
+        color: @brand-warning;
     }
 }
diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index eb5be1225ac..88418bfb4ef 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -36,15 +36,21 @@
 // Emoji
 .o_mail_emoji {
     display: inline-block;
-    height: 24px;
-    width: 24px;
+    .square(24px);
 
     > img {
         width: 100%;
     }
 }
-.o_composer_emoji .o_mail_emoji {
-    cursor: pointer; // only in the popover
+
+.o_composer_emoji {
+    .popover-content {
+        padding: @o-mail-chatter-gap*0.3 0;
+    }
+    .o_mail_emoji {
+        margin: @o-mail-chatter-gap*0.6;
+        cursor: pointer; // only in the popover
+    }
 }
 
 // Attachment Icons (common for chat thread and chat composer)
diff --git a/addons/mail/static/src/less/extended_chat_window.less b/addons/mail/static/src/less/extended_chat_window.less
index 99a308241eb..028befebdf9 100644
--- a/addons/mail/static/src/less/extended_chat_window.less
+++ b/addons/mail/static/src/less/extended_chat_window.less
@@ -2,33 +2,26 @@
     &.o_thread_less {
         .o_chat_search_input {
             .o-flex-display();
-            padding: 5px;
+            .o-align-items(baseline);
+            padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
+
             > span {
                 .o-flex(0, 0, auto);
             }
+
             > input {
                 margin-left: 5px;
+                padding: @o-mail-chatter-gap*0.5;
                 .o-flex(1, 1, 100%);
             }
         }
+
         .o_mail_thread {
-            background-color: lightgray;
+            background-color: @odoo-webclient-background-color;
         }
+
         .o_chat_composer {
             display: none;
         }
     }
-
-    .o_chat_composer {
-        .o_composer {
-            border-top: 1px solid lightgray;
-            .o_composer_input textarea {
-                display: block;
-                padding: 5px;
-            }
-        }
-        .o_composer_attachments_list, .o_composer_buttons {
-            display: none;
-        }
-    }
 }
diff --git a/addons/mail/static/src/less/mail_activity.less b/addons/mail/static/src/less/mail_activity.less
index 815fbd381fb..9c08d4c0a24 100644
--- a/addons/mail/static/src/less/mail_activity.less
+++ b/addons/mail/static/src/less/mail_activity.less
@@ -5,7 +5,101 @@
     }
 
     .o_thread_date_separator.o_border_dashed {
-        border-bottom: dashed #eeeeee 2px;
+        border-bottom-style: dashed;
+
+        &[data-toggle="collapse"] {
+            cursor: pointer;
+
+            .o_chatter_planned_activities_summary {
+                display: none;
+            }
+
+            &.collapsed {
+                margin-bottom: 0;
+                .o-transition(margin, 0.8s);
+
+                .o_chatter_planned_activities_summary {
+                    display: inline-block;
+
+                    span {
+                        padding: 0 5px;
+                        border-radius: 100%;
+                        font-size: 11px;
+                    }
+                }
+
+                i.fa-caret-down:before {
+                    content: '\f0da';
+                }
+            }
+        }
+    }
+
+    #o_chatter_planned_activities {
+        .o_thread_message {
+            .o_thread_message_sidebar {
+                .o_avatar_stack {
+                    position: relative;
+                    text-align: left;
+                    margin-bottom: 8px;
+
+                    img {
+                        .square(31px);
+                    }
+
+                    .o_avatar_icon {
+                        .o-position-absolute(@right: -5px, @bottom: -5px);
+                        .square(25px);
+                        padding: 6px 5px;
+                        text-align: center;
+                        line-height: 1.2;
+                        color: white;
+                        border-radius: 100%;
+                        border: 2px solid white;
+                    }
+                }
+            }
+
+            .o_mail_info {
+                .o_activity_info {
+                    vertical-align: baseline;
+                    padding: 4px 6px;
+                    background: @gray-lighter;
+                    border-radius: 2px 2px 0 0;
+                    .o-hover-opacity(1, 1);
+
+                    &.collapsed {
+                        .o-hover-opacity(0.5, 1);
+                        background: transparent;
+                    }
+                }
+            }
+
+            .o_thread_message_collapse .dl-horizontal.well {
+                display: inline-block;
+                margin-bottom: 0;
+
+                dt {
+                    max-width: 80px;
+                }
+                dd {
+                    margin-left: 95px;
+                }
+            }
+
+            .o_thread_message_note {
+                margin: 2px 0 5px;
+            }
+
+            .o_thread_message_tools {
+                .o_activity_link {
+                    padding: 0 @padding-base-horizontal;
+                }
+                .o_activity_done {
+                    padding-left: 0;
+                }
+            }
+        }
     }
 
     .o_thread_message_core.o_mail_note {
@@ -17,27 +111,24 @@
     }
 
     .o_activity_color_planned {
-        color: @brand-primary;
+        color: @brand-success;
     }
     .o_activity_color_overdue {
         color: @brand-danger;
     }
     .o_activity_color_today {
-        color: @brand-success;
+        color: @brand-warning;
     }
-
-    .o_activity_link {
-        color: @gray;
-        &:hover {
-            color: @brand-success;
-        }
-    }
-
 }
+
 /* Feedback popover (form view) */
 .o_mail_activity_feedback {
     max-width: 410px;
     outline: none;
+
+    textarea {
+        min-width: 250px;
+    }
 }
 
 /* Kanban View */
@@ -47,6 +138,14 @@
     }
 
     .o_mail_activity {
+        .o_activity_btn {
+            span.fa {
+                overflow: visible;
+                line-height: 1;
+                vertical-align: middle;
+            }
+        }
+
         .o_activity_link_kanban {
             visibility: hidden;
         }
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 8cb0bbae55f..da06d8fe91d 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -11,7 +11,7 @@
     .o_thread_date_separator {
         margin-top: 15px;
         margin-bottom: 30px;
-        border-bottom: solid @gray-lighter 2px;
+        border-bottom: solid #E5E5E5 1px; // @gray-lighter
         text-align: center;
 
         .o_thread_date {
@@ -102,9 +102,7 @@
             max-width: 100%;
             word-wrap: break-word;
 
-            &.o_mail_note {
-                background-color: @gray-lighter;
-            }
+            &.o_mail_note {}
 
             .o_mail_subject {
                 font-style: italic;
@@ -144,6 +142,10 @@
                 .o_mail_mailto, .o_mail_mailto:hover {
                     .text-muted();
                 }
+
+                strong {
+                    color: @headings-color;
+                }
             }
 
             .o_thread_message_star, .o_thread_message_needaction, .o_thread_message_reply, .o_thread_message_email {
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 4cab7bff9ad..42a9c1367bb 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -1,45 +1,86 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.activity_items">
-        <div t-if="activities.length" class="o_thread_date_separator o_border_dashed">
-            <span class="o_thread_date">Planned</span>
+        <div t-if="activities.length" class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
+            <t t-set="today_activities" t-value="0"/>
+            <t t-set="planned_activities" t-value="0"/>
+            <t t-set="overdue_activities" t-value="0"/>
+            <t t-foreach="activities" t-as="a">
+                <t t-if="a.state == 'today'" t-set="today_activities" t-value="today_activities + 1"/>
+                <t t-if="a.state == 'overdue'" t-set="overdue_activities" t-value="overdue_activities + 1"/>
+                <t t-if="a.state == 'planned'" t-set="planned_activities" t-value="planned_activities + 1"/>
+            </t>
+            <span class="o_thread_date btn">
+                <i class="fa fa-fw fa-caret-down"/>
+                Planned activities
+                <small class="o_chatter_planned_activities_summary ml8">
+                    <span class="label img-circle label-danger"><t t-esc="overdue_activities"/></span>
+                    <span class="label img-circle label-warning"><t t-esc="today_activities"/></span>
+                    <span class="label img-circle label-success"><t t-esc="planned_activities"/></span>
+                </small>
+            </span>
         </div>
-        <t t-foreach="activities" t-as="activity">
-            <div class="o_thread_message">
-                <div class="o_thread_message_sidebar">
-                    <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small"
-                        class="o_thread_message_avatar mb8"/>
-                    <a href="#" class="o_activity_done o_activity_link" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover"><span class="fa fa-check-circle fa-2x" /></a>
-                </div>
-                <div class="o_thread_message_core o_mail_note">
-                    <div class="o_mail_info">
-                        <strong>
-                            <span t-attf-class="fa #{activity.icon}" />
-                            <t t-esc="activity.activity_type_id[1]" />
-                        </strong>
-                        <span class="fa fa-clock-o ml8" />
-                        <strong>
-                            <span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /> (<t t-esc="activity.date_deadline"/>) </span>
-                        </strong>
-                        planned by <t t-esc="activity.create_uid[1]" />
-                        <t t-if="activity.create_uid[0] != activity.user_id[0]">
-                            for <t t-esc="activity.user_id[1]" />
-                        </t>
-                        - <t t-esc="activity.time_ago"/>
-                        <div class="pull-right">
-                            <a href="#" class="o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">Edit</a> |
-                            <a href="#" class="o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">Remove</a>
+        <div t-if="activities.length" id="o_chatter_planned_activities" class="collapse in">
+            <t t-foreach="activities" t-as="activity">
+                <div class="o_thread_message" style="margin-bottom: 10px">
+                    <div class="o_thread_message_sidebar">
+                        <div class="o_avatar_stack">
+                            <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
+                            <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
+                               t-att-title="activity.activity_type_id[1]"/>
                         </div>
                     </div>
-                    <div t-if="activity.summary">
-                        <strong><t t-esc="activity.summary"/></strong>
-                    </div>
-                    <div t-if="activity.note">
-                        <t t-raw="activity.note"/>
+                    <div class="o_thread_message_core o_mail_note">
+                        <div class="o_mail_info">
+                            <strong><span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /></span></strong>:
+                            <strong t-if="activity.summary"> &#8220;<t t-esc="activity.summary"/>&#8221;</strong>
+                            <strong t-if="!activity.summary"> <t t-esc="activity.activity_type_id[1]" /></strong>
+                            <i> for </i>
+                            <t t-esc="activity.user_id[1]" />
+                            <a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
+                                <i class="fa fa-info-circle"></i>
+                            </a>
+                            <div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
+                                <dl class="dl-horizontal well">
+                                    <dt>Activity type</dt>
+                                    <dd class="mb8">
+                                        <t t-esc="activity.activity_type_id[1]"/>
+                                    </dd>
+                                    <dt>Created By</dt>
+                                    <dd class="mb8">
+                                        <img t-attf-src="/web/image/res.users/#{activity.create_uid[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <b><t t-esc="activity.create_uid[1]"/></b>
+                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
+                                        <i>, on</i> <t t-esc="activity.create_date"/>
+                                    </dd>
+                                    <dt>Assigned to</dt>
+                                    <dd class="mb8">
+                                        <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <b><t t-esc="activity.user_id[1]"/></b>
+                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
+                                        <i>, due to </i><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline"/></span>
+                                    </dd>
+                                </dl>
+                            </div>
+                        </div>
+                        <div t-if="activity.note" class="o_thread_message_note small">
+                            <t t-raw="activity.note"/>
+                        </div>
+                        <div class="o_thread_message_tools btn-group">
+                            <a href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
+                                <i class="fa fa-check"/> Mark Done
+                            </a>
+                            <a href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
+                                <i class="fa fa-pencil"/> Edit
+                            </a>
+                            <a href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
+                                <i class="fa fa-times"/> Cancel
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </t>
+            </t>
+        </div>
     </t>
     <t t-name="mail.activity_feedback_form">
         <div>
diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
index d6533da5b34..ef8bf100419 100644
--- a/addons/mail/static/src/xml/chatter.xml
+++ b/addons/mail/static/src/xml/chatter.xml
@@ -6,26 +6,22 @@
     -->
     <t t-name="mail.chatter.ChatComposer" t-extend="mail.ChatComposer">
         <!-- Insert information before the composer -->
-        <t t-jquery=".o_composer_attachments_list" t-operation="before">
-            <!-- Internal note composer -->
-            <t t-if="widget.options.is_log">
-                <span class="o_chatter_composer_info">
-                    Log an internal note which will not be sent to followers, but which can be read
-                    by users accessing this document.
-                </span>
-            </t>
+        <t t-jquery=".o_composer_container" t-operation="before">
             <!-- New message composer -->
             <t t-if="!widget.options.is_log">
                 <!-- Text for followers -->
-                <span class="o_chatter_composer_info">
-                    To: Followers of
-                    <t t-if="widget.options.record_name">
-                        &quot;<t t-esc="widget.options.record_name"/>&quot;
-                    </t>
-                    <t t-if="!widget.options.record_name">
-                        this document
-                    </t>
-                </span>
+                <small class="o_chatter_composer_info">
+                    <b class="text-muted">To: </b>
+                    <em class="text-muted">Followers of </em>
+                    <b>
+                        <t t-if="widget.options.record_name">
+                            &#32;&quot;<t t-esc="widget.options.record_name"/>&quot;
+                        </t>
+                        <t t-if="!widget.options.record_name">
+                            this document
+                        </t>
+                    </b>
+                </small>
                 <!-- List of followers -->
                 <div class="o_composer_suggested_partners">
                     <t t-foreach='widget.suggested_partners' t-as='recipient'>
@@ -43,7 +39,7 @@
 
         <!-- Add a button to open the full composer dialog -->
         <t t-jquery=".o_composer_button_add_attachment" t-operation="after">
-            <button tabindex="6" class="btn btn-sm btn-icon fa fa-pencil-square-o o_composer_button_full_composer" type="button"/>
+            <button tabindex="6" class="btn btn-sm btn-icon fa fa-expand o_composer_button_full_composer" type="button"/>
         </t>
     </t>
 
@@ -51,14 +47,14 @@
         Chatter (mail_thread widget) buttons
     -->
     <t t-name="mail.Chatter.Buttons">
-        <button t-if="new_message_btn" type="button" class="btn btn-sm btn-primary o_chatter_button_new_message" title="Send a message">
-            New message
+        <button t-if="new_message_btn" type="button" class="btn btn-sm btn-link o_chatter_button_new_message" title="Send a message">
+            Send message
         </button>
         <button t-if="log_note_btn" class="btn btn-sm btn-link o_chatter_button_log_note" title="Log a note. Followers will not be notified.">
-            Log an internal note
+            Log note
         </button>
         <button t-if="schedule_activity_btn" class="btn btn-sm btn-link o_chatter_button_schedule_activity" title="Lor or schedule an activity">
-            Log or schedule an activity
+            <i class="fa fa-clock-o"/> Schedule activity
         </button>
     </t>
 
diff --git a/addons/mail/static/src/xml/client_action.xml b/addons/mail/static/src/xml/client_action.xml
index 952b93af1a0..b4539dd7bb7 100644
--- a/addons/mail/static/src/xml/client_action.xml
+++ b/addons/mail/static/src/xml/client_action.xml
@@ -17,22 +17,24 @@
     </t>
     <t t-name="mail.chat.Sidebar">
         <div class="o_mail_chat_sidebar">
-            <div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
                  data-channel-id="channel_inbox">
-                <span class="o_channel_name"> <i class="fa fa-at"/> Inbox </span>
+                <span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
                 <t t-set="counter" t-value="needaction_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
-            <div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
                  data-channel-id="channel_starred">
-                <span class="o_channel_name"> <i class="fa fa-star-o"/> Starred </span>
+                <span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
                 <t t-set="counter" t-value="starred_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
+            <hr class="mb8"/>
 
             <t t-set="channel_type" t-value="'public'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Channels</t>
+                <t t-set="channel_icon">fa-users</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
                 <t t-set="display_hash" t-value="true"/>
@@ -42,18 +44,20 @@
             <t t-set="channel_type" t-value="'dm'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Direct Messages</t>
+                <t t-set="channel_icon">fa-user</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
                 <t t-set="display_status" t-value="true"/>
-                <t t-set="input_placeholder">Open chat</t>
+                <t t-set="input_placeholder">User name</t>
             </t>
 
             <t t-set="channel_type" t-value="'private'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Private Channels</t>
+                <t t-set="channel_icon">fa-eye-slash</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
-                <t t-set="input_placeholder">Add a channel</t>
+                <t t-set="input_placeholder">Add a private channel</t>
                 <t t-set="display_hash" t-value="true"/>
             </t>
         </div>
@@ -76,7 +80,10 @@
         </t>
         <t t-if="!disable_add_channel || !empty">
             <div class="o_mail_sidebar_title">
-                <h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''"><t t-esc="channel_title"/></h4>
+                <h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''">
+                    <i t-if="channel_icon" t-attf-class="mr4 fa-fw fa #{channel_icon}"></i>
+                    <b><t t-esc="channel_title"/></b>
+                </h4>
                 <span t-if="!disable_add_channel" class="fa fa-plus o_add" title="Add" t-attf-data-type="#{channel_type}"/>
             </div>
         </t>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 032a71edbcd..7e6501d0889 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -1,31 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-     <div t-name="mail.ChatComposer" class="o_chat_composer">
-         <div class="o_composer_attachments_list"/>
-         <t t-if="widget.extended">
-             <div class="o_composer_subject">
-                 <input tabindex="1" type="text" class="o_input" placeholder="Subject"></input>
-                 <div class="btn-group o_composer_buttons">
-                    <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
-                    <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                    <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                 </div>
+     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : ''}">
+         <div class="o_composer_container">
+             <!-- TODO: Use real user avatar -->
+             <img height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" src="https://pbs.twimg.com/profile_images/885832422667038720/NmqlCWGq_400x400.jpg"/>
+             <div t-if="widget.extended" class="o_composer_subject">
+                 <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
-         </t>
-         <div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
-             <div class="o_composer_input">
-                 <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
+             <div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
+                <div class="o_composer_input">
+                    <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
+                    <div class="o_chatter_composer_tools">
+                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
+                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
+                    </div>
+                </div>
              </div>
-             <t t-if="!widget.extended">
-                 <div class="btn-group o_composer_buttons">
-                    <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
-                    <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                    <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                 </div>
-             </t>
+             <div class="o_composer_attachments_list"/>
+         </div>
+         <div class="o_composer_send">
+             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
          </div>
-
          <span class="hide">
             <t t-call="HiddenInputFile">
                 <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
diff --git a/addons/mail/static/src/xml/extended_chat_window.xml b/addons/mail/static/src/xml/extended_chat_window.xml
index 51da2b9cb32..5548688d462 100644
--- a/addons/mail/static/src/xml/extended_chat_window.xml
+++ b/addons/mail/static/src/xml/extended_chat_window.xml
@@ -5,7 +5,7 @@
         <t t-jquery=".o_chat_header" t-operation="after">
             <div t-if="widget.options.thread_less" class="o_chat_search_input">
                 <span> To: </span>
-                <input type="text"/>
+                <input type="text" placeholder="User name"/>
             </div>
         </t>
     </t>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 5d3b9d491a9..2a76d9d95f1 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -11,7 +11,6 @@
                         data-toggle="dropdown" aria-expanded="false">
                     <i class="fa fa-user"></i>
                     <span class="o_followers_count"/>
-                    <span class="caret"/>
                 </button>
                 <ul class="dropdown-menu o_followers_list" role="menu"></ul>
             </div>
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 77f356be27f..8e7e9b161d4 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -81,7 +81,7 @@
     <t t-name="mail.chat.ActivityMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
-                <i class="fa fa-check-square-o"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-clock-o"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
                 <li class="o_mail_navbar_dropdown_channels"/>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index bdee6c580df..b15c5251cd0 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -53,12 +53,12 @@
                         t-att-src="message.avatar_src"
                         data-oe-model="res.partner"
                         t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
-                        t-attf-class="o_thread_message_avatar #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
+                        t-attf-class="o_thread_message_avatar img-circle #{message.author_redirect ? '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"/>
+                        class="o_thread_message_avatar img-circle"/>
                 </t>
                 <span t-if="!message.display_author" t-att-title="message.date" class="o_thread_message_side_date">
                     <t t-esc="message.date.format('hh:mm')"/>
@@ -165,7 +165,8 @@
     </t>
 
     <t t-name="mail.ChatComposer.Attachments">
-        <div class="o_attachments">
+        <div t-if="attachments.length > 0" class="o_attachments">
+            <h5 class="mt4 mb0 small text-muted">Attachments:</h5>
             <t t-foreach="attachments" t-as='attachment'>
                 <t t-call="mail.Attachment">
                      <t t-set="editable" t-value="true"/>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index c022f078ea0..46cf3786de3 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -4,7 +4,7 @@
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
         <a class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
-            <span class="fa fa-chevron-circle-right fa-lg fa-fw"/>
+            <span class="fa fa-clock-o fa-lg fa-fw"/>
         </a>
         <ul class="dropdown-menu o_activity" role="menu">
         </ul>

From 24ea61163d30f5357e3cd8a6e6d84cf39f89d3fc Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 1 Sep 2017 14:06:15 +0200
Subject: [PATCH 4/4] [REF] mail: review new chatter design

- Use classes instead of repeated mixins
- Add real user avatar instead of fake one
- Reorganize LESS rules
---
 addons/mail/static/src/js/activity.js         |  15 +-
 addons/mail/static/src/js/chatter.js          |  10 -
 addons/mail/static/src/js/chatter_composer.js |   3 +-
 addons/mail/static/src/js/client_action.js    |  14 +-
 addons/mail/static/src/js/composer.js         |  12 +-
 .../static/src/js/extended_chat_window.js     |   2 +-
 addons/mail/static/src/less/chat_window.less  |  10 +-
 addons/mail/static/src/less/chatter.less      | 177 ---------------
 .../mail/static/src/less/client_action.less   |  10 +-
 addons/mail/static/src/less/composer.less     | 212 +++++++++++++++---
 addons/mail/static/src/less/thread.less       |   4 +-
 addons/mail/static/src/xml/activity.xml       |  34 +--
 addons/mail/static/src/xml/chat_window.xml    |   2 +-
 addons/mail/static/src/xml/composer.xml       |   5 +-
 addons/mail/static/src/xml/followers.xml      |   9 +-
 addons/mail/static/src/xml/thread.xml         |   1 -
 16 files changed, 243 insertions(+), 277 deletions(-)

diff --git a/addons/mail/static/src/js/activity.js b/addons/mail/static/src/js/activity.js
index 85e05cf5646..1b2b57e784f 100644
--- a/addons/mail/static/src/js/activity.js
+++ b/addons/mail/static/src/js/activity.js
@@ -127,9 +127,18 @@ var Activity = AbstractActivityField.extend({
                     activity.note = utils.parse_and_transform(activity.note, utils.add_link);
                 }
             });
-            self.$el.html(QWeb.render('mail.activity_items', {
-                activities: setDelayLabel(self.activities),
-            }));
+            var activities = setDelayLabel(self.activities);
+            if (activities.length) {
+                var nbActivities = _.countBy(activities, 'state');
+                self.$el.html(QWeb.render('mail.activity_items', {
+                    activities: activities,
+                    nbPlannedActivities: nbActivities.planned,
+                    nbTodayActivities: nbActivities.today,
+                    nbOverdueActivities: nbActivities.overdue,
+                }));
+            } else {
+                self.$el.empty();
+            }
         });
     },
     _reset: function (record) {
diff --git a/addons/mail/static/src/js/chatter.js b/addons/mail/static/src/js/chatter.js
index f02eaadd42e..5f8226e5ff0 100644
--- a/addons/mail/static/src/js/chatter.js
+++ b/addons/mail/static/src/js/chatter.js
@@ -126,16 +126,8 @@ var Chatter = Widget.extend(chat_mixin, {
             this.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
             this.composer.do_hide();
             this.composer.clear_composer();
-            this._muteNewMessageButton(false);
         }
     },
-    _muteNewMessageButton: function (mute) {
-        // TOCHECK: If this function exist for design pourposes only, it can be removed
-
-        // this.$('.o_chatter_button_new_message')
-        //     .toggleClass('btn-primary', !mute)
-        //     .toggleClass('btn-default', mute);
-    },
     _openComposer: function (options) {
         var self = this;
         var old_composer = this.composer;
@@ -173,13 +165,11 @@ var Chatter = Widget.extend(chat_mixin, {
             self.composer.on('need_refresh', self, self.trigger_up.bind(self, 'reload'));
             self.composer.on('close_composer', null, self._closeComposer.bind(self, true));
 
-            // TOCHECK: Toggle active chatter classes. It may be inproved?
             self.$el.addClass('o_chatter_composer_active');
             self.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
             self.$('.o_chatter_button_new_message').toggleClass('o_active', !self.composer.options.is_log);
             self.$('.o_chatter_button_log_note').toggleClass('o_active', self.composer.options.is_log);
         });
-        this._muteNewMessageButton(true);
     },
     _render: function (def) {
         // the rendering of the chatter is aynchronous: relational data of its fields needs to be
diff --git a/addons/mail/static/src/js/chatter_composer.js b/addons/mail/static/src/js/chatter_composer.js
index cd36e12768c..77c8834252f 100644
--- a/addons/mail/static/src/js/chatter_composer.js
+++ b/addons/mail/static/src/js/chatter_composer.js
@@ -33,6 +33,7 @@ var ChatterComposer = composer.BasicComposer.extend({
         this.events = _.extend(this.events, {
             'click .o_composer_button_full_composer': 'on_open_full_composer',
         });
+        this.notInline = true;
     },
 
     should_send: function () {
@@ -241,4 +242,4 @@ var ChatterComposer = composer.BasicComposer.extend({
 
 return ChatterComposer;
 
-});
\ No newline at end of file
+});
diff --git a/addons/mail/static/src/js/client_action.js b/addons/mail/static/src/js/client_action.js
index ac1f337415c..85acb3118f7 100644
--- a/addons/mail/static/src/js/client_action.js
+++ b/addons/mail/static/src/js/client_action.js
@@ -280,26 +280,24 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
     },
 
     select_message: function(message_id) {
-        var self = this;
-
         this.$el.addClass('o_mail_selection_mode');
         var message = chat_manager.get_message(message_id);
         this.selected_message = message;
         var subject = "Re: " + message.record_name;
         this.extended_composer.set_subject(subject);
 
-        this.basic_composer.$el.toggleClass('o_hidden', self.channel.type !== 'static');
-        this.extended_composer.$el.addClass('o_hidden');
+        if (this.channel.type !== 'static') {
+            this.basic_composer.do_hide();
+        }
+        this.extended_composer.do_show();
 
         this.thread.scroll_to({id: message_id, duration: 200, only_if_necessary: true});
         this.extended_composer.focus('body');
     },
 
     unselect_message: function() {
-        var self = this;
-
-        this.basic_composer.$el.toggleClass('o_hidden', !(self.channel.type !== 'static' && !self.channel.mass_mailing));
-        this.extended_composer.$el.toggleClass('o_hidden', !(self.channel.type !== 'static' && self.channel.mass_mailing));
+        this.basic_composer.do_toggle(this.channel.type !== 'static' && !this.channel.mass_mailing);
+        this.extended_composer.do_toggle(this.channel.type !== 'static' && this.channel.mass_mailing);
 
         if (!config.device.touch) {
             var composer = this.channel.mass_mailing ? this.extended_composer : this.basic_composer;
diff --git a/addons/mail/static/src/js/composer.js b/addons/mail/static/src/js/composer.js
index 5af38b2b24b..29806a08e51 100644
--- a/addons/mail/static/src/js/composer.js
+++ b/addons/mail/static/src/js/composer.js
@@ -417,6 +417,14 @@ var BasicComposer = Widget.extend(chat_mixin, {
 
         // Emojis
         this.emoji_container_classname = 'o_composer_emoji';
+
+        this.isMini = options.isMini;
+
+        this.avatarURL = session.uid > 0 ? session.url('/web/image', {
+            model: 'res.users',
+            field: 'image_small',
+            id: session.uid,
+        }) : '/web/static/src/img/user_menu_avatar.png';
     },
 
     start: function () {
@@ -463,10 +471,6 @@ var BasicComposer = Widget.extend(chat_mixin, {
         return this._super.apply(this, arguments);
     },
 
-    toggle: function(state) {
-        this.$el.toggle(state);
-    },
-
     preprocess_message: function () {
         // Return a deferred as this function is extended with asynchronous
         // behavior for the chatter composer
diff --git a/addons/mail/static/src/js/extended_chat_window.js b/addons/mail/static/src/js/extended_chat_window.js
index c206ae0d701..2163c28dd92 100644
--- a/addons/mail/static/src/js/extended_chat_window.js
+++ b/addons/mail/static/src/js/extended_chat_window.js
@@ -28,7 +28,7 @@ return ChatWindow.extend({
                 })
                 .focus();
         } else if (!self.options.input_less) {
-            var basic_composer = new composer.BasicComposer(self, {mention_partners_restricted: true});
+            var basic_composer = new composer.BasicComposer(self, {mention_partners_restricted: true, isMini: true});
             basic_composer.on('post_message', self, function (message) {
                 this.trigger('post_message', message, this.channel_id);
             });
diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index b7daa8d720f..3e93945d194 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -1,5 +1,7 @@
 @o-chat-window-bg: white;
 @o-chat-window-width: 325px;
+@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
+                           // backend and other assets (livechat)
 
 .o_chat_window {
     .o-flex-display();
@@ -33,7 +35,7 @@
         color: white;
         padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
         border-radius: 3px 3px 0 0;
-        border-bottom: 1px solid @gray-lighter-dark;
+        border-bottom: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend
         background-color: @odoo-brand-primary;
 
         @media (max-width: @screen-xs-max) {
@@ -64,7 +66,7 @@
     .o_mail_thread {
         .o-flex(1, 1, auto);
         overflow: auto;
-        border: 1px solid @gray-lighter-dark;
+        border: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend
         border-width: 0 1px;
 
         .o_thread_date_separator {
@@ -82,10 +84,6 @@
             padding: 4px 5px;
         }
     }
-
-    .o_chat_composer {
-        .o-chat-composer-design(@mini-composer: true);
-    }
 }
 
 .o_chat_window_dropdown {
diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less
index 131990db82e..9bf27a0c4f8 100644
--- a/addons/mail/static/src/less/chatter.less
+++ b/addons/mail/static/src/less/chatter.less
@@ -1,176 +1,3 @@
-@o-mail-chatter-gap: 10px;
-
-// Define the chat_composer design/layout as a mixin
-.o-chat-composer-design(@inline: false, @mini-composer: false) {
-    // All designs/layouts
-    & {
-        position: relative;
-        .o-flex-display();
-        .o-flex(0, 0, auto);
-        .o-align-items(flex-start);
-        margin: 1px 0;
-        border-top: none;
-        background: @gray-lighter;
-
-        .o_composer, .o_composer_subject {
-            position: relative;
-            background: white;
-
-            textarea, input {
-                border: none;
-            }
-        }
-
-        .o_composer {
-            textarea {
-                resize: none;
-            }
-
-            .btn-icon {
-                .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
-                border: none;
-            }
-
-            .o_composer_button_full_composer {
-                .o-position-absolute(0, 0);
-            }
-        }
-    }
-
-    // Both inline e not-inline design. Mini-composer disabled.
-    & when (@mini-composer = false) {
-        padding:  @mail-thread-avatar-size*0.5;
-        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
-        border: 1px solid @gray-lighter-dark;
-        border-top: none;
-
-        .o_chatter_avatar {
-            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
-        }
-
-        .o_composer_container, .o_composer_send {
-            .o-flex-display();
-        }
-
-        .o_chatter_composer_info, .o_composer_suggested_partners {
-            .o-flex(0, 0, 100%);
-            margin-bottom: @o-mail-chatter-gap*0.5;
-        }
-
-        .o_composer_container {
-            position: relative;
-            .o-flex-flow(column, nowrap);
-        }
-
-        .o_composer {
-            margin-bottom: @o-mail-chatter-gap;
-            border-radius: 2px;
-            textarea {
-                padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
-            }
-        }
-
-        .o_composer, .o_composer_subject {
-            border: 1px solid @gray-lighter-dark;
-
-            textarea, input {
-                padding: 0 0 @o-mail-chatter-gap;
-                border: none;
-            }
-        }
-        .o_composer_subject {
-            border-bottom: 0;
-            border-radius: 2px 2px 0 0;
-        }
-
-        .o_chatter_composer_tools {
-            border-top: 1px solid @gray-lighter-dark;
-        }
-    }
-
-    // Not-inline design.
-    & when (@inline = false) and (@mini-composer = false) {
-        .o-flex-flow(row, wrap);
-
-        .o_composer_container, .o_composer_button_send {
-            .o-flex(1, 0, 100%);
-        }
-        .o_composer, .o_composer_subject {
-            padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
-        }
-    }
-
-    // Inline design.
-    & when (@inline = true) and (@mini-composer = false) {
-        .o_composer_container {
-            .o-flex(1, 0, auto);
-        }
-        .o_composer {
-            padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap;
-            border-radius: 2px 0 0 2px;
-            border-right: 0;
-        }
-        .o_composer_input {
-            .o-flex-display();
-            .o-flex-flow(row, wrap);
-        }
-        .o_composer_text_field {
-            .o-flex(1, 1, 50%);
-            margin: 0;
-            padding: 0;
-        }
-        .o_chatter_composer_tools {
-            .o-flex(0, 1, auto);
-        }
-        .o_composer_attachments_list {
-            .o-flex(1, 0, 100%);
-        }
-
-        .o_chatter_composer_tools {
-            border: none;
-            border-left: 1px solid @gray-lighter-dark;
-            padding-left: @o-mail-chatter-gap*0.5;
-            .o-transform(translateY(-@o-mail-chatter-gap*0.5));
-        }
-
-        .o_composer_button_send {
-            .o-flex(0, 0, auto);
-            border-radius: 0 3px 3px 0;
-            // Make the button appear as the same size as the subject input
-            padding: 10px @padding-base-horizontal;
-            border: 1px solid darken(@odoo-brand-optional, 5%);
-            border-left-width: 0;
-        }
-    }
-
-    // Mini-composer enabled
-    & when (@mini-composer = true) {
-        .o_composer_container {
-            border-top: 1px solid @gray-lighter-dark;
-            width: 100%;
-        }
-        .o_composer_input {
-            .o-flex-display();
-            .o-flex-flow(row, nowrap);
-            padding: @o-mail-chatter-gap;
-
-            textarea.o_composer_text_field {
-                .o-flex(1, 1, auto);
-                padding-top: @o-mail-chatter-gap*0.5;
-            }
-
-            .o_chatter_composer_tools {
-                .o-flex(0, 0, auto);
-            }
-        }
-
-        .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list {
-            display: none;
-        }
-    }
-
-}
-
 // Default chatter layout.
 // Extended in enterprise by form_view.less to achieve the side-chatter
 .o_chatter {
@@ -201,10 +28,6 @@
         }
     }
 
-    .o_chat_composer {
-        .o-chat-composer-design();
-    }
-
     &.o_chatter_composer_active .o_chatter_topbar {
         > .btn, > .o_followers{
             border-radius: @border-radius-small @border-radius-small 0 0;
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index df1e3bc8560..78a4f27f21b 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -115,7 +115,7 @@
                 padding: 2px 5px;
             }
             > span {
-                .o-position-absolute(7px, @left:27px);
+                .o-position-absolute(7px, @left: 27px);
             }
         }
     }
@@ -149,14 +149,6 @@
             }
         }
 
-        .o_chat_composer:not(.o_chat_composer_extended) {
-            .o-chat-composer-design(@inline: true);
-
-        }
-        .o_chat_composer.o_chat_composer_extended {
-            .o-chat-composer-design(@inline: false);
-        }
-
         .o_mail_snackbar {
             .o-position-absolute(15px, 15px);
             padding-top: 10px;
diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index 88418bfb4ef..970d0649aa9 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -1,42 +1,204 @@
-.o_composer_subject {
+.o_chat_composer {
+    position: relative;
+    .o-flex(0, 0, auto);
     .o-flex-display();
-    padding-bottom: 5px;
+    .o-align-items(flex-start);
+    margin: 1px 0;
+    border-top: none;
+    background: @gray-lighter;
 
-    > input {
-        .o-flex(1, 1, auto);
-        padding: 5px;
-        margin-right: 30px;
-    }
-}
+    .o_composer, .o_composer_subject {
+        position: relative;
+        background: white;
 
-.o_composer {
-    .o_composer_input > textarea {
-        width: 100%;
-        resize: none;
-    }
-    .o_composer_mention_dropdown .o_mention_proposition > a {
-        .o-text-overflow();
-        width: 100%;
-        padding: 3px 15px;
-        .o_mention_name {
-            font-weight: 500;
+        textarea, input {
+            border: none;
         }
-        .o_mention_info {
-            font-style: italic;
-            color: gray;
+    }
+
+    .o_composer_subject {
+        .o-flex-display();
+        padding-bottom: 5px;
+
+        > input {
+            .o-flex(1, 1, auto);
+            padding: 5px;
+            margin-right: 30px;
+        }
+    }
+
+    .o_composer {
+        .o_composer_input > textarea {
+            width: 100%;
+            resize: none;
+        }
+        .o_composer_mention_dropdown .o_mention_proposition > a {
+            .o-text-overflow();
+            width: 100%;
+            padding: 3px 15px;
+            .o_mention_name {
+                font-weight: 500;
+            }
+            .o_mention_info {
+                font-style: italic;
+                color: gray;
+            }
+        }
+        textarea {
+            resize: none;
+        }
+        .btn-icon {
+            .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
+            border: none;
+        }
+        .o_composer_button_full_composer {
+            .o-position-absolute(0, 0);
+        }
+    }
+
+    // Both inline and not-inline design. Mini-composer disabled.
+    &:not(.o_chat_mini_composer) {
+        padding:  @mail-thread-avatar-size*0.5;
+        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
+        border: 1px solid @gray-lighter-dark;
+        border-top: none;
+
+        .o_chatter_avatar {
+            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
+        }
+
+        .o_composer_container, .o_composer_send {
+            .o-flex-display();
+        }
+
+        .o_chatter_composer_info, .o_composer_suggested_partners {
+            .o-flex(0, 0, 100%);
+            margin-bottom: @o-mail-chatter-gap*0.5;
+        }
+
+        .o_composer_container {
+            position: relative;
+            .o-flex-flow(column, nowrap);
+        }
+
+        .o_composer {
+            border-radius: 2px;
+            textarea {
+                padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
+            }
+        }
+
+        .o_composer, .o_composer_subject {
+            border: 1px solid @gray-lighter-dark;
+
+            textarea, input {
+                padding: 0 0 @o-mail-chatter-gap;
+                border: none;
+            }
+        }
+        .o_composer_subject {
+            border-bottom: 0;
+            border-radius: 2px 2px 0 0;
+        }
+
+        .o_chatter_composer_tools {
+            border-top: 1px solid @gray-lighter-dark;
+        }
+
+        &:not(.o_chat_inline_composer) {
+            .o-flex-flow(row, wrap);
+
+            .o_composer_container, .o_composer_button_send {
+                .o-flex(1, 0, 100%);
+            }
+            .o_composer, .o_composer_subject {
+                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
+            }
+            .o_composer_send {
+                margin-top: @o-mail-chatter-gap;
+            }
+        }
+
+        &.o_chat_inline_composer {
+            .o_composer_container {
+                .o-flex(1, 0, auto);
+            }
+            .o_composer {
+                padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap;
+                border-radius: 2px 0 0 2px;
+                border-right: 0;
+            }
+            .o_composer_input {
+                .o-flex-display();
+                .o-flex-flow(row, wrap);
+            }
+            .o_composer_text_field {
+                .o-flex(1, 1, 50%);
+                margin: 0;
+                padding: 0;
+            }
+            .o_chatter_composer_tools {
+                .o-flex(0, 1, auto);
+            }
+            .o_composer_attachments_list {
+                .o-flex(1, 0, 100%);
+            }
+
+            .o_chatter_composer_tools {
+                border: none;
+                border-left: 1px solid @gray-lighter-dark;
+                padding-left: @o-mail-chatter-gap*0.5;
+                .o-transform(translateY(-@o-mail-chatter-gap*0.5));
+            }
+
+            .o_composer_button_send {
+                .o-flex(0, 0, auto);
+                border-radius: 0 3px 3px 0;
+                // Make the button appear as the same size as the subject input
+                padding: 10px @padding-base-horizontal;
+                border: 1px solid darken(@odoo-brand-optional, 5%);
+                border-left-width: 0;
+            }
+        }
+    }
+
+    // Mini-composer enabled
+    &.o_chat_mini_composer {
+        .o_composer_container {
+            border-top: 1px solid @gray-lighter-dark;
+            width: 100%;
+        }
+        .o_composer_input {
+            .o-flex-display();
+            .o-flex-flow(row, nowrap);
+            padding: @o-mail-chatter-gap;
+
+            textarea.o_composer_text_field {
+                .o-flex(1, 1, auto);
+                padding-top: @o-mail-chatter-gap*0.5;
+            }
+
+            .o_chatter_composer_tools {
+                .o-flex(0, 0, auto);
+            }
+        }
+
+        .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list {
+            display: none;
         }
     }
 }
 
-.o_composer_attachments_list {
-    margin-bottom: 5px;
+.o_composer_attachments_list:not(:empty) {
+    margin-top: @o-mail-chatter-gap;
     text-align: justify;
 }
 
 // Emoji
 .o_mail_emoji {
     display: inline-block;
-    .square(24px);
+    width: 24px;
+    height: 24px;
 
     > img {
         width: 100%;
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index da06d8fe91d..be39413f573 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -11,7 +11,7 @@
     .o_thread_date_separator {
         margin-top: 15px;
         margin-bottom: 30px;
-        border-bottom: solid #E5E5E5 1px; // @gray-lighter
+        border-bottom: 1px solid @gray-lighter;
         text-align: center;
 
         .o_thread_date {
@@ -102,8 +102,6 @@
             max-width: 100%;
             word-wrap: break-word;
 
-            &.o_mail_note {}
-
             .o_mail_subject {
                 font-style: italic;
             }
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 42a9c1367bb..35847804a7f 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -1,31 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.activity_items">
-        <div t-if="activities.length" class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
-            <t t-set="today_activities" t-value="0"/>
-            <t t-set="planned_activities" t-value="0"/>
-            <t t-set="overdue_activities" t-value="0"/>
-            <t t-foreach="activities" t-as="a">
-                <t t-if="a.state == 'today'" t-set="today_activities" t-value="today_activities + 1"/>
-                <t t-if="a.state == 'overdue'" t-set="overdue_activities" t-value="overdue_activities + 1"/>
-                <t t-if="a.state == 'planned'" t-set="planned_activities" t-value="planned_activities + 1"/>
-            </t>
+        <div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
             <span class="o_thread_date btn">
                 <i class="fa fa-fw fa-caret-down"/>
                 Planned activities
                 <small class="o_chatter_planned_activities_summary ml8">
-                    <span class="label img-circle label-danger"><t t-esc="overdue_activities"/></span>
-                    <span class="label img-circle label-warning"><t t-esc="today_activities"/></span>
-                    <span class="label img-circle label-success"><t t-esc="planned_activities"/></span>
+                    <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
+                    <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
+                    <span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
                 </small>
             </span>
         </div>
-        <div t-if="activities.length" id="o_chatter_planned_activities" class="collapse in">
+        <div id="o_chatter_planned_activities" class="collapse in">
             <t t-foreach="activities" t-as="activity">
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -35,7 +27,7 @@
                             <strong><span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /></span></strong>:
                             <strong t-if="activity.summary"> &#8220;<t t-esc="activity.summary"/>&#8221;</strong>
                             <strong t-if="!activity.summary"> <t t-esc="activity.activity_type_id[1]" /></strong>
-                            <i> for </i>
+                            <em> for </em>
                             <t t-esc="activity.user_id[1]" />
                             <a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
                                 <i class="fa fa-info-circle"></i>
@@ -48,17 +40,15 @@
                                     </dd>
                                     <dt>Created By</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image/res.users/#{activity.create_uid[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <img t-attf-src="/web/image#{activity.create_uid[0] >= 0 ? ('/res.users/' + activity.create_uid[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
                                         <b><t t-esc="activity.create_uid[1]"/></b>
-                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
-                                        <i>, on</i> <t t-esc="activity.create_date"/>
+                                        <em>, on</em> <t t-esc="moment(activity.create_date)"/>
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
-                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
-                                        <i>, due to </i><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline"/></span>
+                                        <em>, due to </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="moment(activity.date_deadline)"/></span>
                                     </dd>
                                 </dl>
                             </div>
@@ -95,4 +85,4 @@
             </div>
         </div>
     </t>
-</templates>
\ No newline at end of file
+</templates>
diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index b54d8b01bb7..a9117c76bd6 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -12,7 +12,7 @@
             </div>
             <div class="o_chat_content">
             </div>
-            <div t-if='!widget.options.input_less' class="o_chat_composer">
+            <div t-if='!widget.options.input_less' class="o_chat_composer o_chat_mini_composer">
                 <input class="o_composer_text_field" t-att-placeholder="widget.options.placeholder"/>
             </div>
         </div>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 7e6501d0889..68c2730707e 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : ''}">
+     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
          <div class="o_composer_container">
-             <!-- TODO: Use real user avatar -->
-             <img height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" src="https://pbs.twimg.com/profile_images/885832422667038720/NmqlCWGq_400x400.jpg"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 2a76d9d95f1..d50d334cb4f 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -72,9 +72,12 @@
     -->
     <t t-name="mail.Followers.subtype">
         <li class="o_subtype">
-            <input type="checkbox" t-att-checked="record.followed"
-                   t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
-                   t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
+            <div class="o_checkbox">
+                <input type="checkbox" t-att-checked="record.followed"
+                       t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
+                       t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
+                <span/>
+            </div>
             <span t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
                 <t t-esc="record.name"/>
             </span>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index b15c5251cd0..6f23e4a5e34 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -166,7 +166,6 @@
 
     <t t-name="mail.ChatComposer.Attachments">
         <div t-if="attachments.length > 0" class="o_attachments">
-            <h5 class="mt4 mb0 small text-muted">Attachments:</h5>
             <t t-foreach="attachments" t-as='attachment'>
                 <t t-call="mail.Attachment">
                      <t t-set="editable" t-value="true"/>