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

[FIX] website, *: restore cc edition widgets and other qweb rendering

Browse Source 
*: web, website_sale_stock

Since [1], the widgets allowing to edit the different colors of a color
combinations are gone, except the first one. This is because the qweb
rendering calls have been modified to use the new `renderToElement` util
which silently ignores root nodes if there are multiple ones in the
rendered template. In the same way, a specific dynamic snippet and a
stock feature were also broken.

After this commit, those three features will be restored. A crash will
now also occurs in case `renderToElement` is called to render a template
with multiple root nodes (that is actually how the two last broken
features were found, breaking during existing tests). For the first
feature, a specific test has been made too.

[1]: https://github.com/odoo/odoo/commit/6303a3eacdca012649a2ffda627b65c17a7217f1

closes odoo/odoo#133068

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
qsm-odoo
2023-08-30 13:10:21 +00:00
parent 814b26261e
commit 2cff7e4094
5 changed files with 75 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/utils/render.js
+7
View File
@@ -4,6 +4,13 @@ import { blockDom, markup } from "@odoo/owl";
export function renderToElement(template, context = {}) {
const el = render(template, context).firstElementChild;
if (el?.nextElementSibling) {
throw new Error(
`The rendered template '${template}' contains multiple root ` +
`nodes that will be ignored using renderToElement, you should ` +
`consider using renderToFragment or refactoring the template.`
);
}
el?.remove();
return el;
}
addons/website/static/src/js/editor/snippets.options.js
+2 -5
View File
@@ -19,7 +19,7 @@ import {
convertRgbToHsl,
convertHslToRgb,
} from '@web/core/utils/colors';
import { renderToElement } from "@web/core/utils/render";
import { renderToElement, renderToFragment } from "@web/core/utils/render";
const InputUserValueWidget = options.userValueWidgetsRegistry['we-input'];
const SelectUserValueWidget = options.userValueWidgetsRegistry['we-select'];
@@ -1676,10 +1676,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
const ccPreviewEl = $(renderToElement('web_editor.color.combination.preview.legacy'))[0];
ccPreviewEl.classList.add('text-center', `o_cc${i}`, 'o_colored_level', 'o_we_collapse_toggler');
collapseEl.appendChild(ccPreviewEl);
const editionEls = $(renderToElement('website.color_combination_edition', {number: i}));
for (const el of editionEls) {
collapseEl.appendChild(el);
}
collapseEl.appendChild(renderToFragment('website.color_combination_edition', {number: i}));
ccPreviewEls.push(ccPreviewEl);
presetCollapseEl.appendChild(collapseEl);
}
addons/website/static/src/snippets/s_dynamic_snippet/000.js
+2 -2
View File
@@ -3,7 +3,7 @@
import publicWidget from "@web/legacy/js/public/public_widget";
import { Markup } from "@web/legacy/js/core/utils";
import { uniqueId } from "@web/core/utils/functions";
import { renderToElement } from "@web/core/utils/render";
import { renderToString } from "@web/core/utils/render";
import { listenSizeChange, utils as uiUtils } from "@web/core/ui/ui_service";
const DEFAULT_NUMBER_OF_ELEMENTS = 4;
const DEFAULT_NUMBER_OF_ELEMENTS_SM = 1;
@@ -136,7 +136,7 @@ const DynamicSnippet = publicWidget.Widget.extend({
* @private
*/
_prepareContent: function () {
this.renderedContent = renderToElement(
this.renderedContent = renderToString(
this.template_key,
this._getQWebRenderOptions()
);
addons/website/static/tests/tours/website_style_edition.js
+62 -3
View File
@@ -1,22 +1,39 @@
/** @odoo-module **/
import weUtils from "@web_editor/js/common/utils";
import wTourUtils from "@website/js/tours/tour_utils";
const TARGET_FONT_SIZE = 30;
const TARGET_BODY_BG_COLOR = '#00FF00';
const TARGET_BODY_BG_COLOR_V2 = 'rgb(0, 255, 0)';
const TARGET_BODY_COLOR = '#FF00FF';
const TARGET_BODY_COLOR_V2 = 'rgb(255, 0, 255)';
const checkFontSize = function () {
const style = document.defaultView.getComputedStyle(this.$anchor[0]);
if (style.fontSize !== `${TARGET_FONT_SIZE}px`) {
if (!weUtils.areCssValuesEqual(style.fontSize, `${TARGET_FONT_SIZE}px`, 'font-size', this.$anchor)) {
console.error(`Expected the font-size to be equal to ${TARGET_FONT_SIZE}px but found ${style.fontSize} instead`);
}
};
const checkBodyBgColor = function () {
const style = document.defaultView.getComputedStyle(this.$anchor[0]);
if (!weUtils.areCssValuesEqual(style.backgroundColor, `${TARGET_BODY_BG_COLOR}`, 'background-color', this.$anchor)) {
console.error(`Expected the background color to be equal to ${TARGET_BODY_BG_COLOR} but found ${style.backgroundColor} instead`);
}
};
const checkBodyColor = function () {
const style = document.defaultView.getComputedStyle(this.$anchor[0]);
if (!weUtils.areCssValuesEqual(style.color, `${TARGET_BODY_COLOR}`, 'color', this.$anchor)) {
console.error(`Expected the color to be equal to ${TARGET_BODY_COLOR} but found ${style.color} instead`);
}
};
wTourUtils.registerWebsitePreviewTour("website_style_edition", {
test: true,
url: '/',
edition: true,
}, () => [
wTourUtils.goToTheme(),
wTourUtils.goToTheme(),
{
content: "Change font size",
trigger: '[data-variable="font-size-base"] input',
@@ -28,12 +45,54 @@ wTourUtils.registerWebsitePreviewTour("website_style_edition", {
// a #t=... at the end then removes the old one.
extra_trigger: 'iframe html:not(:has(link[href$="web.assets_frontend.min.css"]))',
run: checkFontSize,
}, {
content: "Open the color combinations area",
trigger: '.o_we_theme_presets_collapse we-toggler',
}, {
content: "Open a color combination",
trigger: '.o_we_cc_preview_wrapper',
}, {
content: "Edit the background color of that color combination",
trigger: '.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(0)',
}, {
content: "Choose a color",
trigger: `.o_we_color_btn[style*="background-color:${TARGET_BODY_BG_COLOR}"]`,
}, {
content: "Check the body background color was properly adapted",
trigger: 'iframe body',
extra_trigger: `
.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(0) .o_we_color_preview[style*="${TARGET_BODY_BG_COLOR}"],
.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(0) .o_we_color_preview[style*="${TARGET_BODY_BG_COLOR_V2}"]
`,
run: checkBodyBgColor,
}, {
content: "Edit the text color of that color combination",
trigger: '.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(1)',
}, {
content: "Choose a color",
trigger: `.o_we_color_btn[style*="background-color:${TARGET_BODY_COLOR}"]`,
}, {
content: "Check the body color was properly adapted",
trigger: 'iframe body',
extra_trigger: `
.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(1) .o_we_color_preview[style*="${TARGET_BODY_COLOR}"],
.o_we_theme_presets_collapse we-collapse .o_we_so_color_palette:eq(1) .o_we_color_preview[style*="${TARGET_BODY_COLOR_V2}"]
`,
run: checkBodyColor,
},
...wTourUtils.clickOnSave(),
{
content: "Check the font size is still ok outside of edit mode",
trigger: 'iframe body:not(.editor_enable) #wrapwrap',
trigger: 'iframe body #wrapwrap',
run: checkFontSize,
}, {
content: "Check the body background color is still ok outside of edit mode",
trigger: 'iframe body',
run: checkBodyBgColor,
}, {
content: "Check the body color is still ok outside of edit mode",
trigger: 'iframe body',
run: checkBodyColor,
},
...wTourUtils.clickOnEditAndWaitEditMode(),
wTourUtils.goToTheme(),
addons/website_sale_stock/static/src/js/variant_mixin.js
+2 -3
View File
@@ -3,7 +3,7 @@
import { Markup } from "@web/legacy/js/core/utils";
import VariantMixin from "@website_sale/js/sale_variant_mixin";
import publicWidget from "@web/legacy/js/public/public_widget";
import { renderToElement } from "@web/core/utils/render";
import { renderToFragment } from "@web/core/utils/render";
import "@website_sale/js/website_sale";
@@ -65,11 +65,10 @@ VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) {
.remove();
combination.has_out_of_stock_message = $(combination.out_of_stock_message).text() !== '';
combination.out_of_stock_message = Markup(combination.out_of_stock_message);
const $message = $(renderToElement(
$('div.availability_messages').append(renderToFragment(
'website_sale_stock.product_availability',
combination
));
$('div.availability_messages').html($message);
};
publicWidget.registry.WebsiteSale.include({