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

[IMP] website: missing commits for the snippet editor

Browse Source 
bzr revid: fva@openerp.com-20130826100126-j26u21dchvwjijnh
This commit is contained in:
Frédéric van der Essen
2013-08-26 12:01:26 +02:00
parent 6c220f78bb 7e8ad30842
commit 04f97cf6e3
7 changed files with 308 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+77 -16
View File
@@ -58,6 +58,7 @@
display: none;
}
/* ---- SNIPPET EDITOR ---- */
.oe_snippets {
position: fixed;
left: 0px;
@@ -68,6 +69,7 @@
background: #282828;
box-shadow: 0px 10px 10px -10px black inset;
overflow-y: auto;
z-index: 100;
}
.oe_snippet {
@@ -84,6 +86,7 @@
overflow: hidden;
-webkit-user-select: none;
user-select: none;
cursor: move;
}
.oe_snippet .oe_snippet_thumbnail.oe_label {
text-align: center;
@@ -107,53 +110,111 @@
-webkit-transform: scale(0.095);
}
.oe_drop_zone {
/* ---- SNIPPETS DROP ZONES ---- */
.oe_drop_zone.oe_insert {
display: block;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
height: 32px;
margin: -16px 0px;
-webkit-transition: margin 250ms linear;
}
.oe_drop_zone:first-child:not(:last-child) {
.oe_drop_zone.oe_insert:first-child:not(:last-child) {
margin-top: -8px;
margin-bottom: -24px;
}
.oe_drop_zone:last-child:not(:first-child) {
.oe_drop_zone.oe_insert:last-child:not(:first-child) {
margin-top: -24px;
margin-bottom: -8px;
}
.oe_drop_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 100000;
}
.oe_drop_zone:before {
.oe_drop_zone.oe_insert:before {
content: "";
display: block;
border-top: dashed 2px rgba(209, 178, 255, 0.72);
position: relative;
top: 16px;
}
.oe_drop_zone:first-child:not(:last-child):before {
.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
top: 8px;
}
.oe_drop_zone:last-child:not(:first-child):before {
.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
top: 24px;
}
.oe_drop_zone.oe_hover:before {
.oe_drop_zone.oe_insert.oe_hover:before {
border-top: dashed 2px rgba(116, 255, 161, 0.72);
}
.oe_hover_zone {
.oe_drop_zone.oe_overlay {
position: absolute;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
}
.oe_hover_zone.oe_hover {
.oe_drop_zone {
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
}
.oe_drop_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 100000;
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%;
overflow: hidden;
addons/website/static/src/css/editor.sass
+60 -8
View File
@@ -51,6 +51,8 @@
z-index: 1
display: none
/* ---- SNIPPET EDITOR ---- */
.oe_snippets
position: fixed
left: 0px
@@ -61,6 +63,7 @@
background: rgb(40,40,40)
box-shadow: 0px 10px 10px -10px black inset
overflow-y: auto
z-index: 100
.oe_snippet
display: inline-block
@@ -76,6 +79,7 @@
overflow: hidden
-webkit-user-select: none
user-select: none
cursor: move
.oe_snippet_thumbnail.oe_label
text-align: center
@@ -98,10 +102,11 @@
-webkit-transform: scale(0.095)
.oe_drop_zone
/* ---- SNIPPETS DROP ZONES ---- */
.oe_drop_zone.oe_insert
display: block
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
height: 32px
margin: -16px 0px
-webkit-transition: margin 250ms linear
@@ -111,9 +116,6 @@
&:last-child:not(:first-child)
margin-top: -24px
margin-bottom: -8px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 100000
&:before
content: ""
display: block
@@ -127,14 +129,64 @@
&.oe_hover:before
border-top: dashed 2px rgba(116, 255, 161, 0.72)
.oe_hover_zone
.oe_drop_zone.oe_overlay
position: absolute
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
.oe_drop_zone
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 100000
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
height: 100%
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
+100 -50
View File
@@ -39,7 +39,7 @@
/* ----- TOP EDITOR BAR FOR ADMIN ---- */
website.EditorBar = openerp.Widget.extend({
template: 'Website.EditorBar',
template: 'website.editorbar',
events: {
'click button[data-action=edit]': 'edit',
'click button[data-action=save]': 'save',
@@ -293,7 +293,7 @@
if($button.hasClass("js_add")) {
var cycle = $c.find(".carousel-inner .item").size();
$c.find(".carousel-inner").append(QWeb.render("Website.Snipped.carousel"));
$c.find(".carousel-inner").append(openerp.qweb.render("website.carousel"));
$c.carousel(cycle);
}
else {
@@ -368,16 +368,23 @@
start_snippets: function(){
var self = this;
this.$('.oe_snippet[data-action="insert"]').draggable({
this.$('.oe_snippet').draggable({
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
start: function(){
var snippet = $(this);
var action = snippet.data('action');
self.activate_drop_zones({
siblings: snippet.data('selector-siblings'),
childs: snippet.data('selector-childs')
});
self.deactivate_snippet_manipulators();
if( action === 'insert'){
self.activate_insertion_zones({
siblings: snippet.data('selector-siblings'),
childs: snippet.data('selector-childs')
});
}else if( action === 'mutate' ){
self.activate_overlay_zones(snippet.data('selector'));
}
$('.oe_drop_zone').droppable({
over: function(){
@@ -390,53 +397,33 @@
$(this).removeClass("oe_hover");
},
drop: function(){
$(".oe_drop_zone.oe_hover")
.replaceWith(snippet.find('.oe_snippet_body').clone())
.removeClass('oe_snippet_body');
if( action === 'insert' ){
$(".oe_drop_zone.oe_hover")
.replaceWith(snippet.find('.oe_snippet_body').clone())
.removeClass('oe_snippet_body');
}else if( action === 'mutate' ){
self.path_eval(snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
}
},
});
},
stop: function(){
self.deactivate_drop_zones();
self.deactivate_zones();
self.activate_snippet_manipulators();
},
});
this.$('.oe_snippet[data-action="mutate"]').draggable({
helper: 'clone',
appendTo: 'body',
start: function(){
var snippet = $(this);
self.activate_hover_zones(snippet.data('selector'));
$('.oe_hover_zone').droppable({
over: function(){
$(".oe_hover_zone.oe_hover").removeClass("oe_hover");
$(this).addClass("oe_hover");
},
out: function(){
$(this).removeClass("oe_hover");
},
drop: function(){
self.path_eval(snippet.data('action-function'))( $(".oe_hover_zone.oe_hover").data('target') );
},
});
},
stop: function(){
self.deactivate_hover_zones();
},
});
},
// 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 || '';
var zone_template = "<div class='oe_drop_zone'></div>";
var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
$('.oe_drop_zone').remove();
@@ -499,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){
@@ -520,29 +508,91 @@
return parents.length === 0;
});
var zone_template = "<div class='oe_hover_zone'></div>";
$('.oe_hover_zone').remove();
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);
}
},
deactivate_hover_zones: function(selector){
$('.oe_hover_zone').remove();
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
+66 -59
View File
@@ -2,75 +2,82 @@
<!-- vim:fdl=1:
-->
<templates id="template" xml:space="preserve">
<t t-name="Website.EditorBar">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner" id="website-top-view">
<form class="navbar-form pull-left">
<button data-action="edit" class="btn btn-primary">Edit</button>
</form>
<ul class="nav pull-right">
<li><a data-action="show-mobile-preview" href="#mobile-preview" data-toggle="modal" role="button"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
<li class="divider-vertical"></li>
<li><a href="#">Promote<!-- <sup><span class="badge">1</span></sup> --></a></li>
<li><a href="#">Translate</a></li>
<li class="dropdown">
<a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">Customize <span class="caret"></span></a>
<div class="dropdown-menu">
<ul class="nav nav-list" id="customize-menu">
<!-- filled in JS -->
</ul>
</div>
</li>
<li>
<a href="/admin#action=website.action_module_website">Apps</a>
</li>
</ul>
</div>
<div class="navbar-inner" id="website-top-edit">
<form class="navbar-form pull-left">
<button data-action="save" class="btn btn-primary">Save</button>
<button data-action="cancel" class="btn">Cancel</button>
</form>
<ul class="nav pull-right">
<li><button data-action="snippet" class="btn btn-primary">Building Blocks</button></li>
</ul>
</div>
</div>
<t t-name="website.editorbar">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner" id="website-top-view">
<form class="navbar-form pull-left">
<button data-action="edit" class="btn btn-primary">Edit</button>
</form>
<ul class="nav pull-right">
<li><a data-action="show-mobile-preview" href="#mobile-preview" data-toggle="modal" role="button"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
<li class="divider-vertical"></li>
<li><a href="#">Promote<!-- <sup><span class="badge">1</span></sup> --></a></li>
<li><a href="#">Translate</a></li>
<li class="dropdown">
<a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">Customize <span class="caret"></span></a>
<div class="dropdown-menu">
<ul class="nav nav-list" id="customize-menu">
<!-- filled in JS -->
</ul>
</div>
</li>
<li>
<a href="/admin#action=website.action_module_website">Apps</a>
</li>
</ul>
</div>
<div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
<div class="modal-header oe_mobile_preview_header">
<button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="mobile-preview-title" class="oe_mobile_preview_title">Mobile preview</h3>
</div>
<div class="modal-body">
<div class="oe_mobile_preview">
<iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
<div class="navbar-inner" id="website-top-edit">
<form class="navbar-form pull-left">
<button data-action="save" class="btn btn-primary">Save</button>
<button data-action="cancel" class="btn">Cancel</button>
</form>
<ul class="nav pull-right">
<li><button data-action="snippet" class="btn btn-primary">Building Blocks</button></li>
</ul>
</div>
</div>
</div>
</t>
<t t-name="Website.ActionGroup">
<div class="dropdown">
<button type="button" class="oe_button_list dropdown-toggle">
<t t-esc="widget.name"/>
</button>
<ul class="dropdown-menu" role="menu"/>
</div>
</t>
<t t-name="Website.Snipped.carousel">
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
<div class='container'>
<h1 class='mt64'>Your New Banner Slide</h1>
<h2>With another convincing subtitle</h2>
<div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
<div class="modal-header oe_mobile_preview_header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="mobile-preview-title" class="oe_mobile_preview_title">Mobile preview</h3>
</div>
<div class="modal-body">
<div class="oe_mobile_preview">
<iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
</div>
</div>
</div>
</div>
</t>
</t>
<t t-name="website.carousel">
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
<div class='container'>
<h1 class='mt64'>Your New Banner Slide</h1>
<h2>With another convincing subtitle</h2>
</div>
</div>
</t>
<t t-name="website.snippets">
<div class='oe_snippets oe_hidden'>
</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">