From ed8133c72f6d98e88efe318975c9c54bcfc64649 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 21 Oct 2019 15:00:16 +0000 Subject: [PATCH] [IMP] web_editor, *: allow snippet options next to clone/delete buttons * website Now snippet options can be defined as a button which can be placed next to the clone and delete buttons, through a new "isTopOption" method. This commit also review the buttons and title design and take advantage of the feature to review the way snippets options are added in their container (that code indeed contained useless part since 13.0). Part of https://github.com/odoo/odoo/pull/38959 task-2066614 --- .../static/src/js/editor/snippets.editor.js | 20 ++++++++++++---- .../static/src/js/editor/snippets.options.js | 9 +++++++ .../static/src/scss/wysiwyg_snippets.scss | 24 +++++++++++++++---- addons/web_editor/static/src/xml/snippets.xml | 4 ++-- .../static/src/js/editor/snippets.options.js | 6 +++++ addons/website/views/snippets.xml | 7 +++--- 6 files changed, 56 insertions(+), 14 deletions(-) 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 4258fda46a1..c49c6235e1a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -299,13 +299,10 @@ var SnippetEditor = Widget.extend({ this._customize$Elements.forEach(($el, i) => { var editor = $el.data('editor'); var styles = _.values(editor.styles); - $el.toggleClass('d-none', styles.length === 0); _.sortBy(styles, '__order').forEach(style => { if (show) { - style.$el.appendTo($el); style.onFocus(); } else { - style.$el.detach(); style.onBlur(); } }); @@ -365,6 +362,11 @@ var SnippetEditor = Widget.extend({ var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', { name: this._getName(), })).data('editor', this); + $optionsSection.find('we-button-group').contents().each((i, node) => { + if (node.nodeType === Node.TEXT_NODE) { + node.parentNode.removeChild(node); + } + }); $optionsSection.on('mouseover', this._onOptionsSectionMouseOver.bind(this)); $optionsSection.on('mouseleave', this._onOptionsSectionMouseLeave.bind(this)); $optionsSection.on('click', 'we-title > span', this._onOptionsSectionClick.bind(this)); @@ -415,7 +417,17 @@ var SnippetEditor = Widget.extend({ this.$el.find('[data-toggle="dropdown"]').dropdown(); - return Promise.all(defs); + return Promise.all(defs).then(() => { + const options = _.sortBy(this.styles, '__order'); + options.forEach(option => { + if (option.isTopOption()) { + $optionsSection.find('we-button-group').first().prepend(option.$el); + } else { + $optionsSection.append(option.$el); + } + }); + $optionsSection.toggleClass('d-none', options.length === 0); + }); }, //-------------------------------------------------------------------------- diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index ebac0631acc..16b7355ffc7 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -52,6 +52,15 @@ var SnippetOption = Widget.extend({ this._setActive(); return this._super.apply(this, arguments); }, + /** + * Indicates if the option should be displayed in the button group at the + * top of the options panel, next to the clone/remove button. + * + * @returns {boolean} + */ + isTopOption: function () { + return false; + }, /** * Called when the parent edition overlay is covering the associated snippet * (the first time, this follows the call to the @see start method). diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 2bb583834b5..0f28857762e 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -217,7 +217,7 @@ body.editor_enable.editor_has_snippets { display: flex; align-items: center; margin: 0.25rem 0; - padding: 0 0.5rem; + text-transform: uppercase; font-weight: bold; color: inherit !important; @@ -227,10 +227,24 @@ body.editor_enable.editor_has_snippets { margin-left: auto; text-align: center; - > we-button { - margin-left: 0.25rem; - width: 1.5rem; - padding: 0.125rem; + > we-customizeblock-option { + display: inline-block; // Ideally -> display: contents; + } + we-button { + display: inline-block; + margin: 0 0 0 0.3em; + padding: 0; + border: none; + font-size: 0.9em; + text-align: center; + + &.active { + padding: 0; + + &::after { + display: none; + } + } } } } diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 8e1fe723f0d..05428a2dbaa 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -19,10 +19,10 @@ - - diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index be80066a027..dfa03bcd2c8 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1563,6 +1563,12 @@ options.registry.anchorName = options.Class.extend({ // Public //-------------------------------------------------------------------------- + /** + * @override + */ + isTopOption: function () { + return true; + }, /** * @override */ diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index f88734daa8b..2f32dd70219 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -1425,9 +1425,10 @@
- - Link Anchor - +