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

[IMP] web_editor, *: review background color/image options UI

Browse Source 
*: website, mass_mailing, website_blog, doc

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 d23a9c1954
commit bb0cd4d5c8
18 changed files with 273 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/static/src/js/mass_mailing_snippets.js
+1 -1
View File
@@ -127,7 +127,7 @@ options.registry.mass_mailing_table_item = options.Class.extend({
// Adding compatibility for the outlook compliance of mailings.
// Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
options.registry.background = options.registry.background.extend({
options.registry.BackgroundImage = options.registry.BackgroundImage.extend({
start: function () {
this._super();
if (this.snippets && this.snippets.split('.')[0] === "mass_mailing") {
addons/web_editor/static/src/js/editor/snippets.options.js
+57 -68
View File
@@ -130,6 +130,8 @@ function createPropertyProxy(obj, propertyName, value) {
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
const NULL_ID = '__NULL__';
/**
* Base class for components to be used in snippet options widgets to retrieve
* user values.
@@ -304,7 +306,7 @@ const UserValueWidget = Widget.extend({
* @returns {boolean}
*/
isActive: function () {
return !!this._value;
return this._value && this._value !== NULL_ID;
},
/**
* Indicates if the widget can contain sub user value widgets or not.
@@ -719,7 +721,7 @@ const BaseSelectionUserValueWidget = UserValueWidget.extend({
*/
setValue(value, methodName) {
this._userValueWidgets.forEach(widget => {
widget.setValue('__NULL__', methodName);
widget.setValue(NULL_ID, methodName);
});
for (const widget of [...this._userValueWidgets].reverse()) {
widget.setValue(value, methodName);
@@ -1304,10 +1306,9 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
});
const ImagepickerUserValueWidget = UserValueWidget.extend({
tagName: 'we-imagepicker',
tagName: 'we-button',
events: {
'click .o_we_edit_image': '_onEditImage',
'click .o_we_remove_image': '_onRemoveImage',
'click': '_onEditImage',
},
/**
@@ -1315,18 +1316,13 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
*/
start: async function () {
await this._super(...arguments);
const allowedSelector = this.el.dataset.allowVideos;
this.allowVideos = allowedSelector ? this.$target.is(allowedSelector) : false;
this.editImageButton = document.createElement('we-button');
this.editImageButton.classList.add('o_we_edit_image', 'fa', 'fa-fw', 'fa-edit');
this.removeImageButton = document.createElement('we-button');
this.removeImageButton.classList.add('o_we_remove_image', 'fa', 'fa-fw', 'fa-times');
this.removeImageButton.title = _t("Remove");
this.containerEl.appendChild(this.editImageButton);
this.containerEl.appendChild(this.removeImageButton);
const iconEl = document.createElement('i');
iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
this.containerEl.appendChild(iconEl);
},
/**
* @override
@@ -1342,9 +1338,9 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
/**
* @override
*/
_updateUI: async function () {
async _updateUI() {
await this._super(...arguments);
this.removeImageButton.classList.toggle('d-none', !this.isActive());
this.el.classList.toggle('active', this.isActive());
},
//--------------------------------------------------------------------------
@@ -1370,8 +1366,8 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
noDocuments: true,
noVideos: !this.allowVideos,
isForBgVideo: true,
res_model: $editable.data('oe-model'),
res_id: $editable.data('oe-id'),
'res_model': $editable.data('oe-model'),
'res_id': $editable.data('oe-id'),
}, dummyEl).open();
mediaDialog.on('save', this, data => {
if (data.bgVideoSrc) {
@@ -1387,16 +1383,6 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
this._onUserValueChange();
});
},
/**
* Called when the remove background button is clicked.
*
* @private
*/
_onRemoveImage: function (ev) {
this._value = '';
this.isVideo = false;
this._onUserValueChange(ev);
},
});
const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
@@ -2543,44 +2529,6 @@ const registry = {};
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
/**
* Marks color levels of any element that may get or has a color classes. This
* is done for the specific main colorpicker option so that those are marked on
* snippet drop (so that base snippet definition do not need to care about that)
* and on first focus (for compatibility).
*/
registry.MainColorpicker = SnippetOptionWidget.extend({
/**
* @override
*/
start: function () {
this._markColorLevel();
return this._super(...arguments);
},
/**
* @override
*/
onBuilt: function () {
this._markColorLevel();
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Adds a specific class indicating the element is colored so that nested
* color classes work (we support one-level). Removing it is not useful,
* technically the class can be added on anything that *may* receive a color
* class: this does not come with any CSS rule.
*
* @private
*/
_markColorLevel: function () {
this.$target.addClass('o_colored_level');
},
});
registry.sizing = SnippetOptionWidget.extend({
/**
* @override
@@ -2975,7 +2923,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
}
const dataURL = await applyModifications(img);
const weight = dataURL.split(',')[1].length / 4 * 3;
this.$el.find('.o_we_image_weight').text(`${(weight / 1024).toFixed(1)}kb`);
const $weight = this.$el.find('.o_we_image_weight');
$weight.find('> span').text(`${(weight / 1024).toFixed(1)}kb`);
$weight.removeClass('d-none');
img.classList.add('o_modified_image_to_save');
return loadImage(dataURL, img);
},
@@ -3220,7 +3170,7 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
/**
* Handles the edition of snippet's background image.
*/
registry.background = SnippetOptionWidget.extend({
registry.BackgroundImage = SnippetOptionWidget.extend({
/**
* @override
*/
@@ -3648,6 +3598,44 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
},
});
/**
* Marks color levels of any element that may get or has a color classes. This
* is done for the specific main colorpicker option so that those are marked on
* snippet drop (so that base snippet definition do not need to care about that)
* and on first focus (for compatibility).
*/
registry.ColoredLevelBackground = registry.BackgroundImage.extend({
/**
* @override
*/
start: function () {
this._markColorLevel();
return this._super(...arguments);
},
/**
* @override
*/
onBuilt: function () {
this._markColorLevel();
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Adds a specific class indicating the element is colored so that nested
* color classes work (we support one-level). Removing it is not useful,
* technically the class can be added on anything that *may* receive a color
* class: this does not come with any CSS rule.
*
* @private
*/
_markColorLevel: function () {
this.$target.addClass('o_colored_level');
},
});
/**
* Allows to replace a text value with the name of a database record.
* @todo replace this mechanism with real backend m2o field ?
@@ -3889,6 +3877,7 @@ return {
SnippetOptionWidget: SnippetOptionWidget,
snippetOptionRegistry: registry,
NULL_ID: NULL_ID,
UserValueWidget: UserValueWidget,
userValueWidgetsRegistry: userValueWidgetsRegistry,
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+15
View File
@@ -841,6 +841,10 @@ body.editor_enable.editor_has_snippets {
we-select.o_we_user_value_widget {
position: static;
}
&.o_we_full_row > div {
flex: 1 1 auto;
}
}
%o-we-inline {
@@ -871,6 +875,17 @@ body.editor_enable.editor_has_snippets {
}
}
}
.o_we_image_weight {
margin-top: $o-we-sidebar-content-field-spacing;
text-align: right;
color: $o-we-color-success;
line-height: $o-we-sidebar-content-field-height;
> .fa {
margin-right: $o-we-sidebar-content-field-label-spacing;
}
}
}
> .o_we_invisible_el_panel {
addons/web_editor/static/tests/test_utils.js
+1 -1
View File
@@ -66,7 +66,7 @@ const SNIPPETS_TEMPLATE = `
<div data-selector=".test_option_all">
<we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>
</div>
<div data-js="background" data-selector=".test_option_all">
<div data-js="BackgroundImage" data-selector=".test_option_all">
<we-button data-choose-image="true" data-no-preview="true">
<i class="fa fa-picture-o"/> Background Image
</we-button>
addons/web_editor/views/snippets.xml
+61 -3
View File
@@ -33,17 +33,75 @@
</div>
</template>
<template id="image_optimization_controls">
<template id="snippet_options_image_optimization_widgets">
<we-range string="Quality" data-set-quality=""/>
<!-- Select filled in JS -->
<we-select string="Width" data-name="width_select_opt" data-no-preview="true"/>
<span class="o_we_image_weight text-right"/>
<we-colorpicker string="Color filter" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
<div class="o_we_external_warning d-none">
<we-title title="Quality options are unavailable for external images. If you want to change this image's quality, please first download it from the original source and upload it in Odoo.">
<i class="fa fa-warning" /> External Image
</we-title>
</div>
<div class="o_we_image_weight d-none"><i class="fa fa-long-arrow-right"/><span/></div>
</template>
<template id="snippet_options_background_selection_widgets">
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<we-colorpicker t-if="with_colors"
title="Color"
data-name="bg_color_opt"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"
t-att-data-with-combinations="with_color_combinations and 'true' or None"
t-att-data-css-compatible="css_compatible and 'true' or None"/>
<we-button-group t-if="with_images"
class="ml-auto"
t-att-data-dependencies="images_dependencies"
data-no-preview="true">
<we-imagepicker title="Image"
data-background=""
data-allow-videos=":not(.parallax, .s_parallax_bg)"/>
<we-button title="None"
data-background=""><i class="fa fa-fw fa-ban"/></we-button>
</we-button-group>
</we-row>
</template>
<template id="snippet_options_background_options">
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundImage'"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-call="web_editor.snippet_options_background_selection_widgets"/>
</div>
<t t-if="with_images">
<div data-js="BackgroundPosition"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row>
<we-select data-no-preview="true">
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position"
data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<we-input string="Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</div>
<div data-js="BackgroundOptimize"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
</div>
</t>
</template>
<!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
@@ -61,7 +119,7 @@
<div data-js="ImageOptimize"
data-selector="img">
<t t-call="web_editor.image_optimization_controls"/>
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
</div>
</template>
addons/website/static/src/js/editor/snippets.options.js
+31 -14
View File
@@ -511,19 +511,7 @@ options.Class.include({
},
});
options.registry.BackgroundOptimize.include({
/**
* @override
*/
_computeVisibility() {
if (this.$target.hasClass('o_background_video')) {
return false;
}
return this._super(...arguments);
},
});
options.registry.background.include({
options.registry.BackgroundImage.include({
background: async function (previewMode, widgetValue, params) {
if (previewMode === 'reset' && this.videoSrc) {
return this._setBgVideo(false, this.videoSrc);
@@ -591,6 +579,18 @@ options.registry.background.include({
},
});
options.registry.BackgroundOptimize.include({
/**
* @override
*/
_computeVisibility() {
if (this.$target.hasClass('o_background_video')) {
return false;
}
return this._super(...arguments);
},
});
options.registry.SwitchTheme = options.Class.extend({
isTopOption: true,
@@ -679,6 +679,14 @@ options.registry.Theme = options.Class.extend({
await this._reloadBundles();
},
async enableImagepicker(previewMode, widgetValue, params) {
if (widgetValue) {
// TODO improve: here we make a hack so that a hidden imagepicker
// widget opens...
const widget = this._requestUserValueWidgets(widgetValue)[0];
widget.$el.click();
}
},
/**
* @see this.selectClass for parameters
*/
@@ -789,6 +797,15 @@ options.registry.Theme = options.Class.extend({
}
return this._super(...arguments);
},
/**
* @override
*/
async _computeWidgetVisibility(widgetName, params) {
if (widgetName === 'body_bg_image_opt') {
return false;
}
return this._super(...arguments);
},
/**
* @private
* @param {DOMElement} node
@@ -1367,7 +1384,7 @@ options.registry.parallax = options.Class.extend({
*/
onFocus: function () {
this.trigger_up('option_update', {
optionNames: ['background', 'BackgroundPosition'],
optionNames: ['BackgroundImage', 'BackgroundPosition'],
name: 'target',
data: this.$target.find('> .s_parallax_bg'),
});
addons/website/views/snippets/s_badge.xml
+1 -1
View File
@@ -8,7 +8,7 @@
</template>
<template id="s_badge_options" inherit_id="website.snippet_options">
<xpath expr="//div[@id='so_main_colorpicker']" position="after">
<xpath expr="//div[@data-js='parallax']" position="before">
<div data-selector=".s_badge">
<we-colorpicker string="Color" data-name="badge_colorpicker_opt"
data-select-style="true"
addons/website/views/snippets/s_blockquote.xml
+13 -27
View File
@@ -24,27 +24,18 @@
<we-button data-select-class="s_blockquote_minimalist" data-display="minimalist" data-name="blockquote_minimalist_opt">Minimalist</we-button>
</we-select>
</div>
<!-- Background Image -->
<div data-js="background" string="Background" data-selector=".s_blockquote" data-target=".s_blockquote_content">
<we-imagepicker string="Background" data-background="" data-dependencies="blockquote_cover_opt"/>
</div>
<!-- Background Image Size/Position -->
<div data-js="BackgroundPosition" data-selector=".s_blockquote" data-target=".s_blockquote_content">
<we-row>
<we-select data-no-preview="true">
<we-button data-background-type="cover" data-name="cover_background_opt">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position"
data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<we-input string="Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</div>
<!-- Color and images -->
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="'.s_blockquote'"/>
<t t-set="target" t-value="'.s_blockquote_content'"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="images_dependencies" t-value="'blockquote_cover_opt'"/>
</t>
<!-- Filter -->
<div data-js="background" data-selector=".s_blockquote" data-target=".s_blockquote_filter">
<div data-selector=".s_blockquote" data-target=".s_blockquote_filter">
<we-colorpicker string="Filter"
data-select-style="true"
data-css-property="background-color"
@@ -52,14 +43,9 @@
data-excluded="common, theme, custom"
data-dependencies="blockquote_cover_opt"/>
</div>
<!-- Background Color -->
<!-- Shadow -->
<div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
<we-colorpicker string="Background Color"
data-name="bg_color_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<t t-call="website.snippet_options_shadow"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<!-- Border Color -->
<div data-selector="blockquote">
addons/website/views/snippets/s_chart.xml
+4 -4
View File
@@ -23,10 +23,10 @@
<xpath expr="." position="inside">
<div data-js="InnerChart" string="Chart"
data-selector=".s_chart">
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<t t-call="web_editor.snippet_options_background_selection_widgets">
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="False"/>
</t>
<we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
<we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
<we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
addons/website/views/snippets/s_color_blocks_2.xml
-11
View File
@@ -22,17 +22,6 @@
</section>
</template>
<template id="s_color_blocks_2_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="attributes">
<attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
<attribute name="data-exclude" add=".s_color_blocks_2"/>
</xpath>
<xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
<attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
<attribute name="data-exclude" add=".s_color_blocks_2"/>
</xpath>
</template>
<template id="assets_snippet_s_color_blocks_2_css_000" inherit_id="website.assets_frontend">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_color_blocks_2/000.scss"/>
addons/website/views/snippets/s_masonry_block.xml
-10
View File
@@ -35,16 +35,6 @@
</section>
</template>
<!-- Options -->
<template id="s_masonry_block_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="attributes">
<attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
</xpath>
<xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
<attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
</xpath>
</template>
<!-- Assets -->
<template id="_assets_snippet_s_masonry_block_css_000_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
addons/website/views/snippets/s_media_list.xml
+9 -10
View File
@@ -47,17 +47,16 @@
<template id="s_media_list_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="MainColorpicker" data-selector=".s_media_list_item" data-target="> .row">
<we-colorpicker string="Background Color"
data-name="bg_color_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-with-combinations="true"/>
</div>
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="'.s_media_list_item'"/>
<t t-set="target" t-value="'> .row'"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="False"/>
<t t-set="with_color_combinations" t-value="True"/>
</t>
<div data-js="Box" data-selector=".s_media_list_item" data-target="> .row">
<t t-call="website.snippet_options_border"/>
<t t-call="website.snippet_options_shadow"/>
<t t-call="website.snippet_options_border_widgets"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<we-button-group string="Image Position">
addons/website/views/snippets/s_showcase.xml
+1 -1
View File
@@ -56,7 +56,7 @@
<!-- Options -->
<template id="s_showcase_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="before">
<xpath expr="//div[@data-js='parallax']" position="before">
<div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
</xpath>
</template>
addons/website/views/snippets/s_text_highlight.xml
+3 -3
View File
@@ -11,8 +11,8 @@
</template>
<template id="s_text_highlight_options" inherit_id="website.snippet_options">
<xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
<attribute name="data-selector" add=".s_text_highlight"/>
<xpath expr="//t[@t-set='only_bg_color_selector']" position="after">
<t t-set="only_bg_color_selector" t-value="only_bg_color_selector + ', .s_text_highlight'"/>
</xpath>
<xpath expr="//div[@id='so_width']" position="attributes">
<attribute name="data-selector" add=".s_text_highlight"/>
@@ -20,7 +20,7 @@
<xpath expr="//div[@id='so_text_align']" position="attributes">
<attribute name="data-selector" add=".s_text_highlight"/>
</xpath>
<xpath expr="//div[@data-js='background']" position="before">
<xpath expr="//div[@data-js='parallax']" position="before">
<div data-selector=".s_text_highlight">
<we-button-group string="Position">
<we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
addons/website/views/snippets/snippets.xml
+71 -72
View File
@@ -119,7 +119,7 @@
</xpath>
</template>
<template id="website.snippet_options_border">
<template id="snippet_options_border_widgets">
<we-row string="Border">
<we-colorpicker data-dependencies="border_width_opt"
data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
@@ -139,7 +139,7 @@
data-unit="px" data-extra-class="rounded"/>
</template>
<template id="website.snippet_options_shadow">
<template id="snippet_options_shadow_widgets">
<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>
@@ -166,12 +166,12 @@
<div data-js="Box"
data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
data-target=".card">
<we-colorpicker string="Background Color"
<we-colorpicker string="Colors"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<t t-call="website.snippet_options_border"/>
<t t-call="website.snippet_options_shadow"/>
<t t-call="website.snippet_options_border_widgets"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<!-- COLOR | .s_cards -->
@@ -209,16 +209,18 @@
</div>
<!-- Carousel | .s_carousel | .s_quotes_carousel -->
<!-- Dedicated colorpicker so that there is not 3 level of
o_colored_level. Use inline-style color for the same reason. -->
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="'section'"/>
<t t-set="target" t-value="'> .carousel'"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="css_compatible" t-value="True"/>
</t>
<div data-js="Carousel"
data-selector="section"
data-target="> .carousel">
<!-- Dedicated colorpicker so that there is not 3 level of
o_colored_level. Use inline-style color for the same reason. -->
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-css-compatible="true"/>
data-selector="section"
data-target="> .carousel">
<we-select string="Transition">
<we-button data-select-class="slide">Slide</we-button>
<we-button data-select-class="carousel-fade slide">Fade</we-button>
@@ -278,37 +280,39 @@
<we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
</div>
<!-- Background Image -->
<t t-set="bg_selector" t-value="'section, .parallax, .carousel-item'"/>
<t t-set="bg_exclude" t-value="'.s_hr, .s_image_gallery, .o_gallery .carousel-item'"/>
<div data-js="background" string="Background"
t-att-data-selector="bg_selector"
t-att-data-exclude="bg_exclude">
<we-imagepicker string="Background" data-background="" data-allow-videos=":not(.parallax, .s_parallax_bg)" data-name="bg_img_opt"/>
</div>
<div data-js="BackgroundOptimize" string="Background"
t-att-data-selector="bg_selector"
t-att-data-exclude="bg_exclude">
<t t-call="web_editor.image_optimization_controls"/>
</div>
<!-- Background -->
<t t-set="only_bg_color_selector" t-value="'section .row > div'"/>
<t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .o_gallery .row > div'"/>
<!-- Background Image Size/Position -->
<div data-js="BackgroundPosition"
data-selector="section, .parallax, .carousel-item"
data-exclude=".o_gallery .carousel-item">
<we-row>
<we-select data-no-preview="true">
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position"
data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<we-input string="Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</div>
<t t-set="base_only_bg_image_selector" t-value="'.parallax, .s_tabs .oe_structure > *, footer .oe_structure > *'"/>
<t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
<t t-set="only_bg_image_exclude" t-value="''"/>
<t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div'"/>
<t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .o_gallery .carousel-item'"/>
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="both_bg_color_image_selector"/>
<t t-set="exclude" t-value="both_bg_color_image_exclude"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="with_color_combinations" t-value="True"/>
</t>
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="only_bg_color_selector"/>
<t t-set="exclude" t-value="only_bg_color_exclude"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="False"/>
<t t-set="with_color_combinations" t-value="True"/>
</t>
<t t-call="web_editor.snippet_options_background_options">
<t t-set="selector" t-value="only_bg_image_selector"/>
<t t-set="exclude" t-value="only_bg_image_exclude"/>
<t t-set="with_colors" t-value="False"/>
<t t-set="with_images" t-value="True"/>
</t>
<!-- Parallax -->
<div data-js="parallax" data-selector=".parallax">
@@ -322,24 +326,7 @@
<we-button data-select-data-attribute="1.6">Fast</we-button>
<we-button data-select-data-attribute="2">Very Fast</we-button>
</we-select>
</div>
<!-- Background Color -->
<div id="so_main_colorpicker"
data-js="MainColorpicker"
data-selector="section, .carousel-item, section .row > div, .o_record_cover_container"
data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div, .s_carousel_wrapper, .s_tabs .oe_structure > *, footer .oe_structure > *, .o_mega_menu .row > div">
<we-colorpicker string="Background Color"
data-name="bg_color_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-with-combinations="true"
data-dependencies="!cover_background_opt"/>
</div>
<!-- FILTER | .s_parallax -->
<div data-selector=".parallax">
<we-colorpicker string="Filter"
data-select-style="true"
data-css-property="background-color"
@@ -351,8 +338,8 @@
<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"/>
<t t-call="website.snippet_options_shadow"/>
<t t-call="website.snippet_options_border_widgets"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<div data-js="sizing_y"
@@ -606,7 +593,11 @@
data-drop-near=".o_mega_menu .nav-link"/>
<div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
<we-imagepicker string="Image" data-background="" data-name="cover_background_opt"/>
<t t-call="web_editor.snippet_options_background_selection_widgets">
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="with_color_combinations" t-value="True"/>
</t>
<we-select string="Size" data-cover-opt-name="size">
<we-button data-select-class="o_record_has_cover o_full_screen_height">Full Screen</we-button>
<we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover o_half_screen_height">Half Screen</we-button>
@@ -751,14 +742,22 @@
<we-button data-customize-website-views="" data-name="layout_full_opt">Full</we-button>
<we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
</we-select>
<we-row string="Background">
<we-colorpicker data-name="body_bg_color_opt" data-dependencies="!layout_full_opt" data-customize-website-color="" data-color="body"/>
<we-select data-name="body_bg_type_opt">
<we-button data-name="no_background_opt" data-customize-website-views="">None</we-button>
<we-button data-customize-website-views="website.option_custom_body_image">Image</we-button>
<we-button data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern">Pattern</we-button>
</we-select>
<we-imagepicker data-name="body_bg_image_opt" data-dependencies="!no_background_opt" data-customize-body-bg=""/>
<we-row string="Background" data-no-preview="true">
<we-colorpicker data-dependencies="!layout_full_opt"
data-customize-website-color=""
data-color="body"/>
<we-button-group>
<we-button title="Image"
data-customize-website-views="website.option_custom_body_image"
data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-camera"/></we-button>
<we-button title="Pattern"
data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern"
data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-th"/></we-button>
<we-button title="None"
data-customize-website-views=""><i class="fa fa-fw fa-ban"/></we-button>
</we-button-group>
<!-- Hidden imagepicker enabled by above button-group -->
<we-imagepicker data-name="body_bg_image_opt" data-customize-body-bg=""/>
</we-row>
<we-checkbox string="Show Header" data-customize-website-views="website.option_layout_hide_header|" data-reload="/"/>
<we-row string="Code Injection" title="Enter code that will be added into every page of your site">
addons/website_blog/static/src/js/tours/website_blog.js
+1 -1
View File
@@ -27,7 +27,7 @@ odoo.define("website_blog.tour", function (require) {
position: "top",
run: "text",
}, {
trigger: "we-button.o_we_edit_image",
trigger: "we-button:has(.fa-camera)",
extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
content: _t("Set a blog post <b>cover</b>."),
position: "right",
addons/website_blog/views/snippets/s_latest_posts.xml
+1 -1
View File
@@ -94,7 +94,7 @@
<!-- Options -->
<template id="s_latest_posts_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="before">
<xpath expr="//div[@data-js='parallax']" position="before">
<div data-js="js_get_posts_selectBlog" data-selector=".s_latest_posts" data-target=".js_get_posts" data-no-check="true">
<we-select string="Choose a blog" data-no-preview="true" name="blog_selection" data-attribute-name="filterByBlogId">
<we-button data-select-data-attribute="0">All blogs</we-button>
doc/howtos/themes.rst
+3 -3
View File
@@ -763,7 +763,7 @@ We start by adding a new file in our views folder - name it **options.xml** and
.. code-block:: xml
<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="after">
<xpath expr="//div[@data-js='parallax']" position="after">
<div data-selector=".snippet_testimonial"> <!-- Options group -->
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">Your Option</a>
@@ -862,7 +862,7 @@ the following code
.. code-block:: javascript
odoo.define(function (require) {
var options = require('web_editor.snippets.options');
var options = require('web_editor.snippets.options');
});
Great, we successfully created our javascript editor file. This file will contain all the javascript functions used by our snippets in edit mode. Let’s create a new function for our testimonial snippet using the ``snippet_testimonial_options`` method that we created before.
@@ -870,7 +870,7 @@ Great, we successfully created our javascript editor file. This file will contai
.. code-block:: javascript
odoo.define(function (require) {
var options = require('web_editor.snippets.options');
var options = require('web_editor.snippets.options');
options.registry.snippet_testimonial_options = options.Class.extend({
onFocus: function () {
alert("On focus!")