[IMP] web_editor: add button to reset table size to auto
Purpose of this commit: Added a button to the sidebar and the column dropdown menu for resizing the table's height and width, so that if we want to reset the modified size of the table, we will be able to do so Taskid: 3344668 X-original-commit: 8740310ec845b020db0d31d3be5dfc2969665994 Part-of: odoo/odoo#137429
This commit is contained in:
Odoo
@@ -178,7 +178,7 @@ export const CLIPBOARD_WHITELISTS = {
|
||||
};
|
||||
|
||||
// Commands that don't require a DOM selection but take an argument instead.
|
||||
const SELECTIONLESS_COMMANDS = ['addRow', 'addColumn', 'removeRow', 'removeColumn'];
|
||||
const SELECTIONLESS_COMMANDS = ['addRow', 'addColumn', 'removeRow', 'removeColumn', 'resetSize'];
|
||||
|
||||
function defaultOptions(defaultObject, object) {
|
||||
const newObject = Object.assign({}, defaultObject, object);
|
||||
@@ -442,6 +442,11 @@ export class OdooEditor extends EventTarget {
|
||||
this.addDomListener(uiMenu.querySelector('.o_delete_row'), 'click', this._onTableDeleteRowClick);
|
||||
}
|
||||
|
||||
// Reset the size of the table
|
||||
uiMenu.append(parser.parseFromString(`<div class="o_reset_table_size"><span class="fa fa-table"></span>` + this.options._t('Reset Size') + `</div>
|
||||
`, 'text/html').body.firstChild)
|
||||
this.addDomListener(uiMenu.querySelector('.o_reset_table_size'), 'click', () => this.execCommand('resetSize', this._tableUiTarget));
|
||||
|
||||
this[`_${direction}Ui`] = ui;
|
||||
this.document.body.append(ui);
|
||||
this.addDomListener(ui.querySelector('.o_table_ui_menu_toggler'), 'click', this._onTableMenuTogglerClick);
|
||||
@@ -2788,8 +2793,8 @@ export class OdooEditor extends EventTarget {
|
||||
this._columnUi.style.visibility = 'hidden';
|
||||
}
|
||||
if (row || column) {
|
||||
const table = closestElement(row || column, 'table');
|
||||
table && table.addEventListener('mouseleave', () => this._toggleTableUi(), { once: true });
|
||||
this._tableUiTarget = closestElement(row || column, 'table');
|
||||
this._tableUiTarget && this._tableUiTarget.addEventListener('mouseleave', () => this._toggleTableUi(), { once: true });
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -2810,7 +2815,13 @@ export class OdooEditor extends EventTarget {
|
||||
xy: {left: 'x', top: 'y'},
|
||||
size: {left: 'width', top: 'height'}
|
||||
};
|
||||
|
||||
const table = getInSelection(this.document, 'table');
|
||||
const resetTableSize = ui.querySelector('.o_reset_table_size');
|
||||
if (table && !table.hasAttribute('style')) {
|
||||
resetTableSize.classList.add('d-none');
|
||||
} else {
|
||||
resetTableSize.classList.remove('d-none');
|
||||
}
|
||||
const side1 = isRow ? 'left' : 'top';
|
||||
ui.style[side1] = (isRow ? elementRect : tableRect)[props.xy[side1]] - togglerRect[props.size[side1]] + 'px';
|
||||
ui.style[props.size[side1]] = !isRow && togglerRect[props.size[side1]] + 'px';
|
||||
|
||||
@@ -753,6 +753,22 @@ export const editorCommands = {
|
||||
row.remove();
|
||||
siblingRow ? setSelection(...startPos(siblingRow)) : editorCommands.deleteTable(editor, table);
|
||||
},
|
||||
resetSize: (editor,table) => {
|
||||
if (!table) {
|
||||
getDeepRange(editor.editable, { select: true });
|
||||
table = getInSelection(editor.document,'table');
|
||||
}
|
||||
table.removeAttribute('style');
|
||||
const cells = [...table.querySelectorAll('tr, td')];
|
||||
cells.forEach( cell => {
|
||||
const cStyle = cell.style;
|
||||
if (cell.tagName === 'TR') {
|
||||
cStyle.height = '';
|
||||
} else {
|
||||
cStyle.width = '';
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteTable: (editor, table) => {
|
||||
table = table || getInSelection(editor.document, 'table');
|
||||
if (!table) return;
|
||||
|
||||
@@ -5647,6 +5647,157 @@ X[]
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('reset size', () => {
|
||||
it('should remove any height or width of the table and bring it back to it original form', async () => {
|
||||
await testEditor(BasicEditor, {
|
||||
contentBefore: `<table class="table table-bordered o_table" style="height: 980.5px; width: 736px;"><tbody>
|
||||
<tr style="height: 306.5px;">
|
||||
<td style="width: 356px;"><p>[]<br></p></td>
|
||||
<td style="width: 108.5px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 38.25px;"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="height: 252px;">
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="height: 57px;">
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
<td style="width: 232.25px;"><p><br></p></td>
|
||||
</tr>
|
||||
</tbody></table>`,
|
||||
stepFunction: async editor => editor.execCommand('resetSize'),
|
||||
contentAfter: `<table class="table table-bordered o_table"><tbody>
|
||||
<tr style="">
|
||||
<td style=""><p>[]<br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style=""><p><br></p></td>
|
||||
</tr>
|
||||
</tbody></table>`,
|
||||
});
|
||||
});
|
||||
it('should remove any height or width of the table without loosing the style of the element inside it.', async () => {
|
||||
await testEditor(BasicEditor, {
|
||||
contentBefore: `<table class="table table-bordered o_table" style="width: 472.182px; height: 465.403px;"><tbody>
|
||||
<tr style="height: 104.872px;">
|
||||
<td style="width: 191.273px;"><h1>[]TESTTEXT</h1></td>
|
||||
<td style="width: 154.009px;"><p><br></p></td>
|
||||
<td style="width: 126.003px;">
|
||||
<ul>
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 254.75px;">
|
||||
<td style="width: 229.673px;"><p><br></p></td>
|
||||
<td style="width: 229.687px;">
|
||||
<blockquote>TESTTEXT</blockquote>
|
||||
</td>
|
||||
<td style="width: 229.73px;"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="height: 104.872px;">
|
||||
<td style="width: 229.673px;"><pre>codeTEST</pre></td>
|
||||
<td style="width: 229.687px;"><p><br></p></td>
|
||||
<td style="width: 229.73px;">
|
||||
<ol>
|
||||
<li>text</li>
|
||||
<li>text</li>
|
||||
<li>text</li>
|
||||
</ol>
|
||||
</td>
|
||||
</tr></tbody></table>`,
|
||||
stepFunction: async editor => editor.execCommand('resetSize'),
|
||||
contentAfter: `<table class="table table-bordered o_table"><tbody>
|
||||
<tr style="">
|
||||
<td style=""><h1>[]TESTTEXT</h1></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style="">
|
||||
<ul>
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style=""><p><br></p></td>
|
||||
<td style="">
|
||||
<blockquote>TESTTEXT</blockquote>
|
||||
</td>
|
||||
<td style=""><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style=""><pre>codeTEST</pre></td>
|
||||
<td style=""><p><br></p></td>
|
||||
<td style="">
|
||||
<ol>
|
||||
<li>text</li>
|
||||
<li>text</li>
|
||||
<li>text</li>
|
||||
</ol>
|
||||
</td>
|
||||
</tr></tbody></table>`,
|
||||
});
|
||||
});
|
||||
it('should remove any height or width of the table without removig the style of the table.', async () => {
|
||||
await testEditor(BasicEditor, {
|
||||
contentBefore: `<table class="table table-bordered o_table" style="height: 594.5px; width: 807px;"><tbody>
|
||||
<tr style="height: 229.5px;">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 500px;"><p>[]<br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 119.328px;"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 186.672px;"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="height: 260px;">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.656px;"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.672px;"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.672px;"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="height: 104px;">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.656px;"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.672px;"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255); width: 309.672px;"><p><br></p></td>
|
||||
</tr>
|
||||
</tbody></table>`,
|
||||
stepFunction: async editor => editor.execCommand('resetSize'),
|
||||
contentAfter: `<table class="table table-bordered o_table"><tbody>
|
||||
<tr style="">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p>[]<br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
</tr>
|
||||
<tr style="">
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
|
||||
</tr>
|
||||
</tbody></table>`,
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('color', () => {
|
||||
it('should apply a color to two columns', async () => {
|
||||
await testEditor(BasicEditor, {
|
||||
|
||||
@@ -273,6 +273,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oe-table-row mt-3">
|
||||
<span class="oe-table-label"></span>
|
||||
<div class="w-100">
|
||||
<div class="oe-table-selection btn-group w-100">
|
||||
<button class="btn w-50" data-call="resetSize">
|
||||
<i class="small fa fa-fw fa-table"/> Reset Size
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</we-customizeblock-options>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user