[FIX] mail: fix chat window shift operations titles

They are now language direction dependent.

task-2314205

closes odoo/odoo#61713

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Xavier Dubuc
2020-11-25 11:00:59 +00:00
parent 61410a9d27
commit 5987bb14e1
5 changed files with 130 additions and 41 deletions
@@ -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();
}
}
@@ -28,13 +28,15 @@
</t>
<div class="o-autogrow"/>
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea">
<t t-if="chatWindow.hasShiftLeft">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftLeft" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftLeft" title="Shift left">
<t t-if="chatWindow.hasShiftPrev">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftPrev" t-att-title="shiftPrevText">
<!-- this is reversed automatically when language is rtl -->
<i class="fa fa-angle-left"/>
</div>
</t>
<t t-if="chatWindow.hasShiftRight">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftRight" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftRight" title="Shift right">
<t t-if="chatWindow.hasShiftNext">
<div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftNext" t-att-title="shiftNextText">
<!-- this is reversed automatically when language is rtl -->
<i class="fa fa-angle-right"/>
</div>
</t>
@@ -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"
);
});
});
});
});
@@ -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,
}),
@@ -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];