From f9a8072dbf3812befe3f3fb8f3bd675d4a55783e Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 16 May 2022 08:59:21 +0000 Subject: [PATCH] [IMP] web_editor: don't convert little column duos to wrapping columns 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) --- .../static/src/js/backend/convert_inline.js | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js index 7ba72fbe71f..fe2089ecee4 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -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')) {