-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;
.oe_overlay {
display: none;
+ height: 0;
position: absolute;
background: transparent;
-webkit-border-radius: 3px;
-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%;
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%;
-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);
-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 {
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;
overflow: hidden
+user-select(none)
cursor: move
- pointer-events: none
.oe_snippet_thumbnail
- pointer-events: auto
text-align: center
height: 100%
background: transparent
.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%
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%
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
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
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:
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");
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");
}
}
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) {
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);
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();
<div t-name="website.snippets.resize" data-snippet-id='resize'>
<!-- custom data for the widget -->
<div class='oe_handles'>
- <div class='oe_handle n'></div>
- <div class='oe_handle e'></div>
- <div class='oe_handle w'></div>
- <div class='oe_handle size'><div class="oe_handle_button size">Resize</div><div class="oe_border"/></div>
- <div class='oe_handle s'></div>
+ <div class='oe_handle n'><div></div></div>
+ <div class='oe_handle e'><div></div></div>
+ <div class='oe_handle w'><div></div></div>
+ <div class='oe_handle size'><div class="oe_handle_button size">Resize</div></div>
+ <div class='oe_handle s'><div></div></div>
</div>
<div class='oe_snippet_thumbnail'>Margin resize</div>
</div>