[IMP] web_editor: allow left-panel select to have an unique icon label

Part of https://github.com/odoo/odoo/pull/52211
Related to task-2197038

2 files changed, 16 insertions, 0 deletions

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 50b56ad435a..779e01419a7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -636,6 +636,13 @@ const SelectUserValueWidget = UserValueWidget.extend({
         }
 
         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);
 
         this.menuEl = document.createElement('we-select-menu');
@@ -710,6 +717,11 @@ const SelectUserValueWidget = UserValueWidget.extend({
      */
     _updateUI: async function () {
         await this._super(...arguments);
+
+        if (this.icon) {
+            return;
+        }
+
         const activeWidget = this._userValueWidgets.find(widget => !widget.isPreviewed() && widget.isActive());
         this.menuTogglerEl.textContent = activeWidget ? activeWidget.el.textContent : "/";
     },
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 6ad06de9082..97b4659535e 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -425,6 +425,10 @@ body.editor_enable.editor_has_snippets {
                 max-height: 600px;
                 overflow-y: auto;
             }
+
+            &.o_we_icon_select {
+                flex: 0 0 auto;
+            }
         }
 
         // Inputs