[IMP] im_livechat, mail: improved "is typing" notification

With this commit, the UI for "is typing..." notifications
has changed.

** before **:

In Discuss & chat windows, "is typing..." notification bar
at the bottom of the thread, inside the conversation.

** after **

In chat windows, animated '...' next to conversation name.
In Discuss, animated '...' next to conversation name in sidebar,
and text below the composer.

Task-ID 1881001

7 files changed, 67 insertions, 74 deletions

diff --git a/addons/mail/static/src/js/composers/basic_composer.js b/addons/mail/static/src/js/composers/basic_composer.js
index c8f7d702af4..1a40e3f48fa 100644
--- a/addons/mail/static/src/js/composers/basic_composer.js
+++ b/addons/mail/static/src/js/composers/basic_composer.js
@@ -123,6 +123,9 @@ var BasicComposer = Widget.extend({
         $(window).on(this.fileuploadID, this._onAttachmentLoaded.bind(this));
         this.on('change:attachment_ids', this, this._renderAttachments);
 
+        this.call('mail_service', 'getMailBus')
+            .on('update_typing_partners', this, this._onUpdateTypingPartners);
+
         // Mention
         this._mentionManager.prependTo(this.$('.o_composer'));
 
@@ -793,6 +796,24 @@ var BasicComposer = Widget.extend({
                 this._mentionManager.detectDelimiter();
         }
     },
+    /**
+     * @private
+     * @param {integer|string} threadID
+     */
+    _onUpdateTypingPartners: function (threadID) {
+        if (!this.options.showTyping) {
+            return;
+        }
+        if (!this.options.thread) {
+            return;
+        }
+        if (this.options.thread.getID() !== threadID) {
+            return;
+        }
+        this.$('.o_composer_thread_typing').html(QWeb.render('mail.Composer.ThreadTyping', {
+            thread: this.options.thread,
+        }));
+    },
 });
 
 return BasicComposer;
