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

[FIX] web_editor, *: show text tools in style tab only

Browse Source 
*: website

As the text editor is still the summernote one, this improvement was
made possible through a series of hack. It has to be reviewed once the
new editor is ready.
This makes the text tools only appear in the style tab by switching to
it as soon as the summernote tools are updated. To prevent flickering,
css and js hacks had to be made.

This also moves the undo/redo buttons in the top bar with another hack:
those simulates click on the hidden summernote ones.

Part of https://github.com/odoo/odoo/pull/58638

X-original-commit: 0f65015b1b0a849bf109df11fd18a9e3a62820e4
This commit is contained in:
qsm-odoo
2020-09-28 18:58:24 +00:00
parent 9c41a344cf
commit 66cc01e76d
5 changed files with 70 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/rte.summernote.js
+9
View File
@@ -341,6 +341,15 @@ eventHandler.modules.popover.update = function ($popover, oStyle, isAirMode) {
} else {
$airPopover.show();
}
const $externalHistoryButtons = $('.o_we_external_history_buttons');
if ($externalHistoryButtons.length) {
const $noteHistory = $('.note-history');
$noteHistory.addClass('d-none');
$externalHistoryButtons.find(':first-child').prop('disabled', $noteHistory.find('[data-event=undo]').prop('disabled'));
$externalHistoryButtons.find(':last-child').prop('disabled', $noteHistory.find('[data-event=redo]').prop('disabled'));
}
$popover.trigger('summernote_popover_update_call');
};
var fn_handle_update = eventHandler.modules.handle.update;
addons/web_editor/static/src/js/editor/snippets.editor.js
+34 -4
View File
@@ -821,6 +821,7 @@ var SnippetsMenu = Widget.extend({
'mousedown': '_onMouseDown',
'input .o_snippet_search_filter_input': '_onSnippetSearchInput',
'click .o_snippet_search_filter_reset': '_onSnippetSearchResetClick',
'summernote_popover_update_call .o_we_snippet_text_tools': '_onSummernoteToolsUpdate',
},
custom_events: {
'activate_insertion_zones': '_onActivateInsertionZones',
@@ -929,7 +930,7 @@ var SnippetsMenu = Widget.extend({
this.customizePanel.classList.add('o_we_customize_panel', 'd-none');
this.textEditorPanelEl = document.createElement('div');
this.textEditorPanelEl.classList.add('o_we_snippet_text_tools');
this.textEditorPanelEl.classList.add('o_we_snippet_text_tools', 'd-none');
this.invisibleDOMPanelEl = document.createElement('div');
this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel');
@@ -1030,9 +1031,8 @@ var SnippetsMenu = Widget.extend({
});
const $autoFocusEls = $('.o_we_snippet_autofocus');
if ($autoFocusEls.length) {
this._activateSnippet($autoFocusEls.first());
}
this._activateSnippet($autoFocusEls.length ? $autoFocusEls.first() : false);
this._textToolsSwitchingEnabled = true;
return Promise.all(defs).then(() => {
this.$('[data-title]').tooltip({
@@ -1985,6 +1985,7 @@ var SnippetsMenu = Widget.extend({
* @param {this.tabs.VALUE} [tab='blocks'] - the tab to select
*/
_updateLeftPanelContent: function ({content, tab}) {
clearTimeout(this._textToolsSwitchingTimeout);
this._closeWidgets();
tab = tab || this.tabs.BLOCKS;
@@ -1999,10 +2000,12 @@ var SnippetsMenu = Widget.extend({
this.$('.o_snippet_search_filter').toggleClass('d-none', tab !== this.tabs.BLOCKS);
this.$('#o_scroll').toggleClass('d-none', tab !== this.tabs.BLOCKS);
this.customizePanel.classList.toggle('d-none', tab === this.tabs.BLOCKS);
this.textEditorPanelEl.classList.toggle('d-none', tab !== this.tabs.OPTIONS);
this.$('.o_we_add_snippet_btn').toggleClass('active', tab === this.tabs.BLOCKS);
this.$('.o_we_customize_snippet_btn').toggleClass('active', tab === this.tabs.OPTIONS)
.prop('disabled', tab !== this.tabs.OPTIONS);
},
/**
* Scrolls to given snippet.
@@ -2424,6 +2427,33 @@ var SnippetsMenu = Widget.extend({
const $snippet = this.$snippets.has(`[data-snippet="${ev.data.key}"]`);
ev.data.onSuccess($snippet.length ? $snippet[0].dataset.oeThumbnail : '');
},
/**
* @private
*/
_onSummernoteToolsUpdate(ev) {
if (!this._textToolsSwitchingEnabled) {
return;
}
if (!$.summernote.core.range.create()) {
// Sometimes not enough...
return;
}
this.textEditorPanelEl.classList.add('d-block');
const hasVisibleButtons = !!$(this.textEditorPanelEl).find('.btn:visible').length;
this.textEditorPanelEl.classList.remove('d-block');
if (!hasVisibleButtons) {
// Ugly way to detect that summernote was updated but there is no
// visible text tools.
return;
}
// Only switch tab without changing content (_updateLeftPanelContent
// make text tools visible only on that specific tab). Also do it with
// a slight delay to avoid flickering doing it twice.
clearTimeout(this._textToolsSwitchingTimeout);
this._textToolsSwitchingTimeout = setTimeout(() => {
this._updateLeftPanelContent({tab: this.tabs.OPTIONS});
}, 250);
},
/**
* @private
* @param {OdooEvent} ev
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+8 -5
View File
@@ -45,7 +45,7 @@ body.editor_enable.editor_has_snippets {
// Ugly hack to force ugly rules... while waiting for new editor
#oe_snippets#oe_snippets .o_we_snippet_text_tools {
padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
z-index: $o-we-zindex;
.popover {
@@ -57,6 +57,7 @@ body.editor_enable.editor_has_snippets {
}
.popover-body {
padding: 0 !important;
border: none !important;
> * {
margin-bottom: $o-we-sidebar-content-field-spacing;
@@ -81,10 +82,12 @@ body.editor_enable.editor_has_snippets {
margin-bottom: $dropdown-spacer;
}
}
}
#o_scroll:not(.d-none) ~ .o_we_snippet_text_tools {
padding-right: $o-we-sidebar-blocks-content-spacing;
padding-left: $o-we-sidebar-blocks-content-spacing;
.note-popover ~ .note-popover,
.note-handle ~ .note-handle,
.note-dialog ~ .note-dialog {
// Prevent flickering of summernote when switching text tools...
display: none;
}
}
.oe_snippet {
addons/website/static/src/js/editor/editor_menu.js
+14
View File
@@ -19,6 +19,8 @@ var EditorMenu = Widget.extend({
template: 'website.editorbar',
xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
events: {
'click button[data-action=undo]': '_onUndoClick',
'click button[data-action=redo]': '_onRedoClick',
'click button[data-action=save]': '_onSaveClick',
'click button[data-action=cancel]': '_onCancelClick',
},
@@ -234,6 +236,18 @@ var EditorMenu = Widget.extend({
_onSaveClick: function () {
this.save();
},
/**
* @private
*/
_onUndoClick() {
$('.note-history [data-event=undo]').first().click();
},
/**
* @private
*/
_onRedoClick() {
$('.note-history [data-event=redo]').first().click();
},
});
return EditorMenu;
addons/website/static/src/xml/website.editor.xml
+5 -1
View File
@@ -12,7 +12,11 @@
<!-- Editor top bar which contains the summernote tools and save/discard buttons -->
<t t-name="website.editorbar">
<div class="o_we_website_top_actions">
<form>
<div class="o_we_external_history_buttons">
<button type="button" data-action="undo" class="btn btn-secondary fa fa-undo"/>
<button type="button" data-action="redo" class="btn btn-secondary fa fa-repeat"/>
</div>
<form class="ml-auto">
<button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j">Discard</button>
<button type="button" class="btn btn-primary" data-action="save" accesskey="s">Save</button>
</form>