REF toolbox

addons/html_builder/static/src/builder/components/Button.js

@@ -1,5 +1,4 @@
 import { Component } from "@odoo/owl";
-import { useDomState } from "../builder_helpers";
 
 export class Button extends Component {
     static template = "html_builder.Button";
@@ -9,12 +8,6 @@ export class Button extends Component {
         iconImg: { type: String, optional: true },
         iconImgAlt: { type: String, optional: true },
         onClick: Function,
-        isActive: { Function, optional: true },
+        isActive: { Boolean, optional: true },
     };
-
-    setup() {
-        this.state = useDomState(() => ({
-            isActive: this.props.isActive?.(),
-        }));
-    }
 }

addons/html_builder/static/src/builder/components/Button.xml

@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.Button">
     <button type="button" class="btn btn-primary"
-        t-att-class="{'active': this.state.isActive}"
+        t-att-class="{'active': this.props.isActive}"
         t-att-title="props.title"
         t-on-click="() => props.onClick()">
         <img t-if="props.iconImg" t-att-src="props.iconImg" t-att-alt="props.iconImgAlt"/>

addons/html_builder/static/src/builder/components/ElementToolboxContainer.js → addons/html_builder/static/src/builder/components/OptionsContainer.js

@@ -1,7 +1,7 @@
 import { Component } from "@odoo/owl";
 
