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

bzr revid: chm@openerp.com-20130904140138-tvt640suoiln13fx

8 files changed, 81 insertions, 27 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 17bf9b973c8..bc776904891 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -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;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index dd6e2f29146..e68ce289526 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -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 ---- */
 
diff --git a/addons/website/static/src/img/aqua.jpg b/addons/website/static/src/img/aqua.jpg
new file mode 100644
index 00000000000..47ce77005d4
--- /dev/null
+++ b/addons/website/static/src/img/aqua.jpg
diff --git a/addons/website/static/src/img/landscape.png b/addons/website/static/src/img/landscape.png
new file mode 100644
index 00000000000..27b1b92e048
--- /dev/null
+++ b/addons/website/static/src/img/landscape.png
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 87fcaea59b9..5ebf7aecc8d 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -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();
         },
     });
 
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index dcf8294feaf..a50f8c5ab2b 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -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>
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 305f5e8bc83..f3077d7ee6d 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -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>
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 8bd83cd15a5..1e07d261f4c 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -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>