[IMP] website snippet: improve visibility of drop zone
bzr revid: chm@openerp.com-20131016101055-p6vhiijvladtbn87
This commit is contained in:
parent
12f6a051ff
commit
641477141f
|
@ -1,3 +1,4 @@
|
|||
@charset "utf-8";
|
||||
/* ---- CKEditor Minimal Reset ---- */
|
||||
.navbar.navbar-inverse .cke_chrome {
|
||||
border: none;
|
||||
|
@ -304,53 +305,87 @@ table.editorbar-panel td.selected {
|
|||
}
|
||||
|
||||
/* ---- SNIPPETS DROP ZONES ---- */
|
||||
.oe_drop_zone.oe_insert {
|
||||
display: block;
|
||||
height: 48px;
|
||||
margin: 0px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: -44px;
|
||||
-webkit-transition: margin 250ms linear;
|
||||
-moz-transition: margin 250ms linear;
|
||||
-o-transition: margin 250ms linear;
|
||||
transition: margin 250ms linear;
|
||||
#dark_for_dropzone {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.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;
|
||||
#dark_for_dropzone td {
|
||||
background: black;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_hover:before {
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72);
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_vertical {
|
||||
width: 48px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0px -24px !important;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_overlay {
|
||||
border-radius: 3px;
|
||||
background: rgba(153, 0, 255, 0.5);
|
||||
#dark_for_dropzone td.center.active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.oe_drop_zone, .oe_drop_zone_style {
|
||||
border: none;
|
||||
background: rgba(153, 0, 255, 0.3);
|
||||
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.oe_hover, .oe_drop_zone_style.oe_hover {
|
||||
background: rgba(0, 255, 133, 0.3);
|
||||
z-index: 1001;
|
||||
.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 {
|
||||
display: block;
|
||||
height: 48px;
|
||||
margin: 0px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: -44px;
|
||||
z-index: 1002;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.oe_drop_zone: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 {
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72);
|
||||
}
|
||||
.oe_drop_zone.oe_vertical {
|
||||
width: 48px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 4px -24px !important;
|
||||
}
|
||||
.oe_drop_zone.oe_vertical div {
|
||||
display: none;
|
||||
}
|
||||
.oe_drop_zone.oe_overlay {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.oe_drop_zone.oe_drop_active {
|
||||
background: rgba(100, 255, 255, 0.3);
|
||||
}
|
||||
.oe_drop_zone.oe_drop_active div {
|
||||
display: none;
|
||||
}
|
||||
.oe_drop_zone.oe_drop_active .oe_active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oe_drop_zone_style {
|
||||
|
|
|
@ -242,16 +242,45 @@ table.editorbar-panel
|
|||
|
||||
/* ---- SNIPPETS DROP ZONES ---- */
|
||||
|
||||
.oe_drop_zone.oe_insert
|
||||
#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
|
||||
display: block
|
||||
height: 48px
|
||||
margin: 0px
|
||||
margin-top: -4px
|
||||
margin-bottom: -44px
|
||||
@include transition(margin 250ms linear)
|
||||
z-index: 1002
|
||||
width: 100%
|
||||
position: absolute
|
||||
z-index: 1000
|
||||
&:not(.oe_vertical):before
|
||||
content: ""
|
||||
display: block
|
||||
|
@ -264,22 +293,17 @@ table.editorbar-panel
|
|||
width: 48px
|
||||
float: left
|
||||
position: relative
|
||||
margin: 0px -24px !important
|
||||
margin: 4px -24px !important
|
||||
div
|
||||
display: none
|
||||
&.oe_overlay
|
||||
border-radius: 3px
|
||||
//@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_active
|
||||
background: rgba(100, 255, 255, .3)
|
||||
div
|
||||
display: none
|
||||
.oe_active
|
||||
display: block
|
||||
|
||||
.oe_drop_zone_style
|
||||
color: white
|
||||
|
|
|
@ -216,5 +216,4 @@
|
|||
[data-snippet-id] {
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
}
|
|
@ -235,7 +235,10 @@ footer {
|
|||
}
|
||||
|
||||
.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
|
||||
position: static;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
@ -161,7 +161,9 @@ 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: static
|
||||
position: relative
|
||||
div
|
||||
display: none
|
||||
|
||||
.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'
|
||||
|
|
|
@ -308,17 +308,32 @@
|
|||
|
||||
}
|
||||
|
||||
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().after($toInsert);
|
||||
$(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');
|
||||
}
|
||||
},
|
||||
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(){
|
||||
|
@ -327,15 +342,8 @@
|
|||
});
|
||||
},
|
||||
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'){
|
||||
|
@ -386,7 +394,7 @@
|
|||
var sibling_selector = selector.siblings;
|
||||
var vertical_child_selector = selector.vertical_children;
|
||||
|
||||
var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
|
||||
var zone_template = openerp.qweb.render('website.snippet_drop_zone');
|
||||
|
||||
if(child_selector){
|
||||
self.dom_filter(child_selector).each(function (){
|
||||
|
@ -406,7 +414,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")))+'px');
|
||||
$template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")) - 8)+'px');
|
||||
$lastinsert = $template.clone();
|
||||
$(this).after($lastinsert);
|
||||
|
||||
|
@ -575,7 +583,8 @@
|
|||
* Displayed into the overlay options on focus
|
||||
*/
|
||||
_readXMLData: function() {
|
||||
this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone();
|
||||
var self = this;
|
||||
this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.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"));
|
||||
|
@ -610,18 +619,28 @@
|
|||
});
|
||||
},
|
||||
_drag_and_drop_after_insert_dropzone: function (){},
|
||||
_drag_and_drop_active_drop_zone: function ($zones){
|
||||
_drag_and_drop_active_drop_zone: function (){
|
||||
var self = this;
|
||||
$zones.droppable({
|
||||
var $dark = $("#dark_for_dropzone");
|
||||
$('.oe_drop_zone').droppable({
|
||||
over: function(){
|
||||
$(".oe_drop_zone.hide").removeClass("hide");
|
||||
$(this).addClass("hide").first().after(self.$target);
|
||||
$(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');
|
||||
self.dropped = true;
|
||||
},
|
||||
out: function(){
|
||||
$(this).removeClass("hide");
|
||||
$(this).removeClass("oe_drop_active");
|
||||
$dark.find("td.center").removeClass("active");
|
||||
self.$target.detach();
|
||||
self.dropped = false;
|
||||
$("body").scroll(); // trigger a scroll to reset position for jquery api
|
||||
},
|
||||
});
|
||||
},
|
||||
|
@ -645,8 +664,12 @@
|
|||
|
||||
$("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($('.oe_drop_zone'));
|
||||
self._drag_and_drop_active_drop_zone();
|
||||
},
|
||||
_drag_and_drop_stop: function (){
|
||||
var self = this;
|
||||
|
@ -656,6 +679,7 @@
|
|||
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();
|
||||
|
@ -953,23 +977,25 @@
|
|||
|
||||
_drag_and_drop_after_insert_dropzone: function(){
|
||||
var self = this;
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 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);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
},
|
||||
_drag_and_drop_start: function () {
|
||||
this._super();
|
||||
|
|
|
@ -31,8 +31,8 @@
|
|||
this one:
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-sm-offset-4 oe_drop_zone_style text-center">
|
||||
<span class="mt16">drop in this zone</span>
|
||||
<div class="col-sm-6 col-sm-offset-3 oe_drop_zone_style text-center">
|
||||
<div>drop in this zone</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
|
@ -57,6 +57,25 @@
|
|||
<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">
|
||||
|
|
Loading…
Reference in New Issue