pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: clarify drag&drop zones for website edit mode

Browse Source 
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>
This commit is contained in:
Kamen Zhekov
2021-07-15 12:16:14 +00:00
parent deb7b0dfc2
commit 22a76c230b
4 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+13 -2
View File
@@ -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;
addons/website/static/src/scss/website.edit_mode.scss
+7
View File
@@ -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,
addons/website_blog/views/website_blog_templates.xml
+1 -1
View File
@@ -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>
addons/website_sale/views/templates.xml
+4 -4
View File
@@ -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>