From 3ad504ffc432fe92baefbbc5429a3fabcacfd64c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Fri, 23 Aug 2013 11:07:57 +0200 Subject: [PATCH] [IMP] website: cleanup drop zones css and sort out z-index issues bzr revid: fva@openerp.com-20130823090757-ffqvcselr1merggk --- addons/website/static/src/css/editor.css | 36 +++++++++++++---------- addons/website/static/src/css/editor.sass | 23 ++++++++++----- addons/website/static/src/js/website.js | 19 ++++++------ 3 files changed, 44 insertions(+), 34 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index cd9ecc8f8a0..7cb2dc08a4f 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -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; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 3c54a0d0aaf..45078e12b0b 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -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% diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index ed95981f1d4..928723feec5 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -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 = "
"; + var zone_template = "
"; $('.oe_drop_zone').remove(); @@ -520,8 +522,8 @@ return parents.length === 0; }); - var zone_template = "
"; - $('.oe_hover_zone').remove(); + var zone_template = "
"; + $('.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');