+@charset "utf-8";
/* ---- CKEditor Minimal Reset ---- */
.navbar.navbar-inverse .cke_chrome {
border: none;
}
/* ---- 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;
+}
+#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 {
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;
+ z-index: 1002;
width: 100%;
position: absolute;
- z-index: 1000;
}
-.oe_drop_zone.oe_insert:not(.oe_vertical):before {
+.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_insert.oe_hover:before {
+.oe_drop_zone.oe_hover:before {
border-top: dashed 2px rgba(116, 255, 161, 0.72);
}
-.oe_drop_zone.oe_insert.oe_vertical {
+.oe_drop_zone.oe_vertical {
width: 48px;
float: left;
position: relative;
- margin: 0px -24px !important;
+ margin: 4px -24px !important;
}
-.oe_drop_zone.oe_insert.oe_overlay {
+.oe_drop_zone.oe_vertical div {
+ display: none;
+}
+.oe_drop_zone.oe_overlay {
border-radius: 3px;
- background: rgba(153, 0, 255, 0.5);
}
-
-.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 {
+ background: rgba(100, 255, 255, 0.3);
}
-.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
- background: rgba(0, 255, 133, 0.3);
- z-index: 1001;
+.oe_drop_zone.oe_drop_active div {
+ display: none;
+}
+.oe_drop_zone.oe_drop_active .oe_active {
+ display: block;
}
.oe_drop_zone_style {
/* ---- 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
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
[data-snippet-id] {
min-height: 10px;
min-width: 10px;
-}
-
+}
\ No newline at end of file
}
.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 {
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'
}
+ 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(){
});
},
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'){
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 (){
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);
* 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"));
});
},
_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
},
});
},
$("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;
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();
_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();
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">
<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">
projects / odoo / odoo.git / commitdiff