pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website editor snippets: move and add label

Browse Source 
bzr revid: chm@openerp.com-20130913093518-kzla5hif1o1ubii5
This commit is contained in:
Christophe Matthieu
2013-09-13 11:35:18 +02:00
parent a793a8ff16
commit cf7984b656
4 changed files with 114 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+26 -20
View File
@@ -224,9 +224,6 @@ table.editorbar-panel td.selected {
box-sizing: border-box;
pointer-events: none;
}
.oe_overlay .oe_handle {
display: none !important;
}
.oe_overlay.oe_hover {
opacity: 1;
cursor: pointer;
@@ -241,6 +238,9 @@ table.editorbar-panel td.selected {
.oe_overlay.oe_selected {
border-color: rgba(0, 153, 255, 0.5);
}
.oe_overlay .oe_handle {
display: none !important;
}
.oe_overlay.oe_active {
border-color: rgba(153, 0, 255, 0.5);
}
@@ -248,35 +248,37 @@ table.editorbar-panel td.selected {
display: block !important;
pointer-events: auto;
}
.oe_overlay .icon.btn {
display: inline-block;
}
.oe_overlay .oe_overlay_options {
display: none;
z-index: 1002;
}
.oe_overlay .oe_overlay_options .oe_option {
top: 50%;
left: 50%;
pointer-events: auto;
.oe_overlay .oe_overlay_options .oe_options, .oe_overlay .oe_overlay_options .oe_label, .oe_overlay .oe_overlay_options .oe_move {
position: absolute;
display: block;
z-index: 1002;
}
.oe_overlay .oe_overlay_options .oe_option.n {
top: -11px;
}
.oe_overlay .oe_overlay_options .oe_option.e {
left: auto;
right: -6px;
.oe_overlay .oe_overlay_options .oe_options {
pointer-events: auto;
left: -14px;
}
.oe_overlay .oe_overlay_options .oe_option.s {
top: auto;
bottom: -10px;
.oe_overlay .oe_overlay_options .oe_label {
top: -8px;
right: 6px;
background: white;
font-size: 75%;
color: rgba(153, 0, 255, 0.5);
padding: 0 5px;
}
.oe_overlay .oe_overlay_options .oe_option.w {
left: -6px;
.oe_overlay .oe_overlay_options .oe_move {
pointer-events: auto;
left: 50%;
}
.oe_overlay .oe_overlay_options .oe_option > a {
text-decoration: none;
font-size: 1.2em;
.oe_overlay .oe_overlay_options .oe_move .js_box_move {
margin-left: -50%;
}
.oe_overlay.oe_active .oe_overlay_options {
display: block;
@@ -340,6 +342,10 @@ table.editorbar-panel td.selected {
cursor: w-resize !important;
}
.move-important, .move-important * {
cursor: move !important;
}
/* ---- MOBILE PREVIEW ---- */
.oe_mobile_preview.modal .modal-content {
height: 660px;
addons/website/static/src/css/editor.sass
+23 -19
View File
@@ -202,8 +202,6 @@ table.editorbar-panel
transition: opacity 100ms linear
box-sizing: border-box
pointer-events: none
.oe_handle
display: none !important
&.oe_hover
opacity: 1
cursor: pointer
@@ -215,35 +213,39 @@ table.editorbar-panel
box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
&.oe_selected
border-color: rgba(0, 153, 255, 0.5)
.oe_handle
display: none !important
&.oe_active
border-color: rgba(153, 0, 255, 0.5)
.oe_handle
display: block !important
pointer-events: auto
.icon.btn
display: inline-block
.oe_overlay_options
display: none
z-index: 1002
.oe_option
top: 50%
left: 50%
pointer-events: auto
.oe_options,.oe_label,.oe_move
position: absolute
display: block
z-index: 1002
&.n
top: -11px
&.e
left: auto
right: -6px
&.s
top: auto
bottom: -10px
&.w
left: -6px
> a
text-decoration: none
font-size: 1.2em
top: -11px
.oe_options
pointer-events: auto
left: -14px
.oe_label
top: -8px
right: 6px
background: #fff
font-size: 75%
color: rgba(153, 0, 255, 0.5)
padding: 0 5px
.oe_move
pointer-events: auto
left: 50%
.js_box_move
margin-left: -50%
&.oe_active .oe_overlay_options
display: block
@@ -289,6 +291,8 @@ table.editorbar-panel
cursor: e-resize !important
.w-resize-important, .w-resize-important *
cursor: w-resize !important
.move-important, .move-important *
cursor: move !important
/* ---- MOBILE PREVIEW ---- */
addons/website/static/src/js/website.snippets.js
+56 -3
View File
@@ -197,6 +197,7 @@
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
cursor: "move",
start: function(){
var action = $snippet.data('action');
if( action === 'insert'){
@@ -485,24 +486,74 @@
this.$editor = this.$el.find(".oe_snippet_options");
this.$thumbnail = this.$el.find(".oe_snippet_thumbnail");
this.$body = this.$el.find(".oe_snippet_body");
var $options = this.$overlay.find(".oe_overlay_options");
this.$editor.prependTo($options.find(".oe_options ul"));
$options.find(".oe_label").text(this.$el.find('.oe_snippet_thumbnail.oe_label, .oe_snippet_thumbnail .oe_label').text());
}
},
// activate drag and drop for the snippets in the snippet toolbar
_drag_and_drop: function(){
var self = this;
var drop = false;
this.$overlay.draggable({
appendTo: 'body',
cursor: "move",
cursorAt: {
top: self.$target.outerHeight()/2,
left: self.$target.outerWidth()/2 },
distance: 20,
handle: ".js_box_move",
start: function(){
self.parent.editor_busy = true;
self.parent.activate_insertion_zones({
siblings: self.$el ? self.$el.data('selector-siblings') : false,
childs: self.$el ? self.$el.data('selector-childs') : false,
});
self.$target.after("<div id='oe_pointer_drag_and_drop' style='display:none;'></div>");
self.$target.detach();
$("body").addClass('move-important');
drop = false;
$('.oe_drop_zone').droppable({
hoverClass: "oe_hover",
drop: function(){
if (!$(".oe_drop_zone.oe_hover").length) {
return false;
}
$(".oe_drop_zone.oe_hover").after(self.$target);
drop = true;
},
});
},
stop: function(){
$("body").removeClass('move-important');
$('.oe_drop_zone').droppable('destroy').remove();
if (!drop) {
$('#oe_pointer_drag_and_drop').after(self.$target);
}
$('#oe_pointer_drag_and_drop').remove();
self.parent.editor_busy = false;
setTimeout(function () {self.parent.make_active(self.$target);},0);
},
});
},
/*
* start
* This method is called after init and _readXMLData
*/
start: function () {
var self = this;
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();
this.$overlay.on('click', '.js_box_remove', function () {
self.$target.detach();
self.onBlur();
self.$target.remove();
return false;
});
this._drag_and_drop();
},
/*
@@ -547,6 +598,7 @@
website.snippet.editorRegistry.resize = website.snippet.Editor.extend({
template : "website.snippets.resize",
start: function () {
var self = this;
this._super();
@@ -663,6 +715,7 @@
});
website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.resize.extend({
template : "website.snippets.colmd",
getSize: function () {
this.grid = this._super();
var width = this.$target.parents(".row:first").first().outerWidth();
addons/website/static/src/xml/website.snippets.xml
+9 -7
View File
@@ -24,17 +24,14 @@
<t t-name="website.snippet_overlay">
<div class="oe_overlay">
<div class="oe_overlay_options">
<div class="dropdown oe_option n w">
<a data-toggle="dropdown" href="#"><i class="icon icon-cog"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>
</div>
<div class="oe_option n"><a href="#" class="js_box_move"><i class="icon icon-move"></i></a></div>
<div class="dropdown oe_option n e">
<a data-toggle="dropdown" href="#"><i class="icon icon-remove"></i></a>
<div class="dropdown oe_options">
<i data-toggle="dropdown" class="btn btn-primary icon icon-cog"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
</ul>
</div>
<div class="oe_label"></div>
<div class="oe_move"><i class="js_box_move icon btn btn-primary icon-move"></i></div>
</div>
</div>
</t>
@@ -53,6 +50,11 @@
<div class='oe_handle w'></div>
<div class='oe_handle s'></div>
</div>
<div class='oe_snippet_thumbnail oe_label'>Margin resize</div>
</div>
<div t-name="website.snippets.colmd" data-snippet-id='colmd' data-action='insert' data-selector-childs='.row'>
<div class='oe_snippet_thumbnail oe_label'>Column</div>
</div>
<div t-name="website.snippets.carousel" data-snippet-id='carousel' data-category='emphasize' data-action='insert' data-selector-siblings='.container'>