diff --git a/addons/html_builder/static/src/plugins/background_option/background_hook.js b/addons/html_builder/static/src/plugins/background_option/background_hook.js
new file mode 100644
index 0000000000000..ca4c34b32b25a
--- /dev/null
+++ b/addons/html_builder/static/src/plugins/background_option/background_hook.js
@@ -0,0 +1,3 @@
+export function useBackgroundOption(isActiveItem) {
+ return { showColorFilter: () => isActiveItem("toggle_bg_image_id") };
+}
diff --git a/addons/html_builder/static/src/plugins/background_option/background_option.js b/addons/html_builder/static/src/plugins/background_option/background_option.js
index acd05d4626b58..15ce51e5a685f 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_option.js
+++ b/addons/html_builder/static/src/plugins/background_option/background_option.js
@@ -2,6 +2,7 @@ import { BaseOptionComponent } from "@html_builder/core/utils";
import { BackgroundImageOption } from "./background_image_option";
import { BackgroundPositionOption } from "./background_position_option";
import { BackgroundShapeOption } from "./background_shape_option";
+import { useBackgroundOption } from "./background_hook";
export class BackgroundOption extends BaseOptionComponent {
static template = "html_builder.BackgroundOption";
@@ -13,14 +14,15 @@ export class BackgroundOption extends BaseOptionComponent {
static props = {
withColors: { type: Boolean },
withImages: { type: Boolean },
- withColorCombinations: { type: Boolean },
withShapes: { type: Boolean, optional: true },
};
static defaultProps = {
withShapes: false,
};
- showColorFilter() {
- return this.isActiveItem("toggle_bg_image_id");
+ setup() {
+ super.setup();
+ const { showColorFilter } = useBackgroundOption(this.isActiveItem);
+ this.showColorFilter = showColorFilter;
}
}
diff --git a/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js b/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js
index 8838f58ddea81..b514ba71107aa 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js
+++ b/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js
@@ -1,8 +1,6 @@
import { applyFunDependOnSelectorAndExclude } from "@html_builder/plugins/utils";
-import { getSelectorParams } from "@html_builder/utils/utils";
import { Plugin } from "@html_editor/plugin";
import { registry } from "@web/core/registry";
-import { BackgroundOption } from "./background_option";
class BackgroundOptionPlugin extends Plugin {
static id = "backgroundOption";
@@ -10,18 +8,13 @@ class BackgroundOptionPlugin extends Plugin {
normalize_handlers: this.normalize.bind(this),
system_classes: ["o_colored_level"],
};
- setup() {
- this.coloredLevelBackgroundParams = getSelectorParams(
- this.getResource("builder_options"),
- BackgroundOption
- );
- }
normalize(root) {
- for (const coloredLevelBackgroundParam of this.coloredLevelBackgroundParams) {
+ const markColorLevelSelectorParams = this.getResource("mark_color_level_selector_params");
+ for (const markColorLevelSelectorParam of markColorLevelSelectorParams) {
applyFunDependOnSelectorAndExclude(
this.markColorLevel,
root,
- coloredLevelBackgroundParam
+ markColorLevelSelectorParam
);
}
}
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/background_option.js b/addons/html_builder/static/src/website_builder/plugins/options/background_option.js
index 3839dac8591b4..f8760b25f9aa2 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/background_option.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/background_option.js
@@ -1,33 +1,28 @@
-import { useDomState } from "@html_builder/core/utils";
-import { BackgroundImageOption } from "@html_builder/plugins/background_option/background_image_option";
+import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
import { BackgroundOption } from "@html_builder/plugins/background_option/background_option";
-import { BackgroundPositionOption } from "@html_builder/plugins/background_option/background_position_option";
-import { BackgroundShapeOption } from "@html_builder/plugins/background_option/background_shape_option";
import { ParallaxOption } from "../parallax_option";
+import { useBackgroundOption } from "@html_builder/plugins/background_option/background_hook";
-export class WebsiteBackgroundOption extends BackgroundOption {
+export class WebsiteBackgroundOption extends BaseOptionComponent {
static template = "website.WebsiteBackgroundOption";
static components = {
- BackgroundImageOption,
- BackgroundPositionOption,
- BackgroundShapeOption,
+ ...BackgroundOption.components,
ParallaxOption,
};
static props = {
- ...super.props,
+ ...BackgroundOption.props,
withVideos: { type: Boolean, optional: true },
};
static defaultProps = {
- ...super.defaultProps,
+ ...BackgroundOption.defaultProps,
withVideos: false,
};
setup() {
super.setup();
+ const { showColorFilter } = useBackgroundOption(this.isActiveItem);
+ this.showColorFilter = () => showColorFilter() || this.isActiveItem("toggle_bg_video_id");
this.websiteBgOptionDomState = useDomState((el) => ({
applyTo: el.querySelector(".s_parallax_bg") ? ".s_parallax_bg" : "",
}));
}
- showColorFilter() {
- return super.showColorFilter() || this.isActiveItem("toggle_bg_video_id");
- }
}
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js
index 095a2827b6be2..32a5b54595fbc 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js
@@ -5,21 +5,22 @@ import { WebsiteBackgroundOption } from "@html_builder/website_builder/plugins/o
class BlockquoteOptionPlugin extends Plugin {
static id = "blockquoteOption";
+ selector = ".s_blockquote";
resources = {
+ mark_color_level_selector_params: [{ selector: this.selector }],
builder_options: [
withSequence(30, {
- selector: ".s_blockquote",
+ selector: this.selector,
OptionComponent: WebsiteBackgroundOption,
props: {
withColors: true,
withImages: true,
withShapes: true,
- withColorCombinations: true,
},
}),
withSequence(40, {
template: "website.BlockquoteOption",
- selector: ".s_blockquote",
+ selector: this.selector,
}),
],
};
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/card_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/card_option.xml
index 4332aa361e8aa..679fc0660eb56 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/card_option.xml
+++ b/addons/html_builder/static/src/website_builder/plugins/options/card_option.xml
@@ -6,7 +6,6 @@
withColors="true"
withImages="true"
withShapes="true"
- withColorCombinations="true"
/>
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/card_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/card_option_plugin.js
index c5c6993da13eb..50a9bd68b966a 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/card_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/card_option_plugin.js
@@ -6,17 +6,21 @@ import { WebsiteBackgroundOption } from "./background_option";
class CardOptionPlugin extends Plugin {
static id = "cardOption";
+ cardSelector = ".s_card";
+ cardExclude = `div:is(${CARD_PARENT_HANDLERS}) > .s_card`;
+ cardDisableWidthApplyTo = ":scope > .s_card:not(.s_carousel_cards_card)";
+ websiteBgApplyTo = ":scope > .s_carousel_cards_card";
resources = {
builder_options: [
{
OptionComponent: CardOption,
- selector: ".s_card",
- exclude: `div:is(${CARD_PARENT_HANDLERS}) > .s_card`,
+ selector: this.cardSelector,
+ exclude: this.cardExclude,
},
{
OptionComponent: CardOption,
selector: CARD_PARENT_HANDLERS,
- applyTo: ":scope > .s_card:not(.s_carousel_cards_card)",
+ applyTo: this.cardDisableWidthApplyTo,
props: {
disableWidth: true,
},
@@ -24,15 +28,19 @@ class CardOptionPlugin extends Plugin {
{
OptionComponent: WebsiteBackgroundOption,
selector: CARD_PARENT_HANDLERS,
- applyTo: ":scope > .s_carousel_cards_card",
+ applyTo: this.websiteBgApplyTo,
props: {
withColors: true,
withImages: true,
withShapes: true,
- withColorCombinations: true,
},
},
],
+ mark_color_level_selector_params: [
+ { selector: this.cardSelector, exclude: this.cardExclude },
+ { selector: CARD_PARENT_HANDLERS, applyTo: this.cardDisableWidthApplyTo },
+ { selector: CARD_PARENT_HANDLERS, applyTo: this.websiteBgApplyTo },
+ ],
};
}
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.xml
index 5154522e08aec..377c982581ca2 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.xml
+++ b/addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.xml
@@ -6,7 +6,6 @@
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js
index 5a891e6989966..ed939135548fe 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js
@@ -5,6 +5,7 @@ import { MediaListItemOption } from "./media_list_item_option";
class MediaListOptionPlugin extends Plugin {
static id = "mediaListOption";
+ mediaListItemOptionSelector = ".s_media_list_item";
resources = {
builder_options: [
withSequence(5, {
@@ -13,10 +14,13 @@ class MediaListOptionPlugin extends Plugin {
}),
withSequence(20, {
OptionComponent: MediaListItemOption,
- selector: ".s_media_list_item",
+ selector: this.mediaListItemOptionSelector,
}),
],
builder_actions: this.getActions(),
+ mark_color_level_selector_params: [
+ { selector: this.mediaListItemOptionSelector, applyTo: ":scope > .row" },
+ ],
};
getActions() {
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/process_steps_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/process_steps_option_plugin.js
index 140ff2447a8c3..de33ab1531f58 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/process_steps_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/process_steps_option_plugin.js
@@ -20,7 +20,6 @@ class ProcessStepsOptionPlugin extends Plugin {
props: {
withColors: true,
withImages: false,
- withColorCombinations: false,
},
},
],
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/website_background_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/website_background_option_plugin.js
index 5f89a2a4d4d53..61ec048410679 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/website_background_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/website_background_option_plugin.js
@@ -12,18 +12,19 @@ import {
class WebsiteBackgroundOptionPlugin extends Plugin {
static id = "websiteOption";
+ sectionSelector = "section";
+ carouselApplyTo = ":scope > .carousel:not(.s_carousel_cards)";
resources = {
builder_options: [
{
OptionComponent: WebsiteBackgroundOption,
- selector: "section",
- applyTo: ":scope > .carousel:not(.s_carousel_cards)",
+ selector: this.sectionSelector,
+ applyTo: this.carouselApplyTo,
props: {
withColors: true,
withImages: true,
withVideos: true,
withShapes: true,
- withColorCombinations: true,
},
},
{
@@ -35,7 +36,6 @@ class WebsiteBackgroundOptionPlugin extends Plugin {
withImages: true,
withVideos: true,
withShapes: true,
- withColorCombinations: true,
},
},
{
@@ -45,7 +45,6 @@ class WebsiteBackgroundOptionPlugin extends Plugin {
props: {
withColors: true,
withImages: false,
- withColorCombinations: true,
},
},
{
@@ -60,6 +59,11 @@ class WebsiteBackgroundOptionPlugin extends Plugin {
},
},
],
+ mark_color_level_selector_params: [
+ { selector: this.sectionSelector, applyTo: this.carouselApplyTo },
+ { selector: BOTH_BG_COLOR_IMAGE_SELECTOR, exclude: BOTH_BG_COLOR_IMAGE_EXCLUDE },
+ { selector: ONLY_BG_COLOR_SELECTOR, exclude: ONLY_BG_COLOR_EXCLUDE },
+ ],
};
}
diff --git a/addons/html_builder/static/src/website_builder/plugins/parallax_option.js b/addons/html_builder/static/src/website_builder/plugins/parallax_option.js
index 284fa50085e0f..bfe9c2567a0fb 100644
--- a/addons/html_builder/static/src/website_builder/plugins/parallax_option.js
+++ b/addons/html_builder/static/src/website_builder/plugins/parallax_option.js
@@ -1,6 +1,6 @@
-import { BackgroundOption } from "@html_builder/plugins/background_option/background_option";
+import { BaseOptionComponent } from "@html_builder/core/utils";
-export class ParallaxOption extends BackgroundOption {
+export class ParallaxOption extends BaseOptionComponent {
static template = "website.ParallaxOption";
static props = {};
}
diff --git a/addons/html_builder/static/tests/website_builder/background_option.test.js b/addons/html_builder/static/tests/website_builder/background_option.test.js
index 9ee6f7ac4f51d..923e406ea2241 100644
--- a/addons/html_builder/static/tests/website_builder/background_option.test.js
+++ b/addons/html_builder/static/tests/website_builder/background_option.test.js
@@ -25,7 +25,6 @@ test("change the background shape of elements", async () => {
withImages: true,
// todo: handle with_videos
withShapes: true,
- withColorCombinations: false,
},
});
await setupWebsiteBuilder(`