From 22a76c230bb22dfa42333b544f69cc72d8921a31 Mon Sep 17 00:00:00 2001
From: Kamen Zhekov <kzh@odoo.com>
Date: Mon, 12 Jul 2021 13:26:58 +0000
Subject: [PATCH] [IMP] website: clarify drag&drop zones for website edit mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When using drag&drop for adding elements to a product's page through
the website edit mode, users sometimes find the feature confusing to
use. Two examples of said confusion can be seen here:
- https://dashboard.userbrain.net/shared/qwl65bqlk6jg?t=404
- https://dashboard.userbrain.net/shared/k796mnj95pow?t=258

The suggestion for improvement was to reduce height and opacity for
the top and bottom droppable zones (available on all products), and
make any element not explicitly dropped in those zones go to the
zone below the product, available only on the product's own page.

This behaviour is extended to be more generic and is applied when
a dropzone has the class oe_structure_not_nearest, which excludes
it from the nearest search, unless the element is dropped explicitly
in a zone that has the class oe_structure_not_nearest.

task-2581641

closes odoo/odoo#73580

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
---
 .../static/src/js/editor/snippets.editor.js       | 15 +++++++++++++--
 .../static/src/scss/website.edit_mode.scss        |  7 +++++++
 .../website_blog/views/website_blog_templates.xml |  2 +-
 addons/website_sale/views/templates.xml           |  8 ++++----
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 0c565dcbc60..62daaa37b41 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2308,9 +2308,20 @@ var SnippetsMenu = Widget.extend({
                     self.options.wysiwyg.odooEditor.automaticStepSkipStack();
                     $toInsert.removeClass('oe_snippet_body');
                     self.draggableComponent.$scrollTarget.off('scroll.scrolling_element');
-
                     if (!dropped && ui.position.top > 3 && ui.position.left + ui.helper.outerHeight() < self.el.getBoundingClientRect().left) {
-                        var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
+                        const point = {x: ui.position.left, y: ui.position.top};
+                        const container = {container: document.body};
+                        let droppedOnNotNearest = $.touching(
+                            point, '.oe_structure_not_nearest', container
+                        ).first();
+                        // If dropped outside of a dropzone with class oe_structure_not_nearest,
+                        // move the snippet to the nearest dropzone without it
+                        const selector = droppedOnNotNearest.length
+                            ? '.oe_drop_zone'
+                            : ':not(.oe_structure_not_nearest) > .oe_drop_zone';
+                        let $el = $.nearest(
+                            point, selector, container
+                        ).first();
                         if ($el.length) {
                             $el.after($toInsert);
                             dropped = true;
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 989b3816209..eb52198612e 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -27,6 +27,13 @@ $-editor-messages-margin-x: 2%;
     }
 }
 
+.oe_structure_not_nearest .oe_drop_zone {
+    &:before {
+        opacity: 0.5;
+        line-height: 35px !important;
+    }
+}
+
 .o_editable {
     &:not(:empty), &[data-oe-type] {
         &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):not(.o_editable_no_shadow):not([data-oe-type="image"]):hover,
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 32cc797c8ce..e5a9897351e 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -10,7 +10,7 @@
 
             <!-- Droppable-area shared across all blog's pages -->
             <t t-set="oe_structure_blog_footer_description">Visible in all blogs' pages</t>
-            <div class="oe_structure oe_empty"
+            <div class="oe_structure oe_empty oe_structure_not_nearest"
                 id="oe_structure_blog_footer"
                 t-att-data-editor-sub-message="oe_structure_blog_footer_description"/>
         </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 37e39f6b654..76bc0cac047 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -260,7 +260,7 @@
         <t t-call="website.layout">
             <t t-set="additional_title">Shop</t>
             <div id="wrap" class="js_sale">
-                <div class="oe_structure oe_empty" id="oe_structure_website_sale_products_1"/>
+                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_products_1"/>
                 <div class="container oe_website_sale pt-2">
                     <div class="row o_wsale_products_main_row">
                         <div t-if="enable_left_column" id="products_grid_before" class="col-lg-3 pb-2">
@@ -328,7 +328,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="oe_structure oe_empty" id="oe_structure_website_sale_products_2"/>
+                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_products_2"/>
             </div>
         </t>
     </template>
@@ -546,7 +546,7 @@
         <t t-call="website.layout">
             <t t-set="additional_title" t-value="product.name" />
             <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale">
-                <div class="oe_structure oe_empty" id="oe_structure_website_sale_product_1" data-editor-message="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
+                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_product_1" data-editor-message="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
                 <section t-attf-class="container py-4 oe_website_sale #{'discount' if combination_info['has_discounted_price'] else ''}" id="product_detail" t-att-data-view-track="view_track and '1' or '0'">
                     <div class="row">
                         <div class="col-lg-6">
@@ -638,7 +638,7 @@
                     </div>
                 </section>
                 <div itemprop="description" t-field="product.website_description" class="oe_structure oe_empty mt16" id="product_full_description"/>
-                <div class="oe_structure oe_empty mt16" id="oe_structure_website_sale_product_2" data-editor-message="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
+                <div class="oe_structure oe_empty oe_structure_not_nearest mt16" id="oe_structure_website_sale_product_2" data-editor-message="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
             </div>
         </t>
     </template>