Separator option

odoo-dev · Jan 16, 2025 · bf2980c · bf2980c
1 parent 3a55c37
commit bf2980c
Show file tree

Hide file tree

Showing 16 changed files with 744 additions and 14 deletions.
diff --git a/addons/html_builder/static/src/builder/builder_components/builder_colorpicker.js b/addons/html_builder/static/src/builder/builder_components/builder_colorpicker.js
@@ -52,7 +52,9 @@ export class BuilderColorPicker extends Component {
             return;
         }
         const color =
-            this.env.editor.shared.color.getElementColors(editingElement)[this.props.styleAction];
+            this.env.editor.shared.color.getElementColors(editingElement)[this.props.styleAction] ||
+            editingElement.style[this.props.styleAction] ||
+            "";
         this.env.editor.shared.color.colorElement(this.colorButton.el, color, "backgroundColor");
     }
 }
diff --git a/addons/html_builder/static/src/builder/builder_components/builder_select_item.js b/addons/html_builder/static/src/builder/builder_components/builder_select_item.js
@@ -12,6 +12,8 @@ export class BuilderSelectItem extends Component {
         id: { type: String, optional: true },
         title: { type: String, optional: true },
         slots: { type: Object, optional: true },
+        class: { type: String, optional: true },
+        style: { type: String, optional: true },
     };
     static components = { BuilderComponent };
 
@@ -32,4 +34,9 @@ export class BuilderSelectItem extends Component {
         this.onMouseenter = operation.preview;
         this.onMouseleave = operation.revert;
     }
+
+    get className() {
+        const activeClass = this.state.isActive ? " active" : "";
+        return this.props.class + activeClass;
+    }
 }
diff --git a/addons/html_builder/static/src/builder/builder_components/builder_select_item.xml b/addons/html_builder/static/src/builder/builder_components/builder_select_item.xml
@@ -5,7 +5,8 @@
     <BuilderComponent dependencies="props.dependencies">
         <div
             class="d-flex flex-column cursor-pointer"
