From 7ad45a04e1a368f132fcc83bbe992ce0e98ed3d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Wed, 5 Dec 2018 14:35:02 +0000 Subject: [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 --- .../mail/static/src/js/composers/basic_composer.js | 21 ++++++++++++++++ addons/mail/static/src/js/discuss.js | 28 ++++++++-------------- .../thread_typing_mixin/thread_typing_mixin.js | 9 +++++++ .../static/src/js/services/mail_window_manager.js | 20 +--------------- addons/mail/static/src/js/thread_widget.js | 28 ---------------------- .../js/thread_windows/abstract_thread_window.js | 18 +++++++------- .../static/src/js/thread_windows/thread_window.js | 17 ++++++++++++- 7 files changed, 67 insertions(+), 74 deletions(-) (limited to 'addons/mail/static/src/js') 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 @@ -147,6 +147,15 @@ var ThreadTypingMixin = { hasTypingNotification: function () { 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 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)); }, @@ -655,23 +654,6 @@ MailManager.include({ _onNewMessage: function (message) { 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. * 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()); @@ -253,28 +247,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 */ 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 @@ -138,6 +138,15 @@ var AbstractThreadWindow = Widget.extend({ getID: function () { 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 @@ -256,14 +265,6 @@ var AbstractThreadWindow = Widget.extend({ this.$header.html( 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 */ @@ -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; -- cgit v1.2.3