[IMP] website snippets: customize and style options inside overlay

bzr revid: chm@openerp.com-20130919123206-kmn3tjxvqykvk0z6

4 files changed, 75 insertions, 65 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 402293bc84f..7d954c97ca5 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -364,8 +364,15 @@ table.editorbar-panel td.selected {
   display: inline-block;
 }
 .oe_overlay .oe_overlay_options .btn {
-  pointer-events: auto;
   display: inline-block;
+  pointer-events: auto;
+}
+.oe_overlay .oe_overlay_options a {
+  pointer-events: auto;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu {
+  text-align: left;
+  min-width: 180px;
 }
 .oe_overlay .oe_overlay_options .oe_label {
   position: absolute;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index d71be46c1ac..162329e60b7 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -322,8 +322,13 @@ table.editorbar-panel
         > div
             display: inline-block
         .btn
-            pointer-events: auto
             display: inline-block
+            pointer-events: auto
+        a
+            pointer-events: auto
+        .dropdown-menu
+            text-align: left
+            min-width: 180px
         .oe_label
             position: absolute
             top: 3px
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index cd11dd4b8c7..8eb1881277d 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -110,13 +110,8 @@
                 .click(function () {self.$el.toggleClass("hidden");})
                 .prependTo($ul);
 
-            var $stylesblock = $(openerp.qweb.render('website.snippets_style')).insertAfter($button);
-            $stylesblock.find('#oe_snippets_style').on('click', 'li a', _.bind(this.change_style, this));
-
             this.fetch_snippet_templates();
 
-            this.change_style_options();
-
             this.bind_selected_manipulator();
             this.bind_snippet_click_editor();
             this.activate_overlay_zones();
@@ -127,6 +122,7 @@
         fetch_snippet_templates: function () {
             var self = this;
             var $styles = self.parent.$('#oe_snippets_style');
+            this.style_templates = {};
 
             _.each(openerp.qweb.compiled_templates, function (val, key) {
                 if (key.indexOf('website.snippets.') === 0) {
@@ -135,15 +131,15 @@
                     if (snipped_id) {
 
                         if ($snippet.data('category') === 'style') {
-                            var $li = $("<li/>")
-                                .data("selector", $snippet.data('selector'))
-                                .data("class", $snippet.find(".oe_snippet_class").text())
-                                .data("snipped-id", snipped_id);
-                            var $a = $('<a href="#"/>').text($snippet.find(".oe_snippet_label").text());
-                            $li.append($a);
-                            $styles.append($li);
-
-                        } else if ($snippet.find(".oe_snippet_thumbnail").length) {
+                            self.style_templates[snipped_id] = {
+                                'snipped-id' : snipped_id,
+                                'selector': $snippet.data('selector'),
+                                'class': $snippet.find(".oe_snippet_class").text(),
+                                'label': $snippet.find(".oe_snippet_label").text(),
+                                '$el': $snippet
+                            };
+                        }
+                        if ($snippet.find(".oe_snippet_thumbnail").length) {
                             self.$el.find('#snippet_' + $snippet.data('category')).append($snippet);
                             self.make_snippet_draggable($snippet);
                         }
@@ -151,47 +147,6 @@
                 }
             });
         },
-        change_style_options: function () {
-            var self = this;
-            var $styles = self.parent.$('#oe_snippets_style');
-            var visible = false;
-            $styles.find("li").each(function () {
-                var $li = $(this);
-                if (!$li.data("snipped-id"))
-                    return;
-
-                if (self.$active_snipped_id && (!$li.data("selector") || self.dom_filter($li.data("selector")).is(self.$active_snipped_id))) {
-                    $li.show();
-                    if (self.$active_snipped_id.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
-                        $li.addClass("active");
-                    } else {
-                        $li.removeClass("active");
-                    }
-                    visible = true;
-                }
-                else {
-                    $li.hide();
-                }
-            });
-            $styles.parents("li:first").toggle(visible);
-        },
-        change_style: function (event) {
-            var $li = $(event.currentTarget).parent();
-            var snipped_id = $li.data("snipped-id");
-            var active = $li.hasClass("active");
-
-            if (website.snippet.editorRegistry[snipped_id]) {
-                var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$active_snipped_id);
-                snippet.build_snippet(this.$active_snipped_id);
-            }
-            var _class = "oe_snippet_" + snipped_id + " " + ($opt.data("class") || "");
-            if (active) {
-                this.$active_snipped_id.addClass(_class);
-            } else {
-                this.$active_snipped_id.removeClass(_class);
-            }
-            $li.toggleClass("active");
-        },
         scrollspy: function (){
             var self = this;
             var $ul = this.$("ul");
@@ -296,7 +251,6 @@
             } else {
                 self.$active_snipped_id = false;
             }
-            this.change_style_options();
         },
         create_overlay: function ($snipped_id) {
             if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
@@ -617,6 +571,7 @@
             this.$overlay = this.$target.data('overlay');
             this.snippet_id = this.$target.data("snippet-id");
             this._readXMLData();
+            this.load_style_options();
             this.start();
         },
 
@@ -645,6 +600,10 @@
 
             var $options = this.$overlay.find(".oe_overlay_options");
             this.$editor.prependTo($options.find(".oe_options ul"));
+            if (!$options.find(".oe_options ul li").length) {
+                $options.find(".oe_options").hide();
+            }
+
             $options.find(".oe_label").text(this.$el.find('.oe_snippet_label').text());
         },
 
