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

[IMP] website: cleanup drop zones css and sort out z-index issues

Browse Source 
bzr revid: fva@openerp.com-20130823090757-ffqvcselr1merggk
This commit is contained in:
Frédéric van der Essen
2013-08-23 11:07:57 +02:00
parent 678bb7c4a0
commit 3ad504ffc4
3 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+20 -16
View File
@@ -58,6 +58,7 @@
display: none;
}
/* ---- SNIPPET EDITOR ---- */
.oe_snippets {
position: fixed;
left: 0px;
@@ -68,6 +69,7 @@
background: #282828;
box-shadow: 0px 10px 10px -10px black inset;
overflow-y: auto;
z-index: 100;
}
.oe_snippet {
@@ -84,6 +86,7 @@
overflow: hidden;
-webkit-user-select: none;
user-select: none;
cursor: move;
}
.oe_snippet .oe_snippet_thumbnail.oe_label {
text-align: center;
@@ -107,53 +110,54 @@
-webkit-transform: scale(0.095);
}
.oe_drop_zone {
/* ---- SNIPPETS DROP ZONES ---- */
.oe_drop_zone.oe_insert {
display: block;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
height: 32px;
margin: -16px 0px;
-webkit-transition: margin 250ms linear;
}
.oe_drop_zone:first-child:not(:last-child) {
.oe_drop_zone.oe_insert:first-child:not(:last-child) {
margin-top: -8px;
margin-bottom: -24px;
}
.oe_drop_zone:last-child:not(:first-child) {
.oe_drop_zone.oe_insert:last-child:not(:first-child) {
margin-top: -24px;
margin-bottom: -8px;
}
.oe_drop_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 100000;
}
.oe_drop_zone:before {
.oe_drop_zone.oe_insert:before {
content: "";
display: block;
border-top: dashed 2px rgba(209, 178, 255, 0.72);
position: relative;
top: 16px;
}
.oe_drop_zone:first-child:not(:last-child):before {
.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
top: 8px;
}
.oe_drop_zone:last-child:not(:first-child):before {
.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
top: 24px;
}
.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_hover_zone {
.oe_drop_zone.oe_mutate {
position: absolute;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
}
.oe_hover_zone.oe_hover {
.oe_drop_zone {
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
}
.oe_drop_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 100000;
z-index: 99;
}
/* ---- MOBILE PREVIEW ---- */
.oe_stop_scrolling {
height: 100%;
overflow: hidden;
addons/website/static/src/css/editor.sass
+15 -8
View File
@@ -51,6 +51,8 @@
z-index: 1
display: none
/* ---- SNIPPET EDITOR ---- */
.oe_snippets
position: fixed
left: 0px
@@ -61,6 +63,7 @@
background: rgb(40,40,40)
box-shadow: 0px 10px 10px -10px black inset
overflow-y: auto
z-index: 100
.oe_snippet
display: inline-block
@@ -76,6 +79,7 @@
overflow: hidden
-webkit-user-select: none
user-select: none
cursor: move
.oe_snippet_thumbnail.oe_label
text-align: center
@@ -98,10 +102,11 @@
-webkit-transform: scale(0.095)
.oe_drop_zone
/* ---- SNIPPETS DROP ZONES ---- */
.oe_drop_zone.oe_insert
display: block
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
height: 32px
margin: -16px 0px
-webkit-transition: margin 250ms linear
@@ -111,9 +116,6 @@
&:last-child:not(:first-child)
margin-top: -24px
margin-bottom: -8px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 100000
&:before
content: ""
display: block
@@ -127,14 +129,19 @@
&.oe_hover:before
border-top: dashed 2px rgba(116, 255, 161, 0.72)
.oe_hover_zone
.oe_drop_zone.oe_mutate
position: absolute
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
.oe_drop_zone
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 100000
z-index: 99
/* ---- MOBILE PREVIEW ---- */
.oe_stop_scrolling
height: 100%
addons/website/static/src/js/website.js
+9 -10
View File
@@ -370,6 +370,7 @@
this.$('.oe_snippet[data-action="insert"]').draggable({
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
start: function(){
var snippet = $(this);
@@ -403,27 +404,28 @@
this.$('.oe_snippet[data-action="mutate"]').draggable({
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
start: function(){
var snippet = $(this);
self.activate_hover_zones(snippet.data('selector'));
$('.oe_hover_zone').droppable({
$('.oe_drop_zone').droppable({
over: function(){
$(".oe_hover_zone.oe_hover").removeClass("oe_hover");
$(".oe_drop_zone.oe_hover").removeClass("oe_hover");
$(this).addClass("oe_hover");
},
out: function(){
$(this).removeClass("oe_hover");
},
drop: function(){
self.path_eval(snippet.data('action-function'))( $(".oe_hover_zone.oe_hover").data('target') );
self.path_eval(snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
},
});
},
stop: function(){
self.deactivate_hover_zones();
self.deactivate_drop_zones();
},
});
},
@@ -436,7 +438,7 @@
var self = this;
var child_selector = selector.childs || '';
var sibling_selector = selector.siblings || '';
var zone_template = "<div class='oe_drop_zone'></div>";
var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
$('.oe_drop_zone').remove();
@@ -520,8 +522,8 @@
return parents.length === 0;
});
var zone_template = "<div class='oe_hover_zone'></div>";
$('.oe_hover_zone').remove();
var zone_template = "<div class='oe_drop_zone oe_mutate'></div>";
$('.oe_drop_zone').remove();
for(var i = 0, len = $targets.length; i < len; i++){
var $target = $targets.eq(i);
@@ -535,9 +537,6 @@
$zone.data('target',$target);
}
},
deactivate_hover_zones: function(selector){
$('.oe_hover_zone').remove();
},
toggle: function(){
if(this.$el.hasClass('oe_hidden')){
this.$el.removeClass('oe_hidden');