[REM] web_editor: remove table-related code from toolbar

The UI elements related to table creation and edition are no longer
present in the toolbar, as the Wysiwyg and SnippetEditor instances
remove the `#table` div section from toolbar.
Furthermore, the OdooEditor instantiates a TablePicker instance to be
appended to the tablepicker dropdown menu under the (inexistant) #table div
in the toolbar.

This commit removes dead code related to table creation/edition via the
toolbar.

task-3074598

Part-of: odoo/odoo#111131
This commit is contained in:
Rodopho Cammarosano de Lima (rcdl)
2023-02-03 18:43:44 +01:00
parent 5e2b97b47f
commit 82dfb82b21
6 changed files with 3 additions and 54 deletions
@@ -4,8 +4,5 @@
<t t-jquery="div.btn-group.dropdown" t-operation="attributes">
<attribute name="class" value="btn-group dropup"/>
</t>
<t t-jquery="div.dropdown:not(.btn-group)" t-operation="attributes">
<attribute name="class" value="dropup"/>
</t>
</t>
</templates>
@@ -344,14 +344,6 @@ export class OdooEditor extends EventTarget {
colNumber: ev.detail.colNumber,
});
});
// Create the table picker for the toolbar.
this.toolbarTablePicker = new TablePicker({ document: this.document });
this.toolbarTablePicker.addEventListener('cell-selected', ev => {
this.execCommand('insertTable', {
rowNumber: ev.detail.rowNumber,
colNumber: ev.detail.colNumber,
});
});
// Create the table UI.
const parser = new DOMParser();
for (const direction of ['row', 'column']) {
@@ -634,14 +626,6 @@ export class OdooEditor extends EventTarget {
// Ensure anchors in the toolbar don't trigger a hash change.
const toolbarAnchors = this.toolbar.querySelectorAll('a');
toolbarAnchors.forEach(a => a.addEventListener('click', e => e.preventDefault()));
const tablepickerDropdown = this.toolbar.querySelector('.oe-tablepicker-dropdown');
tablepickerDropdown && tablepickerDropdown.append(this.toolbarTablePicker.el);
this.toolbarTablePicker.show();
const tableDropdownButton = this.toolbar.querySelector('#tableDropdownButton');
tableDropdownButton &&
tableDropdownButton.addEventListener('click', () => {
this.toolbarTablePicker.reset();
});
for (const colorLabel of this.toolbar.querySelectorAll('label')) {
colorLabel.addEventListener('mousedown', ev => {
// Hack to prevent loss of focus (done by preventDefault) while still opening
@@ -223,7 +223,7 @@
}
}
.oe-tablepicker-dropdown .oe-tablepicker {
.oe-tablepicker {
margin: -3px 2px -6px 2px;
}
.oe-tablepicker-wrapper.oe-floating {
@@ -261,7 +261,7 @@
text-align: center;
margin-top: 7px;
}
.oe-tablepicker-dropdown .oe-tablepicker-size {
.oe-tablepicker-size {
color: white;
}
@media only screen and (max-width: 767px) {
@@ -4057,7 +4057,6 @@ var SnippetsMenu = Widget.extend({
this._$removeFormatButton = this._$removeFormatButton || this.options.wysiwyg.toolbar.$el.find('#removeFormat');
$title.append(this._$removeFormatButton);
this.options.wysiwyg.toolbar.$el.find('#table').remove();
this._checkEditorToolbarVisibility();
},
@@ -1490,7 +1490,7 @@ const Wysiwyg = Widget.extend({
}
};
if (!this.options.snippets) {
$toolbar.find('#justify, #table, #media-insert').remove();
$toolbar.find('#justify, #media-insert').remove();
}
$toolbar.find('#media-insert, #media-replace, #media-description').click(openTools);
$toolbar.find('#create-link').click(openTools);
@@ -1867,7 +1867,6 @@ const Wysiwyg = Widget.extend({
'#justifyFull',
'#list',
'#colorInputButtonGroup',
'#table',
'#create-link',
'#media-insert', // "Insert media" should be replaced with "Replace media".
].join(',')).toggleClass('d-none', isInMedia);
@@ -126,36 +126,6 @@
</div>
</div>
<div id="table" class="btn-group">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" title="Insert table" tabindex="-1"
data-bs-original-title="Table" aria-expanded="false"
id="tableDropdownButton">
<i class="fa fa-table fa-fw"></i>
</button>
<div class="dropdown-menu">
<div class="btn-group oe-tablepicker-dropdown"></div>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle toolbar-edit-table"
data-bs-toggle="dropdown" title="Table tools" tabindex="-1"
data-bs-original-title="Edit table" aria-expanded="false">
<i class="fa fa-columns fa-fw"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" id="table-add-column-left" data-call="addColumn" data-arg1="before">Add a column left</a></li>
<li><a class="dropdown-item" href="#" id="table-add-column-right" data-call="addColumn" data-arg1="after">Add a column right</a></li>
<li><a class="dropdown-item" href="#" id="table-add-row-above" data-call="addRow" data-arg1="before">Add a row above</a></li>
<li><a class="dropdown-item" href="#" id="table-add-row-below" data-call="addRow" data-arg1="after">Add a row below</a></li>
<li><a class="dropdown-item" href="#" id="table-remove-column" data-call="removeColumn">Remove current column</a></li>
<li><a class="dropdown-item" href="#" id="table-remove-row" data-call="removeRow">Remove current row</a></li>
<li><a class="dropdown-item" href="#" id="table-delete-table" data-call="deleteTable">Delete current table</a></li>
</ul>
</div>
</div>
<div id="link" class="btn-group">
<div id="media-insert" title="Insert media" class="fa fa-file-image-o fa-fw btn editor-ignore"></div>
<div id="create-link" title="Insert or edit link" class="fa fa-link fa-fw btn editor-ignore"></div>