diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 834baff3e35..33845547c46 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,3 +1,4 @@ +@charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -24,7 +25,7 @@ width: 100%; padding: 2px; margin: 0; - z-index: 10000; + z-index: 20000; background-color: #414141; background: -webkit-linear-gradient(#646060, #262626); box-sizing: border-box; @@ -118,7 +119,7 @@ table.editorbar-panel td.selected { background: #282828; box-shadow: 0px 10px 10px -10px black inset; overflow-y: auto; - z-index: 100; + z-index: 20000; } #oe_snippets .nav-pills { padding: 3px 8px; @@ -217,7 +218,7 @@ table.editorbar-panel td.selected { } .oe_drop_zone.oe_hover { background: rgba(0, 255, 133, 0.22); - z-index: 97; + z-index: 1001; } /* ---- SNIPPET MANIPULATOR ---- */ @@ -257,23 +258,33 @@ table.editorbar-panel td.selected { } .oe_overlay .oe_overlay_options { display: none; - z-index: 99; + z-index: 1002; } .oe_overlay .oe_overlay_options .oe_option { + top: 50%; + left: 50%; pointer-events: auto; position: absolute; + display: block; + z-index: 1002; } .oe_overlay .oe_overlay_options .oe_option.n { - top: 0px; + top: -11px; } .oe_overlay .oe_overlay_options .oe_option.e { - right: 0px; + left: auto; + right: -6px; } .oe_overlay .oe_overlay_options .oe_option.s { - bottom: 0px; + top: auto; + bottom: -10px; } .oe_overlay .oe_overlay_options .oe_option.w { - left: 0px; + left: -6px; +} +.oe_overlay .oe_overlay_options .oe_option > a { + text-decoration: none; + font-size: 1.2em; } .oe_overlay.oe_active .oe_overlay_options { display: block; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 3c1fe6a47f5..d3a58c91a13 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -25,7 +25,7 @@ width: 100% padding: 2px margin: 0 - z-index: 10000 + z-index: 20000 background-color: #414141 background: -webkit-linear-gradient(#646060, #262626) box-sizing: border-box @@ -109,7 +109,7 @@ table.editorbar-panel background: rgb(40,40,40) box-shadow: 0px 10px 10px -10px black inset overflow-y: auto - z-index: 100 + z-index: 20000 .nav-pills padding: 3px 8px background: #444444 @@ -195,7 +195,7 @@ table.editorbar-panel border-radius: 3px &.oe_hover background: rgba(0, 255, 133, 0.22) - z-index: 97 + z-index: 1001 /* ---- SNIPPET MANIPULATOR ---- */ @@ -229,18 +229,27 @@ table.editorbar-panel .oe_overlay_options display: none - z-index: 99 + z-index: 1002 .oe_option + top: 50% + left: 50% pointer-events: auto position: absolute + display: block + z-index: 1002 &.n - top: 0px + top: -11px &.e - right: 0px + left: auto + right: -6px &.s - bottom: 0px + top: auto + bottom: -10px &.w - left: 0px + left: -6px + > a + text-decoration: none + font-size: 1.2em &.oe_active .oe_overlay_options display: block diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index a6f4428b575..398870cd0d8 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -165,19 +165,18 @@ if (!self.active) { return; } - if (self.editor_busy) { - if($selected_target){ - $selected_target.data('overlay').removeClass('oe_selected'); - } - } var $target = $(event.srcElement).parents("[data-snippet-id]:first"); - if($target.length && $selected_target != $target){ - if($selected_target){ - $selected_target.data('overlay').removeClass('oe_selected'); + if($target.length && !self.editor_busy) { + if($selected_target != $target){ + if($selected_target){ + $selected_target.data('overlay').removeClass('oe_selected'); + } + $selected_target = $target; + self.create_overlay($target); + $target.data('overlay').addClass('oe_selected'); } - $selected_target = $target; - self.create_overlay($target); - $target.data('overlay').addClass('oe_selected'); + } else if($selected_target) { + $selected_target.data('overlay').removeClass('oe_selected'); } }); }, @@ -373,14 +372,7 @@ $targets.each(function () { var $target = $(this); if (!$target.data('overlay')) { - var $zone = $( - '
'+ - '
'+ - ' '+ - ' '+ - ' '+ - '
'+ - '
'); + var $zone = $(openerp.qweb.render('website.snippet_overlay')); $zone.appendTo('#oe_manipulators'); $zone.data('target',$target); $target.data('overlay',$zone); @@ -489,7 +481,8 @@ * This method is called after init and _readXMLData */ start: function () { - if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w")); + if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul")); + else this.$overlay.find(".oe_overlay_options .oe_option.n.w").hide(); }, /* @@ -548,7 +541,7 @@ this.$overlay.append($box.find(".oe_handles").html()); var $editor = $box.find(".oe_snippet_options"); - $editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w")); + $editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul")); $editor.on('click', '.js_box_remove', function () { self.$target.detach(); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 502f72eed1c..d58676dbde2 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -21,6 +21,24 @@ + +
+
+
+ + +
+
+
+ + +
+
+
+ +
@@ -28,15 +46,6 @@
- - -
  • - -
    • -
  • - -
    • -
    @@ -50,10 +59,18 @@
  • - + Add layer
  • - + Remove current layer +
    • +
  • +
    + test + +