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 @@
- Solid
- Dashed
- Dotted
- Double
+
+
+
+