From 79cc608e57c1e8b686589ea1c9470a1a1344a17b Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Wed, 11 Sep 2013 17:20:00 +0200
Subject: [PATCH] [IMP] website: snippet editor: add pill and group by
 category; fix overlay

bzr revid: chm@openerp.com-20130911152000-lzt62hinncodcnoc
---
 addons/website/static/src/css/editor.css      | 10 +++++++
 addons/website/static/src/css/editor.sass     |  7 +++++
 .../website/static/src/js/website.snippets.js |  8 ++----
 .../static/src/xml/website.snippets.xml       | 27 ++++++++++++++-----
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 306e0db97fa..0b055aaf350 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -113,6 +113,16 @@ table.editorbar-panel td.selected {
   overflow-y: auto;
   z-index: 100;
 }
+#oe_snippets .nav-pills {
+  padding: 3px 8px;
+  background: #444444;
+}
+#oe_snippets .nav-pills > li > a {
+  padding: 2px 10px !important;
+}
+#oe_snippets .pill-content {
+  height: 140px;
+}
 
 .oe_snippet {
   display: inline-block;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 82a5adee94d..c1f4d578b98 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -104,6 +104,13 @@ table.editorbar-panel
     box-shadow: 0px 10px 10px -10px black inset
     overflow-y: auto
     z-index: 100
+    .nav-pills
+        padding: 3px 8px
+        background: #444444
+        > li > a
+            padding: 2px 10px !important
+    .pill-content
+        height: 140px
 
 .oe_snippet
     display: inline-block
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index e7113a19b74..edc76bdd78c 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -60,7 +60,7 @@
                 if (key.indexOf('website.snippets.') === 0) {
                     var $snippet = $(openerp.qweb.render(key)).addClass("oe_snippet");
                     if ($snippet.data("action")) {
-                        self.$el.append($snippet);
+                        self.$el.find('#snippet_' + $snippet.data('category')).append($snippet);
                         self.make_snippet_draggable($snippet);
                     }
                 }
@@ -136,8 +136,8 @@
                 this.activate_overlay_zones($snipped_id);
                 var editor = website.snippet.editorRegistry[$snipped_id.data("snippet-id")] || website.snippet.Editor;
                 $snipped_id.data("snippet-editor", new editor(this, $snipped_id));
-                website.snippet.cover_target($snipped_id.data('overlay'), $snipped_id);
             }
+            website.snippet.cover_target($snipped_id.data('overlay'), $snipped_id);
         },
 
         path_eval: function(path){
@@ -301,10 +301,6 @@
                 }
             }
 
-            // Cleaning up unnecessary zones
-            $('#oe_snippets .oe_insert.oe_drop_zone').remove();   // no zone in the snippet selector ...
-            $('#website-top-view .oe_insert.oe_drop_zone').remove();   // no zone in the top bars ...
-            $('#website-top-edit .oe_insert.oe_drop_zone').remove();
             var count;
             do {
                 count = 0;
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 69a40e9173e..4b8360948ee 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -5,6 +5,19 @@
 
     <t t-name="website.snippets">
         <div id='oe_snippets' class='hide'>
+            <ul class="nav nav-pills">
+              <li class="active"><a data-toggle="pill" href="#snippet_structure">Structure</a></li>
+              <li class=""><a data-toggle="pill" href="#snippet_content">Content</a></li>
+              <li class=""><a data-toggle="pill" href="#snippet_emphasize">Emphasize</a></li>
+              <li class=""><a data-toggle="pill" href="#snippet_style">Style</a></li>
+            </ul>
+            <div class="pill-content">
+                <div class="pill-pane active" id="snippet_structure"></div>
+                <div class="pill-pane" id="snippet_content"></div>
+                <div class="pill-pane" id="snippet_emphasize"></div>
+                <div class="pill-pane" id="snippet_style"></div>
+                <div class="pill-pane" id="snippet_unsorted"></div>
+            </div>
         </div>
     </t>
 
@@ -33,7 +46,7 @@
         </div>
     </div>
 
-    <div t-name="website.snippets.carousel" data-snippet-id='carousel' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.carousel" data-snippet-id='carousel' data-category='emphasize' data-action='insert' data-selector-siblings='.container'>
         
         <!-- editor bar to display inside the top edit bar -->
         <li class='oe_snippet_options'>
@@ -91,20 +104,20 @@
         </div>
     </div>
 
-    <div t-name="website.snippets.darken" data-snippet-id='darken' data-action='mutate' data-selector='.container'>
+    <div t-name="website.snippets.darken" data-snippet-id='darken' data-category='style' data-action='mutate' data-selector='.container'>
         <div class='oe_snippet_thumbnail oe_label'>Darken</div>
     </div>
 
-    <div t-name="website.snippets.surprise" data-snippet-id='vomify' data-action='mutate' data-selector='.container'>
+    <div t-name="website.snippets.surprise" data-snippet-id='vomify' data-category='Content' data-action='mutate' data-selector='.container'>
         <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
     </div>
 
-    <div t-name="website.snippets.spacer" data-snippet-id='spacer' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.spacer" data-snippet-id='spacer' data-category='structure' data-action='insert' data-selector-siblings='.container'>
         <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
         <div class="oe_snippet_body container mt32"></div>
     </div>
 
-    <div t-name="website.snippets.title" data-snippet-id='title' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.title" data-snippet-id='title' data-category='structure' data-action='insert' data-selector-siblings='.container'>
         <div class='oe_snippet_thumbnail oe_label'>Main Title</div>
         <section class="oe_snippet_body container">
             <div class="row">
@@ -116,7 +129,7 @@
         </section>
     </div>
 
-    <div t-name="website.snippets.three-collumns" data-snippet-id='three-collumns' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.three-collumns" data-snippet-id='three-collumns' data-category='structure' data-action='insert' data-selector-siblings='.container'>
         <div class='oe_snippet_thumbnail oe_label'>three-collumns</div>
         <section class="oe_snippet_body container">
             <div class="row">
@@ -152,7 +165,7 @@
         </section>
     </div>
 
-    <div t-name="website.snippets.header-block" data-snippet-id='header-block' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.header-block" data-snippet-id='header-block' data-category='structure' data-action='insert' data-selector-siblings='.container'>
         <div class='oe_snippet_thumbnail oe_label'>header-block</div>
         <section class="container oe_snippet_body">
             <div class="row">