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

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

6 files changed, 61 insertions, 21 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>