[MERGE] Merged trunk-website-al and done changes according to that.

bzr revid: psa@tinyerp.com-20130830115723-f35ej71osh2axv97

7 files changed, 136 insertions, 255 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 15a7c6aeb6e..fadad2f7d9e 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -229,14 +229,8 @@
   left: 0px;
 }
 
-/* ---- MODAL DIALOGS ---- */
-.oe_stop_scrolling {
-  height: 100%;
-  overflow: hidden;
-}
-
 /* ---- MOBILE PREVIEW ---- */
-.oe_mobile_preview.modal {
+.oe_mobile_preview.modal .modal-content {
   height: 660px;
   background-color: black;
   border: 2px solid;
@@ -249,54 +243,40 @@
   right: 0;
   max-width: 330px;
 }
-.oe_mobile_preview.modal .modal-header {
+.oe_mobile_preview.modal .modal-content .modal-header {
   background-color: black;
   border-bottom: 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
-.oe_mobile_preview.modal .modal-header .oe_mobile_preview_title {
+.oe_mobile_preview.modal .modal-content .modal-header .modal-title {
   color: #1a1a1a;
 }
-.oe_mobile_preview.modal .modal-body {
+.oe_mobile_preview.modal .modal-content .modal-header .close {
+  color: lightgrey;
+  opacity: 1;
+}
+.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
+  color: #e00101;
+  opacity: 1;
+}
+.oe_mobile_preview.modal .modal-content .modal-body {
   background-color: black;
   max-height: 600px;
   padding: 0;
   margin: 0;
 }
-.oe_mobile_preview.modal .modal-footer {
-  background-color: black;
-}
-
-.oe_mobile_viewport {
+.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
   width: 320px;
   height: 568px;
   padding: 5px;
   border: none;
 }
-
-.oe_mobile_preview_header .close {
-  color: lightgrey;
-  opacity: 1;
-}
-.oe_mobile_preview_header .close:hover {
-  color: #e00101;
-  opacity: 1;
+.oe_mobile_preview.modal .modal-content .modal-footer {
+  background-color: black;
 }
 
 /* ---- SEO TOOLS ---- */
-.oe_seo_configuration.modal {
-  width: 100%;
-  left: 0;
-  margin-left: 0;
-  top: 0 !important;
-  margin-top: 0 !important;
-  height: 100%;
-}
-.oe_seo_configuration .modal-body {
-  max-height: 100%;
-  height: 100%;
-}
 .oe_seo_configuration ul {
   list-style: none;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index d74fb57234b..dadf36a7cd4 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -200,72 +200,54 @@
 .oe_handle.nw,.oe_handle.w,.oe_handle.sw
     left: 0px
 
-/* ---- MODAL DIALOGS ---- */
-
-.oe_stop_scrolling
-    height: 100%
-    overflow: hidden
-
 /* ---- MOBILE PREVIEW ---- */
 
 $mobile_preview_background: #000000
 $mobile_preview_border: #1A1A1A
 $icon_close: #E00101
-.oe_mobile_preview.modal
-    height: 660px
-    background-color: $mobile_preview_background
-    border: 2px solid
-    border-radius: 10px
-    border-color: $mobile_preview_border
-    margin: auto
-    top: 0
-    left: 0
-    bottom: 0
-    right: 0
-    max-width: 330px
-    .modal-header
-        background-color: $mobile_preview_background
-        border-bottom: 0
-        border-top-left-radius: 10px
-        border-top-right-radius: 10px
-        .oe_mobile_preview_title
-            color: $mobile_preview_border
-    .modal-body
+.oe_mobile_preview
+    &.modal .modal-content
+        height: 660px
         background-color: $mobile_preview_background
-        max-height: 600px
-        padding: 0
-        margin: 0
-    .modal-footer
-        background-color: $mobile_preview_background
-
-.oe_mobile_viewport
-    width: 320px
-    height: 568px
-    padding: 5px
-    border: none
-
-.oe_mobile_preview_header
-    .close
-        color: lightgrey
-        opacity: 1
-    .close:hover
-        color: $icon_close
-        opacity: 1
+        border: 2px solid
+        border-radius: 10px
+        border-color: $mobile_preview_border
+        margin: auto
+        top: 0
+        left: 0
+        bottom: 0
+        right: 0
+        max-width: 330px
+        .modal-header
+            background-color: $mobile_preview_background
+            border-bottom: 0
+            border-top-left-radius: 10px
+            border-top-right-radius: 10px
+            .modal-title
+                color: $mobile_preview_border
+            .close
+                color: lightgrey
+                opacity: 1
+            .close:hover
+                color: $icon_close
+                opacity: 1
+        .modal-body
+            background-color: $mobile_preview_background
+            max-height: 600px
+            padding: 0
+            margin: 0
+            .oe_mobile_viewport
+                width: 320px
+                height: 568px
+                padding: 5px
+                border: none
+        .modal-footer
+            background-color: $mobile_preview_background
 
 /* ---- SEO TOOLS ---- */
 
 $remove_color: $icon_close
 .oe_seo_configuration
-    &.modal
-        width: 100%
-        left: 0
-        margin-left: 0
-        top: 0!important
-        margin-top: 0!important
-        height: 100%
-    .modal-body
-        max-height: 100%
-        height: 100%
     ul
         list-style: none
     .oe_remove
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 1766ed269b3..4ea0e6bd867 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -118,6 +118,7 @@ footer {
   background: #eff8f8;
   padding-top: 48px;
   padding-bottom: 48px;
+  background: rgba(100, 200, 200, 0.1);
 }
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
@@ -125,14 +126,6 @@ footer {
   margin-bottom: 0px;
 }
 
-.navbar .nav > li a {
-  text-shadow: none;
-}
-
-.nav > li a {
-  display: block;
-}
-
 #myCarousel .item {
   color: white;
 }
@@ -140,6 +133,7 @@ footer {
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 .dark {
   background: #eff8f8;
+  background: rgba(100, 200, 200, 0.1);
 }
 
 /* Hacks to remove   */
@@ -147,44 +141,8 @@ div#wrap .carousel {
   top: -20px;
 }
 
-/* -- Hack for nav header -- */
-.nav > li.nav-header {
-  display: block;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 20px;
-  color: #999999;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-}
-
-.nav.nav-hierarchy {
-  padding-left: 16px;
-}
-
-.navbar-inverse .divider-vertical {
-  height: 40px;
-  margin: 0 9px;
-  border-right: 1px solid white;
-  border-left: 1px solid #f2f2f2;
-}
-
-.navbar-nav .divider-vertical {
-  border-right-color: #222222;
-  border-left-color: #080808;
-}
-
-.navbar-inverse {
-  background-image: -moz-linear-gradient(top, #222222, #080808);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#080808));
-  background-image: -webkit-linear-gradient(top, #222222, #080808);
-  background-image: -o-linear-gradient(top, #222222, #080808);
-  background-image: linear-gradient(to bottom, #222222, #080808);
-  background-repeat: repeat-x;
-}
-
 /* -- Hack for removing double scrollbar from mobile preview -- */
-.modal {
+div#mobile-preview.modal {
   overflow: hidden;
   overflow-y: hidden;
   background-color: whitesmoke;
@@ -194,6 +152,6 @@ ul.nav-stacked > li > a {
   padding: 2px 15px;
 }
 
-.dropdown-header {
+#customize-menu .dropdown-header {
   text-transform: uppercase;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 94c25303a2c..936a34d0cfa 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -80,9 +80,10 @@ html,body
 footer
     box-sizing: border-box
     height: 380px
-    background: rgb(239, 248, 248) // rgb(221, 235, 227)
+    background: rgb(239, 248, 248)
     padding-top: 48px
     padding-bottom: 48px
+    background: rgba(100, 200, 200, 0.1)
 
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
@@ -90,11 +91,11 @@ footer
 .navbar .nav > li > p
     margin-bottom: 0px
 
-.navbar .nav > li  a
-    text-shadow: none
+// .navbar .nav > li  a
+//     text-shadow: none
 
-.nav > li  a 
-    display: block
+// .nav > li  a 
+//     display: block
 
 #myCarousel .item
     color: white
@@ -102,46 +103,16 @@ footer
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 
 .dark
-    background: rgb(239, 248, 248)
+    background: #eff8f8
+    background: rgba(100, 200, 200, 0.1)
 
 /* Hacks to remove   */
 div#wrap
     .carousel
         top: -20px
 
-/* -- Hack for nav header -- */
-.nav > li.nav-header
-    display: block
-    font-size: 11px
-    font-weight: bold
-    line-height: 20px
-    color: #999999
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
-    text-transform: uppercase
-
-.nav.nav-hierarchy 
-    padding-left: 16px
-
-.navbar-inverse .divider-vertical
-    height: 40px
-    margin: 0 9px
-    border-right: 1px solid #ffffff
-    border-left: 1px solid #f2f2f2
-
-.navbar-nav .divider-vertical
-    border-right-color: #222
-    border-left-color: #080808
-
-.navbar-inverse
-    background-image: -moz-linear-gradient(top, #222, #080808)
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#080808))
-    background-image: -webkit-linear-gradient(top, #222, #080808)
-    background-image: -o-linear-gradient(top, #222, #080808)
-    background-image: linear-gradient(to bottom, #222, #080808)
-    background-repeat: repeat-x
-
 /* -- Hack for removing double scrollbar from mobile preview -- */
-.modal
+div#mobile-preview.modal
     overflow: hidden
     overflow-y: hidden
     background-color: whitesmoke
@@ -149,5 +120,6 @@ div#wrap
 ul.nav-stacked > li > a
     padding: 2px 15px
 
-.dropdown-header
-    text-transform: uppercase
+#customize-menu
+    .dropdown-header
+        text-transform: uppercase
diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js
index 125021362f4..63bc81872ef 100644
--- a/addons/website/static/src/js/website.mobile.js
+++ b/addons/website/static/src/js/website.mobile.js
@@ -14,20 +14,11 @@
     website.MobilePreview = openerp.Widget.extend({
         template: 'website.mobile_preview',
         events: {
-            'hidden': 'close'
+            'hidden': 'destroy'
         },
         start: function () {
-            $(document.body).addClass('oe_stop_scrolling');
             document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true";
             this.$el.modal();
-            this.$el.removeClass('hide');
-            this.$el.find('.oe_mobile_preview_header button').click(function() {
-                $('body').removeClass('oe_stop_scrolling');
-            });
-        },
-        close: function () {
-            $(document.body).removeClass('oe_stop_scrolling');
-            this.destroy();
         },
     });
 })();
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 0094cdfce8c..c4cecd43b2c 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -25,7 +25,7 @@
         init: function (parent, options) {
             this._super(parent);
             this.message = options.message;
-            // info, error or success
+            // success, info, warning or danger
             this.type = options.type;
         },
     });
@@ -97,19 +97,9 @@
 
         start: function () {
             var pageParser = new website.seo.PageParser();
-            var currentKeywords = this.keywords;
             this.$el.find('.js_seo_page_url').text(pageParser.url());
             this.$el.find('input[name=seo_page_title]').val(pageParser.title());
-            this.$el.find('input[name=seo_page_keywords]').typeahead({
-                items: 4,
-                source: function () {
-                    var suggestions = pageParser.keywordSuggestions();
-                    var alreadyChosen = currentKeywords();
-                    return _.difference(suggestions, alreadyChosen);
-                },
-            });
             this.checkBestPractices(pageParser);
-            $(document.body).addClass('oe_stop_scrolling');
             this.$el.modal();
         },
         checkBestPractices: function (parser) {
@@ -165,24 +155,13 @@
                     keyword: word,
                     onDelete: enableNewKeywords
                 }).appendTo(this.$el.find('.js_seo_keywords_list'));
-                this.scrollDown();
             }
             if (this.isKeywordListFull()) {
                 disableNewKeywords();
             }
         },
-        scrollDown: function () {
-            var $body = this.$el.find('.modal-body');
-            $body.animate({
-                scrollTop: $body[0].scrollHeight
-            }, 500);
-        },
         update: function () {
             // TODO: Persist changes
         },
-        destroy: function () {
-            $(document.body).removeClass('oe_stop_scrolling');
-            this._super();
-        },
     });
 })();
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index c1d593ee2c7..431d567ea50 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -39,60 +39,76 @@
     </t>
 
     <t t-name="website.mobile_preview">
-        <div id="mobile-preview" class="modal hide fade oe_mobile_preview" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
-            <div class="modal-header oe_mobile_preview_header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                <h3 id="mobile-preview-title" class="oe_mobile_preview_title modal-title">Mobile preview</h3>
-            </div>
-            <div class="modal-body">
-                <div class="oe_mobile_preview">
-                    <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
+        <div class="modal fade oe_mobile_preview" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                        <h3 class="modal-title">Mobile preview</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div>
+                            <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </t>
 
     <t t-name="website.seo_configuration">
-        <div class="modal fade oe_seo_configuration" tabindex="-1" role="dialog" aria-labelledby="js_seo_page_url" aria-hidden="true">
-            <div class="modal-header">
-                <button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                <h2>Promote <small class="js_seo_page_url"></small></h2>
-                <h4>Get your page efficiently referenced in Google to attract more visitors with relevant content.</h4>
-            </div>
-            <div class="modal-body">
-                <div class="js_seo_tips" />
-
-                <h3 class="page-header">1. Define keywords <small>describing your page content</small></h3>
-                <div class="form-group form-horizontal oe_seo_keywords_area">
-                    <label class="col-md-2 control-label" for="seo_page_keywords">Keyword</label>
-                    <div class="col-md-3">
-                        <div class="input-group">
-                            <input type="text" name="seo_page_keywords" class="form-control" data-provide="typeahead" autocomplete="off" maxlength="20" size="24" placeholder=""/>
-                            <span class="input-group-btn"><button data-action="add" class="btn" type="button">Add</button></span>
-                        </div>
-                        <div class="container oe_seo_keywords_list js_seo_keywords_list">
-
-                                <!-- filled in JS -->
-
-                        </div>
-                    </div>
-                </div><br/><br/>
-
-                <h3 class="page-header">2. Choose a title and description <small>containing keywords relevant to what people are searching on the web</small></h3>
-                <div class="form-group form-horizontal">
-                    <label class="col-md-2 control-label" for="seo_page_title">Title</label>
-                    <div class="col-md-3">
-                        <input type="text" class="form-control" name="seo_page_title" maxlength="70" size="70"/>
+        <div class="modal fade oe_seo_configuration" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
+                        <h2 class="modal-title">Promote <small class="js_seo_page_url"></small></h2>
+                        <h4>Get your page efficiently referenced in Google to attract more visitors.</h4>
                     </div>
-                </div><br/><br/><br/>
-                <div class="form-group form-horizontal">
-                    <label class="col-md-2 control-label" for="seo_page_description">Description</label>
-                    <div class="col-md-3">
-                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" size="160"/>
+                    <div class="modal-body">
+                        <div class="js_seo_tips" />
+                        <section>
+                            <h3 class="page-header">1. Define keywords <small>describing your page content</small></h3>
+                            <div class="form-horizontal" role="form">
+                                <div class="form-group">
+                                    <label for="seo_page_keywords" class="col-lg-2 control-label">Keyword</label>
+                                    <div class="col-lg-8">
+                                        <div class="input-group">
+                                          <input type="text" name="seo_page_keywords" class="form-control" maxlength="20" size="24"/>
+                                          <span class="input-group-btn">
+                                              <button data-action="add" class="btn btn-default" type="button">Add</button>
+                                          </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="container oe_seo_keywords_list js_seo_keywords_list">
+                                <!-- filled in JS -->
+                            </div>
+                        </section>
+                        <section>
+                            <h3 class="page-header">2. Choose a title and description <small>containing keywords relevant to what people are searching on the web</small></h3>
+                            <div class="form-horizontal" role="form">
+                                <div class="form-group">
+                                    <label for="seo_page_title" class="col-lg-2 control-label">Title</label>
+                                    <div class="col-lg-8">
+                                        <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="seo_page_description" class="col-lg-2 control-label">Description</label>
+                                    <div class="col-lg-8">
+                                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" size="160"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                        <hr/>
+                        <section>
+                            <button type="button" data-action="update" class="btn btn-primary">Apply changes</button> or <a data-action="discard" data-dismiss="modal" href="#">Discard</a>
+                        </section>
                     </div>
-                </div><br/><br/><br/>
-                <hr/>
-                <a data-action="update" href="#" class="btn btn-primary">Update page</a>
+                </div>
             </div>
         </div>
     </t>
@@ -105,7 +121,10 @@
     </t>
 
     <t t-name="website.seo_keyword">
-        <div class="oe_seo_keyword"><a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a> <span class="label js_seo_keyword"><t t-raw="widget.keyword"/></span></div>
+        <div class="oe_seo_keyword">
+            <a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a>
+            <span class="label label-default js_seo_keyword"><t t-raw="widget.keyword"/></span>
+        </div>
     </t>
 
     <t t-name="website.carousel">