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

[FIX] web: properly handle RTL direction for autoMoreMenu

Browse Source 
Issue:

1. Install eCommerce + set up "Contact" header (there are probably other
   configurations where this bug occurs but this one fails for sure).
2. Go to website in english version (with few menu items on header)
3. Switch language to Arabic
=> The "+" dropdown appears on the header even when there is enough
   space for other menu items.

Explanation:

The 'AutoMoreMenu' option is used on website menu to auto adapt the
header layout so that elements are not wrapped on a new line (and sets
a "+" dropdown that contains the overflowing menu items).

When the language is switched to Arabic (or any RTL language), the
current code ('computeFloatOuterWidthWithMargins()' method) won't be
able to compute the reversed margins correctly for "unfoldable" items:

For example, if we want to compute the width (including margins) of the
"user dropdown":

============================================
IW -> Initial width value (without margins)
LR -> Left margin computing
RM -> Right margin computing
============================================

A- On English version (LTR):

1- LM: item has left auto margin class -> left margin won't be added.
2- RM: item has no right auto margin class -> right margin added (=== 0)
3- The final width is the same as the initial value (IW).

B- On Arabic version (RTL):

1- LM: item has left auto margin class -> left margin won't be added.
2- RM: item has no right auto margin class -> right margin added (> 0).
The right margin value added here is just the left auto margin
reversed because of direction. The code will return a final width > IW
and since the item is "unfoldable", its width will reduce the available
space for foldable items.

Solution:

The goal of this commit is to make the code smart enough to avoid adding
wrong right/left margin value caused by left/right auto margin class
on 'RTL' direction.

opw-2963123

closes odoo/odoo#107573

X-original-commit: 8a4a59389338ad1f50c08df3d55c267ca4d830da
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
xO-Tx
2022-12-08 19:59:17 +01:00
committed by qsm-odoo
parent 270b9aa7c3
commit 3eebf5e384
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/js/core/menu.js
+3 -2
View File
@@ -158,10 +158,11 @@ export async function initAutoMoreMenu(el, options) {
var rect = el.getBoundingClientRect();
var style = window.getComputedStyle(el);
var outerWidth = rect.right - rect.left;
if (mLeft !== false && (considerAutoMargins || !autoMarginLeftRegex.test(el.getAttribute('class')))) {
const isRTL = style.direction === 'rtl';
if (mLeft !== false && (considerAutoMargins || !(isRTL ? autoMarginRightRegex : autoMarginLeftRegex).test(el.getAttribute('class')))) {
outerWidth += parseFloat(style.marginLeft);
}
if (mRight !== false && (considerAutoMargins || !autoMarginRightRegex.test(el.getAttribute('class')))) {
if (mRight !== false && (considerAutoMargins || !(isRTL ? autoMarginLeftRegex : autoMarginRightRegex).test(el.getAttribute('class')))) {
outerWidth += parseFloat(style.marginRight);
}
// Would be NaN for invisible elements for example