[IMP] banner

bzr revid: fp@openerp.com-20130915152522-9r8uqca0q1cph04r

5 files changed, 124 insertions, 57 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 4f0d9074892..385456aea26 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -161,8 +161,54 @@ footer {
   margin-bottom: 0px;
 }
 
-.carousel .item {
-  color: white;
+.carousel-inner .item {
+  height: 100%;
+}
+
+.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.carousel .carousel-image {
+  right: 10%;
+  left: 50%;
+  top: 5%;
+  bottom: 5%;
+  position: absolute;
+  text-align: center;
+}
+.carousel .carousel-image img {
+  height: 100%;
+  margin: 0 auto;
+}
+.carousel .item.text_image .carousel-caption {
+  left: auto;
+  right: auto;
+  bottom: 10%;
+  text-align: left;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.carousel .item.text_only .carousel-image {
+  display: none;
+}
+.carousel .item.text_only .carousel-caption {
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  text-align: center;
+}
+.carousel .item.image_text .carousel-caption {
+  left: auto;
+  text-align: left;
+  right: 10%;
+  bottom: 10%;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.carousel .item.image_text .carousel-image {
+  right: 50%;
+  left: 10%;
 }
 
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index f3a8c0129f4..482e6241075 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -127,8 +127,51 @@ footer
 // .nav > li  a 
 //     display: block
 
-.carousel .item
-    color: white
+.carousel-inner .item
+    height: 100%
+
+.carousel
+    .carousel-caption
+        h1, h2, h3
+            margin-top: 10px
+            margin-bottom: 10px
+    .carousel-image
+        right: 10%
+        left: 50%
+        top: 5%
+        bottom: 5%
+        position: absolute
+        text-align: center
+        img
+            height: 100%
+            margin: 0 auto
+    .item.text_image
+        .carousel-caption
+            left: auto
+            right: auto
+            bottom: 10%
+            text-align: left
+            padding: 20px
+            background: rgba(0, 0, 0, 0.4)
+    .item.text_only
+        .carousel-image
+            display: none
+        .carousel-caption
+            left: 10%
+            right: 10%
+            top: 10%
+            text-align: center
+    .item.image_text
+        .carousel-caption
+            left: auto
+            text-align: left
+            right: 10%
+            bottom: 10%
+            padding: 20px
+            background: rgba(0, 0, 0, 0.4)
+        .carousel-image
+            right: 50%
+            left: 10%
 
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 
diff --git a/addons/website/static/src/img/banner/banner_picture.png b/addons/website/static/src/img/banner/banner_picture.png
new file mode 100644
index 00000000000..47836637498
--- /dev/null
+++ b/addons/website/static/src/img/banner/banner_picture.png
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 5800c842067..2a82e2394d0 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -787,13 +787,21 @@
 
             //style
             var style = false;
-            if (this.$target.find('.carousel-inner .item.active .container .content_image.col-lg-offset-1'))
-                style = 'image_right';
-            if (this.$target.find('.carousel-inner .item.active .container .content_image'))
-                style = 'image_left';
+	    var el = this.$target.find('.carousel-inner');
+            if (el.hasClass('text_only'))
+                style = 'text_only';
+            if (el.hasClass('image_text'))
+                style = 'image_text';
+            if (el.hasClass('text_image'))
+                style = 'text_image';
+
             this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
 
-            this.$editor.find('select[name="carousel-style"]').on('change', this.on_bg_change);
+            this.$editor.find('select[name="carousel-style"]').on('change', function(e) {
+                var $container = self.$target.find('.carousel-inner .item.active');
+	        $container.removeClass('image_text text_image text_only')
+	        $container.addClass($(e.currentTarget).val())
+	    });
         },
         on_add: function (e) {
             e.preventDefault();
@@ -812,30 +820,6 @@
                 this.$target.carousel(0);
             }
         },
-        on_bg_change: function (e) {
-            var $container = this.$target.find('.carousel-inner .item.active .container');
-            var img_url = $('.content_image img', $container).attr("src");
-            if (!img_url) {
-                img_url = this.img_url || "/website/static/src/img/china.jpg";
-            } else {
-                this.img_url = img_url;
-            }
-
-            $('.content_image', $container).remove();
-            switch ($(e.currentTarget).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="'+img_url+'"></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="'+img_url+'"></div>');
-                break;
-            }
-        },
     });
 
     website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 1e3aae70901..ed1aadf6278 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -56,16 +56,16 @@
                 <input class="form-control input-sm" type="text" placeholder="http://...."/>
             </a>
         </li>
-        <!--li class='oe_snippet_options'>
+        <li class='oe_snippet_options'>
             <a class="carousel-style">
                 Style
                 <select class="form-control" name="carousel-style">
-                    <option value="no_image">No image</option>
-                    <option value="image_left">Image left</option>
-                    <option value="image_right">Image right</option>
+                    <option value="text_only">Text Only</option>
+                    <option value="image_text">Image - Text</option>
+                    <option value="text_image">Text - Image</option>
                 </select>
             </a>
-        </li-->
+        </li>
 
         <!-- thumbnail to display inside the bottom widget list editor -->
         <div class='oe_snippet_thumbnail oe_label'>Banner</div>
@@ -73,13 +73,18 @@
         <!-- body to insert after drag and drop thumbnail -->
         <div id="myCarousel" class="oe_snippet_body carousel slide" data-interval="10000">
             <!-- Carousel items -->
-            <div class="carousel-inner">
-                <div class="item active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
+            <div class="carousel-inner" style="height: 280px">
+                <div class="item text_only active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
                     <div class="container">
-                        <div class="content mt48 mb48" data-snippet-id='resize'>
+                        <div class="carousel-caption content">
                             <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>
+                            <p>
+                                <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
+                            </p>
+                        </div>
+                        <div class="carousel-image">
+                            <img src="/website/static/src/img/banner/banner_picture.png" alt="Banner OpenERP Image"/>
                         </div>
                     </div>
                 </div>
@@ -88,17 +93,6 @@
             <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
             <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
         </div>
-
-        <!-- custom data for the widget -->
-        <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
-            <div class='container'>
-                <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>
     </div>
 
     <div t-name="website.snippets.darken" data-snippet-id='darken' data-category='style' data-action='mutate' data-selector='section'>
@@ -212,7 +206,7 @@
 
     <div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail oe_label'>Jumbotron</div>
-        <section class="oe_snippet_body jumbotron">
+        <section class="oe_snippet_body jumbotron mt16 mb16">
             <div class="container">
                 <h1>Sell Online. Easily.</h1>
                 <p>
@@ -229,7 +223,7 @@
 
     <div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail oe_label'>Text Block</div>
-        <section class="oe_snippet_body">
+        <section class="oe_snippet_body mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt16 mb32">
@@ -258,7 +252,7 @@
 
     <div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail oe_label'>Big Picture</div>
-        <section class="oe_snippet_body dark">
+        <section class="oe_snippet_body dark mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb16">
@@ -289,7 +283,7 @@
 
     <div t-name="website.snippets.three-columns" data-snippet-id='three-columns' data-category='structure' data-action='insert' data-selector-childs='#wrap, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail oe_label'>Three Columns</div>
-        <section class="oe_snippet_body">
+        <section class="oe_snippet_body mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt16 mb16">