odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[REVERT] snippets drop zone too complex 

bzr revid: fp@tinyerp.com-20131017141959-fpkds0a7e1m1sfrw
This commit is contained in:
Fabien Pinckaers 2013-10-17 16:19:59 +02:00
parent fc43a53079
commit 99723a8a9f
7 changed files with 90 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
addons/website/static/src/css/editor.css
View File

@ -305,87 +305,53 @@ table.editorbar-panel td.selected {
}
/* ---- SNIPPETS DROP ZONES ---- */
#dark_for_dropzone {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
z-index: 1000;
pointer-events: none;
}
#dark_for_dropzone td {
background: black;
}
#dark_for_dropzone td.center.active {
background: transparent;
}
.oe_drop_zone, .oe_drop_zone_style {
border: none;
background: rgba(100, 255, 255, 0.9);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.oe_drop_zone div, .oe_drop_zone_style div {
margin: 0;
line-height: 48px;
text-align: center;
color: magenta;
font-weight: bold;
font-size: 24px;
}
.oe_drop_zone .oe_active, .oe_drop_zone_style .oe_active {
display: none;
}
.oe_drop_zone_style div {
line-height: 24px;
}
.oe_drop_zone {
.oe_drop_zone.oe_insert {
display: block;
height: 48px;
margin: 0px;
margin-top: -4px;
margin-bottom: -44px;
z-index: 1002;
-webkit-transition: margin 250ms linear;
-moz-transition: margin 250ms linear;
-o-transition: margin 250ms linear;
transition: margin 250ms linear;
width: 100%;
position: absolute;
z-index: 1000;
}
.oe_drop_zone:not(.oe_vertical):before {
.oe_drop_zone.oe_insert:not(.oe_vertical):before {
content: "";
display: block;
border-top: dashed 2px rgba(209, 178, 255, 0.72);
position: relative;
top: 0px;
}
.oe_drop_zone.oe_hover:before {
.oe_drop_zone.oe_insert.oe_hover:before {
border-top: dashed 2px rgba(116, 255, 161, 0.72);
}
.oe_drop_zone.oe_vertical {
.oe_drop_zone.oe_insert.oe_vertical {
width: 48px;
float: left;
position: relative;
margin: 4px -24px !important;
margin: 0px -24px !important;
}
.oe_drop_zone.oe_vertical div {
display: none;
}
.oe_drop_zone.oe_overlay {
.oe_drop_zone.oe_insert.oe_overlay {
border-radius: 3px;
background: rgba(153, 0, 255, 0.5);
}
.oe_drop_zone.oe_drop_active {
background: rgba(100, 255, 255, 0.3);
.oe_drop_zone, .oe_drop_zone_style {
border: none;
background: rgba(153, 0, 255, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.oe_drop_zone.oe_drop_active div {
display: none;
}
.oe_drop_zone.oe_drop_active .oe_active {
display: block;
.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
background: rgba(0, 255, 133, 0.3);
z-index: 1001;
}
.oe_drop_zone_style {

58
addons/website/static/src/css/editor.sass
View File

@ -242,45 +242,16 @@ table.editorbar-panel
/* ---- SNIPPETS DROP ZONES ---- */
#dark_for_dropzone
width: 100%
position: absolute
top: 0
left: 0
opacity: 0.4
z-index: 1000
pointer-events: none
td
background: #000
&.center.active
background: transparent
.oe_drop_zone, .oe_drop_zone_style
border: none
background: rgba(100, 255, 255, .9)
+border-radius(4px)
div
margin: 0
line-height: 48px
text-align: center
color: #FF00FF
font-weight: bold
font-size: 24px
.oe_active
display: none
.oe_drop_zone_style div
line-height: 24px
.oe_drop_zone
.oe_drop_zone.oe_insert
display: block
height: 48px
margin: 0px
margin-top: -4px
margin-bottom: -44px
z-index: 1002
@include transition(margin 250ms linear)
width: 100%
position: absolute
z-index: 1000
&:not(.oe_vertical):before
content: ""
display: block
@ -293,17 +264,22 @@ table.editorbar-panel
width: 48px
float: left
position: relative
margin: 4px -24px !important
div
display: none
margin: 0px -24px !important
&.oe_overlay
border-radius: 3px
&.oe_drop_active
background: rgba(100, 255, 255, .3)
div
display: none
.oe_active
display: block
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//background-size: 100px 100px
background: rgba(153, 0, 255,.5)
.oe_drop_zone, .oe_drop_zone_style
border: none
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
//background-size: 100px 100px
background: rgba(153, 0, 255, .3)
+border-radius(4px)
&.oe_hover
background: rgba(0, 255, 133, .3)
z-index: 1001
.oe_drop_zone_style
color: white

3
addons/website/static/src/css/snippets.css
View File

@ -216,4 +216,5 @@
[data-snippet-id] {
min-height: 10px;
min-width: 10px;
}
}

5
addons/website/static/src/css/website.css
View File

@ -235,10 +235,7 @@ footer {
}
.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
position: relative;
}
.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child div, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child div {
display: none;
position: static;
}
.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {

4
addons/website/static/src/css/website.sass
View File

@ -161,9 +161,7 @@ footer
height: 220px !important
.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
position: relative
div
display: none
position: static
.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
content: 'Click Edit To Create Content'

104
addons/website/static/src/js/website.snippets.js
View File

@ -319,32 +319,17 @@
}
var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone'))
.css('height', $("body")[0].scrollHeight + 'px');
$("body").append($dark);
$('.oe_drop_zone').droppable({
over: function(){
if( action === 'insert'){
dropped = true;
$(this).first().addClass("oe_drop_active").after($toInsert);
$dark.find("td:first")
.css('height', $toInsert.offset().top+'px');
$dark.find("tr:eq(1) td:first")
.css('width', $toInsert.offset().left+'px');
$dark.find("td.center")
.addClass("active")
.css('height', $toInsert.outerHeight()+'px')
.css('width', $toInsert.outerWidth()+'px');
$(this).first().after($toInsert);
}
},
out: function(){
if( action === 'insert'){
$(this).removeClass("oe_drop_active");
dropped = false;
$toInsert.detach();
$dark.find("td.center").removeClass("active");
$("body").scroll(); // trigger a scroll to reset position for jquery api
}
},
drop: function(){
@ -353,8 +338,15 @@
});
},
stop: function(ev, ui){
if (action === 'insert' && ! dropped) {
var el = $('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first()
if (el) {
el.after($toInsert)
dropped = true;
}
}
$('.oe_drop_zone').droppable('destroy').remove();
$("#dark_for_dropzone").remove();
if (dropped) {
var $target = false;
if(action === 'insert'){
@ -405,7 +397,7 @@
var sibling_selector = selector.siblings;
var vertical_child_selector = selector.vertical_children;
var zone_template = openerp.qweb.render('website.snippet_drop_zone');
var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
if(child_selector){
self.dom_filter(child_selector).each(function (){
@ -425,7 +417,7 @@
var temp_left = 0;
$zone.find('> *:not(.oe_drop_zone):visible').each(function () {
var $col = $(this);
$template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")) - 8)+'px');
$template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px');
$lastinsert = $template.clone();
$(this).after($lastinsert);
@ -594,8 +586,7 @@
* Displayed into the overlay options on focus
*/
_readXMLData: function() {
var self = this;
this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone();
this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone();
this.$editor = this.$el.find(".oe_snippet_options");
var $options = this.$overlay.find(".oe_overlay_options");
this.$editor.prependTo($options.find(".oe_options ul"));
@ -630,28 +621,18 @@
});
},
_drag_and_drop_after_insert_dropzone: function (){},
_drag_and_drop_active_drop_zone: function (){
_drag_and_drop_active_drop_zone: function ($zones){
var self = this;
var $dark = $("#dark_for_dropzone");
$('.oe_drop_zone').droppable({
$zones.droppable({
over: function(){
$(this).first().addClass("oe_drop_active").after(self.$target);
$dark.find("td:first")
.css('height', self.$target.offset().top+'px');
$dark.find("tr:eq(1) td:first")
.css('width', self.$target.offset().left+'px');
$dark.find("td.center")
.addClass("active")
.css('height', self.$target.outerHeight()+'px')
.css('width', self.$target.outerWidth()+'px');
$(".oe_drop_zone.hide").removeClass("hide");
$(this).addClass("hide").first().after(self.$target);
self.dropped = true;
},
out: function(){
$(this).removeClass("oe_drop_active");
$dark.find("td.center").removeClass("active");
$(this).removeClass("hide");
self.$target.detach();
self.dropped = false;
$("body").scroll(); // trigger a scroll to reset position for jquery api
},
});
},
@ -675,12 +656,8 @@
$("body").addClass('move-important');
var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone'))
.css('height', $("body")[0].scrollHeight + 'px');
$("body").append($dark);
self._drag_and_drop_after_insert_dropzone();
self._drag_and_drop_active_drop_zone();
self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
},
_drag_and_drop_stop: function (){
var self = this;
@ -690,7 +667,6 @@
self.$overlay.removeClass("hidden");
$("body").removeClass('move-important');
$('.oe_drop_zone').droppable('destroy').remove();
$('#dark_for_dropzone').remove();
$(".oe_drop_clone, .oe_drop_to_remove").remove();
self.parent.editor_busy = false;
self.get_parent_block();
@ -988,25 +964,23 @@
_drag_and_drop_after_insert_dropzone: function(){
var self = this;
// commented for perf
// var $zones = $(".row:has(> .oe_drop_zone)").each(function () {
// var $row = $(this);
// var width = $row.innerWidth();
// var pos = 0;
// while (width > pos + self.size.width) {
// var $last = $row.find("> .oe_drop_zone:last");
// $last.each(function () {
// pos = $(this).position().left;
// });
// if (width > pos + self.size.width) {
// $row.append("<div class='col-md-1 oe_drop_to_remove'/>");
// var $add_drop = $last.clone();
// $row.append($add_drop);
// self._drag_and_drop_active_drop_zone($add_drop);
// }
// }
// });
var $zones = $(".row:has(> .oe_drop_zone)").each(function () {
var $row = $(this);
var width = $row.innerWidth();
var pos = 0;
while (width > pos + self.size.width) {
var $last = $row.find("> .oe_drop_zone:last");
$last.each(function () {
pos = $(this).position().left;
});
if (width > pos + self.size.width) {
$row.append("<div class='col-md-1 oe_drop_to_remove'/>");
var $add_drop = $last.clone();
$row.append($add_drop);
self._drag_and_drop_active_drop_zone($add_drop);
}
}
});
},
_drag_and_drop_start: function () {
this._super();
@ -1100,6 +1074,14 @@
self.$target.carousel();
});
this.$target.on('dblclick', '.item.active .carousel-image img', function (event) {
var $img = $(event.currentTarget);
var editor = new website.editor.ImageDialog();
editor.on('start', self, function (o) {o.url = $img.attr("src");});
editor.on('save', self, function (o) {$img.attr("src", o.url);});
editor.appendTo($('body'));
});
this.rebind_event();
},
// rebind event to active carousel on edit mode

23
addons/website/static/src/xml/website.snippets.xml
View File

@ -31,8 +31,8 @@
this one:
</p>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 oe_drop_zone_style text-center">
<div>drop in this zone</div>
<div class="col-sm-4 col-sm-offset-4 oe_drop_zone_style text-center">
<span class="mt16">drop in this zone</span>
</div>
</div>
<div class="text-muted">
@ -57,25 +57,6 @@
<div id='oe_snippets'></div>
</t>
<t t-name="website.snippet_drop_zone">
<div class='oe_drop_zone oe_insert'>
<div>Drag your block here (move your mouse in this zone)</div>
<div class="oe_active">Drop your block</div>
</div>
</t>
<t t-name="website.snippet_dark_for_dropzone">
<div id="dark_for_dropzone">
<table width="100%" height="100%">
<tbody>
<tr><td colspan="3"></td></tr>
<tr><td></td><td class="center"></td><td></td></tr>
<tr><td colspan="3"></td></tr>
</tbody>
</table>
</div>
</t>
<t t-name="website.snippet_overlay">
<div class="oe_overlay">
<div class="oe_overlay_options">