diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index f05db4c88b8..6da7eb01a04 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -441,11 +441,20 @@ ul.oe_menu_editor .disclose { 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_active .oe_handle { +.oe_overlay .oe_handle { display: block !important; pointer-events: auto; + position: absolute; + top: 50%; + left: 50%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 12px; + height: 12px; + margin: -2px; } -.oe_overlay.oe_active .oe_handle:before { +.oe_overlay .oe_handle:before { position: relative; top: 50%; left: 50%; @@ -470,23 +479,49 @@ ul.oe_menu_editor .disclose { -o-transition: background 100ms linear; transition: background 100ms linear; } -.oe_overlay.oe_active .oe_handle:hover:before { +.oe_overlay .oe_handle:hover:before { background: rgba(0, 0, 0, 0.5); color: white; -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); -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_active .oe_handle.e:before { +.oe_overlay .oe_handle.e { + left: auto; + top: 2px; + height: 100%; + right: -4px; + cursor: w-resize; +} +.oe_overlay .oe_handle.e:before { content: "\F061"; } -.oe_overlay.oe_active .oe_handle.s:before { +.oe_overlay .oe_handle.s { + top: auto; + left: 2px; + width: 100%; + bottom: -4px; + cursor: n-resize; +} +.oe_overlay .oe_handle.s:before { content: "\F063"; } -.oe_overlay.oe_active .oe_handle.w:before { +.oe_overlay .oe_handle.w { + top: 2px; + height: 100%; + left: -4px; + cursor: e-resize; +} +.oe_overlay .oe_handle.w:before { content: "\F060"; } -.oe_overlay.oe_active .oe_handle.n:before { +.oe_overlay .oe_handle.n { + left: 2px; + width: 100%; + top: -4px; + cursor: s-resize; +} +.oe_overlay .oe_handle.n:before { content: "\F062"; } .oe_overlay .icon.btn { @@ -528,36 +563,6 @@ ul.oe_menu_editor .disclose { margin: -4px; } -.oe_handle.n { - left: 2px; - width: 100%; - top: 0px; - cursor: s-resize; -} - -.oe_handle.e { - left: auto; - top: 2px; - height: 100%; - right: 0px; - cursor: w-resize; -} - -.oe_handle.s { - top: auto; - left: 2px; - width: 100%; - bottom: 0px; - cursor: n-resize; -} - -.oe_handle.w { - top: 2px; - height: 100%; - left: 0px; - cursor: e-resize; -} - .s-resize-important, .s-resize-important * { cursor: s-resize !important; } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 1e35c352374..2c775be3b04 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -331,37 +331,66 @@ ul.oe_menu_editor 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 - &:before - position: relative - top: 50% - left: 50% - display: block - background: rgba(255, 255, 255, 1) - border: solid 1px rgba(0, 0, 0, .2) - +border-radius(5px) - width: 18px - height: 18px - margin: -9px - padding-left: 1px - font-size: 14px - line-height: 14px - font-family: FontAwesome - color: rgba(0,0,0,.5) - @include transition(background 100ms linear) - &:hover:before - background: rgba(0, 0, 0, .5) - color: #fff - +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) - .oe_handle.e:before + .oe_handle + display: block !important + pointer-events: auto + position: absolute + top: 50% + left: 50% + +box-sizing(border-box) + width: 12px + height: 12px + margin: -2px + &:before + position: relative + top: 50% + left: 50% + display: block + background: rgba(255, 255, 255, 1) + border: solid 1px rgba(0, 0, 0, .2) + +border-radius(5px) + width: 18px + height: 18px + margin: -9px + padding-left: 1px + font-size: 14px + line-height: 14px + font-family: FontAwesome + color: rgba(0,0,0,.5) + @include transition(background 100ms linear) + &:hover:before + background: rgba(0, 0, 0, .5) + color: #fff + +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) + .oe_handle.e + left: auto + top: 2px + height: 100% + right: -4px + cursor: w-resize + &:before content: "\F061" - .oe_handle.s:before + .oe_handle.s + top: auto + left: 2px + width: 100% + bottom: -4px + cursor: n-resize + &:before content: "\F063" - .oe_handle.w:before + .oe_handle.w + top: 2px + height: 100% + left: -4px + cursor: e-resize + &:before content: "\F060" - .oe_handle.n:before + .oe_handle.n + left: 2px + width: 100% + top: -4px + cursor: s-resize + &:before content: "\F062" .icon.btn @@ -395,29 +424,6 @@ ul.oe_menu_editor height: 8px margin: -4px -.oe_handle.n - left: 2px - width: 100% - top: 0px - cursor: s-resize -.oe_handle.e - left: auto - top: 2px - height: 100% - right: 0px - cursor: w-resize -.oe_handle.s - top: auto - left: 2px - width: 100% - bottom: 0px - cursor: n-resize -.oe_handle.w - top: 2px - height: 100% - left: 0px - cursor: e-resize - .s-resize-important, .s-resize-important * cursor: s-resize !important .n-resize-important, .n-resize-important * diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index 6d9a2ff0ea1..c083aeea70f 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -184,23 +184,24 @@ bind_snippet_click_editor: function () { var self = this; var snipped_event_flag = false; - $("body").on('click', "[data-oe-model] [data-snippet-id], [data-oe-model][data-snippet-id]", function (event) { - if (snipped_event_flag) { - return; - } - snipped_event_flag = true; - setTimeout(function () {snipped_event_flag = false;}, 0); - var $target = $(event.currentTarget); - if (self.$active_snipped_id && self.$active_snipped_id.is($target)) { - return; - } - self.make_active($target); - }); - $("[data-oe-model]").on('click', function () { - if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) { - self.make_active(false); - } - }); + $("#wrapwrap").on('click', function (event) { + if (snipped_event_flag) { + return; + } + snipped_event_flag = true; + setTimeout(function () {snipped_event_flag = false;}, 0); + var $target = $(event.srcElement); + if (!$target.attr("data-snippet-id")) { + $target = $target.parents("[data-snippet-id]:first"); + } + if (!$target.attr("data-oe-model") && !$target.parents("[data-oe-model]:first").length) { + $target = false; + } + if (self.$active_snipped_id && self.$active_snipped_id.is($target)) { + return; + } + self.make_active($target); + }); }, snippet_blur: function ($snipped_id) { if ($snipped_id) { @@ -233,7 +234,7 @@ this.snippet_blur(this.$active_snipped_id); this.$active_snipped_id = false; } - if ($snipped_id) { + if ($snipped_id && $snipped_id.length) { if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) { this.snippets.push($snipped_id.get(0)); } diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 549b997e794..ecc3bb8cc38 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -61,7 +61,7 @@