[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

2 files changed, 66 insertions, 48 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,