[IMP] wwebsite: add option background and style in snippets carousel

bzr revid: chm@openerp.com-20130904140138-tvt640suoiln13fx
This commit is contained in:
Christophe Matthieu 2013-09-04 16:01:38 +02:00
parent e32c3c08f8
commit 20e0db456f
8 changed files with 81 additions and 27 deletions

View File

@ -77,6 +77,13 @@
display: none;
}
.oe_carousel_options > * {
display: inline-block !important;
vertical-align: middle !important;
position: relative !important;
top: +2px;
}
/* ---- SNIPPET EDITOR ---- */
.oe_snippets {
position: fixed;

View File

@ -67,6 +67,11 @@
white-space: nowrap
z-index: 1
display: none
> *
display: inline-block !important
vertical-align: middle !important
position: relative !important
top: +2px;
/* ---- SNIPPET EDITOR ---- */

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

View File

@ -26,27 +26,52 @@
// TODO clean
snippet_carousel: function () {
var self = this;
var $carousel_options = $('.carousel .js_carousel_options');
$carousel_options.on('click', '.label', function (e) {
e.preventDefault();
var $button = $(e.currentTarget);
var $c = $button.parents(".carousel:first");
var $carousel_inner = $c.find('.carousel-inner');
$('.carousel').each(function () {
var $carousel = $(this);
var $options = $('.js_carousel_options', $carousel);
$options.on('click', '.label', function (e) {
e.preventDefault();
var $button = $(e.currentTarget);
var $c = $button.parents(".carousel:first");
var $carousel_inner = $c.find('.carousel-inner');
if($button.hasClass("js_add")) {
var cycle = $carousel_inner.find('.item').size();
$carousel_inner.append(openerp.qweb.render('website.carousel'));
$c.carousel(cycle);
}
else {
$carousel_inner
.find('.item.active').remove().end()
.find('.item:first').addClass('active');
$c.carousel(0);
self.trigger('change', self, null);
}
if($button.hasClass("js_add")) {
var cycle = $carousel_inner.find('.item').size();
$carousel_inner.append(openerp.qweb.render('website.carousel'));
$c.carousel(cycle);
}
else if ($carousel_inner.find('.item').size() > 1) {
$carousel_inner
.find('.item.active').remove().end()
.find('.item:first').addClass('active');
$c.carousel(0);
self.trigger('change', self, null);
}
});
$options.on('change', 'select[name="carousel-background"]', function () {
$('.carousel-inner .item.active', $carousel).css('background-image', 'url(' + $(this).val() + ')');
$(this).val("");
});
$options.on('change', 'select[name="carousel-style"]', function () {
var $container = $('.carousel-inner .item.active .container', $carousel);
$('.content_image', $container).remove();
switch ($(this).val()) {
case 'no_image':
$('.content', $container).attr("class", "content");
break;
case 'image_left':
$('.content', $container).attr("class", "content col-md-6")
.before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
break;
case 'image_right':
$('.content', $container).attr("class", "content col-md-6")
.after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
break;
}
$(this).val("");
});
$options.show();
});
$carousel_options.show();
},
});

View File

@ -172,8 +172,11 @@
<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 class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Your New Banner Slide</h1>
<h3>With another convincing subtitle</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
</div>
</div>
</t>

View File

@ -159,14 +159,28 @@
<div class="oe_carousel_options js_carousel_options" t-ignore="1" t-if="editable">
<span class="label label-default js_add"><i class="icon-plus-sign"></i></span>
<span class="label label-default js_remove"><i class="icon-minus-sign"></i></span>
<select name="carousel-background" class="form-control">
<option value="">Chose an other background</option>
<option value="/website/static/src/img/greenfields.jpg">greenfields</option>
<option value="/website/static/src/img/landscape.png">landscape</option>
<option value="/website/static/src/img/aqua.jpg">aqua</option>
</select>
<select name="carousel-style" class="form-control">
<option value="">Chose an other style</option>
<option value="no_image">No image</option>
<option value="image_left">Image left</option>
<option value="image_right">Image right</option>
</select>
</div>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover; padding-top: 90px; padding-bottom:45px;">
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
<div class="container">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
</div>
</div>
</div>

View File

@ -10,10 +10,10 @@
<!-- add state field in header -->
<xpath expr="//sheet" position="before">
<div class="oe_form_box_info oe_text_center" attrs="{'invisible': [('sale_ok', '=', False)]}">
<p attrs="{'invisible': [('website_published', '=', False)]}">
<p attrs="{'invisible': [('website_published', '=', True)]}">
This product is <b>not available</b> for public user in your ecommerce.
</p>
<p attrs="{'invisible': [('website_published', '=', True)]}">
<p attrs="{'invisible': [('website_published', '=', False)]}">
This product is <b>available</b> for public user in your ecommerce.
</p>
<p>Website view: <field class="oe_inline" name="website_url" widget="url"/></p>