[IMP] website: snippet editor: add pill and group by category; fix overlay

bzr revid: chm@openerp.com-20130911152000-lzt62hinncodcnoc
This commit is contained in:
Christophe Matthieu
2013-09-11 17:20:00 +02:00
parent 588542743e
commit 79cc608e57
4 changed files with 39 additions and 13 deletions
+10
View File
@@ -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;
@@ -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
@@ -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;
@@ -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">