From 5987bb14e13de6ea559b7b8cd6c953e415060d9d Mon Sep 17 00:00:00 2001 From: Xavier Dubuc Date: Fri, 13 Nov 2020 11:05:36 +0000 Subject: [PATCH] [FIX] mail: fix chat window shift operations titles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit They are now language direction dependent. task-2314205 closes odoo/odoo#61713 Signed-off-by: Sébastien Theys (seb) --- .../chat_window_header/chat_window_header.js | 38 +++++++-- .../chat_window_header/chat_window_header.xml | 10 ++- .../chat_window_manager_tests.js | 85 ++++++++++++++++--- .../src/models/chat_window/chat_window.js | 24 +++--- .../chat_window_manager.js | 14 +-- 5 files changed, 130 insertions(+), 41 deletions(-) diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.js b/addons/mail/static/src/components/chat_window_header/chat_window_header.js index 697a952508a..eb78f4c4390 100644 --- a/addons/mail/static/src/components/chat_window_header/chat_window_header.js +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.js @@ -41,6 +41,26 @@ class ChatWindowHeader extends Component { return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId); } + /** + * @returns {string} + */ + get shiftNextText() { + if (this.env.messaging.locale.textDirection === 'rtl') { + return this.env._t("Shift left"); + } + return this.env._t("Shift right"); + } + + /** + * @returns {string} + */ + get shiftPrevText() { + if (this.env.messaging.locale.textDirection === 'rtl') { + return this.env._t("Shift right"); + } + return this.env._t("Shift left"); + } + //-------------------------------------------------------------------------- // Handlers //-------------------------------------------------------------------------- @@ -53,6 +73,12 @@ class ChatWindowHeader extends Component { if (isEventHandled(ev, 'ChatWindowHeader.openProfile')) { return; } + if (isEventHandled(ev, 'ChatWindowHeader.ClickShiftNext')) { + return; + } + if (isEventHandled(ev, 'ChatWindowHeader.ClickShiftPrev')) { + return; + } const chatWindow = this.chatWindow; this.trigger('o-clicked', { chatWindow }); } @@ -90,18 +116,18 @@ class ChatWindowHeader extends Component { * @private * @param {MouseEvent} ev */ - _onClickShiftLeft(ev) { - ev.stopPropagation(); - this.chatWindow.shiftLeft(); + _onClickShiftPrev(ev) { + markEventHandled(ev, 'ChatWindowHeader.ClickShiftPrev'); + this.chatWindow.shiftPrev(); } /** * @private * @param {MouseEvent} ev */ - _onClickShiftRight(ev) { - ev.stopPropagation(); - this.chatWindow.shiftRight(); + _onClickShiftNext(ev) { + markEventHandled(ev, 'ChatWindowHeader.ClickShiftNext'); + this.chatWindow.shiftNext(); } } diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml index 47c59470895..fc8a324992f 100644 --- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml @@ -28,13 +28,15 @@
- -
+ +
+
- -
+ +
+
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js index e76ff23fc38..626411577fd 100644 --- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js +++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js @@ -11,6 +11,7 @@ const { } = require('mail/static/src/utils/test_utils.js'); const Bus = require('web.Bus'); +const core = require('web.core'); const { file: { createFile, inputFiles }, dom: { triggerEvent }, @@ -337,7 +338,7 @@ QUnit.test('open chat from "new message" chat window should open chat in place o ); await afterNextRender(() => - document.querySelector('.o_ChatWindow[data-visible-index="2"] .o_ChatWindowHeader_commandShiftRight').click() + document.querySelector('.o_ChatWindow[data-visible-index="2"] .o_ChatWindowHeader_commandShiftNext').click() ); assert.hasClass( document.querySelector('.o_ChatWindow[data-visible-index="1"]'), @@ -1064,22 +1065,22 @@ QUnit.test('open 2 chat windows: check shift operations are available', async fu ); assert.containsOnce( document.querySelectorAll('.o_ChatWindow')[0], - '.o_ChatWindowHeader_commandShiftLeft', + '.o_ChatWindowHeader_commandShiftPrev', "first chat window should be allowed to shift left" ); assert.containsNone( document.querySelectorAll('.o_ChatWindow')[0], - '.o_ChatWindowHeader_commandShiftRight', + '.o_ChatWindowHeader_commandShiftNext', "first chat window should not be allowed to shift right" ); assert.containsNone( document.querySelectorAll('.o_ChatWindow')[1], - '.o_ChatWindowHeader_commandShiftLeft', + '.o_ChatWindowHeader_commandShiftPrev', "second chat window should not be allowed to shift left" ); assert.containsOnce( document.querySelectorAll('.o_ChatWindow')[1], - '.o_ChatWindowHeader_commandShiftRight', + '.o_ChatWindowHeader_commandShiftNext', "second chat window should be allowed to shift right" ); @@ -1089,7 +1090,7 @@ QUnit.test('open 2 chat windows: check shift operations are available', async fu document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId; await afterNextRender(() => { document.querySelectorAll('.o_ChatWindow')[0] - .querySelector(':scope .o_ChatWindowHeader_commandShiftLeft') + .querySelector(':scope .o_ChatWindowHeader_commandShiftPrev') .click(); }); assert.strictEqual( @@ -1105,7 +1106,7 @@ QUnit.test('open 2 chat windows: check shift operations are available', async fu await afterNextRender(() => { document.querySelectorAll('.o_ChatWindow')[1] - .querySelector(':scope .o_ChatWindowHeader_commandShiftRight') + .querySelector(':scope .o_ChatWindowHeader_commandShiftNext') .click(); }); assert.strictEqual( @@ -1176,12 +1177,12 @@ QUnit.test('open 2 folded chat windows: check shift operations are available', a ); assert.containsOnce( document.body, - '.o_ChatWindow .o_ChatWindowHeader_commandShiftLeft', + '.o_ChatWindow .o_ChatWindowHeader_commandShiftPrev', "there should be only one chat window allowed to shift left even if folded" ); assert.containsOnce( document.body, - '.o_ChatWindow .o_ChatWindowHeader_commandShiftRight', + '.o_ChatWindow .o_ChatWindowHeader_commandShiftNext', "there should be only one chat window allowed to shift right even if folded" ); @@ -1190,7 +1191,7 @@ QUnit.test('open 2 folded chat windows: check shift operations are available', a const initialSecondChatWindowThreadLocalId = document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId; await afterNextRender(() => - document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click() + document.querySelector('.o_ChatWindowHeader_commandShiftPrev').click() ); assert.strictEqual( document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, @@ -1204,7 +1205,7 @@ QUnit.test('open 2 folded chat windows: check shift operations are available', a ); await afterNextRender(() => - document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click() + document.querySelector('.o_ChatWindowHeader_commandShiftPrev').click() ); assert.strictEqual( document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, @@ -1218,7 +1219,7 @@ QUnit.test('open 2 folded chat windows: check shift operations are available', a ); await afterNextRender(() => - document.querySelector('.o_ChatWindowHeader_commandShiftRight').click() + document.querySelector('.o_ChatWindowHeader_commandShiftNext').click() ); assert.strictEqual( document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, @@ -1232,7 +1233,7 @@ QUnit.test('open 2 folded chat windows: check shift operations are available', a ); await afterNextRender(() => - document.querySelector('.o_ChatWindowHeader_commandShiftRight').click() + document.querySelector('.o_ChatWindowHeader_commandShiftNext').click() ); assert.strictEqual( document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, @@ -2181,6 +2182,64 @@ QUnit.test('chat window: chat header should not be clickable when thread has mul ); }); +QUnit.test('Textual representations of shift previous/next operations are correctly mapped to left/right in LTR locale', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push( + { is_minimized: true }, + { is_minimized: true }, + ); + await this.start(); + + assert.strictEqual( + document.querySelector('.o_ChatWindowHeader_commandShiftPrev').title, + "Shift left", + "shift previous operation should be have 'Shift left' as title in LTR locale" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindowHeader_commandShiftNext').title, + "Shift right", + "shift next operation should have 'Shift right' as title in LTR locale" + ); +}); + +QUnit.test('Textual representations of shift previous/next operations are correctly mapped to right/left in RTL locale', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push( + { is_minimized: true }, + { is_minimized: true }, + ); + await this.start({ + env: { + _t: Object.assign((s => s), { + database: { + parameters: { + code: "en_US", + date_format: '%m/%d/%Y', + decimal_point: ".", + direction: 'rtl', + grouping: [], + thousands_sep: ",", + time_format: '%H:%M:%S', + }, + }, + }), + } + }); + + assert.strictEqual( + document.querySelector('.o_ChatWindowHeader_commandShiftPrev').title, + "Shift right", + "shift previous operation should have 'Shift right' as title in RTL locale" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindowHeader_commandShiftNext').title, + "Shift left", + "shift next operation should have 'Shift left' as title in RTL locale" + ); +}); + }); }); }); diff --git a/addons/mail/static/src/models/chat_window/chat_window.js b/addons/mail/static/src/models/chat_window/chat_window.js index 4a38ef91f34..4d51d952696 100644 --- a/addons/mail/static/src/models/chat_window/chat_window.js +++ b/addons/mail/static/src/models/chat_window/chat_window.js @@ -118,17 +118,17 @@ function factory(dependencies) { } /** - * Shift this chat window to the left on screen. + * Swap this chat window with the previous one. */ - shiftLeft() { - this.manager.shiftLeft(this); + shiftPrev() { + this.manager.shiftPrev(this); } /** - * Shift this chat window to the right on screen. + * Swap this chat window with the next one. */ - shiftRight() { - this.manager.shiftRight(this); + shiftNext() { + this.manager.shiftNext(this); } /** @@ -160,7 +160,7 @@ function factory(dependencies) { * @private * @returns {boolean} */ - _computeHasShiftLeft() { + _computeHasShiftPrev() { if (!this.manager) { return false; } @@ -176,7 +176,7 @@ function factory(dependencies) { * @private * @returns {boolean} */ - _computeHasShiftRight() { + _computeHasShiftNext() { if (!this.manager) { return false; } @@ -342,13 +342,13 @@ function factory(dependencies) { 'thread', ], }), - hasShiftLeft: attr({ - compute: '_computeHasShiftLeft', + hasShiftPrev: attr({ + compute: '_computeHasShiftPrev', dependencies: ['managerAllOrderedVisible'], default: false, }), - hasShiftRight: attr({ - compute: '_computeHasShiftRight', + hasShiftNext: attr({ + compute: '_computeHasShiftNext', dependencies: ['managerAllOrderedVisible'], default: false, }), diff --git a/addons/mail/static/src/models/chat_window_manager/chat_window_manager.js b/addons/mail/static/src/models/chat_window_manager/chat_window_manager.js index 88fb24c1b1c..958ce8f9652 100644 --- a/addons/mail/static/src/models/chat_window_manager/chat_window_manager.js +++ b/addons/mail/static/src/models/chat_window_manager/chat_window_manager.js @@ -141,15 +141,16 @@ function factory(dependencies) { } /** - * Shift provided chat window to the left on screen. + * Shift provided chat window to previous visible index, which swap visible order of this + * chat window and the preceding visible one * * @param {mail.chat_window} chatWindow */ - shiftLeft(chatWindow) { + shiftPrev(chatWindow) { const chatWindows = this.allOrdered; const index = chatWindows.findIndex(cw => cw === chatWindow); if (index === chatWindows.length - 1) { - // already left-most + // already first one return; } const otherChatWindow = chatWindows[index + 1]; @@ -161,15 +162,16 @@ function factory(dependencies) { } /** - * Shift provided chat window to the right on screen. + * Shift provided chat window to next visible index, which swap visible order of this + * chat window and the following visible one. * * @param {mail.chat_window} chatWindow */ - shiftRight(chatWindow) { + shiftNext(chatWindow) { const chatWindows = this.allOrdered; const index = chatWindows.findIndex(cw => cw === chatWindow); if (index === 0) { - // already right-most + // already last one return; } const otherChatWindow = chatWindows[index - 1];