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

[FIX] web_editor: fix alignment issues

Browse Source 
This addresses a series of alignment issues in the conversion of html.

X-original-commit: 5b5a0030f8cd75f0a977d7804b54dc454a6a8751
Part-of: odoo/odoo#124465
This commit is contained in:
Antoine Guenet
2023-06-09 17:01:40 +02:00
parent 337c859ba2
commit a61d9f3c26
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/backend/convert_inline.js
+12 -5
View File
@@ -799,7 +799,7 @@ function fontToImg($editable) {
image.style.setProperty('line-height', lineHeight);
image.style.setProperty('width', intrinsicWidth + 'px');
image.style.setProperty('height', intrinsicHeight + 'px');
image.style.setProperty('display', 'block');
image.style.setProperty('vertical-align', 'unset'); // undo Bootstrap's default (middle).
if (!padding) {
image.style.setProperty('margin', _getStylePropertyValue(font, 'margin'));
}
@@ -815,9 +815,12 @@ function fontToImg($editable) {
}
font.remove();
wrapper.style.setProperty('padding', padding);
wrapper.style.setProperty('width', width + 'px');
const wrapperWidth = width + ['left', 'right'].reduce((sum, side) => (
sum + (+_getStylePropertyValue(image, `margin-${side}`).replace('px', '') || 0)
), 0);
wrapper.style.setProperty('width', wrapperWidth + 'px');
wrapper.style.setProperty('height', height + 'px');
wrapper.style.setProperty('vertical-align', 'middle');
wrapper.style.setProperty('vertical-align', 'text-bottom');
wrapper.style.setProperty('background-color', image.style.backgroundColor);
wrapper.setAttribute('class',
'oe_unbreakable ' + // prevent sanitize from grouping image wrappers
@@ -905,6 +908,11 @@ function formatTables($editable) {
if (alignSelf === 'start' || justifyContent === 'start' || justifyContent === 'flex-start') {
cell.style.verticalAlign = 'top';
} else if (alignSelf === 'center' || justifyContent === 'center') {
const parentCell = cell.parentElement.closest('td');
const parentTable = cell.closest('table');
if (parentCell) {
parentTable.style.height = _getHeight(parentCell) + 'px';
}
cell.style.verticalAlign = 'middle';
} else if (alignSelf === 'end' || justifyContent === 'end' || justifyContent === 'flex-end') {
cell.style.verticalAlign = 'bottom';
@@ -1317,13 +1325,12 @@ function _createMso(content='') {
function _createTable(attributes = []) {
const table = document.createElement('table');
Object.entries(TABLE_ATTRIBUTES).forEach(([att, value]) => table.setAttribute(att, value));
// $table.attr(TABLE_ATTRIBUTES);
table.style.setProperty('width', '100%', 'important');
for (const attr of attributes) {
if (!(attr.name === 'width' && attr.value === '100%')) {
table.setAttribute(attr.name, attr.value);
}
}
table.style.setProperty('width', '100%', 'important');
if (table.classList.contains('o_layout')) {
// The top mailing element inherits the body's font size and line-height
// and should keep them.