From d97d58f5db12f17b723bc9f1cb71b924470efc11 Mon Sep 17 00:00:00 2001
From: Fabien Pinckaers <fp@openerp.com>
Date: Sun, 8 Sep 2013 23:01:39 +0200
Subject: [PATCH] [IMP] structure in snippets

bzr revid: fp@openerp.com-20130908210139-3wsl86ij3yd5udqz
---
 addons/website/static/src/css/editor.css  |  14 +-
 addons/website/static/src/css/editor.sass |  11 +-
 addons/website/views/views.xml            | 253 +++++++++++++++-------
 3 files changed, 189 insertions(+), 89 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index df098f28353..1e751f861c9 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -105,13 +106,18 @@ table.editorbar-panel td.selected {
   left: 0px;
   right: 0px;
   bottom: 0px;
-  max-height: 280px;
-  min-height: 140px;
   background: #282828;
   box-shadow: 0px 10px 10px -10px black inset;
   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_snippet {
   display: inline-block;
@@ -120,10 +126,10 @@ table.editorbar-panel td.selected {
   width: 120px;
   height: 120px;
   border-radius: 3px;
-  margin: 10px;
+  margin: 8px;
   margin-right: 0px;
   position: relative;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 2da2b4bbeeb..135523cc1c2 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -98,12 +98,15 @@ table.editorbar-panel
     left: 0px
     right: 0px
     bottom: 0px
-    max-height: 280px
-    min-height: 140px
     background: rgb(40,40,40)
     box-shadow: 0px 10px 10px -10px black inset
     overflow-y: auto
     z-index: 100
+    .nav-pills
+        padding: 3px 8px
+        background: #444
+        > li > a
+            padding: 2px 10px !important
 
 .oe_snippet
     display: inline-block
@@ -112,10 +115,10 @@ table.editorbar-panel
     width: 120px
     height: 120px
     border-radius: 3px
-    margin: 10px
+    margin: 8px
     margin-right: 0px
     position: relative
-    box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
+    box-shadow: 0px 3px 8px rgba(0,0,0,0.2)
     overflow: hidden
     -webkit-user-select: none
     user-select: none
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 90de96e1541..6fabb6f2945 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -196,8 +196,8 @@
                     <section class="container">
                         <div class="row">
                             <div class="col-md-12 text-center">
-                                 <h1>Welcome To Your New Homepage,</h1>
-                                 <h2>where <b>everything</b> can be <em>customized</em></h2>
+                                 <h1>Your Company Slogan</h1>
+                                 <h2 class="text-muted">Your company subheader slogan</h2>
                             </div>
                         </div>
                     </section>
@@ -229,7 +229,8 @@
                     <section class="container">
                         <div class="row">
                             <div class="col-md-12 text-center">
-                                 <h2 class="mt48">Ut enim ad minim veniam</h2>
+                                <h2 class="mt48">Ut enim ad minim veniam</h2>
+                                <h3 class="mt48">Ut enim veniam</h3>
                             </div>
                         </div>
                         <div class="row mt32">
@@ -419,90 +420,180 @@
         </template>
 
         <template id="snippets">
-            <div class='oe_snippet' data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
-                <div class='oe_snippet_thumbnail oe_label'>Darken</div>
-            </div>
+            <ul class="nav nav-pills" t-ignore="true">
+              <li class="active"><a href="#snippet_structure" data-toggle="pill">Structure</a></li>
+              <li><a href="#snippet_content" data-toggle="pill">Content</a></li>
+              <li><a href="#snippet_emphasize" data-toggle="pill">Emphasize</a></li>
+              <li><a href="#snippet_style" data-toggle="pill">Style</a></li>
+            </ul>
+            <div class="pill-content" t-ignore="true">
+                <div class="pill-pane active" id="snippet_structure">
 
-            <div class='oe_snippet' data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
-                <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
-            </div>
-
-            <div class='oe_snippet' data-snippet-id='spacer' data-action='insert' data-selector-siblings='#wrap .container'>
-                <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
-                <div class="oe_snippet_body container mt32"></div>
-            </div>
-
-            <div class='oe_snippet' data-snippet-id='title' data-action='insert' data-selector-siblings='#wrap .container'>
-                <div class='oe_snippet_thumbnail oe_label'>
-                    Main Title
-                </div>
-                <section class="oe_snippet_body container">
-                    <div class="row">
-                        <div class="col-md-12 text-center">
-                            <h1 class="mt64">Welcome To Your New Homepage,</h1>
-                            <h2 class="mt32 subheader">where <b><em>everything</em></b> can be customized </h2>
+                    <div class='oe_snippet' data-snippet-id='title' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <div class='oe_snippet_thumbnail oe_label'>
+                            Title
                         </div>
-                    </div>
-                </section>
-            </div>
-
-            <div class='oe_snippet' data-snippet-id='' data-action='insert' data-selector-siblings='#wrap .container'>
-                <section class="oe_snippet_body container">
-                    <div class="row">
-                        <div class="col-md-12 text-center">
-                            <h2 class="mt48">Ut enim ad minim veniam</h2>
-                        </div>
-                    </div>
-                    <div class="row mt32">
-                        <div class="col-md-4">
-                            <img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
-                            <h4 class="mt16">Cillum Dolore</h4>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                                consequat.</p>
-                        </div>
-                        <div class="col-md-4">
-                            <img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
-                            <h4 class="mt16">Mollit Anim</h4>
-                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
-                        </div>
-                        <div class="col-md-4">
-                            <img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
-                            <h4 class="mt16">Nemo Enim Ipsam</h4>
-                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-                                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
-                                veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                                ipsam voluptatem quia voluptas</p>
-                        </div>
-                    </div>
-                </section>
-            </div>
-
-            <div class='oe_snippet' name='Header' data-action='insert' data-selector-siblings='#wrap .container'>
-                <section class="container oe_snippet_body">
-                    <div class="row">
-                        <div class="col-md-5">
-                            <img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
-                        </div>
-                        <div class="col-md-6 col-lg-offset-1">
-                            <p class="mt16">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                                consequat.</p>
-                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
-                            <div class="text-center">
-                                <a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To  <em>Action</em></a>
+                        <section class="oe_snippet_body container">
+                            <div class="row">
+                                <div class="col-md-12 text-center">
+                                    <h1>Inline Editing Made Easy</h1>
+                                    <h2 class="text-muted">What You See Is What You Get. Really.</h2>
+                                </div>
                             </div>
-                        </div>
+                        </section>
                     </div>
-                </section>
+        
+                    <div class='oe_snippet' data-snippet-id='jumbotron' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <div class='oe_snippet_thumbnail oe_label'>
+                            Jumbotron
+                        </div>
+                        <section class="oe_snippet_body jumbotron">
+                            <div class="container">
+                                <h1>Sell Online. Easily.</h1>
+                                <p>
+                                    Get your eCommerce website in just a few clicks.
+                                </p>
+                                <p><a class="btn btn-primary btn-lg" href="/page/website.contactus">Contact us</a></p>
+                            </div>
+                        </section>
+                    </div>
+
+
+ 
+                    <div class='oe_snippet' data-snippet-id='' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <section class="oe_snippet_body container">
+                            <div class="row">
+                                <div class="col-md-12 text-center">
+                                    <h2 class="mt48">Ut enim ad minim veniam</h2>
+                                </div>
+                            </div>
+                            <div class="row mt32">
+                                <div class="col-md-4">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
+                                    <h4 class="mt16">Cillum Dolore</h4>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                                        consequat.</p>
+                                </div>
+                                <div class="col-md-4">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
+                                    <h4 class="mt16">Mollit Anim</h4>
+                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+                                </div>
+                                <div class="col-md-4">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
+                                    <h4 class="mt16">Nemo Enim Ipsam</h4>
+                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+                                        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                                        ipsam voluptatem quia voluptas</p>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+
+                    <div class='oe_snippet' name='Header' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <section class="container oe_snippet_body">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <h2>
+                                        A great experience.
+                                    </h2>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                                        consequat.
+                                    </p>
+                                    <div>
+                                        <a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To  <em>Action</em></a>
+                                    </div>
+                                </div>
+                                <div class="col-md-5 col-lg-offset-1">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+
+                    <div class='oe_snippet' name='Header' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <section class="container oe_snippet_body">
+                            <div class="row">
+                                <div class="col-md-5">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
+                                </div>
+                                <div class="col-md-6 col-lg-offset-1">
+                                    <h2>
+                                        A great experience.
+                                    </h2>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                                        consequat.
+                                    </p>
+                                    <div>
+                                        <a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To  <em>Action</em></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+
+                    <div class='oe_snippet' name='Header' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <section class="container oe_snippet_body">
+                            <div class="row">
+                                <div class="col-md-5">
+                                    <img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
+                                </div>
+                                <div class="col-md-6 col-lg-offset-1">
+                                    <h2>
+                                        A great experience.
+                                    </h2>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                                        consequat.
+                                    </p>
+                                    <div>
+                                        <a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To  <em>Action</em></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+
+                </div>
+
+                <div class="pill-pane" id="snippet_content">
+
+                    <div class='oe_snippet' data-snippet-id='spacer' data-action='insert' data-selector-siblings='#wrap .container'>
+                        <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
+                        <div class="oe_snippet_body container mt32"></div>
+                    </div>
+
+                </div>
+                <div class="pill-pane" id="snippet_emphasize">
+
+                    <div class='oe_snippet' data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
+                        <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
+                    </div>
+
+                </div>
+                <div class="pill-pane" id="snippet_style">
+
+                    <div class='oe_snippet' data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
+                        <div class='oe_snippet_thumbnail oe_label'>Darken</div>
+                    </div>
+
+                </div>
             </div>
 
+
         </template>