diff --git a/addons/mail/static/src/js/discuss.js b/addons/mail/static/src/js/discuss.js
index 2cb9fe749d7..dd03f08028c 100644
--- a/addons/mail/static/src/js/discuss.js
+++ b/addons/mail/static/src/js/discuss.js
@@ -235,12 +235,14 @@ var Discuss = AbstractAction.extend(ControlPanelMixin, {
     start: function () {
         var self = this;
 
-        this._basicComposer = new BasicComposer(this,
-            { mentionPartnersRestricted: true }
-        );
-        this._extendedComposer = new ExtendedComposer(this,
-            { mentionPartnersRestricted: true }
-        );
+        this._basicComposer = new BasicComposer(this, {
+            mentionPartnersRestricted: true,
+            showTyping: true,
+        });
+        this._extendedComposer = new ExtendedComposer(this, {
+            mentionPartnersRestricted: true,
+            showTyping: true,
+        });
         this._basicComposer
             .on('post_message', this, this._onPostMessage)
             .on('input_focused', this, this._onComposerFocused);
@@ -1391,19 +1393,9 @@ var Discuss = AbstractAction.extend(ControlPanelMixin, {
     },
     /**
      * @private
-     * @param {integer|string} threadID
      */
-    _onTypingPartnersUpdated: function (threadID) {
-        var self = this;
-        if (this._thread.getID() !== threadID) {
-            return;
-        }
-        if (this._thread.hasTypingNotification()) {
-            // call getMentionpartnerSuggestions in order to correctly fetch members
-            this._thread.getMentionPartnerSuggestions().then(function () {
-                self._threadWidget.renderTypingNotificationBar(self._thread);
-            });
-        }
+    _onTypingPartnersUpdated: function () {
+        this._updateThreads();
     },
     /**
      * @private
diff --git a/addons/mail/static/src/js/models/threads/thread_typing_mixin/thread_typing_mixin.js b/addons/mail/static/src/js/models/threads/thread_typing_mixin/thread_typing_mixin.js
index fb1a3a91cd1..9a5b5abb4cc 100644
--- a/addons/mail/static/src/js/models/threads/thread_typing_mixin/thread_typing_mixin.js
+++ b/addons/mail/static/src/js/models/threads/thread_typing_mixin/thread_typing_mixin.js
@@ -148,6 +148,15 @@ var ThreadTypingMixin = {
         return true;
     },
     /**
+     * Tells if someone other than current user is typing something on this
+     * thread.
+     *
+     * @returns {boolean}
+     */
+    isSomeoneTyping: function () {
+        return !(_.isEmpty(this._typingPartnerIDs));
+    },
+    /**
      * Register someone that is currently typing something in this thread.
      * If this is the current user that is typing something, don't do anything
      * (we do not have to display anything)
diff --git a/addons/mail/static/src/js/services/mail_window_manager.js b/addons/mail/static/src/js/services/mail_window_manager.js
index 79ea668e55e..64cf6bb88c9 100644
--- a/addons/mail/static/src/js/services/mail_window_manager.js
+++ b/addons/mail/static/src/js/services/mail_window_manager.js
@@ -329,8 +329,7 @@ MailManager.include({
             .on('is_thread_bottom_visible', this, this._onIsThreadBottomVisible)
             .on('unsubscribe_from_channel', this, this._onUnsubscribeFromChannel)
             .on('update_thread_unread_counter', this, this._onUpdateThreadUnreadCounter)
-            .on('update_dm_presence', this, this._onUpdateDmPresence)
-            .on('update_typing_partners', this, this._onTypingPartnersUpdated);
+            .on('update_dm_presence', this, this._onUpdateDmPresence);
 
         core.bus.on('resize', this, _.debounce(this._repositionThreadWindows.bind(this), 100));
     },
@@ -656,23 +655,6 @@ MailManager.include({
         this._updateThreadWindowsFromMessage(message, { keepBottom: true, passively: true });
     },
     /**
-     * @private
-     * @param {integer|string} threadID
-     */
-    _onTypingPartnersUpdated: function (threadID) {
-        var threadWindow = this._getThreadWindow(threadID);
-        if (!threadWindow) {
-            return;
-        }
-        var thread = this.getThread(threadID);
-        if (thread.isChannel()) {
-            // call getMentionpartnerSuggestions in order to correctly fetch members
-            thread.getMentionPartnerSuggestions().then(function () {
-                threadWindow.renderTypingNotificationBar();
-            });
-        }
-    },
-    /**
      * Close the thread window when unsusbscribe from a channel.
      *
      * @private
diff --git a/addons/mail/static/src/js/thread_widget.js b/addons/mail/static/src/js/thread_widget.js
index e6da87c6dba..da74028903e 100644
--- a/addons/mail/static/src/js/thread_widget.js
+++ b/addons/mail/static/src/js/thread_widget.js
@@ -185,12 +185,6 @@ var ThreadWidget = Widget.extend({
             dateFormat: time.getLangDatetimeFormat(),
         }));
 
-        // must be after mail.widget.Thread rendering, so that there is the
-        // DOM element for the 'is typing' notification bar
-        if (thread.hasTypingNotification()) {
-            this.renderTypingNotificationBar(thread);
-        }
-
         _.each(messages, function (message) {
             var $message = self.$('.o_thread_message[data-message-id="'+ message.getID() +'"]');
             $message.find('.o_mail_timestamp').data('date', message.getDate());
@@ -254,28 +248,6 @@ var ThreadWidget = Widget.extend({
         return done;
     },
     /**
-     * Render the 'is typing...' text on the typing notification bar of the
-     * thread. This is called when there is a change in the list of users
-     * typing something on this thread.
-     *
-     * @param {mail.model.AbstractThread} thread with ThreadTypingMixin
-     */
-    renderTypingNotificationBar: function (thread) {
-        if (this._currentThreadID === thread.getID()) {
-            var shouldScrollToBottomAfterRendering = this.isAtBottom();
-
-            // typing notification bar rendering
-            var $typingBar = this.$('.o_thread_typing_notification_bar');
-            var text = thread.getTypingMembersToText();
-            $typingBar.toggleClass('o_hidden', !text); // hide if no text, because of padding
-            $typingBar.text(text);
-
-            if (shouldScrollToBottomAfterRendering) {
-                this.scrollToBottom();
-            }
-        }
-    },
-    /**
      * Scroll to the bottom of the thread
      */
     scrollToBottom: function () {
diff --git a/addons/mail/static/src/js/thread_windows/abstract_thread_window.js b/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
index f4bf9533ff9..3e4e2e16325 100644
--- a/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
+++ b/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
@@ -139,6 +139,15 @@ var AbstractThreadWindow = Widget.extend({
         return this._getThreadID();
     },
     /**
+     * @returns {mail.model.Thread|undefined}
+     */
+    getThread: function () {
+        if (!this.hasThread) {
+            return undefined;
+        }
+        return this._thread;
+    },
+    /**
      * Get the status of the thread, such as the im status of a DM chat
      * ('online', 'offline', etc.). If this window has no thread, returns
      * `undefined`.
@@ -257,14 +266,6 @@ var AbstractThreadWindow = Widget.extend({
             QWeb.render('mail.AbstractThreadWindow.HeaderContent', options));
     },
     /**
-     * Render the 'is typing...' notification bar text on the thread in this
-     * thread window. This is called when there is a change in the list of users
-     * currently typing something on this thread.
-     */
-    renderTypingNotificationBar: function () {
-        this._threadWidget.renderTypingNotificationBar(this._thread);
-    },
-    /**
      * Scroll to the bottom of the thread in the thread window
      */
     scrollToBottom: function () {
@@ -339,6 +340,7 @@ var AbstractThreadWindow = Widget.extend({
     _getHeaderRenderingOptions: function () {
         return {
             status: this.getThreadStatus(),
+            thread: this.getThread(),
             title: this.getTitle(),
             unreadCounter: this.getUnreadCounter(),
             widget: this,
diff --git a/addons/mail/static/src/js/thread_windows/thread_window.js b/addons/mail/static/src/js/thread_windows/thread_window.js
index 62468e9ea16..f4b0137c476 100644
--- a/addons/mail/static/src/js/thread_windows/thread_window.js
+++ b/addons/mail/static/src/js/thread_windows/thread_window.js
@@ -55,6 +55,9 @@ var ThreadWindow = AbstractThreadWindow.extend({
 
         var superDef = this._super().then(this._listenThreadWidget.bind(this));
 
+        this.call('mail_service', 'getMailBus')
+            .on('update_typing_partners', this, this._onUpdateTypingPartners);
+
         var composerDef;
         if (!this.hasThread()) {
             this._startWithoutThread();
@@ -353,7 +356,19 @@ var ThreadWindow = AbstractThreadWindow.extend({
         var message = this.call('mail_service', 'getMessage', messageID);
         message.toggleStarStatus();
     },
-
+    /**
+     * @private
+     * @param {integer|string} threadID
+     */
+    _onUpdateTypingPartners: function (threadID) {
+        if (!this.hasThread()) {
+            return;
+        }
+        if (this._thread.getID() !== threadID) {
+            return;
+        }
+        this.renderHeader();
+    },
 });
 
 return ThreadWindow;