pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
*: web_editor

Part of https://github.com/odoo/odoo/pull/53930
task-2157252
This commit is contained in:
qsm-odoo
2020-07-14 14:43:16 +00:00
parent 43c158295b
commit b4ce6fbc01
3 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+17 -9
View File
@@ -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);
}
},
addons/website/static/src/scss/website.wysiwyg.scss
+9
View File
@@ -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;
}
addons/website/views/snippets/snippets.xml
+4 -4
View File
@@ -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"