diff options
Diffstat (limited to 'addons')
| -rw-r--r-- | addons/web_editor/static/src/js/editor/snippets.options.js | 26 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.wysiwyg.scss | 9 | ||||
| -rw-r--r-- | addons/website/views/snippets/snippets.xml | 8 |
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" |