[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:
@@ -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>
|
||||
|
||||
+72
-13
@@ -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];
|
||||
|
||||
Reference in New Issue
Block a user