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

[IMP] website: snippet resizing

Browse Source 
bzr revid: fva@openerp.com-20130823160411-xoxek62wwhi5w3by
This commit is contained in:
Frédéric van der Essen
2013-08-23 18:04:11 +02:00
parent 8b23e73241
commit 306138327f
7 changed files with 204 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+58 -1
View File
@@ -142,7 +142,7 @@
border-top: dashed 2px rgba(116, 255, 161, 0.72);
}
.oe_drop_zone.oe_mutate {
.oe_drop_zone.oe_overlay {
position: absolute;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
@@ -157,6 +157,63 @@
z-index: 99;
}
/* ---- SNIPPET MANIPULATOR ---- */
.oe_snippet_manipulator {
display: block;
position: absolute;
background: rgba(153, 0, 255, 0.1);
border-radius: 3px;
border: solid 1px rgba(153, 0, 255, 0.5);
opacity: 0;
transition: opacity 100ms linear;
}
.oe_snippet_manipulator > .oe_handle {
display: none;
}
.oe_snippet_manipulator:hover, .oe_snippet_manipulator.oe_hover {
opacity: 1;
}
.oe_snippet_manipulator:hover > .oe_handle, .oe_snippet_manipulator.oe_hover > .oe_handle {
display: block;
}
.oe_handle {
position: absolute;
top: 50%;
left: 50%;
display: block;
background: white;
border: solid 1px rgba(153, 0, 255, 0.5);
box-sizing: border-box;
border-radius: 2px;
width: 16px;
height: 16px;
margin: -8px;
cursor: move;
-webkit-transition: background 100ms linear;
}
.oe_handle:hover {
background: #9900ff;
}
.oe_handle.nw, .oe_handle.n, .oe_handle.ne {
top: 0px;
}
.oe_handle.ne, .oe_handle.e, .oe_handle.se {
left: auto;
right: 0px;
}
.oe_handle.sw, .oe_handle.s, .oe_handle.se {
top: auto;
bottom: 0px;
}
.oe_handle.nw, .oe_handle.w, .oe_handle.sw {
left: 0px;
}
/* ---- MOBILE PREVIEW ---- */
.oe_stop_scrolling {
height: 100%;
addons/website/static/src/css/editor.sass
+46 -1
View File
@@ -129,7 +129,7 @@
&.oe_hover:before
border-top: dashed 2px rgba(116, 255, 161, 0.72)
.oe_drop_zone.oe_mutate
.oe_drop_zone.oe_overlay
position: absolute
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
@@ -141,6 +141,51 @@
background: rgba(0, 255, 133, 0.22)
z-index: 99
/* ---- SNIPPET MANIPULATOR ---- */
.oe_snippet_manipulator
display: block
position: absolute
background: rgba(153, 0, 255, 0.1)
border-radius: 3px
border: solid 1px rgba(153, 0, 255, 0.5)
opacity: 0
transition: opacity 100ms linear
& > .oe_handle
display: none
&:hover,&.oe_hover
opacity: 1
& > .oe_handle
display: block
.oe_handle
position: absolute
top: 50%
left: 50%
display: block
background: rgba(255, 255, 255, 1)
border: solid 1px rgba(153, 0, 255, 0.5)
box-sizing: border-box
border-radius: 2px
width: 16px
height: 16px
margin: -8px
cursor: move
-webkit-transition: background 100ms linear
&:hover
background: rgb(153, 0, 255)
.oe_handle.nw,.oe_handle.n,.oe_handle.ne
top: 0px
.oe_handle.ne,.oe_handle.e,.oe_handle.se
left: auto
right: 0px
.oe_handle.sw,.oe_handle.s,.oe_handle.se
top: auto
bottom: 0px
.oe_handle.nw,.oe_handle.w,.oe_handle.sw
left: 0px
/* ---- MOBILE PREVIEW ---- */
.oe_stop_scrolling
addons/website/static/src/css/website.css
-2
View File
@@ -161,6 +161,4 @@ header.navbar-fixed-top {
.dark {
background: #eff8f8;
padding-top: 32px;
padding-bottom: 32px;
}
addons/website/static/src/css/website.sass
-2
View File
@@ -121,7 +121,5 @@ header.navbar-fixed-top
.dark
background: rgb(239, 248, 248)
padding-top: 32px
padding-bottom: 32px
addons/website/static/src/js/website.js
+82 -14
View File
@@ -368,7 +368,7 @@
start_snippets: function(){
var self = this;
this.$('.oe_snippe').draggable({
this.$('.oe_snippet').draggable({
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
@@ -376,13 +376,14 @@
var snippet = $(this);
var action = snippet.data('action');
self.deactivate_snippet_manipulators();
if( action === 'insert'){
self.activate_drop_zones({
self.activate_insertion_zones({
siblings: snippet.data('selector-siblings'),
childs: snippet.data('selector-childs')
});
}else if( action === 'mutate' ){
self.activate_hover_zones(snippet.data('selector'));
self.activate_overlay_zones(snippet.data('selector'));
}
$('.oe_drop_zone').droppable({
@@ -407,17 +408,18 @@
});
},
stop: function(){
self.deactivate_drop_zones();
self.deactivate_zones();
self.activate_snippet_manipulators();
},
});
},
// A generic drop zone generator. two css selectors can be provided
// Create element insertion drop zones. two css selectors can be provided
// selector.childs -> will insert drop zones as direct child of the selected elements
// in case the selected elements have children themselves, dropzones will be interleaved
// with them.
// selector.siblings -> will insert drop zones after and before selected elements
activate_drop_zones: function(selector){
activate_insertion_zones: function(selector){
var self = this;
var child_selector = selector.childs || '';
var sibling_selector = selector.siblings || '';
@@ -484,10 +486,11 @@
}
}
},
deactivate_drop_zones: function(){
deactivate_zones: function(){
$('.oe_drop_zone').remove();
},
activate_hover_zones: function(selector){
activate_overlay_zones: function(selector){
var $targets = $(selector);
function is_visible($el){
@@ -505,26 +508,91 @@
return parents.length === 0;
});
var zone_template = "<div class='oe_drop_zone oe_mutate'></div>";
var zone_template = "<div class='oe_drop_zone oe_overlay'></div>";
$('.oe_drop_zone').remove();
for(var i = 0, len = $targets.length; i < len; i++){
var $target = $targets.eq(i);
var $zone = $(zone_template);
$zone.css({
'width': $target.outerWidth(),
'height': $target.outerHeight(),
});
$zone.css($target.offset());
this.cover_target($zone,$target);
$zone.appendTo('body');
$zone.data('target',$target);
}
},
cover_target: function($el, $target){
$el.css({
'position': 'absolute',
'width': $target.outerWidth(),
'height': $target.outerHeight(),
});
$el.css($target.offset());
},
activate_snippet_manipulators: function(){
var self = this;
this.activate_overlay_zones('#wrap .container');
var $snippets = $('.oe_drop_zone');
for(var i = 0, len = $snippets.length; i < len; i++){
var $snippet = $snippets.eq(i);
var $manipulator = $(openerp.qweb.render('website.snippet_manipulator'));
$manipulator.css({
'top': $snippet.css('top'),
'left': $snippet.css('left'),
'width': $snippet.css('width'),
'height': $snippet.css('height'),
});
$manipulator.data('target',$snippet.data('target'));
$manipulator.appendTo('body');
$snippet.remove();
$manipulator.find('.oe_handle').mousedown(function(event){
var $handle = $(this);
var $manipulator = $handle.parent();
var $snippet = $manipulator.data('target');
var x = event.pageX;
var y = event.pageY;
var pt = $snippet.css('padding-top');
var pb = $snippet.css('padding-bottom');
pt = Number(pt.slice(0,pt.length - 2)) || 0; //FIXME something cleaner to remove 'px'
pb = Number(pb.slice(0,pb.length - 2)) || 0;
$manipulator.addClass('oe_hover');
event.preventDefault();
$('body').mousemove(function(event){
var dx = event.pageX - x;
var dy = event.pageY - y;
event.preventDefault();
if($handle.hasClass('n') || $handle.hasClass('nw') || $handle.hasClass('ne')){
$snippet.css('padding-top',pt-dy+'px');
self.cover_target($manipulator,$snippet);
}else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){
$snippet.css('padding-bottom',pb+dy+'px');
self.cover_target($manipulator,$snippet);
}
});
$('body').mouseup(function(){
$('body').unbind('mousemove');
$('body').unbind('mouseup');
self.deactivate_snippet_manipulators();
self.activate_snippet_manipulators();
});
});
}
},
deactivate_snippet_manipulators: function(){
$('.oe_snippet_manipulator').remove();
},
toggle: function(){
if(this.$el.hasClass('oe_hidden')){
this.$el.removeClass('oe_hidden');
this.activate_snippet_manipulators();
}else{
this.$el.addClass('oe_hidden');
this.deactivate_snippet_manipulators();
}
},
});
addons/website/static/src/xml/website.xml
+13
View File
@@ -67,4 +67,17 @@
</div>
</t>
<t t-name="website.snippet_manipulator">
<div class='oe_snippet_manipulator'>
<div class='oe_handle n'></div>
<div class='oe_handle ne'></div>
<div class='oe_handle e'></div>
<div class='oe_handle se'></div>
<div class='oe_handle s'></div>
<div class='oe_handle sw'></div>
<div class='oe_handle w'></div>
<div class='oe_handle nw'></div>
</div>
</t>
</templates>
addons/website/views/views.xml
+5 -5
View File
@@ -401,20 +401,20 @@
<template id="snippets">
<div class='oe_snippet' name='Darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
<div class='oe_snippet' data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
<div class='oe_snippet_thumbnail oe_label'>Darken</div>
</div>
<div class='oe_snippet' name='Darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
<div class='oe_snippet' data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
</div>
<div class='oe_snippet' name='Spacer' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' data-snippet-id='spacer' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet_thumbnail oe_label'>Spacer</div>
<div class="oe_snippet_body container mt32"></div>
</div>
<div class='oe_snippet' name='FooBar' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' data-snippet-id='title' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet_thumbnail oe_label'>
Main Title
</div>
@@ -428,7 +428,7 @@
</section>
</div>
<div class='oe_snippet' name='BarFoo' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' data-snippet-id='' data-action='insert' data-selector-siblings='#wrap .container'>
<section class="oe_snippet_body container">
<div class="row">
<div class="span12 text-center">