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 - +