Skip to content

Commit 02f8074

Browse files
loco-odooloco-odoo
committed
Update selectors
1 parent bb59689 commit 02f8074

19 files changed

+287
-126
lines changed

‎addons/html_builder/static/src/website_builder/plugins/background_option.js

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class WebsiteBackgroundOption extends BackgroundOption {
2020
withVideos: { type: Boolean, optional: true },
2121
};
2222
static defaultProps = {
23+
...super.defaultProps,
2324
withVideos: false,
2425
};
2526
setup() {

‎addons/html_builder/static/src/website_builder/plugins/background_option_plugin.js

-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Plugin } from "@html_editor/plugin";
22
import { registry } from "@web/core/registry";
3-
import { WebsiteBackgroundOption } from "./background_option";
43
import { withSequence } from "@html_editor/utils/resource";
54

65
function getBgVideoOrParallax(editingElement) {
@@ -31,21 +30,6 @@ class WebsiteBackgroundVideoPlugin extends Plugin {
3130
static id = "websiteBackgroundVideoPlugin";
3231
static dependencies = ["media"];
3332
resources = {
34-
builder_options: [
35-
// TODO: add the other options that need WebsiteBackgroundOption
36-
{
37-
selector: "section",
38-
OptionComponent: WebsiteBackgroundOption,
39-
props: {
40-
withColors: true,
41-
withImages: true,
42-
withVideos: true,
43-
withShapes: true,
44-
withGradient: true,
45-
withColorCombinations: true,
46-
},
47-
},
48-
],
4933
builder_actions: this.getActions(),
5034
};
5135
getActions() {

‎addons/html_builder/static/src/website_builder/plugins/blockquote_option.xml

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
33

4-
<t t-name="html_builder.BlockquoteOption">
5-
<!-- TODO -->
6-
<!-- Color and images -->
7-
<!-- <t t-call="website.snippet_options_background_options">
8-
<t t-set="selector" t-value="'.s_blockquote'"/>
9-
<t t-set="with_colors" t-value="True"/>
10-
<t t-set="with_images" t-value="True"/>
11-
<t t-set="with_shapes" t-value="True"/>
12-
<t t-set="with_gradients" t-value="True"/>
13-
<t t-set="with_color_combinations" t-value="True"/>
14-
</t> -->
15-
4+
<t t-name="website.BlockquoteOption">
165
<!-- Layout -->
176
<BuilderRow label.translate="Edge Spacing">
187
<BuilderRange action="'setClassRange'" actionParam="['p-1','p-2','p-3','p-4','p-5']" max="4"/>

‎addons/html_builder/static/src/website_builder/plugins/blockquote_option_plugin.js

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
import { Plugin } from "@html_editor/plugin";
22
import { registry } from "@web/core/registry";
33
import { withSequence } from "@html_editor/utils/resource";
4+
import { WebsiteBackgroundOption } from "@html_builder/website_builder/plugins/background_option";
45

56
class BlockquoteOptionPlugin extends Plugin {
67
static id = "blockquoteOption";
78
resources = {
89
builder_options: [
9-
withSequence(10, {
10-
template: "html_builder.BlockquoteOption",
10+
withSequence(30, {
11+
selector: ".s_blockquote",
12+
OptionComponent: WebsiteBackgroundOption,
13+
props: {
14+
withColors: true,
15+
withImages: true,
16+
withShapes: true,
17+
withGradient: true,
18+
withColorCombinations: true,
19+
},
20+
}),
21+
withSequence(40, {
22+
template: "website.BlockquoteOption",
1123
selector: ".s_blockquote",
1224
}),
1325
],
1426
};
1527
}
16-
28+
// TODO: as in master, the position of a background image does not work
29+
// correctly.
1730
registry.category("website-plugins").add(BlockquoteOptionPlugin.id, BlockquoteOptionPlugin);

‎addons/html_builder/static/src/website_builder/plugins/border_option_plugin.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { card_parent_handlers } from "@html_builder/website_builder/plugins/card_option/card_width_option_plugin";
1+
import { CARD_PARENT_HANDLERS } from "@html_builder/website_builder/plugins/website_option_plugin";
22
import { Plugin } from "@html_editor/plugin";
33
import { registry } from "@web/core/registry";
44

@@ -9,7 +9,7 @@ class BorderOptionPlugin extends Plugin {
99
{
1010
template: "html_builder.BorderOption",
1111
selector: "section .row > div",
12-
exclude: `.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize, .s_text_cover .row > .o_not_editable, ${card_parent_handlers}`,
12+
exclude: `.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize, .s_text_cover .row > .o_not_editable, ${CARD_PARENT_HANDLERS}`,
1313
},
1414
],
1515
};

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_image_option_plugin.js

-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { classAction } from "@html_builder/core/plugins/core_builder_action_plugin";
22
import { Plugin } from "@html_editor/plugin";
3-
import { withSequence } from "@html_editor/utils/resource";
43
import { registry } from "@web/core/registry";
54
import { renderToElement } from "@web/core/utils/render";
6-
import { CardImageOption } from "./card_image_option";
75

86
const ratiosOnlySupportedForTopImage = [
97
"ratio ratio-4x3",
@@ -27,13 +25,6 @@ class CardImageOptionPlugin extends Plugin {
2725
static id = "cardImageOption";
2826
static dependencies = ["remove"];
2927
resources = {
30-
builder_options: [
31-
withSequence(30, {
32-
OptionComponent: CardImageOption,
33-
selector: ".s_card",
34-
exclude: ".s_carousel_cards_card",
35-
}),
36-
],
3728
builder_actions: {
3829
setCoverImagePosition: {
3930
apply: ({ editingElement, param: { mainParam: className } }) => {

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_option.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { defaultBuilderComponents } from "@html_builder/core/default_builder_components";
2+
import { Component } from "@odoo/owl";
3+
import { CardImageOption } from "./card_image_option";
4+
import { WebsiteBackgroundOption } from "@html_builder/website_builder/plugins/background_option";
5+
import { useGetItemValue } from "@html_builder/core/building_blocks/utils";
6+
7+
export class CardOption extends Component {
8+
static template = "website.CardOption";
9+
static components = { ...defaultBuilderComponents, CardImageOption, WebsiteBackgroundOption };
10+
static props = {
11+
disableWidth: { type: Boolean, optional: true },
12+
};
13+
static defaultProps = {
14+
disableWidth: false,
15+
};
16+
setup() {
17+
this.getItemValue = useGetItemValue();
18+
}
19+
}

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_option.xml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="website.CardOption">
5+
<WebsiteBackgroundOption
6+
withColors="true"
7+
withImages="true"
8+
withShapes="true"
9+
withColorCombinations="true"
10+
withGradient="true"
11+
/>
12+
<!-- TODO: BOX-->
13+
<t t-if="!this.props.disableWidth" t-call="website.CardWidthOption"/>
14+
<CardImageOption/>
15+
</t>
16+
</templates>

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_option_plugin.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Plugin } from "@html_editor/plugin";
2+
import { registry } from "@web/core/registry";
3+
import { CardOption } from "./card_option";
4+
import { CARD_PARENT_HANDLERS } from "@html_builder/website_builder/plugins/website_option_plugin";
5+
6+
class CardOptionPlugin extends Plugin {
7+
static id = "cardOption";
8+
resources = {
9+
builder_options: [
10+
{
11+
OptionComponent: CardOption,
12+
selector: ".s_card",
13+
exclude: `div:is(${CARD_PARENT_HANDLERS}) > .s_card`,
14+
},
15+
{
16+
OptionComponent: CardOption,
17+
selector: CARD_PARENT_HANDLERS,
18+
applyTo: ":scope > .s_card:not(.s_carousel_cards_card)",
19+
props: {
20+
disableWidth: true,
21+
},
22+
},
23+
],
24+
};
25+
}
26+
27+
registry.category("website-plugins").add(CardOptionPlugin.id, CardOptionPlugin);

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_width_option.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
33

4-
<t t-name="html_builder.CardWidthOption">
4+
<t t-name="website.CardWidthOption">
55
<BuilderRow label.translate="Card Width">
66
<BuilderRange
77
id="'card_width'"

‎addons/html_builder/static/src/website_builder/plugins/card_option/card_width_option_plugin.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
11
import { classAction } from "@html_builder/core/plugins/core_builder_action_plugin";
22
import { Plugin } from "@html_editor/plugin";
3-
import { withSequence } from "@html_editor/utils/resource";
43
import { registry } from "@web/core/registry";
54

6-
export const card_parent_handlers =
7-
".s_three_columns .row > div, .s_comparisons .row > div, .s_cards_grid .row > div, .s_cards_soft .row > div, .s_product_list .row > div, .s_newsletter_centered .row > div, .s_company_team_spotlight .row > div, .s_comparisons_horizontal .row > div, .s_company_team_grid .row > div, .s_company_team_card .row > div, .s_carousel_cards_item";
8-
95
class CardWidthOptionPlugin extends Plugin {
10-
static id = "cardOption";
6+
static id = "cardWidthOption";
117
static dependencies = ["builderActions"];
128
resources = {
13-
builder_options: [
14-
withSequence(20, {
15-
template: "html_builder.CardWidthOption",
16-
selector: ".s_card",
17-
exclude: `div:is(${card_parent_handlers}) > .s_card`,
18-
}),
19-
],
209
builder_actions: {
2110
p: this,
2211
get setCardWidth() {

‎addons/html_builder/static/src/website_builder/plugins/carousel_cards_option_plugin.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Plugin } from "@html_editor/plugin";
2+
import { registry } from "@web/core/registry";
3+
import { WebsiteBackgroundOption } from "./background_option";
4+
import { CARD_PARENT_HANDLERS } from "@html_builder/website_builder/plugins/website_option_plugin";
5+
6+
class CarouselCardsOptionPlugin extends Plugin {
7+
static id = "carouselCardsOption";
8+
resources = {
9+
builder_options: [
10+
{
11+
OptionComponent: WebsiteBackgroundOption,
12+
selector: CARD_PARENT_HANDLERS,
13+
applyTo: ":scope > .s_carousel_cards_card",
14+
props: {
15+
withColors: true,
16+
withImages: true,
17+
withShapes: true,
18+
withColorCombinations: true,
19+
withGradient: true,
20+
},
21+
},
22+
],
23+
};
24+
}
25+
26+
registry.category("website-plugins").add(CarouselCardsOptionPlugin.id, CarouselCardsOptionPlugin);

‎addons/html_builder/static/src/website_builder/plugins/media_list_item_option.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useIsActiveItem } from "@html_builder/core/building_blocks/utils";
2+
import { defaultBuilderComponents } from "@html_builder/core/default_builder_components";
3+
import { BorderConfigurator } from "@html_builder/plugins/border_configurator_option";
4+
import { ShadowOption } from "@html_builder/plugins/shadow_option";
5+
import { WebsiteBackgroundOption } from "@html_builder/website_builder/plugins/background_option";
6+
import { Component } from "@odoo/owl";
7+
8+
// TODO: BorderConfigurator and ShadowOption directly in defaultBuilderComponents ?
9+
export class MediaListItemOption extends Component {
10+
static template = "website.MediaListItemOption";
11+
static components = {
12+
...defaultBuilderComponents,
13+
BorderConfigurator,
14+
ShadowOption,
15+
WebsiteBackgroundOption,
16+
};
17+
static props = {};
18+
19+
setup() {
20+
this.isActiveItem = useIsActiveItem();
21+
}
22+
}

‎addons/html_builder/static/src/website_builder/plugins/media_list_item_option.xml

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="website.MediaListItemOption">
5+
<BuilderContext applyTo="':scope > .row'">
6+
<WebsiteBackgroundOption
7+
withColors="true"
8+
withImages="false"
9+
withColorCombinations="true"
10+
withGradient="true"
11+
/>
12+
</BuilderContext>
13+
14+
<BuilderContext applyTo="':scope > .row'">
15+
<BorderConfigurator label.translate="Border"/>
16+
<ShadowOption/>
17+
</BuilderContext>
18+
19+
<BuilderRow label.translate="Layout">
20+
<BuilderButtonGroup applyTo="':scope > .row'">
21+
<BuilderButton title.translate="Left" id="'media_left_opt'" classAction="''" iconImg="'/website/static/src/img/snippets_options/image_left.svg'"/>
22+
<BuilderButton title.translate="Right" classAction="'flex-row-reverse'" iconImg="'/website/static/src/img/snippets_options/image_right.svg'"/>
23+
</BuilderButtonGroup>
24+
</BuilderRow>
25+
<BuilderRow label.translate="Image Size">
26+
<BuilderButtonGroup t-if="this.isActiveItem('media_left_opt')">
27+
<BuilderButton action="'setMediaLayout'" actionValue="3" iconImg="'/website/static/src/img/snippets_options/media_layout_1_4.svg'" title.translate="1/4 - 3/4"/>
28+
<BuilderButton action="'setMediaLayout'" actionValue="4" iconImg="'/website/static/src/img/snippets_options/media_layout_1_3.svg'" title.translate="1/3 - 2/3"/>
29+
<BuilderButton action="'setMediaLayout'" actionValue="6" iconImg="'/website/static/src/img/snippets_options/media_layout_1_2.svg'" title.translate="1/2 - 1/2"/>
30+
</BuilderButtonGroup>
31+
<BuilderButtonGroup t-if="!this.isActiveItem('media_left_opt')">
32+
<BuilderButton action="'setMediaLayout'" actionValue="3" iconImg="'/website/static/src/img/snippets_options/media_layout_1_4_right.svg'" title.translate="1/4 - 3/4"/>
33+
<BuilderButton action="'setMediaLayout'" actionValue="4" iconImg="'/website/static/src/img/snippets_options/media_layout_1_3_right.svg'" title.translate="1/3 - 2/3"/>
34+
<BuilderButton action="'setMediaLayout'" actionValue="6" iconImg="'/website/static/src/img/snippets_options/media_layout_1_2_right.svg'" title.translate="1/2 - 1/2"/>
35+
</BuilderButtonGroup>
36+
</BuilderRow>
37+
38+
<BuilderRow label.translate="Text Position" applyTo="':scope > .row'">
39+
<!-- Don't use the standard Vert. Alignement option to not suggest
40+
Equal Height, which is useless for this snippet. -->
41+
<BuilderButtonGroup t-if="this.isActiveItem('media_left_opt')">
42+
<BuilderButton title.translate="Align Top" classAction="'align-items-start'" iconImg="'/website/static/src/img/snippets_options/align_top_right.svg'"/>
43+
<BuilderButton title.translate="Align Middle" classAction="'align-items-center'" iconImg="'/website/static/src/img/snippets_options/align_middle_right.svg'"/>
44+
<BuilderButton title.translate="Align Bottom" classAction="'align-items-end'" iconImg="'/website/static/src/img/snippets_options/align_bottom_right.svg'"/>
45+
</BuilderButtonGroup>
46+
<BuilderButtonGroup t-if="!this.isActiveItem('media_left_opt')">
47+
<BuilderButton title.translate="Align Top" classAction="'align-items-start'" iconImg="'/website/static/src/img/snippets_options/align_top.svg'"/>
48+
<BuilderButton title.translate="Align Middle" classAction="'align-items-center'" iconImg="'/website/static/src/img/snippets_options/align_middle.svg'"/>
49+
<BuilderButton title.translate="Align Bottom" classAction="'align-items-end'" iconImg="'/website/static/src/img/snippets_options/align_bottom.svg'"/>
50+
</BuilderButtonGroup>
51+
</BuilderRow>
52+
</t>
53+
54+
55+
56+
</templates>

0 commit comments

Comments
 (0)