-            t-att-class="{'active': this.state.isActive}"
+            t-att-class="className"
+            t-att-style="props.style"
             t-att-data-action-id="props.action"
             t-att-data-class-action="this.props.classAction"
             t-att-data-attribute-action-id="props.attributeAction || this.env.weContext.attributeAction"

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_text_input.js b/addons/html_builder/static/src/builder/builder_components/builder_text_input.js
@@ -16,7 +16,7 @@ export class BuilderTextInput extends Component {
 
     setup() {
         useBuilderComponent();
-        const { state, onChange, onInput } = useInputBuilderComponent();
+        const { state, onChange, onInput } = useInputBuilderComponent({ inputIsNumber: false });
         this.onChange = onChange;
         this.onInput = onInput;
         this.state = state;

diff --git a/addons/html_builder/static/src/builder/builder_components/global_builder_options.js b/addons/html_builder/static/src/builder/builder_components/global_builder_options.js
@@ -0,0 +1,5 @@
+import { GlobalBorderOption } from "@html_builder/builder/options/global_border_option";
+
+export const globalBuilderOptions = {
+    GlobalBorderOption,
+};
diff --git a/addons/html_builder/static/src/builder/builder_components/utils.js b/addons/html_builder/static/src/builder/builder_components/utils.js
@@ -358,7 +358,7 @@ export function useClickableBuilderComponent() {
         getActions: getAllActions,
     };
 }
-export function useInputBuilderComponent() {
+export function useInputBuilderComponent({ inputIsNumber = true } = {}) {
     const comp = useComponent();
     const { getAllActions, callOperation } = getAllActionsAndOperations(comp);
     const getAction = comp.env.editor.shared.builderActions.getAction;
@@ -368,26 +368,28 @@ export function useInputBuilderComponent() {
             applySpec.apply({
                 editingElement: applySpec.editingElement,
                 param: applySpec.actionParam,
-                value: applySpec.actionValue,
+                value: `${applySpec.actionValue}${comp.props.unit || ""}`,
                 loadResult: applySpec.loadResult,
                 dependencyManager: comp.env.dependencyManager,
             });
         }
     });
     function getState(editingElement) {
-        if (!editingElement) {
+        if (!editingElement || !editingElement.isConnected) {
             // TODO try to remove it. We need to move hook in BuilderComponent
             return {};
         }
         const actionWithGetValue = getAllActions().find(
             ({ actionId }) => getAction(actionId).getValue
         );
         const { actionId, actionParam } = actionWithGetValue;
+        let actionValue = getAction(actionId).getValue({ editingElement, param: actionParam });
+        if (inputIsNumber) {
+            // Remove the unit
+            actionValue = actionValue && actionValue.match(/\d+/g)[0];
+        }
         return {
-            value: getAction(actionId).getValue({
-                editingElement,
-                param: actionParam,
-            }),
+            value: actionValue,
         };
     }
 

diff --git a/addons/html_builder/static/src/builder/components/option_container.js b/addons/html_builder/static/src/builder/components/option_container.js
@@ -1,12 +1,13 @@
 import { Component, useSubEnv } from "@odoo/owl";
 import { defaultBuilderComponents } from "../builder_components/default_builder_components";
+import { globalBuilderOptions } from "../builder_components/global_builder_options";
 import { useVisibilityObserver, useApplyVisibility } from "../builder_components/utils";
 import { DependencyManager } from "../plugins/dependency_manager";
 import { getSnippetName } from "@html_builder/builder/utils/utils";
 
 export class OptionsContainer extends Component {
     static template = "html_builder.OptionsContainer";
-    static components = { ...defaultBuilderComponents };
+    static components = { ...defaultBuilderComponents, ...globalBuilderOptions };
     static props = {
         options: { type: Array },
         editingElement: true, // HTMLElement from iframe

diff --git a/addons/html_builder/static/src/builder/core_builder_action_plugin.js b/addons/html_builder/static/src/builder/core_builder_action_plugin.js
@@ -1,5 +1,6 @@
 import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
+import { CSS_SHORTHANDS, areCssValuesEqual } from "@html_builder/builder/utils/utils_css";
 
 class CoreBuilderActionPlugin extends Plugin {
     static id = "CoreBuilderAction";
@@ -83,11 +84,21 @@ export const coreBuilderActions = {
             return currentValue === value;
         },
         apply: ({ editingElement, param: styleName, value }) => {
+            // Always reset the inline style first to not put inline style on an
+            // element which already has this style through css stylesheets.
+            const cssProps = CSS_SHORTHANDS[styleName] || [styleName];
+            for (const cssProp of cssProps) {
+                editingElement.style.setProperty(cssProp, "");
+            }
             const customStyle = styleMap[styleName];
             if (customStyle) {
                 customStyle?.apply(editingElement, value);
             } else {
-                editingElement.style.setProperty(styleName, value, "important");
+                const styles = window.getComputedStyle(editingElement);
+                if (!areCssValuesEqual(styles.getPropertyValue(styleName), value, styleName)) {
+                    // TO check but this seems strange (important)
+                    editingElement.style.setProperty(styleName, value, "important");
+                }
             }
         },
     },

diff --git a/addons/html_builder/static/src/builder/options/global_border_option.js b/addons/html_builder/static/src/builder/options/global_border_option.js
@@ -0,0 +1,31 @@
+import { Component } from "@odoo/owl";
+import { defaultBuilderComponents } from "../builder_components/default_builder_components";
+import { useDomState } from "../builder_components/utils";
+
+export class GlobalBorderOption extends Component {
+    static template = "html_builder.snippet_options_border_line";
+    static components = { ...defaultBuilderComponents };
+    static props = {
+        label: { type: String },
+        direction: { type: String, optional: true },
+        applyTo: { type: String },
+    };
+    setup() {
+        this.state = useDomState(() => ({
+            isActive: this.isActive(),
+        }));
+    }
+
+    getStyleActionParam(param) {
+        return `border-${this.props.direction ? this.props.direction + "-" : ""}${param}`;
+    }
+    isActive() {
+        const getAction = this.env.editor.shared.builderActions.getAction;
+        const editingElement = this.env.getEditingElement().querySelector(this.props.applyTo);
+        const styleActionValue = getAction("styleAction").getValue({
+            editingElement,
+            param: this.getStyleActionParam("width"),
+        });
+        return !!parseInt(styleActionValue.match(/\d+/g)[0]);
+    }
+}
diff --git a/addons/html_builder/static/src/builder/options/global_border_option.xml b/addons/html_builder/static/src/builder/options/global_border_option.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.snippet_options_border_line">
+    <BuilderRow label="props.label" applyTo="props.applyTo">
+        <BuilderNumberInput styleAction="getStyleActionParam('width')" unit="'px'"></BuilderNumberInput>
+        <BuilderSelect styleAction="getStyleActionParam('style')" t-if="state.isActive">
+            <BuilderSelectItem styleActionValue="'solid'" class="'o_we_fake_img_item o_we_border_preview'" style="'border-style: solid;'">Solid</BuilderSelectItem>
+            <BuilderSelectItem styleActionValue="'dashed'" class="'o_we_fake_img_item o_we_border_preview'" style="'border-style: dashed;'">Dashed</BuilderSelectItem>
+            <BuilderSelectItem styleActionValue="'dotted'" class="'o_we_fake_img_item o_we_border_preview'" style="'border-style: dotted;'">Dotted</BuilderSelectItem>
+            <BuilderSelectItem styleActionValue="'double'" class="'o_we_fake_img_item o_we_border_preview'" style="'border-style: double; border-left: none; border-right: none;'">Double</BuilderSelectItem>
+        </BuilderSelect>
+        <BuilderColorPicker styleAction="getStyleActionParam('color')" t-if="state.isActive"/>
+        </BuilderRow>
+</t>
+</templates>
diff --git a/addons/html_builder/static/src/builder/options/separator_option.js b/addons/html_builder/static/src/builder/options/separator_option.js
@@ -0,0 +1,15 @@
+import { Plugin } from "@html_editor/plugin";
+import { registry } from "@web/core/registry";
+
+class SeparatorOptionPlugin extends Plugin {
+    static id = "SeparatorOption";
+    resources = {
+        builder_options: [
+            {
+                template: "html_builder.SeparatorOption",
+                selector: ".s_hr",
+            },
+        ],
+    };
+}
+registry.category("website-plugins").add(SeparatorOptionPlugin.id, SeparatorOptionPlugin);
diff --git a/addons/html_builder/static/src/builder/options/separator_option.xml b/addons/html_builder/static/src/builder/options/separator_option.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.SeparatorOption">
+    <t t-set="applyTo" t-value="'hr'" />
+    <t t-set="label">Border</t>
+    <GlobalBorderOption label="label" direction="'top'" applyTo="applyTo"/>
+    <BuilderRow label.translate="Width">
+        <BuilderSelect applyTo="applyTo">
+            <BuilderSelectItem classAction="'w-25'">25%</BuilderSelectItem>
+            <BuilderSelectItem classAction="'w-50'">50%</BuilderSelectItem>
+            <BuilderSelectItem classAction="'w-75'">75%</BuilderSelectItem>
+            <BuilderSelectItem classAction="'w-100'" id="'so_width_100'">100%</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+    <BuilderRow label.translate="Alignment" dependencies="'!so_width_100'">
+        <BuilderButtonGroup applyTo="'hr'">
+            <BuilderButton icon="'fa-align-left'" title.translate="'Left'" classAction="'me-auto'"></BuilderButton>
+            <BuilderButton icon="'fa-align-center'" title.translate="'Center'" classAction="'mx-auto'"></BuilderButton>
+            <BuilderButton icon="'fa-align-right'" title.translate="'Right'" classAction="'ms-auto'"></BuilderButton>
+        </BuilderButtonGroup>
+    </BuilderRow>
+</t>
+
+</templates>