odoo-dev · loco-odoo · Feb 3, 2025
diff --git a/addons/html_builder/static/src/builder_components/builder_colorpicker.js b/addons/html_builder/static/src/builder_components/builder_colorpicker.js
@@ -13,6 +13,7 @@ export class BuilderColorPicker extends Component {
     static props = {
         ...basicContainerBuilderComponentProps,
         unit: { type: String, optional: true },
+        title: { type: String, optional: true },
     };
     static components = {
         ColorSelector,

diff --git a/addons/html_builder/static/src/builder_components/builder_colorpicker.xml b/addons/html_builder/static/src/builder_components/builder_colorpicker.xml
@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.BuilderColorPicker">
     <BuilderComponent dependencies="props.dependencies">
-        <div>
+        <div t-att-title="props.title">
             <ColorSelector
                 type="this.colorType"
                 getSelectedColors='() => this.currentColors'

diff --git a/addons/html_builder/static/src/builder_components/utils.js b/addons/html_builder/static/src/builder_components/utils.js
@@ -199,7 +199,7 @@ export function useSelectableItemComponent(id, { getLabel = () => {} } = {}) {
 export function useClickableBuilderComponent() {
     useBuilderComponent();
     const comp = useComponent();
-    const { getAllActions, callOperation } = getAllActionsAndOperations(comp);
+    const { getAllActions, callOperation, isApplied } = getAllActionsAndOperations(comp);
     const getAction = comp.env.editor.shared.builderActions.getAction;
     const applyOperation = comp.env.editor.shared.history.makePreviewableOperation(callApply);
     const shouldToggle = !comp.env.actionBus;
@@ -255,7 +255,7 @@ export function useClickableBuilderComponent() {
     function callApply(applySpecs) {
         comp.env.selectableContext?.cleanSelectedItem(applySpecs);
         const cleans = comp.props.inheritedActions
-            ?.map((actionId) => comp.env.dependencyManager.get(actionId).cleanSelectedItem)
+            ?.map((actionId) => comp.env.dependencyManager.get(actionId)?.cleanSelectedItem)
             .filter(Boolean);
         for (const clean of new Set(cleans)) {
             clean(applySpecs);
@@ -281,33 +281,6 @@ export function useClickableBuilderComponent() {
             }
         }
     }
-    function isApplied() {
-        const editingElements = comp.env.getEditingElements();
-        if (!editingElements.length) {
-            return;
-        }
-        const areActionsActiveTabs = getAllActions().map((o) => {
-            const { actionId, actionParam, actionValue } = o;
-            // TODO isApplied === first editing el or all ?
-            const editingElement = editingElements[0];
-            const isApplied = getAction(actionId).isApplied?.({
-                editingElement,
-                param: actionParam,
-                value: actionValue,
-            });
-            return comp.props.inverseAction ? !isApplied : isApplied;
-        });
-        // If there is no `isApplied` method for the widget return false
-        if (areActionsActiveTabs.every((el) => el === undefined)) {
-            return false;
-        }
-        // If `isApplied` is explicitly false for an action return false
-        if (areActionsActiveTabs.some((el) => el === false)) {
-            return false;
-        }
-        // `isApplied` is true for at least one action
-        return true;
-    }
     function getPriority() {
         return (
             getAllActions()
@@ -546,6 +519,11 @@ export function getAllActionsAndOperations(comp) {
                             if (!applySpec.load) {
                                 return;
                             }
+                            const shouldToggle = !comp.env.actionBus;
+                            if (shouldToggle && isApplied()) {
+                                // The element will be cleaned, do not load
+                                return;
+                            }
                             const result = await applySpec.load({
                                 editingElement: applySpec.editingElement,
                                 param: applySpec.actionParam,
@@ -558,8 +536,37 @@ export function getAllActionsAndOperations(comp) {
             }
         );
     }
+    function isApplied() {
+        const getAction = comp.env.editor.shared.builderActions.getAction;
+        const editingElements = comp.env.getEditingElements();
+        if (!editingElements.length) {
+            return;
+        }
+        const areActionsActiveTabs = getAllActions().map((o) => {
+            const { actionId, actionParam, actionValue } = o;
+            // TODO isApplied === first editing el or all ?
+            const editingElement = editingElements[0];
+            const isApplied = getAction(actionId).isApplied?.({
+                editingElement,
+                param: actionParam,
+                value: actionValue,
+            });
+            return comp.props.inverseAction ? !isApplied : isApplied;
+        });
+        // If there is no `isApplied` method for the widget return false
+        if (areActionsActiveTabs.every((el) => el === undefined)) {
+            return false;
+        }
+        // If `isApplied` is explicitly false for an action return false
+        if (areActionsActiveTabs.some((el) => el === false)) {
+            return false;
+        }
+        // `isApplied` is true for at least one action
+        return true;
+    }
     return {
         getAllActions: getAllActions,
         callOperation: callOperation,
+        isApplied: isApplied,
     };
 }
diff --git a/addons/html_builder/static/src/builder_sidebar/builder_sidebar.js b/addons/html_builder/static/src/builder_sidebar/builder_sidebar.js
@@ -173,8 +173,8 @@ export class BuilderSidebar extends Component {
             // Ensure that the iframe is loaded and the editor is created before
             // instantiating the sub components that potentially need the
             // editor.
-            const iframeEl = await this.props.iframeLoaded;
-            this.editor.attachTo(iframeEl.contentDocument.body.querySelector("#wrapwrap"));
+            this.iframeEl = await this.props.iframeLoaded;
+            this.editor.attachTo(this.iframeEl.contentDocument.body.querySelector("#wrapwrap"));
         });
 
         useSubEnv({

diff --git a/addons/html_builder/static/src/builder_sidebar/builder_sidebar.scss b/addons/html_builder/static/src/builder_sidebar/builder_sidebar.scss
@@ -100,3 +100,65 @@
     border-width: 4px;
     border-bottom: none !important;
 }
+
+.o_pager_container {
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+}
+
+.builder_select_page {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $o-we-item-spacing / 2;
+    padding: $o-we-item-spacing;
+    background-color: $o-we-bg-lighter;
+
+    button {
+        --PreviewAlphaBg-background-size: 16px;
+
+        @extend %o-preview-alpha-background;
+        padding: $o-we-item-spacing;
+        background-color: transparent;
+    }
+    // For background shapes
+    .button_shape {
+        grid-column: span 2;
+        padding: 0;
+
+        button, div {
+            width: 100%;
+            height: 50px;
+        }
+    }
+    // button.active {
+    //     background-color: rgba($o-we-toolbar-color-accent, 0.2);
+
+    //     .o_we_shape {
+    //         outline: 4px solid $o-we-toolbar-color-accent;
+    //         outline-offset: -2px;
+    //     }
+    // }
+    img {
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: contain;
+    }
+}
+
+.o_we_shape_animated_label {
+    @include o-position-absolute(0, 0);
+    padding: 0 4px;
+    background: $o-we-toolbar-color-accent;
+    color: white;
+
+    > span {
+        @include o-text-overflow(inline-block);
+        max-width: 0;
+    }
+}
+
+.o_pager_nav_angle {
+    @include button-variant($o-we-bg-light, $o-we-bg-light);
+    padding: $o-we-item-spacing / 2;
+    font-size: $o-we-sidebar-font-size * 1.4;
+}
diff --git a/addons/html_builder/static/src/builder_sidebar/builder_sidebar.xml b/addons/html_builder/static/src/builder_sidebar/builder_sidebar.xml
@@ -30,7 +30,7 @@
                 <BlockTab snippetModel="snippetModel" installSnippetModule.bind="installSnippetModule"/>
             </t>
             <t t-if="state.activeTab === 'customize'">
-                <CustomizeTab currentOptionsContainers="state.currentOptionsContainers" snippetModel="snippetModel"/>
+                <CustomizeTab currentOptionsContainers="state.currentOptionsContainers" snippetModel="snippetModel" iframeEl="iframeEl"/>
             </t>
             <t t-if="state.activeTab === 'theme'">
                 theme

diff --git a/addons/html_builder/static/src/builder_sidebar/tabs/customize_tab.js b/addons/html_builder/static/src/builder_sidebar/tabs/customize_tab.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useSubEnv } from "@odoo/owl";
 import { OptionsContainer } from "../../components/option_container";
 import { useVisibilityObserver } from "../../builder_components/utils";
 
@@ -8,6 +8,7 @@ export class CustomizeTab extends Component {
     static props = {
         currentOptionsContainers: { type: Array, optional: true },
         snippetModel: { type: Object },
+        iframeEl: { type: HTMLElement },
     };
     static defaultProps = {
         currentOptionsContainers: [],
@@ -20,5 +21,8 @@ export class CustomizeTab extends Component {
         useVisibilityObserver("content", (hasContent) => {
             this.state.hasContent = hasContent;
         });
+        useSubEnv({
+            iframeEl: this.props.iframeEl,
+        });
     }
 }