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

[FIX] web_editor: empty link button group in toolbar

Browse Source 
Buttons in the floating toolbar are displayed depending on what is
selected. When selecting text that spans multiple blocks, the
"#create-link" button is hidden from the floating toolbar.

Before this commit, when the "#create-link" button was hidden, the
"#link" button group would be left empty but still visible on the
toolbar (its separator bar remained visible).

This commit ensures that:
- the responsability of displaying/hiding the "#unlink" button
is from Wysiwyg's _updateEditorUI method, as it is the case with the
other toolbar buttons,
- when a button group has none of its children button visible, it is
made invisible too, including its separator bar.

This commit also fixes the selector for toggling the "#create-link"
button active/inactive, bringing the affected code section alive from
the dead.

task-3347670

X-original-commit: ceedd72b893316f5994727063a6a6faf49476408
Part-of: odoo/odoo#130022
This commit is contained in:
Rodolpho Lima
2023-07-28 16:29:32 +02:00
parent 230c3c212e
commit 940ff56920
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+1 -3
View File
@@ -3031,10 +3031,8 @@ export class OdooEditor extends EventTarget {
}
const linkNode = getInSelection(this.document, 'a');
const linkButton = this.toolbar.querySelector('#createLink');
const linkButton = this.toolbar.querySelector('#create-link');
linkButton && linkButton.classList.toggle('active', !!linkNode);
const unlinkButton = this.toolbar.querySelector('#unlink');
unlinkButton && unlinkButton.classList.toggle('d-none', !linkNode);
const undoButton = this.toolbar.querySelector('#undo');
undoButton && undoButton.classList.toggle('disabled', !this.historyCanUndo());
const redoButton = this.toolbar.querySelector('#redo');
addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+13 -2
View File
@@ -2041,6 +2041,10 @@ export class Wysiwyg extends Component {
}
this.odooEditor.automaticStepSkipStack();
// Clear "d-none" for button groups.
for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group')) {
buttonGroup.classList.remove('d-none');
}
// We need to use the editor's window so the tooltip displays in its
// document even if it's in an iframe.
const editorWindow = this.odooEditor.document.defaultView;
@@ -2116,6 +2120,9 @@ export class Wysiwyg extends Component {
if (!range || spansBlocks) {
this.toolbarEl.querySelector('#create-link')?.classList.toggle('d-none', true);
}
// Toggle unlink button. Always hide it on media.
const linkNode = getInSelection(this.odooEditor.document, 'a');
this.toolbarEl.querySelector('#unlink')?.classList.toggle('d-none', !linkNode || isInMedia);
// Toggle the toolbar arrow.
this.toolbarEl.classList.toggle('noarrow', isInMedia);
// Unselect all media.
@@ -2128,8 +2135,6 @@ export class Wysiwyg extends Component {
range.selectNode(this.lastMediaClicked);
selection.removeAllRanges();
selection.addRange(range);
// Always hide the unlink button on media.
this.toolbarEl.querySelector('#unlink')?.classList.toggle('d-none', true);
// Toggle the 'active' class on the active image tool buttons.
for (const button of this.toolbarEl.querySelectorAll('#image-shape div, #fa-spin')) {
button.classList.toggle('active', $(e.target).hasClass(button.id));
@@ -2157,6 +2162,12 @@ export class Wysiwyg extends Component {
this.odooEditor.observerActive();
}, 400));
}
// Hide button groups that have no visible buttons.
for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group:not(.d-none)')) {
if (!buttonGroup.querySelector('.btn:not(.d-none)')) {
buttonGroup.classList.add('d-none');
}
}
// Update color of already opened colorpickers.
setTimeout(() => {
for (const colorType in this.colorPalettesProps) {