[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)

3 files changed, 25 insertions, 10 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 = {