-export class ElementToolboxContainer extends Component {
-    static template = "html_builder.ElementToolboxContainer";
+export class OptionsContainer extends Component {
+    static template = "html_builder.OptionsContainer";
     static props = {
         title: String,
         slots: { type: Object, optional: true },

addons/html_builder/static/src/builder/components/ElementToolboxContainer.xml → addons/html_builder/static/src/builder/components/OptionsContainer.xml

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="html_builder.ElementToolboxContainer">
-    <div class="element-toolbox">
+<t t-name="html_builder.OptionsContainer">
+    <div class="options-container">
         <div class="we-bg-darker p-1">
             <t t-out="props.title"/>
         </div>
-        <div class="we-bg-toolbox">
+        <div class="we-bg-options-container">
             <t t-slot="default"/>
         </div>
     </div>

addons/html_builder/static/src/builder/components/ToolboxRow.js → addons/html_builder/static/src/builder/components/WeRow.js

@@ -1,7 +1,7 @@
 import { Component } from "@odoo/owl";
 
-export class ToolboxRow extends Component {
-    static template = "html_builder.ToolboxRow";
+export class WeRow extends Component {
+    static template = "html_builder.WeRow";
     static props = {
         label: String,
         slots: { type: Object, optional: true },

addons/html_builder/static/src/builder/components/ToolboxRow.xml → addons/html_builder/static/src/builder/components/WeRow.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="html_builder.ToolboxRow">
+<t t-name="html_builder.WeRow">
     <div class="d-flex p-1 px-2">
         <div class="d-flex" style="flex-grow: 0.4; flex-basis: 0; min-width: 0;">
             <span class="text-nowrap text-truncate" t-out="props.label"/>

addons/html_builder/static/src/builder/components/defaultComponents.js

@@ -1,15 +1,15 @@
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { WeButtonGroup } from "./WeButtonGroup";
 import { Dropdown } from "@web/core/dropdown/dropdown";
-import { ToolboxRow } from "./ToolboxRow";
+import { WeRow } from "./WeRow";
 import { WeButton } from "./WeButton";
 import { Button } from "./Button";
 import { WeNumberInput } from "./WeNumberInput";
 import { WeSelect } from "./WeSelect";
 import { WeSelectItem } from "./WeSelectItem";
 
 export const defaultOptionComponents = {
-    ToolboxRow,
+    WeRow,
     Dropdown,
     DropdownItem,
     WeButtonGroup,

addons/html_builder/static/src/builder/components/options/AddElementOption.js → addons/html_builder/static/src/builder/options/add_element_option.js

@@ -1,5 +1,5 @@
 import { Component } from "@odoo/owl";
-import { defaultOptionComponents } from "../defaultComponents";
+import { defaultOptionComponents } from "../components/defaultComponents";
 
 export class AddElementOption extends Component {
     static template = "html_builder.AddElementOption";

addons/html_builder/static/src/builder/components/options/AddElementOption.xml → addons/html_builder/static/src/builder/options/add_element_option.xml

@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.AddElementOption">
-    <ToolboxRow label="'└ Add element'">
+    <WeRow label="'└ Add element'">
         <WeButtonGroup>
             <Button label="'Text'" onClick="this.addText"/>
             <Button label="'Image'" onClick="this.addImage"/>
             <Button label="'Button'" onClick="this.addButton"/>
         </WeButtonGroup>
-    </ToolboxRow>
+    </WeRow>
 </t>
 
 </templates>

addons/html_builder/static/src/builder/options/border_option.js

@@ -0,0 +1,15 @@
+import { Component } from "@odoo/owl";
+import { defaultOptionComponents } from "../components/defaultComponents";
+import { registry } from "@web/core/registry";
+
+export class BorderOption extends Component {
+    static template = "html_builder.BorderOption";
+    static components = {
+        ...defaultOptionComponents,
+    };
+}
+
+registry.category("sidebar-element-option").add("BorderOption", {
+    OptionComponent: BorderOption,
+    selector: "section .row > div", // TODO to use the correct selector
+});

addons/html_builder/static/src/builder/components/options/BorderOption.xml → addons/html_builder/static/src/builder/options/border_option.xml

@@ -2,9 +2,9 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BorderOption">
-    <ToolboxRow label.translate="Border">
+    <WeRow label.translate="Border">
         <WeNumberInput styleAction="'borderWidth'" unit="'px'" />
-    </ToolboxRow>
+    </WeRow>
 </t>
 
 </templates>

addons/html_builder/static/src/builder/components/options/LayoutOption.js → addons/html_builder/static/src/builder/options/layout_option.js

@@ -1,33 +1,26 @@
-import { Component, useState } from "@odoo/owl";
-import { defaultOptionComponents } from "../defaultComponents";
+import { Component } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { defaultOptionComponents } from "../components/defaultComponents";
+import { useDomState } from "../builder_helpers";
+import { SpacingOption } from "./spacing_option";
+import { AddElementOption } from "./add_element_option";
+
+// TODO to import in html_builder
 import {
     _convertToNormalColumn,
     _reloadLazyImages,
     _toggleGridMode,
 } from "@web_editor/js/common/grid_layout_utils";
-import { AddElementOption } from "./AddElementOption";
-import { SpacingOption } from "./SpacingOption";
 
 export class LayoutOption extends Component {
     static template = "html_builder.LayoutOption";
-    static components = {
-        ...defaultOptionComponents,
-        AddElementOption,
-        SpacingOption,
-    };
+    static components = { ...defaultOptionComponents, SpacingOption, AddElementOption };
+
     setup() {
-        this.state = useState(this.setState({}));
-        this.env.editorBus.addEventListener("STEP_ADDED", () => {
-            this.setState(this.state);
-        });
-    }
-    setState(object) {
-        Object.assign(object, {
+        this.state = useDomState(() => ({
             elementLayout: this.isGrid() ? "grid" : "column",
             columnCount: this.getRow()?.children.length,
-        });
-
-        return object;
+        }));
     }
     getRow() {
         return this.env.editingElement.querySelector(".row");
@@ -37,8 +30,7 @@ export class LayoutOption extends Component {
         return rowEl && rowEl.classList.contains("o_grid_mode");
     }
     setGridLayout() {
-        const rowEl = this.env.editingElement.querySelector(".row");
-        if (rowEl && rowEl.classList.contains("o_grid_mode")) {
+        if (this.isGrid()) {
             // Prevent toggling grid mode twice.
             return;
         }
@@ -76,3 +68,10 @@ export class LayoutOption extends Component {
         console.warn(`changeColumnCount:`, nbColumns);
     }
 }
+
+registry.category("sidebar-element-option").add("LayoutOption", {
+    OptionComponent: LayoutOption,
+    selector: "section, section.s_carousel_wrapper .carousel-item, .s_carousel_intro_item",
+    // TODO add exclude  data-exclude=".s_dynamic, .s_dynamic_snippet_content, .s_dynamic_snippet_title, .s_masonry_block, .s_framed_intro, .s_features_grid, .s_media_list, .s_table_of_content, .s_process_steps, .s_image_gallery, .s_timeline, .s_pricelist_boxed, .s_quadrant, .s_pricelist_cafe, .s_faq_horizontal, .s_image_frame, .s_card_offset, .s_contact_info"
+    // TODO add target (applyTo) data-target="> *:has(> .row), > .s_allow_columns"
+});

addons/html_builder/static/src/builder/components/options/LayoutOption.xml → addons/html_builder/static/src/builder/options/layout_option.xml

@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.LayoutOption">
-    <ToolboxRow label="'Layout'">
-        <WeButtonGroup>
-            <Button label="'Grid'" onClick.bind="setGridLayout" isActive="() => state.elementLayout === 'grid'" />
-            <Button label="'Column'" onClick.bind="setColumnLayout"  isActive="() => state.elementLayout === 'column'" />
+    <WeRow label="'Layout'">
+       <WeButtonGroup>
+            <Button label="'Grid'" onClick.bind="setGridLayout" isActive="state.elementLayout === 'grid'" />
+            <Button label="'Column'" onClick.bind="setColumnLayout"  isActive="state.elementLayout === 'column'" />
         </WeButtonGroup>
         <t t-if="state.elementLayout === 'column'">
             <Dropdown>
@@ -23,20 +23,20 @@
                 </t>
             </Dropdown>
         </t>
-    </ToolboxRow>
+    </WeRow>
     <t t-if="state.elementLayout === 'grid'">
         <AddElementOption />
         <SpacingOption />
     </t>
     <t t-else="">
-        <ToolboxRow label="'└ Hor. Alignment'">
+        <WeRow label="'└ Hor. Alignment'">
             <WeButtonGroup applyTo="'.row'">
                 <WeButton classAction="'align-items-start'" title="'Align Top'" iconImg="'/website/static/src/img/snippets_options/align_top.svg'"  />
                 <WeButton classAction="'align-items-center'" title="'Align Middle'" iconImg="'/website/static/src/img/snippets_options/align_middle.svg'" />
                 <WeButton classAction="'align-items-end'" title="'Align Bottom'" iconImg="'/website/static/src/img/snippets_options/align_bottom.svg'" />
                 <WeButton classAction="'align-items-stretch'" title="'Stretch'" iconImg="'/website/static/src/img/snippets_options/align_stretch.svg'" />
             </WeButtonGroup>
-        </ToolboxRow>
+        </WeRow>
     </t>
 </t>
 

addons/html_builder/static/src/builder/components/options/SpacingOption.js → addons/html_builder/static/src/builder/options/spacing_option.js

@@ -1,5 +1,6 @@
-import { Component, useState } from "@odoo/owl";
-import { defaultOptionComponents } from "../defaultComponents";
+import { Component } from "@odoo/owl";
+import { defaultOptionComponents } from "../components/defaultComponents";
+import { useDomState } from "../builder_helpers";
 
 export class SpacingOption extends Component {
     static template = "html_builder.SpacingOption";
@@ -10,17 +11,10 @@ export class SpacingOption extends Component {
         this.target = this.env.editingElement.querySelector(".o_grid_mode");
         this.targetComputedStyle = getComputedStyle(this.target);
 
-        this.state = useState(this.setState({}));
-        this.env.editorBus.addEventListener("STEP_ADDED", () => {
-            this.setState(this.state);
-        });
-    }
-    setState(object) {
-        Object.assign(object, {
+        this.state = useDomState(() => ({
             spacingX: parseInt(this.targetComputedStyle.columnGap),
             spacingY: parseInt(this.targetComputedStyle.rowGap),
-        });
-        return object;
+        }));
     }
     previewSpacingX(spacing) {
         this.target.style["column-gap"] = `${spacing}px`;

addons/html_builder/static/src/builder/components/options/SpacingOption.xml → addons/html_builder/static/src/builder/options/spacing_option.xml

@@ -2,14 +2,14 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.SpacingOption">
-    <ToolboxRow label="'└ Spacing (Y, X)'">
+    <WeRow label="'└ Spacing (Y, X)'">
         <input type="number" class="form-control" t-att-value="state.spacingY"
             t-on-input="(e) => this.previewSpacingY(e.target.value)"
             t-on-change="(e) => this.changeSpacingY(e.target.value)"/>
         <input type="number" class="form-control" t-att-value="state.spacingX"
             t-on-input="(e) => this.previewSpacingX(e.target.value)"
             t-on-change="(e) => this.changeSpacingX(e.target.value)"/>
-    </ToolboxRow>
+    </WeRow>
 </t>
 
 </templates>

addons/html_builder/static/src/builder/options/visibility_option.js

@@ -0,0 +1,15 @@
+import { Component } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { defaultOptionComponents } from "../components/defaultComponents";
+
+export class VisibilityOption extends Component {
+    static template = "html_builder.VisibilityOption";
+    static components = {
+        ...defaultOptionComponents,
+    };
+}
+
+registry.category("sidebar-element-option").add("VisibilityOption", {
+    OptionComponent: VisibilityOption,
+    selector: "section, .s_hr",
+});

addons/html_builder/static/src/builder/components/options/VisibilityOption.xml → addons/html_builder/static/src/builder/options/visibility_option.xml

@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.VisibilityOption">
-    <ToolboxRow label.translate="Visibility">
-        <WeSelect label.translate="todos" attributeAction="'visibility'">
+    <WeRow label.translate="Visibility">
+        <WeSelect attributeAction="'visibility'">
             <WeSelectItem attributeActionValue="null">No condition</WeSelectItem>
             <WeSelectItem attributeActionValue="'conditional'">Conditionally</WeSelectItem>
         </WeSelect>
-    </ToolboxRow>
+    </WeRow>
 </t>
 
 </templates>

addons/html_builder/static/src/builder/plugins/element_toolbox_plugin.js → addons/html_builder/static/src/builder/plugins/builder_options_plugin.js

@@ -1,16 +1,17 @@
 import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
+import { uniqueId } from "@web/core/utils/functions";
 
-export class ElementToolboxPlugin extends Plugin {
-    static id = "element-toolbox";
+export class BuilderOptionsPlugin extends Plugin {
+    static id = "builder-options";
     static dependencies = ["selection", "overlay"];
     static resources = (p) => ({
         onSelectionChange: p.onSelectionChange.bind(p),
     });
 
     setup() {
         // todo: use resources instead of registry
-        this.toolboxes = registry.category("sidebar-element-toolbox").getAll();
+        this.builderOptions = registry.category("sidebar-element-option").getAll();
         this.addDomListener(this.editable, "pointerup", (e) => {
             if (!this.dependencies.selection.getEditableSelection().isCollapsed) {
                 return;
@@ -35,20 +36,24 @@ export class ElementToolboxPlugin extends Plugin {
 
     changeSidebarTarget(selectedElement) {
         const map = new Map();
-        for (const toolbox of this.toolboxes) {
-            const { selector } = toolbox;
+        for (const option of this.builderOptions) {
+            const { selector } = option;
             const element = selectedElement.closest(selector);
             if (element) {
-                map.set(element, toolbox);
+                if (map.has(element)) {
+                    map.get(element).push(option);
+                } else {
+                    map.set(element, [option]);
+                }
             }
         }
-        const toolboxes = [...map]
+        const optionsContainers = [...map]
             .sort(([a], [b]) => {
                 return b.contains(a) ? 1 : -1;
             })
-            .map(([element, toolbox]) => ({ element, toolbox }));
-        for (const handler of this.getResource("change_selected_toolboxes_listeners")) {
-            handler(toolboxes);
+            .map(([element, options]) => ({ element, options, id: uniqueId() }));
+        for (const handler of this.getResource("change_current_options_containers_listeners")) {
+            handler(optionsContainers);
         }
         return;
     }