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: [PATCH] [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 --- .../im_livechat/static/src/js/im_livechat.js | 2 +- .../static/src/js/composers/basic_composer.js | 21 + addons/mail/static/src/js/discuss.js | 28 +- .../thread_typing_mixin.js | 9 + .../src/js/services/mail_window_manager.js | 20 +- addons/mail/static/src/js/thread_widget.js | 28 -- .../thread_windows/abstract_thread_window.js | 18 +- .../src/js/thread_windows/thread_window.js | 17 +- .../src/scss/abstract_thread_window.scss | 12 +- addons/mail/static/src/scss/composer.scss | 5 + addons/mail/static/src/scss/discuss.scss | 7 +- addons/mail/static/src/scss/thread.scss | 57 ++- .../static/src/xml/abstract_thread_window.xml | 3 + addons/mail/static/src/xml/composer.xml | 8 + addons/mail/static/src/xml/discuss.xml | 4 + addons/mail/static/src/xml/thread.xml | 28 +- addons/mail/static/tests/discuss_tests.js | 4 + .../discuss_typing_notification_tests.js | 450 +++++++++++------- .../typing_thread_window_tests.js | 128 +++++ addons/mail/views/mail_templates.xml | 1 + 20 files changed, 556 insertions(+), 294 deletions(-) create mode 100644 addons/mail/static/tests/thread_window/typing_thread_window_tests.js diff --git a/addons/im_livechat/static/src/js/im_livechat.js b/addons/im_livechat/static/src/js/im_livechat.js index b8941eb4239..1445ba79eae 100644 --- a/addons/im_livechat/static/src/js/im_livechat.js +++ b/addons/im_livechat/static/src/js/im_livechat.js @@ -360,7 +360,7 @@ var LivechatButton = Widget.extend({ */ _onUpdatedTypingPartners: function (ev) { ev.stopPropagation(); - this._chatWindow.renderTypingNotificationBar(); + this._chatWindow.renderHeader(); }, /** * @private 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; diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss index a4ad6d366cc..b148afa111f 100644 --- a/addons/mail/static/src/scss/abstract_thread_window.scss +++ b/addons/mail/static/src/scss/abstract_thread_window.scss @@ -57,6 +57,14 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; cursor: pointer; flex: 1 1 auto; @include o-text-overflow; + + .o_mail_thread_typing_icon { + padding-left: 2px; + + .o_mail_thread_typing_icon_dot { + background: gray('300'); + } + } } .o_thread_window_buttons { @@ -76,10 +84,6 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; overflow: auto; -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari) - .o_thread_typing_notification_bar { - background-color: rgba($o-mail-thread-window-bg, 0.75); - } - .o_thread_date_separator { margin: 0px 0px 15px 0px; .o_thread_date { diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index e076629f667..f12e195abe9 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -184,6 +184,11 @@ flex: 1 0 100%; } + .o_composer_thread_typing { + font-size: 0.9em; + color: gray('600'); + } + .o_chatter_composer_tools { border: none; border-left: 1px solid gray('300'); diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 8d328b028bf..39c30aefa05 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -44,6 +44,9 @@ flex: 1 1 auto; @include o-text-overflow; } + .o_mail_thread_typing_icon_dot { + background: gray('600');; + } .o_mail_sidebar_needaction, .o_mail_partner_unpin, .o_mail_channel_settings { flex: 0 0 auto; } @@ -129,7 +132,7 @@ background-color: darken(gray('900'),2%); .o_mail_partner_unpin, .o_mail_channel_settings { - opacity: $o-mail-sidebar-icon-opacity; + display: inline-block; } } @@ -143,7 +146,7 @@ } .o_mail_partner_unpin, .o_mail_channel_settings { - @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1); + display: none; } &.o_unread_message { color: white; diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss index 81f6862ca9f..a56f54bad78 100644 --- a/addons/mail/static/src/scss/thread.scss +++ b/addons/mail/static/src/scss/thread.scss @@ -13,26 +13,6 @@ height: 15px; } - .o_thread_typing_notification_free_space { - flex-grow: 1, - } - - .o_thread_typing_notification_bar { - flex: 0, 0, 20px; - background-color: rgba($white, 0.75); - padding: 5px; - text-align: center; - color: gray('600'); - - &.o_thread_order_asc { - @include o-position-sticky($bottom: 0px); - } - - &.o_thread_order_desc { - @include o-position-sticky($top: 0px); - } - } - .o_thread_tooltip_container { display: inline; position: relative; @@ -239,3 +219,40 @@ opacity: $o-mail-thread-icon-opacity; } } + +// ------------------------------------------------------------------ +// Thread typing icon: shared between discuss and chat windows +// ------------------------------------------------------------------ + +.o_mail_thread_typing_icon { + position: relative; + text-align: center; + margin-left: auto; + margin-right: auto; + + .o_mail_thread_typing_icon_dot { + display: inline-block; + width: 3px; + height: 3px; + border-radius: 50%; + background: gray('800'); + animation: o_mail_thread_typing_icon_dot 1.5s linear infinite; + + &:nth-child(2) { + animation-delay: -1.35s; + } + + &:nth-child(3) { + animation-delay: -1.2s; + } + } +} + +@keyframes o_mail_thread_typing_icon_dot { + 0%, 40%, 100% { + transform: initial; + } + 20% { + transform: translateY(-5px); + } +} diff --git a/addons/mail/static/src/xml/abstract_thread_window.xml b/addons/mail/static/src/xml/abstract_thread_window.xml index de0418af3df..89c45323c7a 100644 --- a/addons/mail/static/src/xml/abstract_thread_window.xml +++ b/addons/mail/static/src/xml/abstract_thread_window.xml @@ -11,6 +11,7 @@ +
@@ -58,6 +59,7 @@ name of the document. @param {integer} [unreadCounter] the number of unread messages on the thread. + @param {mail.model.Thread|undefined} thread @param {Object} widget @param {function} widget.isMobile function without any param that states whether it should render for desktop or mobile screen. @@ -70,6 +72,7 @@ () + diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml index 883c9752035..6147197cd17 100644 --- a/addons/mail/static/src/xml/composer.xml +++ b/addons/mail/static/src/xml/composer.xml @@ -24,6 +24,7 @@
+
@@ -40,6 +41,13 @@
+ + + + +