From c3eee7c6b806da26617c6059710aaade134b2f95 Mon Sep 17 00:00:00 2001 From: Odoo Date: Mon, 5 Jun 2023 14:07:07 +0530 Subject: [PATCH] [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 --- .../js/editor/odoo-editor/src/OdooEditor.js | 19 ++- .../odoo-editor/src/commands/commands.js | 16 ++ .../odoo-editor/test/spec/editor.test.js | 151 ++++++++++++++++++ addons/web_editor/static/src/xml/editor.xml | 10 ++ 4 files changed, 192 insertions(+), 4 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index 0ad8f61cb5c..99cae8935c2 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -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(`
` + this.options._t('Reset Size') + `
+ `, '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'; diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js index 2a73dc6613d..5bc118e4ff8 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js @@ -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; diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js index 3408fa6f820..2a2e90e06c3 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js @@ -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: ` + + + + + + + + + + + + + + + + + + +

[]












`, + stepFunction: async editor => editor.execCommand('resetSize'), + contentAfter: ` + + + + + + + + + + + + + + + + + + +

[]












`, + }); + }); + it('should remove any height or width of the table without loosing the style of the element inside it.', async () => { + await testEditor(BasicEditor, { + contentBefore: ` + + + + + + + + + + + + + + +

[]TESTTEXT


 +
    +
  • test
    • +
  • test
    • +
  • test
    • +
+


+
TESTTEXT
+ 


codeTEST


 +
    +
  1. text
    2. +
  2. text
    3. +
  3. text
    4. +
+
`, + stepFunction: async editor => editor.execCommand('resetSize'), + contentAfter: ` + + + + + + + + + + + + + + +

[]TESTTEXT


 +
    +
  • test
    • +
  • test
    • +
  • test
    • +
+


+
TESTTEXT
+ 


codeTEST


 +
    +
  1. text
    2. +
  2. text
    3. +
  3. text
    4. +
+
`, + }); + }); + it('should remove any height or width of the table without removig the style of the table.', async () => { + await testEditor(BasicEditor, { + contentBefore: ` + + + + + + + + + + + + + + + +

[]









`, + stepFunction: async editor => editor.execCommand('resetSize'), + contentAfter: ` + + + + + + + + + + + + + + + +

[]









`, + }); + }); + }); describe('color', () => { it('should apply a color to two columns', async () => { await testEditor(BasicEditor, { diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 8b4b58b4aac..79a243f7664 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -273,6 +273,16 @@ +
+ +
+
+ +
+
+