Display the editor messages (dropzone) only when needed + fix them

Author: sobo-odoo

addons/html_builder/static/src/core/drop_zone_plugin.js

@@ -212,15 +212,27 @@ export class DropZonePlugin extends Plugin {
      * This allows to add data on the dropzone depending on the hook
      * environment.
      * TODO
-     *
+     * @param {HTMLElement} hookEl the dropzone parent
      * @param {boolean} [vertical=false]
      * @param {Object} [style]
      * @returns {HTMLElement}
      */
-    createDropzone(isVertical, style) {
+    createDropzone(hookEl, isVertical, style) {
         const dropzoneEl = this.document.createElement("div");
         dropzoneEl.classList.add("oe_drop_zone", "oe_insert");
-        dropzoneEl.dataset.editorMessage = _t("DRAG BUILDING BLOCKS HERE");
+
+        // Set the messages to display in the dropzone.
+        const editorMessagesAttributes = [
+            "data-editor-message-default",
+            "data-editor-message",
+            "data-editor-sub-message",
+        ];
+        for (const messageAttribute of editorMessagesAttributes) {
+            const message = hookEl.getAttribute(messageAttribute);
+            if (message) {
+                dropzoneEl.setAttribute(messageAttribute, message);
+            }
+        }
 
         if (isVertical) {
             dropzoneEl.classList.add("oe_vertical");
@@ -305,17 +317,17 @@ export class DropZonePlugin extends Plugin {
         const targets = [];
         for (const el of selectorChildren) {
             targets.push(...el.children);
-            el.prepend(this.createDropzone());
+            el.prepend(this.createDropzone(el));
         }
         targets.push(...selectorSiblings);
 
         for (const target of targets) {
             if (!target.nextElementSibling?.classList.contains("oe_drop_zone")) {
-                target.after(this.createDropzone());
+                target.after(this.createDropzone(target.parentElement));
             }
 
             if (!target.previousElementSibling?.classList.contains("oe_drop_zone")) {
-                target.before(this.createDropzone());
+                target.before(this.createDropzone(target.parentElement));
             }
         }
 

addons/html_builder/static/src/core/editor.inside.scss

@@ -1,5 +1,3 @@
-// This style block is about the "editor message" which highlights the areas
-// where the user can drag & drop snippets.
 $-editor-messages-margin-x: 2%;
 
 %o-editor-messages {
@@ -15,34 +13,77 @@ $-editor-messages-margin-x: 2%;
         font-size: 20px;
     }
 
+    // Show the default editor message only for "empty" elements
+    &:not(:empty) {
+        &[data-editor-message-default]:before {
+            content: none;
+        }
+    }
+
     &:after {
         content: attr(data-editor-sub-message);
         display: block;
     }
 }
 
+// This style block is about the "editor message" which highlights the areas
+// where the user can drag & drop snippets.
 .o_editable {
     &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty {
-        &:empty {
+
+        // Base case (website.page (#wrap), t-field (product description), ...)
+        > .oe_drop_zone.oe_insert:not(.oe_vertical) {
+            @extend %o-editor-messages;
+            height: auto;
+
+            // Empty editable element during drag & drop
+            &:only-child {
+                width: 100% - 2 * $-editor-messages-margin-x;
+                padding: 12px 0;
+                margin: 20px $-editor-messages-margin-x;
+            }
+
+            &:not(:only-child) {
+                &::before {
+                    font-size: 16px;
+                }
+
+                &[data-editor-message-default]::before {
+                    content: none;
+                }
+            }
+        }
+
+        // Exception 1: empty wrap NOT during drag & drop
+        &#wrap:empty {
             @extend %o-editor-messages;
             padding: 112px 0px;
             margin: 20px $-editor-messages-margin-x;
             border-radius: $border-radius-lg;
         }
 
-        .oe_drop_zone.oe_insert:only-child {
-            @extend %o-editor-messages;
-            height: auto;
-            width: 100% - 2 * $-editor-messages-margin-x;
-            padding: 112px 0;
-            margin: 20px $-editor-messages-margin-x;
+        // Exception 2: empty wrap during drag & drop (override of base case)
+        &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
+            padding: 112px 0px;
             text-shadow: none;
         }
 
         > p:empty:only-child {
             color: #aaa;
         }
     }
+
+    &[data-oe-type=html].oe_empty:empty {
+        @extend %o-editor-messages;
+    }
+}
+
+.oe_structure_solo > .oe_drop_zone {
+    // TODO implement something more robust. This is currently for our only
+    // use case of oe_structure_solo: the footer. The dropzone in there need to
+    // be 1px lower that the end-of-page dropzone to distinguish them. The
+    // usability has to be reviewed anyway.
+    transform: translateY(10px); // For some reason "1px" is not enough...
 }
 
 .o-we-hint {

addons/html_builder/static/tests/drop_zone.test.js

@@ -7,7 +7,7 @@ describe.current.tags("desktop");
 
 const dropzone = (hovered = false) => {
     const highlightClass = hovered ? " o_dropzone_highlighted" : "";
-    return `<div class="oe_drop_zone oe_insert${highlightClass}" data-editor-message="DRAG BUILDING BLOCKS HERE"></div>`;
+    return `<div class="oe_drop_zone oe_insert${highlightClass}" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE"></div>`;
 };
 
 test("#wrap element has the 'DRAG BUILDING BLOCKS HERE' message", async () => {