[IMP] website, *: add prettier preview of border styles

*: web_editor

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

3 files changed, 30 insertions, 13 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 7ebf45964b5..eb36cc762ff 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -801,26 +801,34 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
             return;
         }
 
-        if (this.menuTogglerImgEl) {
-            this.menuTogglerImgEl.remove();
+        if (this.menuTogglerItemEl) {
+            this.menuTogglerItemEl.remove();
+            this.menuTogglerItemEl = null;
         }
-        this.menuTogglerEl.textContent = '';
 
+        let textContent = '';
         const activeWidget = this._userValueWidgets.find(widget => !widget.isPreviewed() && widget.isActive());
         if (activeWidget) {
             const value = (activeWidget.el.dataset.selectLabel || activeWidget.el.textContent.trim());
             const imgSrc = activeWidget.el.dataset.img;
             if (value) {
-                this.menuTogglerEl.textContent = value;
+                textContent = value;
             } else if (imgSrc) {
-                if (!this.menuTogglerImgEl) {
-                    this.menuTogglerImgEl = document.createElement('img');
+                this.menuTogglerItemEl = document.createElement('img');
+                this.menuTogglerItemEl.src = imgSrc;
+            } else {
+                const fakeImgEl = activeWidget.el.querySelector('.o_we_fake_img_item');
+                if (fakeImgEl) {
+                    this.menuTogglerItemEl = fakeImgEl.cloneNode(true);
                 }
-                this.menuTogglerImgEl.src = imgSrc;
-                this.menuTogglerEl.appendChild(this.menuTogglerImgEl);
             }
         } else {
-            this.menuTogglerEl.textContent = "/";
+            textContent = "/";
+        }
+
+        this.menuTogglerEl.textContent = textContent;
+        if (this.menuTogglerItemEl) {
+            this.menuTogglerEl.appendChild(this.menuTogglerItemEl);
         }
     },
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 90be93c7f79..8364bbac507 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -126,3 +126,12 @@ we-collapse {
     position: relative;
     padding: 0.3em 0.3em 0.3em 1em;
 }
+
+.o_we_border_preview {
+    display: inline-block;
+    width: 999px;
+    max-width: 100%;
+    margin-bottom: 2px;
+    border-width: 4px;
+    border-bottom: none !important;
+}
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 40048401538..9b17aa99909 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -124,10 +124,10 @@
         <we-colorpicker data-dependencies="border_width_opt"
                         data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
         <we-select data-css-property="border-style" data-dependencies="border_width_opt">
-            <we-button data-select-style="solid">Solid</we-button>
-            <we-button data-select-style="dashed">Dashed</we-button>
-            <we-button data-select-style="dotted">Dotted</we-button>
-            <we-button data-select-style="double">Double</we-button>
+            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
+            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
+            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
         </we-select>
         <we-input data-name="border_width_opt"
                   data-select-style="0" data-css-property="border-width"