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

[IMP] website, web_editor: add options to fully control shadows

Browse Source 
task-2182909

closes odoo/odoo#46816

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Thanh Dodeur
2020-03-24 10:47:05 +00:00
committed by qsm-odoo
parent ab97763884
commit 900dad016d
4 changed files with 96 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+15 -2
View File
@@ -1024,7 +1024,12 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
if (typeof this._previewColor === 'string') {
return this._previewColor;
}
return this._super(...arguments);
let value = this._super(...arguments);
if (value && this.options.dataAttributes.hasOwnProperty('cssCompatible') &&
!ColorpickerDialog.isCSSColor(value)) {
value = `var(--${value})`;
}
return value;
},
/**
* @override
@@ -1879,7 +1884,15 @@ const SnippetOptionWidget = Widget.extend({
const styles = window.getComputedStyle(this.$target[0]);
const cssProps = weUtils.CSS_SHORTHANDS[params.cssProperty] || [params.cssProperty];
const cssValues = cssProps.map(cssProp => {
return styles[cssProp].trim();
let value = styles[cssProp].trim();
if (cssProp === 'box-shadow') {
const inset = value.includes('inset');
let values = value.replace(/,\s/g, ',').replace('inset', '').trim().split(/\s+/g);
const color = values.find(s => !s.match(/^\d/));
values = values.join(' ').replace(color, '').trim();
value = `${color} ${values}${inset ? ' inset' : ''}`;
}
return value;
});
if (cssValues.length === 4 && weUtils.areCssValuesEqual(cssValues[3], cssValues[1], params.cssProperty, this.$target)) {
cssValues.pop();
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+11
View File
@@ -491,6 +491,17 @@ body.editor_enable.editor_has_snippets {
}
}
we-multi we-row > div {
flex-wrap: wrap;
we-select .o_we_user_value_widget > div > we-select-menu {
top: 0;
}
we-row {
flex-basis: 100%;
}
}
//----------------------------------------------------------------------
// Layout Utils
//----------------------------------------------------------------------
addons/website/static/src/js/editor/snippets.options.js
+41
View File
@@ -1622,6 +1622,47 @@ options.registry.anchor = options.Class.extend({
},
});
/**
* Controls box properties.
*/
options.registry.Box = options.Class.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @see this.selectClass for parameters
*/
setShadow(previewMode, widgetValue, params) {
this.$target.toggleClass(params.shadowClass, !!widgetValue);
if (widgetValue) {
const inset = widgetValue === 'inset' ? widgetValue : '';
const values = this.$target.css('box-shadow').replace('inset', '') + ` ${inset}`;
this.$target[0].style.setProperty('box-shadow', values, 'important');
} else {
this.$target.css('box-shadow', '');
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState(methodName, params) {
if (methodName === 'setShadow') {
if (!this.$target[0].classList.contains(params.shadowClass)) {
return '';
}
return this.$target.css('box-shadow').includes('inset') ? 'inset' : 'outset';
}
return this._super(...arguments);
},
});
options.registry.CookiesBar = options.registry.SnippetPopup.extend({
xmlDependencies: (options.registry.SnippetPopup.prototype.xmlDependencies || []).concat(
['/website/static/src/xml/website.cookies_bar.xml']
addons/website/views/snippets/snippets.xml
+29 -5
View File
@@ -149,18 +149,41 @@
data-unit="px" data-extra-class="rounded"/>
</template>
<template id="website.snippet_options_shadow">
<we-select string="Shadow" data-no-preview="true" data-shadow-class="shadow">
<we-button data-set-shadow="">None</we-button>
<we-button data-set-shadow="outset" data-name="shadow_active_opt">Outset</we-button>
<we-button data-set-shadow="inset" data-name="shadow_inset_opt">Inset</we-button>
</we-select>
<we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
<we-colorpicker class="w-100 my-1" string="Color" data-select-style="" data-css-compatible=""/>
<we-row class="my-1">
<we-input string="X" data-select-style="" data-unit="px"/>
<we-input string="Y" data-select-style="" data-unit="px"/>
</we-row>
<we-row class="my-1">
<we-input string="Blur" data-select-style="" data-unit="px"/>
<we-input string="Spread" data-select-style="" data-unit="px"/>
</we-row>
<!-- Inset parameter always hidden (as controlled above) but needed -->
<!-- for the we-multi widget to work properly. -->
<we-checkbox data-select-style="inset" style="display: none;"/>
</we-multi>
</template>
<template id="snippet_options">
<t t-call="web_editor.snippet_options"/>
<!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
<div data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
<div data-js="Box"
data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
data-target=".card">
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<t t-call="website.snippet_options_border"/>
<we-checkbox string="Shadow" data-select-class="shadow"/>
<t t-call="website.snippet_options_shadow"/>
</div>
<!-- COLOR | .s_cards -->
@@ -323,10 +346,11 @@
</div>
<!-- Border | Columns -->
<div data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<div data-js="Box"
data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<t t-call="website.snippet_options_border"/>
<we-checkbox string="Shadow" data-select-class="shadow"/>
<t t-call="website.snippet_options_shadow"/>
</div>
<div data-js="sizing_y"