[IMP] web_editor, *: introduce new "button group" editor widget

*: website, website_form

Basically work just as a we-select but with a different design.

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

5 files changed, 103 insertions, 53 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 12a21bde93a..2ac2a13a88c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -457,7 +457,7 @@ var SnippetEditor = Widget.extend({
         var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', {
             name: this.getName(),
         })).data('editor', this);
-        const $optionsSectionBtnGroup = $optionsSection.find('we-button-group');
+        const $optionsSectionBtnGroup = $optionsSection.find('we-top-button-group');
         $optionsSectionBtnGroup.contents().each((i, node) => {
             if (node.nodeType === Node.TEXT_NODE) {
                 node.parentNode.removeChild(node);
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 fcd5b4a4ea1..cc0a154a08d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -677,37 +677,18 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
     },
 });
 
-const SelectUserValueWidget = UserValueWidget.extend({
-    tagName: 'we-select',
-    events: {
-        'click': '_onClick',
-    },
-
+const BaseSelectionUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    start: function () {
-        if (this.options && this.options.valueEl) {
-            this.containerEl.appendChild(this.options.valueEl);
-        }
-
-        this.menuTogglerEl = document.createElement('we-toggler');
-        this.icon = this.el.dataset.icon || false;
-        if (this.icon) {
-            this.el.classList.add('o_we_icon_select');
-            const iconEl = document.createElement('i');
-            iconEl.classList.add('fa', 'fa-fw', this.icon);
-            this.menuTogglerEl.appendChild(iconEl);
-        }
-        this.containerEl.appendChild(this.menuTogglerEl);
+    async start() {
+        await this._super(...arguments);
 
-        this.menuEl = document.createElement('we-select-menu');
+        this.menuEl = document.createElement('we-selection-items');
         if (this.options && this.options.childNodes) {
             this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
         }
         this.containerEl.appendChild(this.menuEl);
-
-        return this._super(...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -717,14 +698,7 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    close: function () {
-        this._super(...arguments);
-        this.menuTogglerEl.classList.remove('active');
-    },
-    /**
-     * @override
-     */
-    getValue: function (methodName) {
+    getValue(methodName) {
         let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed());
         if (!activeWidget) {
             activeWidget = this._userValueWidgets.find(widget => widget.isActive());
@@ -737,26 +711,13 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    isContainer: function () {
+    isContainer() {
         return true;
     },
     /**
      * @override
      */
-    isPreviewed: function () {
-        return this._super(...arguments) || this.menuTogglerEl.classList.contains('active');
-    },
-    /**
-     * @override
-     */
-    open() {
-        this._super(...arguments);
-        this.menuTogglerEl.classList.add('active');
-    },
-    /**
-     * @override
-     */
-    setValue: function (value, methodName) {
+    setValue(value, methodName) {
         this._userValueWidgets.forEach(widget => {
             widget.setValue('__NULL__', methodName);
         });
@@ -770,6 +731,59 @@ const SelectUserValueWidget = UserValueWidget.extend({
         }
         this._super(...arguments);
     },
+});
+
+const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
+    tagName: 'we-select',
+    events: {
+        'click': '_onClick',
+    },
+
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+
+        if (this.options && this.options.valueEl) {
+            this.containerEl.insertBefore(this.options.valueEl, this.menuEl);
+        }
+
+        this.menuTogglerEl = document.createElement('we-toggler');
+        this.icon = this.el.dataset.icon || false;
+        if (this.icon) {
+            this.el.classList.add('o_we_icon_select');
+            const iconEl = document.createElement('i');
+            iconEl.classList.add('fa', 'fa-fw', this.icon);
+            this.menuTogglerEl.appendChild(iconEl);
+        }
+        this.containerEl.insertBefore(this.menuTogglerEl, this.menuEl);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    close: function () {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.remove('active');
+    },
+    /**
+     * @override
+     */
+    isPreviewed: function () {
+        return this._super(...arguments) || this.menuTogglerEl.classList.contains('active');
+    },
+    /**
+     * @override
+     */
+    open() {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.add('active');
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -834,6 +848,10 @@ const SelectUserValueWidget = UserValueWidget.extend({
     },
 });
 
+const ButtonGroupUserValueWidget = BaseSelectionUserValueWidget.extend({
+    tagName: 'we-button-group',
+});
+
 const InputUserValueWidget = UserValueWidget.extend({
     tagName: 'we-input',
     events: {
@@ -1545,11 +1563,11 @@ const RangeUserValueWidget = UserValueWidget.extend({
     },
 });
 
-
 const userValueWidgetsRegistry = {
     'we-button': ButtonUserValueWidget,
     'we-checkbox': CheckboxUserValueWidget,
     'we-select': SelectUserValueWidget,
+    'we-button-group': ButtonGroupUserValueWidget,
     'we-input': InputUserValueWidget,
     'we-multi': MultiUserValueWidget,
     'we-colorpicker': ColorpickerUserValueWidget,
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index f031e0c8a50..cf4b8b3b7eb 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -156,6 +156,9 @@ $o-we-sidebar-content-field-input-font-family: monospace !default;
 $o-we-sidebar-content-field-input-unit-font-size: 9px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
+// This value allows 5 fa icons (fit one row exactly with this)
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default;
+
 $o-we-sidebar-content-field-progress-height: 3px !default;
 $o-we-sidebar-content-field-progress-control-height: 7px !default;
 $o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 19705bbed7a..28cff34a1de 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -372,7 +372,7 @@ body.editor_enable.editor_has_snippets {
                     line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width;
                 }
 
-                > we-button-group {
+                > we-top-button-group {
                     flex: 0 0 auto;
                     display: block;
                     margin-left: auto;
@@ -499,6 +499,13 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        // Selection (select and button groups)
+        we-selection-items {
+            .o_we_user_value_widget {
+                margin-top: 0;
+            }
+        }
+
         // Selects
         we-select.o_we_user_value_widget {
             position: relative;
@@ -507,7 +514,7 @@ body.editor_enable.editor_has_snippets {
                 @include large-component();
             }
 
-            we-select-menu {
+            we-selection-items {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
                 max-height: 600px;
@@ -520,7 +527,6 @@ body.editor_enable.editor_has_snippets {
 
                 we-button {
                     @include we-icon-button('', $align: left); // Always a padding on the left
-                    margin-top: 0;
                     border: none;
                     background: none;
                     background-clip: padding-box;
@@ -547,6 +553,29 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        // Button groups
+        we-button-group.o_we_user_value_widget {
+            we-selection-items {
+                display: flex;
+                max-width: 100%;
+
+                we-button {
+                    padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
+
+                    &.active {
+                        padding-left: $o-we-sidebar-content-field-button-group-button-spacing;
+
+                        &::after {
+                            display: none;
+                        }
+                    }
+                    + we-button {
+                        border-left: none;
+                    }
+                }
+            }
+        }
+
         // Inputs
         we-input.o_we_user_value_widget {
 
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 226d4403eea..d86725ac16e 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -23,14 +23,14 @@
         <we-customizeblock-options>
             <we-title>
                 <span t-esc="name"/>
-                <we-button-group>
+                <we-top-button-group>
                     <we-button class="fa fa-fw fa-clone oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
                     <we-button class="fa fa-fw fa-trash oe_snippet_remove"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
-                </we-button-group>
+                </we-top-button-group>
             </we-title>
         </we-customizeblock-options>
     </t>