Separator option

odoo-dev · Jan 17, 2025 · d6aee04 · d6aee04
1 parent 3a55c37
commit d6aee04
Show file tree

Hide file tree

Showing 16 changed files with 743 additions and 15 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.js b/addons/html_builder/static/src/builder/builder_components/builder_select.js
@@ -1,4 +1,4 @@
-import { Component, EventBus, onMounted, useEnv, useRef, useSubEnv } from "@odoo/owl";
+import { Component, onMounted, useRef, useSubEnv } from "@odoo/owl";
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import {
     basicContainerBuilderComponentProps,
@@ -8,7 +8,6 @@ import {
     useSelectableComponent,
 } from "./utils";
 import { useDropdownState } from "@web/core/dropdown/dropdown_hooks";
-import { useBus } from "@web/core/utils/hooks";
 
 export class BuilderSelect extends Component {
     static template = "html_builder.BuilderSelect";

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/builder_sidebar/builder_sidebar.scss b/addons/html_builder/static/src/builder/builder_sidebar/builder_sidebar.scss
@@ -76,3 +76,13 @@
 .o-snippets-tabs > button[disabled] {
     opacity: .5;
 }
+
+// TODO: adjust the style of those elements
+.o_we_border_preview {
+    display: inline-block;
+    width: 40px;
+    max-width: 100%;
+    margin-bottom: 2px;
+    border-width: 4px;
+    border-bottom: none !important;
+}
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,20 @@ 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)) {
+                    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,30 @@
+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(() => ({
+            hasBorder: this.hasBorder(),
+        }));
+    }
+    getStyleActionParam(param) {
+        return `border-${this.props.direction ? this.props.direction + "-" : ""}${param}`;
+    }
+    hasBorder() {
+        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.hasBorder">
+            <BuilderSelectItem title="'Solid'" styleActionValue="'solid'"><div class="o_we_border_preview" style="border-style: solid;"/></BuilderSelectItem>
+            <BuilderSelectItem title="'Dashed'" styleActionValue="'dashed'"><div class="o_we_border_preview" style="border-style: dashed;"/></BuilderSelectItem>
+            <BuilderSelectItem title="'Dotted'" styleActionValue="'dotted'"><div class="o_we_border_preview" style="border-style: dotted;"/></BuilderSelectItem>
+            <BuilderSelectItem title="'Double'" styleActionValue="'double'"><div class="o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></BuilderSelectItem>
+        </BuilderSelect>
+        <BuilderColorPicker styleAction="getStyleActionParam('color')" t-if="state.hasBorder"/>
+        </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,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.SeparatorOption">
+    <t t-set="applyTo" t-value="'hr'" />
+    <GlobalBorderOption label.translate="Border" 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>