From 66cc01e76db0e647edb93e8108ab557f247372b5 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 28 Sep 2020 11:07:30 +0000 Subject: [PATCH] [FIX] web_editor, *: show text tools in style tab only *: 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 --- .../static/src/js/editor/rte.summernote.js | 9 +++++ .../static/src/js/editor/snippets.editor.js | 38 +++++++++++++++++-- .../static/src/scss/wysiwyg_snippets.scss | 13 ++++--- .../static/src/js/editor/editor_menu.js | 14 +++++++ .../website/static/src/xml/website.editor.xml | 6 ++- 5 files changed, 70 insertions(+), 10 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js index 229acc0616c..b99c9781446 100644 --- a/addons/web_editor/static/src/js/editor/rte.summernote.js +++ b/addons/web_editor/static/src/js/editor/rte.summernote.js @@ -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; diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index b4a5dca1d4b..707c73ed481 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -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 diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 37ad3403a07..ba1ba15ce43 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -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 { diff --git a/addons/website/static/src/js/editor/editor_menu.js b/addons/website/static/src/js/editor/editor_menu.js index c78e48f13ad..7249e0d3741 100644 --- a/addons/website/static/src/js/editor/editor_menu.js +++ b/addons/website/static/src/js/editor/editor_menu.js @@ -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; diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 0f3eb714224..e3fecaf2189 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -12,7 +12,11 @@
-
+
+
+