[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

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);
+        });
     },
 
     //--------------------------------------------------------------------------

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).

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

addons/web_editor/static/src/xml/snippets.xml

@@ -19,10 +19,10 @@
             <we-title>
                 <span t-esc="name"/>
                 <we-button-group>
-                    <we-button class="fa fa-files-o oe_snippet_clone"
+                    <we-button class="fa fa-fw fa-clone oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="fa fa-trash-o oe_snippet_remove"
+                    <we-button class="fa fa-fw fa-trash oe_snippet_remove"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
                 </we-button-group>

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
      */

addons/website/views/snippets.xml

@@ -1425,9 +1425,10 @@
     <div data-js="anchorName"
         data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
         data-exclude=".modal *">
-        <we-button data-no-preview="true" data-open-anchor-dialog="">
-            <i class="fa fa-fw fa-anchor"/> Link Anchor
-        </we-button>
+        <we-button class="fa fa-fw fa-link"
+                   title="Create a link to target this section"
+                   data-no-preview="true"
+                   data-open-anchor-dialog=""/>
     </div>
 
     <!-- Mega Menu settings -->