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

[FIX] web_editor: review drag and drop in the editor

Browse Source 
When dropping a snippet into a page, it is dropped in the drop-zone
which is the nearest of the user cursor. When moving a snippet, that
condition did not apply and the user was required to put the cursor at
the exact location of the drop-zone.

Also, for both drag and drop features, the drop zones which appeared
were not displayed correctly for full width columns, which made dropping
sometimes impossible when multiple col-*-12 were below each other.

task-1937758

closes odoo/odoo#30899
This commit is contained in:
qsm-odoo
2019-02-07 11:12:36 +00:00
parent 0757ba3c63
commit be689c53c1
2 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/snippets.editor.js
+31 -5
View File
@@ -615,6 +615,10 @@ data.Class = Widget.extend({
var self = this;
var zone_template = $("<div class='oe_drop_zone oe_insert'/>");
function isFullWidth($elem) {
return $elem.parent().width() === $elem.outerWidth(true);
}
if ($selector_children) {
$selector_children.each(function () {
var $zone = $(this);
@@ -632,7 +636,10 @@ data.Class = Widget.extend({
'display': 'inline-block'
});
} else if (float === "left" || float === "right") {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
$drop.css('float', float);
if (!isFullWidth($zone)) {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
}
}
$drop = $drop.clone();
@@ -647,7 +654,10 @@ data.Class = Widget.extend({
'display': 'inline-block'
});
} else if (float === "left" || float === "right") {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
$drop.css('float', float);
if (!isFullWidth($zone)) {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
}
}
if (test) {
$drop.css({'float': 'none', 'display': 'inline-block'});
@@ -668,14 +678,20 @@ data.Class = Widget.extend({
if($zone.prev('.oe_drop_zone:visible').length === 0) {
$drop = zone_template.clone();
if (float === "left" || float === "right") {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
$drop.css('float', float);
if (!isFullWidth($zone)) {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
}
}
$zone.before($drop);
}
if($zone.next('.oe_drop_zone:visible').length === 0) {
$drop = zone_template.clone();
if (float === "left" || float === "right") {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
$drop.css('float', float);
if (!isFullWidth($zone)) {
$drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
}
}
$zone.after($drop);
}
@@ -862,6 +878,7 @@ data.Editor = Class.extend({
},
_drag_and_drop_start: function () {
var self = this;
this.dropped = false;
self.buildingBlock.editor_busy = true;
self.size = {
width: self.$target.width(),
@@ -890,9 +907,18 @@ data.Editor = Class.extend({
self._drag_and_drop_after_insert_dropzone();
self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
},
_drag_and_drop_stop: function () {
_drag_and_drop_stop: function (ev, ui) {
var self = this;
// TODO lot of this is duplicated code of the d&d feature of snippets
if (!this.dropped) {
var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone').first();
if ($el.length) {
$el.after(this.$target);
this.dropped = true;
}
}
$(".oe_drop_zone").droppable('destroy').remove();
var prev = this.$target.first()[0].previousSibling;
addons/web_editor/static/src/less/web_editor.ui.less
+2 -2
View File
@@ -264,12 +264,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
&.oe_vertical {
border: 2px dashed @odoo-brand-primary;
border: @odoo-dropzone-border;
border-left: none;
border-right: none;
width: @odoo-dropzone-size;
float: left;
height: 100%;
margin: 0 -@odoo-dropzone-size/2;
&:after {