From cfeac71d6a004c73c7afb0bd3d5d23410e541549 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Wed, 26 Feb 2014 18:55:58 +0100 Subject: [PATCH] [FIX] website: editor: pointer-events:none for ie doesn't work (because ie). Change snippet overlay to fix this ie bug bzr revid: chm@openerp.com-20140226175558-2gyix2zgdawf87yz --- addons/website/static/src/css/snippets.css | 78 +++++++++++-------- addons/website/static/src/css/snippets.sass | 64 +++++++-------- .../website/static/src/js/website.editor.js | 1 - .../static/src/js/website.snippets.editor.js | 31 ++++++-- .../static/src/xml/website.snippets.xml | 10 +-- 5 files changed, 107 insertions(+), 77 deletions(-) diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index 18f3852db2c..a19baa33fd6 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -80,10 +80,8 @@ -moz-user-select: none; user-select: none; cursor: move; - pointer-events: none; } .oe_snippet .oe_snippet_thumbnail { - pointer-events: auto; text-align: center; height: 100%; background: transparent; @@ -200,6 +198,7 @@ .oe_overlay { display: none; + height: 0; position: absolute; background: transparent; -webkit-border-radius: 3px; @@ -214,20 +213,12 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - pointer-events: none; } .oe_overlay.oe_active { display: block; - border-style: dashed; - border-width: 1px; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - border-color: rgba(0, 0, 0, 0.5); } .oe_overlay .oe_handle { display: block !important; - pointer-events: auto; position: absolute; top: 50%; left: 50%; @@ -238,7 +229,18 @@ height: 16px; margin: -2px; } +.oe_overlay .oe_handle > div { + z-index: 1; + position: absolute; + border-style: dashed; + border-width: 1px; + border-color: #666666; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; +} .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button { + z-index: 2; position: relative; top: 50%; left: 50%; @@ -270,56 +272,70 @@ -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); } +.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w { + top: 4px; + height: 100%; +} .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before { content: "\f0d9-\f0da"; line-height: 16px; } +.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div { + width: 0; + height: 100%; + top: 2px; + left: 8px; +} .oe_overlay .oe_handle.e { left: auto; - top: 2px; - height: 100%; right: -6px; cursor: w-resize; } .oe_overlay .oe_handle.w { - top: 2px; - height: 100%; left: -6px; cursor: e-resize; } +.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n { + left: 2px; + width: 100%; +} .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before { - z-index: 0; content: "\f07d"; text-align: center; padding: 1px; } +.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div { + width: 100%; + height: 0; + top: 7px; + left: 1px; +} .oe_overlay .oe_handle.s { top: auto; - left: 2px; - width: 100%; - bottom: -6px; cursor: n-resize; } .oe_overlay .oe_handle.n { - left: 2px; - width: 100%; - top: -6px; cursor: s-resize; } +.oe_overlay .oe_handle.n > div { + top: 5px; +} .oe_overlay .oe_handle.size { + z-index: 3; top: auto; - left: 2px; - width: 100%; + left: 50%; bottom: -6px; } .oe_overlay .oe_handle.size .oe_handle_button { - z-index: 1; + z-index: 3; content: "Resize"; width: 64px; text-align: center; margin-left: -32px; margin-top: -10px; cursor: row-resize; + left: 0px; + top: 9px; } .oe_overlay .oe_handle.size .oe_handle_button:hover { background: rgba(30, 30, 30, 0.8); @@ -328,25 +344,20 @@ -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); } -.oe_overlay .oe_handle.size div { - border-style: dashed; - border-width: 0 0 1px 0; - border-color: rgba(0, 0, 0, 0.5); - position: relative; - top: 8px; -} .oe_overlay .icon.btn { display: inline-block; } .oe_overlay .oe_overlay_options { position: absolute; - width: 100%; + left: 50% !important; text-align: center; top: -11px; z-index: 1002; } +.oe_overlay .oe_overlay_options > .btn-group { + left: -50%; +} .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { - pointer-events: auto; cursor: pointer; } .oe_overlay .oe_overlay_options .dropdown { @@ -505,7 +516,6 @@ box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59); } .oe_snippet_editor .oe_snippet > * { - pointer-events: none; margin-top: 16px; line-height: 1em; zoom: 0.6; diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass index d185ddd2932..afdb261a2a5 100644 --- a/addons/website/static/src/css/snippets.sass +++ b/addons/website/static/src/css/snippets.sass @@ -64,9 +64,7 @@ overflow: hidden +user-select(none) cursor: move - pointer-events: none .oe_snippet_thumbnail - pointer-events: auto text-align: center height: 100% background: transparent @@ -150,22 +148,17 @@ .oe_overlay display: none + height: 0 position: absolute background: transparent //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) +border-radius(3px) @include transition(opacity 100ms linear) +box-sizing(border-box) - pointer-events: none &.oe_active display: block - border-style: dashed - border-width: 1px - +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset) - border-color: rgba(0, 0, 0, 0.5) .oe_handle display: block !important - pointer-events: auto position: absolute top: 50% left: 50% @@ -173,7 +166,15 @@ width: 16px height: 16px margin: -2px + > div + z-index: 1 + position: absolute + border-style: dashed + border-width: 1px + border-color: #666666 + +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset) &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button + z-index: 2 position: relative top: 50% left: 50% @@ -196,72 +197,74 @@ color: #fff +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) &.e, &.w + top: 4px + height: 100% &:before content: "\f0d9-\f0da" line-height: 16px + > div + width: 0 + height: 100% + top: 2px + left: 8px &.e left: auto - top: 2px - height: 100% right: -6px cursor: w-resize &.w - top: 2px - height: 100% left: -6px cursor: e-resize &.s, &.n + left: 2px + width: 100% &:before - z-index: 0 content: "\f07d" text-align: center padding: 1px + > div + width: 100% + height: 0 + top: 7px + left: 1px &.s top: auto - left: 2px - width: 100% - bottom: -6px cursor: n-resize &.n - left: 2px - width: 100% - top: -6px cursor: s-resize + > div + top: 5px &.size + z-index: 3 top: auto - left: 2px - width: 100% + left: 50% bottom: -6px .oe_handle_button - z-index: 1 + z-index: 3 content: "Resize" width: 64px text-align: center margin-left: -32px margin-top: -10px cursor: row-resize + left: 0px + top: 9px &:hover background: rgba(30, 30, 30, .8) color: #fff +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) - div - border-style: dashed - border-width: 0 0 1px 0 - border-color: rgba(0, 0, 0, 0.5) - position: relative - top: 8px .icon.btn display: inline-block .oe_overlay_options position: absolute - width: 100% + left: 50% !important text-align: center top: -11px z-index: 1002 + > .btn-group + left: -50% .btn, a - pointer-events: auto cursor: pointer .dropdown display: inline-block @@ -392,7 +395,6 @@ border: 2px solid rgb(151, 137, 255) box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59) & > * - pointer-events: none margin-top: 16px line-height: 1em zoom: 0.6 diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index f782f2ff83a..c7a3e1ecf9f 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -839,7 +839,6 @@ document.execCommand("enableInlineTableEditing", false, "false"); } catch (e) {} - // detect & setup any CKEDITOR widget within a newly dropped // snippet. There does not seem to be a simple way to do it for // HTML not inserted via ckeditor APIs: diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index 8fc642bf1c6..b20e0645253 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -190,13 +190,14 @@ var mt = parseInt($target.css("margin-top") || 0); var mb = parseInt($target.css("margin-bottom") || 0); $el.css({ - 'position': 'absolute', 'width': $target.outerWidth(), - 'height': $target.outerHeight() + mt + mb+1, - 'top': pos.top - mt, + 'top': pos.top - mt - 5, 'left': pos.left }); - $el.find(".oe_handle.size").css("bottom", (mb-7)+'px'); + $el.find(">.e,>.w").css({'height': $target.outerHeight() + mt + mb+1}); + $el.find(">.s").css({'top': $target.outerHeight() + mt + mb}); + $el.find(">.size").css({'top': $target.outerHeight() + mt}); + $el.find(">.s,>.n").css({'width': $target.outerWidth()-2}); }, show: function () { this.$el.removeClass("hidden"); @@ -213,8 +214,8 @@ bind_snippet_click_editor: function () { var self = this; - $(document).on('click', "#wrapwrap", function (event) { - var $target = $(event.srcElement); + $("#wrapwrap").on('click', function (event) { + var $target = $(event.srcElement || event.target); if (!$target.attr("data-snippet-id")) { $target = $target.parents("[data-snippet-id]:first"); } @@ -256,6 +257,9 @@ } if (this.$active_snipped_id) { this.snippet_blur(this.$active_snipped_id); + this.$active_snipped_id.data("overlay").remove(); + this.$active_snipped_id.removeData("overlay"); + this.$active_snipped_id.removeData("snippet-editor"); this.$active_snipped_id = false; } if ($snippet && $snippet.length) { @@ -571,6 +575,20 @@ var $target = $(this); if (!$target.data('overlay')) { var $zone = $(openerp.qweb.render('website.snippet_overlay')); + + // fix for pointer-events: none with ie9 + if (document.body && document.body.addEventListener) { + $zone.on("click mousedown mousedown", function passThrough(event) { + event.preventDefault(); + $target.each(function() { + // check if clicked point (taken from event) is inside element + event.srcElement = this; + $(this).trigger(event.type); + }); + return false; + }); + } + $zone.appendTo('#oe_manipulators'); $zone.data('target',$target); $target.data('overlay',$zone); @@ -783,6 +801,7 @@ this.parent = parent; this.$target = $(dom); this.$overlay = this.$target.data('overlay'); + this.$overlay.find('a[data-toggle="dropdown"]').dropdown(); this.snippet_id = this.$target.data("snippet-id"); this._readXMLData(); this.load_style_options(); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index d73e0c3934a..ae109139e3c 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -46,11 +46,11 @@
-
-
-
-
Resize
-
+
+
+
+
Resize
+
Margin resize