[WIP] website: snippets: work

bzr revid: chm@openerp.com-20130909144940-f08v6egk5pijz29b
This commit is contained in:
Christophe Matthieu
2013-09-09 16:49:40 +02:00
parent 0b199c50e5
commit 7bcc4f4d1d
4 changed files with 48 additions and 12 deletions
+6 -2
View File
@@ -197,6 +197,10 @@
box-sizing: border-box;
pointer-events: none;
}
.oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
position: absolute;
pointer-events: none;
}
.oe_snippet_manipulator .oe_handle {
display: none;
}
@@ -204,13 +208,13 @@
opacity: 1;
cursor: pointer;
}
.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active {
.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active, .oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
opacity: 1;
background: transparent;
border: dashed 1px rgba(153, 0, 255, 0.5);
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
}
.oe_snippet_manipulator.oe_selected > *, .oe_snippet_manipulator.oe_active > * {
.oe_snippet_manipulator.oe_selected .oe_handle, .oe_snippet_manipulator.oe_active .oe_handle, .oe_snippet_manipulator .oe_boxsize .oe_handle, .oe_snippet_manipulator .oe_margin .oe_handle {
pointer-events: auto;
}
.oe_snippet_manipulator .oe_buttons {
+5 -2
View File
@@ -177,17 +177,20 @@
transition: opacity 100ms linear
box-sizing: border-box
pointer-events: none
.oe_boxsize, .oe_margin
position: absolute
pointer-events: none
.oe_handle
display: none
&.oe_hover
opacity: 1
cursor: pointer
&.oe_selected, &.oe_active
&.oe_selected, &.oe_active, .oe_boxsize, .oe_margin
opacity: 1
background: transparent
border: dashed 1px rgba(153, 0, 255, 0.5)
box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
& > *
.oe_handle
pointer-events: auto
.oe_buttons
display: none
@@ -482,11 +482,35 @@
website.snippet.editorRegistry.box = website.snippet.Editor.extend({
onFocus : function () {
this._super();
var self = this;
this.$target.data('manipulator')
.append($(openerp.qweb.render("website.snippets.box")).find(".oe_handles").html())
.addClass('oe_active');
var $box = $(openerp.qweb.render("website.snippets.box"));
$box.find(".oe_snippet_editorbar").prependTo(this.parent.$('#website-top-edit .nav.pull-right'));
this.$target.data('manipulator').append($box.find(".oe_handles").html()).addClass('oe_active');
function padding_margin_cover ($manipulator, $snippet) {
var height = parseInt($snippet.height() || 0);
var width = parseInt($snippet.width() || 0);
var $padding = $manipulator.find(".oe_boxsize").css({
top: parseInt($snippet.css('padding-top')) + 'px',
bottom: parseInt($snippet.css('padding-bottom')) + 'px',
//height: (height - (parseInt($snippet.css('padding-top')) || 0) - (parseInt($snippet.css('padding-bottom')) || 0)) + 'px',
left: parseInt($snippet.css('padding-left')) + 'px',
right: parseInt($snippet.css('padding-right')) + 'px',
//width: (width - (parseInt($snippet.css('padding-left')) || 0) - (parseInt($snippet.css('padding-right')) || 0)) + 'px',
});
var $margin = $manipulator.find(".oe_margin").css({
top: -parseInt($snippet.css('margin-top')) + 'px',
bottom: -parseInt($snippet.css('margin-bottom')) + 'px',
//height: (height + (parseInt($snippet.css('margin-top')) || 0) + (parseInt($snippet.css('margin-bottom')) || 0)) + 'px',
left: -parseInt($snippet.css('margin-left')) + 'px',
right: -parseInt($snippet.css('margin-right')) + 'px',
//width: (width + (parseInt($snippet.css('margin-left')) || 0) + (parseInt($snippet.css('margin-right')) || 0)) + 'px',
});
}
padding_margin_cover( this.$target.data('manipulator'), this.$target);
this.$target.data('manipulator').find(".oe_handle").on('mousedown', function (event){
event.preventDefault();
@@ -537,6 +561,7 @@
//$snippet.css('width', (size[1]+dx)+'px');
}
website.snippet.cover_target($manipulator, $snippet);
padding_margin_cover($manipulator, $snippet);
};
$('body').mousemove(body_mousemove);
@@ -549,13 +574,15 @@
};
$('body').mouseup(body_mouseup);
});
this._super();
},
onBlur : function () {
this._super();
this.$target.data('manipulator')
.removeClass('oe_active')
.empty();
},
this.parent.$('#website-top-edit .nav.pull-right > .box_resize').remove();
},
});
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.box.extend({
@@ -17,13 +17,15 @@
<div t-name="website.snippets.box" data-snippet-id='box'>
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_editorbar'>
<i class='icon-move oe_icon js_move'></i>
<i class='icon-remove oe_icon js_remove'></i>
<li class='oe_snippet_editorbar box_resize'>
<a href="#" class="button js_box_move"><i class='icon icon-move'></i></a>
<a href="#" class="button js_box_remove"><i class="icon icon-remove"></i></a>
</li>
<!-- custom data for the widget -->
<div class='oe_handles'>
<div class='oe_boxsize'></div>
<div class='oe_margin'></div>
<div class='oe_handle n'></div>
<div class='oe_handle ne'></div>
<div class='oe_handle e'></div>