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

[IMP] web_editor, website: initialize the editor's tooltips

Browse Source 
The editor offers bootstrap tooltips, but these were not all initialized
and therefore appeared as standard HTML tooltips. This commit fixes that
by initializing all the tooltips so that they all have the same style.

Details:
- The bootstrap tooltips are now available in translate mode.
- With bootstrap 5, only one bootstrap component can be initialized on a
  HTML element. This is why the tooltips are now initialized on the
  first child when there is another bootstrap component.
- Some tests have been adapted.

task-2777738

closes odoo/odoo#85666

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-02-07 16:38:23 +01:00
committed by Romain Derie
parent 1bfc3aa1cf
commit 09b720eff1
8 changed files with 84 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+55 -24
View File
@@ -1811,6 +1811,33 @@ var SnippetsMenu = Widget.extend({
this._checkEditorToolbarVisibilityCallback = this._checkEditorToolbarVisibility.bind(this);
$(this.options.wysiwyg.odooEditor.document.body).on('click', this._checkEditorToolbarVisibilityCallback);
// Add tooltips on we-title elements whose text overflows and on all
// elements with available tooltip text. Note that the tooltips of the
// blocks should not be taken into account here because they have
// tooltips with a particular behavior (see _showSnippetTooltip).
this.tooltips = new Tooltip(this.el, {
selector: 'we-title, [title]:not(.oe_snippet)',
placement: 'bottom',
delay: 100,
// Ensure the tooltips have a good position when in iframe.
container: this.el,
// Prevent horizontal scroll when tooltip is displayed.
boundary: this.el.ownerDocument.body,
title: function () {
const el = this;
if (el.tagName !== 'WE-TITLE') {
return el.title;
}
// On Firefox, el.scrollWidth is equal to el.clientWidth when
// overflow: hidden, so we need to update the style before to
// get the right values.
el.style.setProperty('overflow', 'scroll', 'important');
const tipContent = el.scrollWidth > el.clientWidth ? el.innerHTML : '';
el.style.removeProperty('overflow');
return tipContent;
},
});
if (this.options.enableTranslation) {
// Load the sidebar with the style tab only.
await this._loadSnippetsTemplates();
@@ -1948,30 +1975,6 @@ var SnippetsMenu = Widget.extend({
const $autoFocusEls = $('.o_we_snippet_autofocus');
this._activateSnippet($autoFocusEls.length ? $autoFocusEls.first() : false);
// Add tooltips on we-title elements whose text overflows
new Tooltip(this.el, {
selector: 'we-title',
placement: 'bottom',
delay: 100,
// Ensure the tooltips have a good position when in iframe.
container: this.el,
// Prevent horizontal scroll when tooltip is displayed.
boundary: this.el.ownerDocument.body,
title: function () {
const el = this;
if (el.tagName !== 'WE-TITLE') {
return el.title;
}
// On Firefox, el.scrollWidth is equal to el.clientWidth when
// overflow: hidden, so we need to update the style before to
// get the right values.
el.style.setProperty('overflow', 'scroll', 'important');
const tipContent = el.scrollWidth > el.clientWidth ? el.innerHTML : '';
el.style.removeProperty('overflow');
return tipContent;
},
});
return Promise.all(defs).then(() => {
const $undoButton = this.$('.o_we_external_history_buttons button[data-action="undo"]');
const $redoButton = this.$('.o_we_external_history_buttons button[data-action="redo"]');
@@ -2019,6 +2022,8 @@ var SnippetsMenu = Widget.extend({
core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet);
$(document.body).off('click', this._checkEditorToolbarVisibilityCallback);
this.el.ownerDocument.body.classList.remove('editor_has_snippets');
// Dispose BS tooltips.
this.tooltips.dispose();
},
//--------------------------------------------------------------------------
@@ -3310,6 +3315,7 @@ var SnippetsMenu = Widget.extend({
* @param {this.tabs.VALUE} [tab='blocks'] - the tab to select
*/
_updateRightPanelContent: function ({content, tab, ...options}) {
this._hideActiveTooltip();
this._closeWidgets();
this._currentTab = tab || this.tabs.BLOCKS;
@@ -3433,6 +3439,28 @@ var SnippetsMenu = Widget.extend({
forceEmptyTab: true,
});
},
/**
* Hides the active tooltip.
*
* @private
*/
_hideActiveTooltip() {
// The BS documentation says that "Tooltips that use delegation (which
// are created using the selector option) cannot be individually
// destroyed on descendant trigger elements". So we remove the active
// tooltips manually.
// For instance, without this, clicking on "Hide in Desktop" on a
// snippet will leave the tooltip "forever" visible even if the "Hide in
// Desktop" button is gone.
const tooltipClass = 'aria-describedby';
const tooltippedEl = this.el.querySelector(`[${tooltipClass}^="tooltip"]`);
if (tooltippedEl) {
const tooltipEl = document.getElementById(tooltippedEl.getAttribute(tooltipClass));
if (tooltipEl) {
Tooltip.getInstance(tooltipEl).hide();
}
}
},
//--------------------------------------------------------------------------
// Handlers
@@ -4200,6 +4228,9 @@ var SnippetsMenu = Widget.extend({
}
this._buttonAction = true;
let removeLoadingEffect;
// Remove the tooltip now, because the button will be disabled and so,
// the tooltip will not be removable (see BS doc).
this._hideActiveTooltip();
if (addLoadingEffect) {
removeLoadingEffect = dom.addButtonLoadingEffect(button);
}
addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
-2
View File
@@ -782,7 +782,6 @@ const ColorPaletteWidget = Widget.extend({
* @param {Event} ev
*/
_onColorButtonEnter: function (ev) {
ev.stopPropagation();
this.trigger_up('color_hover', Object.assign(this.getSelectedColors(), this._getButtonInfo(ev.currentTarget)));
},
/**
@@ -792,7 +791,6 @@ const ColorPaletteWidget = Widget.extend({
* @param {Event} ev
*/
_onColorButtonLeave: function (ev) {
ev.stopPropagation();
this.trigger_up('color_leave', Object.assign(this.getSelectedColors(), {
target: ev.target,
}));
addons/web_editor/static/src/xml/editor.xml
+12 -18
View File
@@ -9,9 +9,8 @@
<div id="toolbar" class="oe-toolbar oe-floating">
<div id="style" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" title="Text style" tabindex="-1" data-bs-display="static"
data-bs-original-title="Style" aria-expanded="false">
<span>Normal</span>
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
<span title="Text style">Normal</span>
</button>
<ul class="dropdown-menu">
<li id="paragraph-dropdown-item">
@@ -57,9 +56,8 @@
<div id="colorInputButtonGroup" class="btn-group">
<div class="colorpicker-group note-fore-color-preview" data-name="color">
<div id="oe-text-color" class="btn color-button dropdown-toggle editor-ignore"
data-bs-toggle="dropdown" title="Font Color" tabindex="-1"
data-bs-original-title="Font Color">
<i class="fa fa-font color-indicator fore-color"></i>
data-bs-toggle="dropdown" tabindex="-1">
<i class="fa fa-font color-indicator fore-color" title="Font Color"></i>
</div>
<ul class="dropdown-menu colorpicker-menu">
<li><div data-event-name="foreColor" class="colorPalette"></div></li>
@@ -67,9 +65,8 @@
</div>
<div class="colorpicker-group note-back-color-preview" data-name="color">
<button id="oe-fore-color" type="button" class="btn dropdown-toggle editor-ignore"
data-bs-toggle="dropdown" title="Background Color" tabindex="-1"
data-bs-original-title="Background Color">
<i class="fa fa-paint-brush color-indicator hilite-color"></i>
data-bs-toggle="dropdown" tabindex="-1">
<i class="fa fa-paint-brush color-indicator hilite-color" title="Background Color"></i>
</button>
<ul class="dropdown-menu colorpicker-menu">
<li><div data-event-name="backColor" class="colorPalette"></div></li>
@@ -79,9 +76,8 @@
<div id="font-size" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" title="Font size" tabindex="-1" data-bs-display="static"
data-bs-original-title="Font Size" aria-expanded="false">
<span id="fontSizeCurrentValue"></span>
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
<span id="fontSizeCurrentValue" title="Font size"></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" data-call="setFontSize">default</a></li>
@@ -101,9 +97,8 @@
<div id="justify" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" title="Text align" tabindex="-1" data-bs-display="static"
data-bs-original-title="Paragraph" aria-expanded="false">
<i id="paragraphDropdownButton" class="fa fa-align-left fa-fw"></i>
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
<i id="paragraphDropdownButton" class="fa fa-align-left fa-fw" title="Text align"></i>
</button>
<div class="dropdown-menu">
<div class="btn-group">
@@ -142,9 +137,8 @@
<div id="image-padding" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" title="Image padding" tabindex="-1"
data-bs-original-title="Image padding" aria-expanded="false">
<span class="fa fa-plus-square-o"></span>
data-bs-toggle="dropdown" tabindex="-1" aria-expanded="false">
<span class="fa fa-plus-square-o" title="Image padding"></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item editor-ignore" href="#" data-class="">None</a></li>
addons/web_editor/static/src/xml/wysiwyg.xml
+6 -12
View File
@@ -212,10 +212,8 @@
<we-select class="o_we_user_value_widget o_we_sublevel_1">
<we-title>Style</we-title>
<div class="dropdown">
<button class="dropdown-toggle"
data-bs-toggle="dropdown" title="" tabindex="-1"
data-bs-original-title="Link Style" aria-expanded="false">
<we-toggler/>
<button class="dropdown-toggle" data-bs-toggle="dropdown" tabindex="-1" aria-expanded="false">
<we-toggler title="Link Style"/>
</button>
<we-selection-items class="dropdown-menu" name="link_style_color">
<t t-foreach="widget.colorsData" t-as="colorData">
@@ -283,10 +281,8 @@
<we-title>Size</we-title>
<div>
<div class="dropdown">
<button class="dropdown-toggle"
data-bs-toggle="dropdown" title="" tabindex="-1"
data-bs-original-title="Link Size" aria-expanded="false">
<we-toggler>
<button class="dropdown-toggle" data-bs-toggle="dropdown" title="" tabindex="-1" aria-expanded="false">
<we-toggler title="Link Size">
Medium
</we-toggler>
</button>
@@ -311,10 +307,8 @@
<we-title>Shape</we-title>
<div>
<div class="dropdown">
<button class="dropdown-toggle"
data-bs-toggle="dropdown" title="" tabindex="-1"
data-bs-original-title="Link Shape" aria-expanded="false">
<we-toggler>
<button class="dropdown-toggle" data-bs-toggle="dropdown" tabindex="-1" aria-expanded="false">
<we-toggler title="Link Shape">
Default
</we-toggler>
</button>
addons/website/static/tests/tours/link_tools.js
+1 -1
View File
@@ -78,7 +78,7 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
},
{
content: "The new link content should be odoo website and url odoo.be",
trigger: '#toolbar button[data-bs-original-title="Link Style"]',
trigger: '#toolbar .dropdown:has([name="link_style_color"]) > button',
},
{
// When doing automated testing, the link popover takes time to
addons/website/static/tests/tours/website_form_editor.js
+4 -4
View File
@@ -323,13 +323,13 @@ odoo.define('website.tour.form_editor', function (require) {
run: () => null,
}, {
content: "Change button's style",
trigger: '.dropdown-toggle[data-bs-original-title="Link Style"]',
trigger: '.dropdown:has([name="link_style_color"]) > button',
run: () => {
$('.dropdown-toggle[data-bs-original-title="Link Style"]').click();
$('.dropdown:has([name="link_style_color"]) > button').click();
$('[data-value="secondary"]').click();
$('[data-bs-original-title="Link Shape"]').click();
$('.dropdown:has([name="link_style_shape"]) > button').click();
$('[data-value="rounded-circle"]').click();
$('[data-bs-original-title="Link Size"]').click();
$('.dropdown:has([name="link_style_size"]) > button').click();
$('[data-value="sm"]').click();
},
}, {
addons/website/views/snippets/snippets.xml
+4 -4
View File
@@ -457,10 +457,10 @@
<div data-js="CarouselItem"
data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
<we-button class="fa fa-fw fa-angle-left" data-switch-to-slide="left" data-no-preview="true" data-tooltip="Move Backward"/>
<we-button class="fa fa-fw fa-angle-right me-2" data-switch-to-slide="right" data-no-preview="true" data-tooltip="Move Forward"/>
<we-button class="fa fa-fw fa-plus o_we_bg_success" data-add-slide-item="true" data-no-preview="true" data-tooltip="Add Slide"/>
<we-button class="fa fa-fw fa-minus o_we_bg_danger" data-remove-slide="true" data-no-preview="true" data-tooltip="Remove Slide"/>
<we-button class="fa fa-fw fa-angle-left" data-switch-to-slide="left" data-no-preview="true" title="Move Backward"/>
<we-button class="fa fa-fw fa-angle-right me-2" data-switch-to-slide="right" data-no-preview="true" title="Move Forward"/>
<we-button class="fa fa-fw fa-plus o_we_bg_success" data-add-slide-item="true" data-no-preview="true" title="Add Slide"/>
<we-button class="fa fa-fw fa-minus o_we_bg_danger" data-remove-slide="true" data-no-preview="true" title="Remove Slide"/>
</div>
<!-- Accordion -->
addons/website_mass_mailing/static/tests/tours/newsletter_block.js
+2 -2
View File
@@ -40,7 +40,7 @@ wTourUtils.registerWebsitePreviewTour('newsletter_block_edition', {
},
{
content: 'Click on the link style button',
trigger: '[data-bs-original-title="Link Style"]',
trigger: '.dropdown:has([name="link_style_color"]) > button',
},
{
content: 'Click on the primary style button',
@@ -48,7 +48,7 @@ wTourUtils.registerWebsitePreviewTour('newsletter_block_edition', {
},
{
content: 'Change the shape of the button',
trigger: '[data-bs-original-title="Link Shape"]',
trigger: '.dropdown:has([name="link_style_shape"]) > button',
},
{
content: 'Click on the flat shape button',