odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[FIX] website snippet: usabillity 

bzr revid: chm@openerp.com-20131204115424-p083i2nt5bbc43s6
This commit is contained in:
Christophe Matthieu 2013-12-04 12:54:24 +01:00
parent 3a5112426f
commit 16a544fc6f
5 changed files with 90 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
addons/website/static/src/css/website.css
View File

@ -406,29 +406,33 @@ ul.nav-stacked > li > a {
}
/* Parallax Theme */
.parallax_quote, [data-snippet-id="slider"] {
background: center center no-repeat fixed;
background-size: contain;
}
.parallax_quote .carousel-indicators li, [data-snippet-id="slider"] .carousel-indicators li {
div.carousel[data-snippet-id="slider"] .carousel-indicators li {
border: 1px solid grey;
}
.parallax_quote .carousel-indicators .active, [data-snippet-id="slider"] .carousel-indicators .active {
div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
background-color: grey;
}
.parallax {
position: relative;
background-size: 100%;
display: table;
width: 100%;
min-height: 100px;
}
.parallax.oe_small {
height: 200px;
min-height: 200px;
}
.parallax.oe_medium {
height: 300px;
min-height: 300px;
}
.parallax.oe_big {
height: 450px;
min-height: 450px;
}
.parallax > div {
display: table-cell;
vertical-align: middle;
padding: 32px 0;
}
/* Background */

17
addons/website/static/src/css/website.sass
View File

@ -304,9 +304,7 @@ ul.nav-stacked > li > a
/* Parallax Theme */
.parallax_quote, [data-snippet-id="slider"]
background: center center no-repeat fixed
background-size: contain
div.carousel[data-snippet-id="slider"]
.carousel-indicators
li
border: 1px solid grey
@ -316,12 +314,19 @@ ul.nav-stacked > li > a
.parallax
position: relative
background-size: 100%
display: table
width: 100%
min-height: 100px
&.oe_small
height: 200px
min-height: 200px
&.oe_medium
height: 300px
min-height: 300px
&.oe_big
height: 450px
min-height: 450px
> div
display: table-cell
vertical-align: middle
padding: 32px 0
/* Background */

1
addons/website/static/src/js/website.snippets.animation.js
View File

@ -106,6 +106,7 @@
$(window).scroll();
};
img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
$(window).scroll();
}
});

20
addons/website/static/src/js/website.snippets.editor.js
View File

