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

[IMP] web_editor: don't convert little column duos to wrapping columns

Browse Source 
This applies the following heuristic when converting from static columns
to stacking, responsive columns: don't do stack duos of columns where
one is very small and the other very big (eg., col-2 col-10). This
doesn't apply when one of the columns in question is host to a
full-width element (as this could cause ugly sizing).

task-2761098

closes odoo/odoo#87962

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
2022-05-31 11:06:48 +02:00
parent aa4590f4d9
commit f9a8072dbf
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/backend/convert_inline.js
+20 -3
View File
@@ -429,9 +429,26 @@ function enforceTablesResponsivity(editable) {
tr.style.setProperty('width', '100%');
}
for (const td of editable.querySelectorAll('td[colspan]')) {
td.setAttribute('width', '100%');
td.style.setProperty('width', '100%');
td.style.setProperty('display', 'inline-block'); // Allow cells to wrap.
const colspan = +td.getAttribute('colspan');
const tdSiblings = [...td.parentElement.children].filter(child => child.nodeName === 'TD');
if ( // Don't allow little duos of columns to wrap (eg., col-2 col-10).
colspan > 2 && colspan < 10 || tdSiblings.length > 2
|| tdSiblings.some(td => [...td.children].some(child => child.style.width === '100%')) // Unless they have a full width child.
) {
td.setAttribute('width', '100%');
td.style.setProperty('width', '100%');
td.style.setProperty('display', 'inline-block'); // Allow cells to wrap.
} else if (td.getAttribute('width') === '100%') {
if (td.children.length === 1 && td.firstElementChild.nodeName === 'IMG') {
const width = td.firstElementChild.getAttribute('width');
td.setAttribute('width', width);
td.style.removeProperty('width');
td.style.setProperty('min-width', width + 'px');
} else {
td.removeAttribute('width');
td.style.removeProperty('width');
}
}
}
// Masonry has crazy nested tables that require some extra treatment.
for (const td of editable.querySelectorAll('.s_masonry_block td')) {