SEO keywords list mockup

bzr revid: ddm@openerp.com-20130827093237-v13oihsyhadl92w3

addons/website/static/src/css/editor.css

@@ -281,3 +281,11 @@
 .oe_seo_configuration .oe_remove {
   color: #e00101;
 }
+
+.oe_seo_keywords_list {
+  width: 35em;
+}
+.oe_seo_keywords_list li {
+  float: left;
+  width: 10em;
+}

addons/website/static/src/css/editor.sass

@@ -245,3 +245,9 @@ $icon_close: #E00101
         list-style: none
     .oe_remove
         color: $icon_close
+
+.oe_seo_keywords_list
+    width: 35em
+    li
+        float: left
+        width: 10em

addons/website/static/src/js/website.js

@@ -248,15 +248,18 @@
 
             this.$el.modal();
         },
-        listKeywords: function () {
+        keywords: function () {
             var result = [];
             this.$el.find('.js_seo_keyword').each(function () {
                 result.push($(this).text());
             })
             return _.uniq(result);
         },
-        existsKeyword: function (word) {
-            return _.contains(this.listKeywords(), word);
+        isExistingKeyword: function (word) {
+            return _.contains(this.keywords(), word);
+        },
+        isKeywordListFull: function () {
+            return this.keywords().length >= 10;
         },
         confirmKeyword: function (e) {
             if (e.keyCode == 13) {
@@ -266,14 +269,14 @@
         },
         addKeyword: function () {
             var word = this.$el.find('input[name=seo_page_keywords]').val();
-            if (!this.existsKeyword(word)) {
+            if (!this.isKeywordListFull() && !this.isExistingKeyword(word)) {
                 new website.seo.Keyword({
                     keyword: word
                 }).appendTo(this.$el.find('.js_seo_keywords_list'));
             }
         },
         update: function () {
-            console.log(this.listKeywords());
+            console.log(this.keywords());
             // TODO: Persist changes
         },
         close: function () {

addons/website/static/src/xml/website.xml

@@ -79,14 +79,14 @@
                         <textarea name="seo_page_description" rows="3" cols="70" size="160"/>
                     </div>
                 </div>
-                <div class="control-group">
+                <div class="control-group oe_seo_keywords_area">
                     <label class="control-label" for="seo_page_keywords">Keywords</label>
                     <div class="controls">
                         <div class="input-append">
                             <input type="text" name="seo_page_keywords" size="30" placeholder="New keyword"/>
                             <button data-action="add" class="btn" type="button">Add</button>
                         </div>
-                        <ul class="js_seo_keywords_list">
+                        <ul class="oe_seo_keywords_list js_seo_keywords_list">
                             <!-- filled in JS -->
                         </ul>
                     </div>