pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: move columns left/right correctly

Browse Source 
Issue:
======
The icons does match the direction of the move but it doesn't match the
label in the ltr language.

Steps to reproduce the issue:
=============================
- Install arabic
- Go to notes and insert a table
- write something in a column in the middle
- Click on the top of the column on the 3 points.
- The first item of the dropdown have the label in arabic meaning `Move
  to left` but the direction of the icon and clicking on it will move it
  to the right.

Origin of the issue:
====================
- The icon is being flipped because we are in rtl but in realtity left
  is the same for rtl or ltr direction.
- We need to call `_onTableMoveLeftClick` when we are moving to the
  right in rtl because the left of rtl direction is the visible right.

task-3721794

X-original-commit: 58cdfb8c80ecfb305ecdb84398508bd2fc180fb3
Part-of: odoo/odoo#159087
This commit is contained in:
Mahdi Cheikh Rouhou (macr)
2024-03-25 16:26:58 +00:00
committed by David Monjoie
parent a5a206f8a8
commit 711e2a534a
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+23 -9
View File
@@ -408,6 +408,7 @@ export class OdooEditor extends EventTarget {
this._tableUiContainer = this.document.createElement('div');
this._tableUiContainer.classList.add('o_table_ui_container');
const parser = new DOMParser();
const isRTL = this.options.direction === "rtl";
for (const direction of ['row', 'column']) {
// Create the containers and the menu toggler.
const iconClass = (direction === 'row') ? 'fa-ellipsis-v' : 'fa-ellipsis-h';
@@ -418,13 +419,19 @@ export class OdooEditor extends EventTarget {
</div>
</div>`, 'text/html').body.firstElementChild;
const uiMenu = ui.querySelector('.o_table_ui_menu');
// Create the move buttons.
if (direction === 'column') {
uiMenu.append(...parser.parseFromString(`
<div class="o_move_left"><span class="fa fa-chevron-left"></span>` + this.options._t('Move left') + `</div>
<div class="o_move_right"><span class="fa fa-chevron-right"></span>` + this.options._t('Move right') + `</div>
`, 'text/html').body.children);
if (isRTL) {
uiMenu.append(...parser.parseFromString(`
<div class="o_move_right"><span class="fa fa-chevron-right"></span>` + this.options._t('Move left') + `</div>
<div class="o_move_left"><span class="fa fa-chevron-left"></span>` + this.options._t('Move right') + `</div>
`, 'text/html').body.children);
} else {
uiMenu.append(...parser.parseFromString(`
<div class="o_move_left"><span class="fa fa-chevron-left"></span>` + this.options._t('Move left') + `</div>
<div class="o_move_right"><span class="fa fa-chevron-right"></span>` + this.options._t('Move right') + `</div>
`, 'text/html').body.children);
}
this.addDomListener(uiMenu.querySelector('.o_move_left'), 'click', this._onTableMoveLeftClick);
this.addDomListener(uiMenu.querySelector('.o_move_right'), 'click', this._onTableMoveRightClick);
} else {
@@ -438,10 +445,17 @@ export class OdooEditor extends EventTarget {
// Create the add buttons.
if (direction === 'column') {
uiMenu.append(...parser.parseFromString(`
<div class="o_insert_left"><span class="fa fa-plus"></span>` + this.options._t('Insert left') + `</div>
<div class="o_insert_right"><span class="fa fa-plus"></span>` + this.options._t('Insert right') +`</div>
`, 'text/html').body.children);
if (isRTL) {
uiMenu.append(...parser.parseFromString(`
<div class="o_insert_right"><span class="fa fa-plus"></span>` + this.options._t('Insert left') + `</div>
<div class="o_insert_left"><span class="fa fa-plus"></span>` + this.options._t('Insert right') + `</div>
`, 'text/html').body.children);
} else {
uiMenu.append(...parser.parseFromString(`
<div class="o_insert_left"><span class="fa fa-plus"></span>` + this.options._t('Insert left') + `</div>
<div class="o_insert_right"><span class="fa fa-plus"></span>` + this.options._t('Insert right') + `</div>
`, 'text/html').body.children);
}
this.addDomListener(uiMenu.querySelector('.o_insert_left'), 'click', () => this.execCommand('addColumn', 'before', this._columnUiTarget));
this.addDomListener(uiMenu.querySelector('.o_insert_right'), 'click', () => this.execCommand('addColumn', 'after', this._columnUiTarget));
} else {