@ -301,7 +301,11 @@
$toInsert = $snippet.find('.oe_snippet_body').clone();
$toInsert.removeClass('oe_snippet_body');
$toInsert.attr('data-snippet-id', snipped_id);
if (!$toInsert.data('snippet-id')) {
$toInsert.attr('data-snippet-id', snipped_id);
} else {
snipped_id = $toInsert.data('snippet-id');
}
} else if( action === 'mutate' ){
if (!$snippet.data('selector')) {
@ -936,7 +940,8 @@
* function called just before save vue
*/
clean_for_save: function () {
this.$target.find(".row:empty").remove();
this.$target.removeAttr('contentEditable')
.find('*').removeAttr('contentEditable');
},
});
@ -1104,7 +1109,7 @@
},
on_clone: function () {
var $clone = this.$target.clone(false);
var _class = $clone.attr("class").replace(/\s*(col-md-|col-lg-offset-|col-md-offset-)([0-9-]+)/g, '');
var _class = $clone.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, '');
_class += ' col-md-1';
$clone.attr("class", _class);
this.$target.after($clone);
@ -1174,8 +1179,6 @@
if(!this.$target.find(".item.active").length) {
this.$target.find(".item:first").addClass("active");
}
this.$target.removeAttr('contentEditable')
.find('*').removeAttr('contentEditable');
},
onFocus: function () {
this._super();
@ -1186,13 +1189,14 @@
this.$target.carousel('cycle');
},
start : function () {
var self = this;
this._super();
this.id = this.$target.attr("id");
this.$inner = this.$target.find('.carousel-inner');
this.$indicators = this.$target.find('.carousel-indicators');
this.$editor.find(".js_add").on('click', _.bind(this.on_add_slide, this));
this.$editor.find(".js_remove").on('click', _.bind(this.on_remove_slide, this));
this.$editor.find(".js_add").on('click', function () {self.on_add_slide(); return false;});
this.$editor.find(".js_remove").on('click', function () {self.on_remove_slide(); return false;});
this.rebind_event();
},
@ -1318,6 +1322,8 @@
this.$target.on('snippet-style-change snippet-style-preview', function () {
self.$target.data("snippet-view").set_values();
});
this.$target.attr('contentEditable', 'false');
this.$target.find('> div > .oe_structure').attr('contentEditable', 'true');
},
scroll: function () {
var self = this;

96
addons/website/views/snippets.xml
View File

@ -711,10 +711,11 @@
<li data-value="1.7"><a>Very Fast</a></li>
</ul>
</li>
<div class="oe_snippet_body parallax oe_small oe_structure"
style="background-image: url('/website/static/src/img/parallax/parallax_bg.jpg')"
<section class="oe_snippet_body parallax oe_medium"
style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
data-scroll-background-ratio="0.3">
</div>
<div><div class="oe_structure"/></div>
</section>
</div>
<div data-snippet-id="parallax_quote" data-selector-children=".oe_structure, [data-oe-type=html]">
@ -722,51 +723,57 @@
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
<span class="oe_snippet_thumbnail_title">Parallax Slider</span>
</div>
<section class="oe_snippet_body parallax_quote oe_structure" style="background-image: url('/website/static/src/img/parallax/quote.png')">
<div id="myQuoteCarousel" class="carousel slide oe_medium mb32" data-snippet-id="slider">
<!-- Indicators -->
<ol class="carousel-indicators mb0">
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myQuoteCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<section class="oe_snippet_body parallax oe_medium" data-snippet-id="parallax"
style="background-image: url('/website/static/src/img/parallax/quote.png')"
data-scroll-background-ratio="0.3">
<div>
<div class="oe_structure">
<div id="myQuoteCarousel" class="carousel slide oe_small mb0" data-snippet-id="slider">
<!-- Indicators -->
<ol class="carousel-indicators mb0">
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myQuoteCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item text_only active">
<div class="container">
<div class="content">
<div class="item text_only active">
<div class="container">
<div class="content">
<div class="row">
<blockquote class="col-md-5 col-md-offset-4 mt64">
<p>
Write here a quote from one of your customer. Quotes are are
great way to give confidence in your products or services.
</p>
<small>Author of this quote</small>
</blockquote>
<div class="row">
<blockquote class="col-md-5 col-md-offset-4 mt64">
<p>
Write here a quote from one of your customer. Quotes are are
great way to give confidence in your products or services.
</p>
<small>Author of this quote</small>
</blockquote>
</div>
</div>
</div>
</div>
<div class="item text_only">
<div class="container">
<div class="content">
<div class="row">
<blockquote class="col-md-5 col-md-offset-4 mt64">
<p>
OpenERP provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item text_only">
<div class="container">
<div class="content">
<div class="row">
<blockquote class="col-md-5 col-md-offset-4 mt64">
<p>
OpenERP provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@ -794,18 +801,19 @@
</li>
</div>
<div data-snippet-style-id='size' data-selector='div[data-snippet-id="parallax"], div[data-snippet-id="carousel"], div[data-snippet-id="slider"]'>
<div data-snippet-style-id='size' data-selector='section[data-snippet-id="parallax"], div[data-snippet-id="carousel"], div[data-snippet-id="slider"]'>
<li class="dropdown-submenu" data-required="true">
<a tabindex="-1" href="#">Size</a>
<ul class="dropdown-menu">
<li data-class='oe_small'><a>Small</a></li>
<li data-class='oe_medium'><a>Medium</a></li>
<li data-class='oe_big'><a>Big</a></li>
<li data-class=''><a>Auto</a></li>
</ul>
</li>
</div>
<div data-snippet-style-id='background' data-selector='section, div[data-snippet-id="parallax"], div[data-snippet-id="carousel"]'>
<div data-snippet-style-id='background' data-selector='section, section[data-snippet-id="parallax"], div[data-snippet-id="carousel"]'>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu">
@ -837,7 +845,6 @@
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Various</a>
<ul class="dropdown-menu">
<li data-class="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Aqua</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
@ -848,6 +855,7 @@
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
<li data-class="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
</ul>
</li>
<li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>