@@ -720,6 +679,43 @@
             });
         },
 
+        load_style_options: function () {
+            var self = this;
+            var $styles = this.$overlay.find('.oe_styles');
+            var $ul = $styles.find('ul');
+            $styles.hide();
+            _.each(this.parent.style_templates, function (val, key) {
+                if (!self.parent.dom_filter(val.selector).is(self.$target)) {
+                    return;
+                }
+                var $li = $("<li/>").data(val);
+                $li.append($('<a href="#"/>').text(val.label));
+                $ul.append($li);
+                if (self.$target.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
+                    $li.addClass("active");
+                }
+                $styles.show();
+            });
+            $styles.on('click', 'li a', _.bind(this.change_style, this));
+        },
+        change_style: function (event) {
+            var $li = $(event.currentTarget).parent();
+            var snipped_id = $li.data("snipped-id");
+            var active = $li.hasClass("active");
+
+            if (website.snippet.editorRegistry[snipped_id]) {
+                var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$target);
+                snippet.build_snippet(this.$target);
+            }
+            var _class = "oe_snippet_" + snipped_id + " " + ($li.data("class") || "");
+            if (active) {
+                this.$target.removeClass(_class);
+            } else {
+                this.$target.addClass(_class);
+            }
+            $li.toggleClass("active");
+        },
+
         /*
         *  start
         *  This method is called after init and _readXMLData
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index c70b961e9e2..44e6ea4f35b 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -37,14 +37,16 @@
         <div class="oe_overlay">
             <div class="oe_overlay_options">
                 <div class="dropdown oe_options">
-                    <a href="#" data-toggle="dropdown" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-cog"/></a>
-                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-                        <li class="divider"></li>
-                    </ul>
+                    <a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Customize">Customize <span class="glyphicon glyphicon-cog"/></a>
+                    <ul class="dropdown-menu" role="menu"></ul>
+                </div>
+                <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate"><span class="glyphicon glyphicon-tags"/></a>
+                <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="move"><span class="glyphicon glyphicon-move"/></a>
+                <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove"><span class="glyphicon glyphicon-remove"/></a>
+                <div class="dropdown oe_styles">
+                    <a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Styles"><span class="glyphicon glyphicon-cog"/> Styles</a>
+                    <ul class="dropdown-menu" role="menu"></ul>
                 </div>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_clone"><span class="glyphicon glyphicon-tags"/></a>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_move"><span class="glyphicon glyphicon-move"/></a>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_remove"><span class="glyphicon glyphicon-remove"/></a>
                 <div class="oe_label"></div>
             </div>
         </div>