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

[IMP] website snippet: preview

Browse Source 
bzr revid: chm@openerp.com-20130917133144-jbgre8v0g29kzrdy
This commit is contained in:
Christophe Matthieu
2013-09-17 15:31:44 +02:00
parent 3826e87296
commit 7b190b1a56
4 changed files with 98 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+19 -23
View File
@@ -151,43 +151,39 @@ table.editorbar-panel td.selected {
.oe_snippet {
display: inline-block;
vertical-align: top;
background: white;
width: 120px;
height: 120px;
border-radius: 3px;
margin: 10px;
margin-right: 0px;
position: relative;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
-webkit-user-select: none;
user-select: none;
cursor: move;
}
.oe_snippet .oe_snippet_thumbnail.oe_label {
text-align: center;
background: #747474;
background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
height: 100%;
line-height: 120px;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
}
.oe_snippet .oe_snippet_body {
display: none;
}
.oe_snippet > * {
pointer-events: none;
}
.oe_snippet > :not(.oe_snippet_body):not(.oe_snippet_thumbnail) {
.oe_snippet .oe_snippet_thumbnail.oe_label {
pointer-events: auto;
text-align: center;
height: 100%;
line-height: 120px;
background: transparent;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
position: relative;
}
.oe_snippet .oe_snippet_thumbnail.oe_label span, .oe_snippet .oe_snippet_thumbnail.oe_label div {
line-height: 18px;
}
.oe_snippet > :not(.oe_snippet_thumbnail) {
display: none !important;
}
.oe_snippet > *:first-child:not(.oe_snippet_thumbnail) {
display: block;
-webkit-transform-origin-x: 5px;
-webkit-transform-origin-y: 10px;
-webkit-transform: scale(0.095);
#oe_snippets .oe_snippet_thumbnail.oe_label {
background: #747474;
background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
}
/* ---- SNIPPETS DROP ZONES ---- */
addons/website/static/src/css/editor.sass
+11 -16
View File
@@ -140,41 +140,36 @@ table.editorbar-panel
.oe_snippet
display: inline-block
vertical-align: top
background: white
width: 120px
height: 120px
border-radius: 3px
margin: 10px
margin-right: 0px
position: relative
box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
overflow: hidden
-webkit-user-select: none
user-select: none
cursor: move
pointer-events: none
.oe_snippet_thumbnail.oe_label
pointer-events: auto
text-align: center
background: rgb(116, 116, 116)
background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
height: 100%
line-height: 120px
background: transparent
color: white
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
.oe_snippet_body
display: none
& > *
pointer-events: none
& > :not(.oe_snippet_body):not(.oe_snippet_thumbnail)
position: relative
span, div
line-height: 18px
& > :not(.oe_snippet_thumbnail)
display: none !important
& > *:first-child:not(.oe_snippet_thumbnail)
display: block
-webkit-transform-origin-x: 5px
-webkit-transform-origin-y: 10px
-webkit-transform: scale(0.095)
#oe_snippets .oe_snippet_thumbnail.oe_label
background: rgb(116, 116, 116)
background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
/* ---- SNIPPETS DROP ZONES ---- */
addons/website/static/src/js/website.snippets.js
+10 -12
View File
@@ -74,7 +74,7 @@
},
dom_filter: function (dom) {
if (typeof dom === "string") {
var exclude = ":not(#oe_manipulators):not(#website-top-navbar)";
var exclude = ":not(#oe_manipulators):not(#website-top-navbar):not(.oe_snippet)";
var sdom = dom.split(',');
dom = "";
_.each(sdom, function (val) {
@@ -86,7 +86,7 @@
dom = dom.replace(/,\s*$/g, '');
return $(dom);
} else {
return $(dom).parents("#oe_manipulators, #website-top-navbar").length ? $() : $(dom);
return $(dom).parents("#oe_manipulators, #website-top-navbar").length || $(dom).hasClass("oe_snippet") ? $("") : $(dom);
}
},
start: function() {
@@ -111,14 +111,12 @@
var pos = $target.offset();
var mt = parseInt($target.css("margin-top") || 0);
var mb = parseInt($target.css("margin-bottom") || 0);
var ml = parseInt($target.css("margin-left") || 0);
var mr = parseInt($target.css("margin-right") || 0);
$el.css({
'position': 'absolute',
'width': $target.outerWidth() + ml + mr,
'width': $target.outerWidth(),
'height': $target.outerHeight() + mt + mb,
'top': pos.top - mt,
'left': pos.left - ml
'left': pos.left
});
},
show: function () {
@@ -212,6 +210,7 @@
var $selected_target = null;
$("body").mouseover(function (event){
var $target = $(event.srcElement).parents("[data-snippet-id]:first");
$target = self.dom_filter($target);
if($target.length && !self.editor_busy) {
if($selected_target != $target){
if($selected_target && $selected_target.data('overlay')){
@@ -544,7 +543,6 @@
greedy: true,
appendTo: 'body',
cursor: "move",
distance: 20,
handle: ".js_box_move",
cursorAt: {left: $move.outerWidth()/2, top: $move.find(".oe_move").outerHeight()/2},
helper: function() {
@@ -783,7 +781,7 @@
this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
this.grid.w = [_.map(grid, function (v) {return 'col-lg-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
return this.grid;
},
@@ -793,15 +791,15 @@
// don't change the rigth border position when we change the offset (replace col size)
var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
var beginOffset = Number(beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
var offset = Number(this.grid.w[0][current].match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-)([0-9-]+)/g, ''));
this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, ''));
var colSize = beginCol - (offset - beginOffset);
this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
if (offset > 0) {
this.$target.addClass('col-lg-offset-' + offset);
this.$target.addClass('col-md-offset-' + offset);
}
},
});
addons/website/static/src/xml/website.snippets.xml
+58 -7
View File
@@ -77,7 +77,11 @@
</li>
<!-- thumbnail to display inside the bottom widget list editor -->
<div class='oe_snippet_thumbnail oe_label'>Banner</div>
<div class='oe_snippet_thumbnail oe_label'>
<img src="/website/static/src/img/banner/color_splash.jpg" style="position: absolute; left: 0; top: 40px; max-width: 100%"/>
<img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 10px; top: 52px; max-width: 25%"/>
<span style="position: absolute; top: 50px; right: 10px;">Banner</span>
</div>
<!-- body to insert after drag and drop thumbnail -->
<div id="myCarousel" class="oe_snippet_body carousel slide oe_big" data-interval="10000">
@@ -149,7 +153,10 @@
</div>
<div t-name="website.snippets.text-image" data-snippet-id='text-image' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Text-Image</div>
<div class='oe_snippet_thumbnail oe_label'>
<span style="position: absolute; top: 50px; left: 5px;">Text-Image</span>
<img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; right: 5px; top: 50px; max-width: 28%"/>
</div>
<section class="oe_snippet_body dark">
<div class="container">
<div class="row">
@@ -176,7 +183,10 @@
</div>
<div t-name="website.snippets.image-text" data-snippet-id='image-text' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Image-Text</div>
<div class='oe_snippet_thumbnail oe_label'>
<img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 5px; top: 50px; max-width: 28%"/>
<span style="position: absolute; top: 50px; right: 5px;">Image-Text</span>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
@@ -202,7 +212,17 @@
</div>
<div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Jumbotron</div>
<div class='oe_snippet_thumbnail oe_label'>
<div style="position: absolute; top: 30px; background-color: #eee; width: 100%; padding: 8px 0 6px 4px;">
<div style="color: #000; display: block; text-align: left;">
Jumbotron
<div style="font-size: 9px; line-height: 9px; text-shadow: none;">
Jumbotron Sub-title
<br/><span class="label label-primary">Contact us</span>
</div>
</div>
</div>
</div>
<section class="oe_snippet_body jumbotron mt16 mb16">
<div class="container">
<h1>Sell Online. Easily.</h1>
@@ -219,7 +239,23 @@
</div>
<div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Text Block</div>
<div class='oe_snippet_thumbnail oe_label'>
<div style="position: absolute; top: 26px; left: 5px; width: 94%;">
<div style="display: block;">
Text Block
<div style="text-shadow: none;font-size: 9px; line-height: 9px; color: #bbb;margin-bottom: 5px;">
Jumbotron Sub-title
</div>
<div style="text-shadow: none;font-size: 6px; line-height: 6px; text-align: left;">
Organize projects around your own processes. Work
on tasks and issues using the kanban view, schedule
tasks using the gantt chart and control deadlines
in the calendar view. Every project may have it's
own stages allowing teams to optimize their job.
</div>
</div>
</div>
</div>
<section class="oe_snippet_body mt16 mb16">
<div class="container">
<div class="row">
@@ -250,13 +286,28 @@
</div>
<div t-name="website.snippets.hr" data-snippet-id='hr' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Separator</div>
<div class="oe_snippet_thumbnail oe_label">
<hr style="position: absolute;top: 61px;margin: 0;width: 100%;border-color: #888;"/>
<div style="position: absolute;width: 100%;top: 51px;">Separator</div>
</div>
<hr class="oe_snippet_body"/>
</div>
<div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail oe_label'>Big Picture</div>
<div class='oe_snippet_thumbnail oe_label'>
<div style="position: absolute; top: 14px; left: 5px; width: 94%;">
<div style="display: block;">
Big Picture
<img src="/website/static/src/img/big_picture.png" style="max-width: 100%"/>
<div style="text-shadow: none;font-size: 6px; line-height: 6px; margin: 5px 10px">
OpenERP's Point of Sale introduces a super clean
interface with no installation required.
</div>
</div>
</div>
</div>
<section class="oe_snippet_body dark mt16 mb16">
<div class="container">
<div class="row">