Merge pull request #2050 from odoo-dev/master-theme-review-chm

[IMP] website.snippet: create automatically the thumbnail; fix background

3 files changed, 228 insertions, 97 deletions

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index ebe87769794..db9664bd930 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -105,9 +105,8 @@
 }
 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
   height: 74px;
-  -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
-  -moz-box-shadow: inset 0px 0px 0px 3px #333333;
-  box-shadow: inset 0px 0px 0px 3px #333333;
+  width: 92px;
+  background-size: cover;
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   -ms-transform: scale(1, 1);
@@ -692,3 +691,74 @@
 .cke_panel_container table.colorpicker tr:last-child td {
   padding-bottom: 6px;
 }
+
+/* ---- thumbnail ----  {{{ */
+.oe_snippet.o_block_banner .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_banner.png");
+}
+.oe_snippet.o_block_text_image .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_text_image.png");
+}
+.oe_snippet.o_block_image_text .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_image_text.png");
+}
+.oe_snippet.o_block_jumbotron .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_jumbotron.png");
+}
+.oe_snippet.o_block_text_block .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_text_block.png");
+}
+.oe_snippet.o_block_title .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_title.png");
+}
+.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_features.png");
+}
+.oe_snippet.o_block_big_picture .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_big_picture.png");
+}
+.oe_snippet.o_block_three_columns .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_three_columns.png");
+}
+.oe_snippet.o_block_well .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_well.png");
+}
+.oe_snippet.o_block_quote .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quote.png");
+}
+.oe_snippet.o_block_panel .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_panel.png");
+}
+.oe_snippet.o_block_separator .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_separator.png");
+}
+.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_button.png");
+}
+.oe_snippet.o_block_image_gallery .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_image_gallery.png");
+}
+.oe_snippet.o_block_comparison .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_comparison.png");
+}
+.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_button.png");
+}
+.oe_snippet.o_block_faq .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_faq.png");
+}
+.oe_snippet.o_block_references .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_references.png");
+}
+.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
+}
+.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_features.png");
+}
+.oe_snippet.o_block_parallax .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_parallax.png");
+}
+.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
+}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index a94b8665e0c..4b00c892437 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -82,7 +82,8 @@
             +text-shadow(0 0 2px rgb(0,0,0))
         .oe_snippet_thumbnail_img
             height: 74px
-            +box-shadow(inset 0px 0px 0px 3px #333333)
+            width: 92px
+            background-size: cover
             @include transform( scale(1,1))
         span, div
             line-height: 18px
@@ -549,3 +550,57 @@
         padding-bottom: 6px
 
 // }}}
+
+/* ---- thumbnail ----  {{{ */
+
+.oe_snippet
+    &.o_block_banner .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_banner.png')
+    &.o_block_text_image .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_text_image.png')
+    &.o_block_image_text .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_image_text.png')
+    &.o_block_jumbotron .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_jumbotron.png')
+    &.o_block_text_block .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_text_block.png')
+    &.o_block_title .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_title.png')
+    &.o_block_features .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_features.png')
+    &.o_block_big_picture .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_big_picture.png')
+    &.o_block_three_columns .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_three_columns.png')
+
+    &.o_block_well .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_well.png')
+    &.o_block_quote .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quote.png')
+    &.o_block_panel .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_panel.png')
+    &.o_block_separator .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_separator.png')
+    &.o_block_button .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_button.png')
+
+    &.o_block_image_gallery .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_image_gallery.png')
+    &.o_block_comparison .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_comparison.png')
+    &.o_block_button .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_button.png')
+    &.o_block_faq .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_faq.png')
+    &.o_block_references .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_references.png')
+    &.o_block_quotes_slider .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
+    &.o_block_features .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_features.png')
+
+    &.o_block_parallax .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_parallax.png')
+    &.o_block_quotes_slider .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
+// }}}
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index fc06f4e6aaa..e734d361da9 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -183,11 +183,11 @@
                     var $html = $(html);
 
                     var selector = [];
-                    var $styles = $html.find("[data-option], [data-selector]");
+                    var $styles = $html.find("[data-js], [data-selector]");
                     $styles.each(function () {
                         var $style = $(this);
                         var no_check = $style.data('no-check');
-                        var option_id = $style.data('option');
+                        var option_id = $style.data('js');
                         var option = {
                             'option' : option_id,
                             'base_selector': $style.data('selector'),
@@ -195,7 +195,6 @@
                             '$el': $style,
                             'drop-near': $style.data('drop-near') && self._add_check_selector($style.data('drop-near'), no_check),
                             'drop-in': $style.data('drop-in') && self._add_check_selector($style.data('drop-in'), no_check),
-                            'drop-in-vertical': $style.data('drop-in-vertical') && self._add_check_selector($style.data('drop-in-vertical'), no_check),
                             'data': $style.data()
                         };
                         website.snippet.templateOptions.push(option);
@@ -204,7 +203,20 @@
                     $styles.addClass("hidden");
                     website.snippet.globalSelector = selector.join(",");
 
-                    self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
+                    self.$snippets = $html.find(".tab-content > div > div")
+                        .addClass("oe_snippet")
+                        .each(function () {
+                            if (!$('.oe_snippet_thumbnail', this).size()) {
+                                var $div = $(
+                                    '<div class="oe_snippet_thumbnail">'+
+                                        '<div class="oe_snippet_thumbnail_img"/>'+
+                                        '<span class="oe_snippet_thumbnail_title"></span>'+
+                                    '</div>');
+                                $div.find('span').text($(this).attr("name"));
+                                $(this).prepend($div);
+                            }
+                            $("> *:not(.oe_snippet_thumbnail)", this).addClass('oe_snippet_body');
+                        });
 
                     self.$el.append($html);
 
@@ -320,7 +332,7 @@
         // activate drag and drop for the snippets in the snippet toolbar
         make_snippet_draggable: function($snippets){
             var self = this;
-            var $tumb = $snippets.find(".oe_snippet_thumbnail:first");
+            var $tumb = $snippets.find(".oe_snippet_thumbnail_img:first");
             var left = $tumb.outerWidth()/2;
             var top = $tumb.outerHeight()/2;
             var $toInsert, dropped, $snippet, action, snipped_id;
@@ -339,22 +351,21 @@
                 start: function(){
                     self.hide();
                     dropped = false;
-                    // snippet_selectors => to get drop-near, drop-in, drop-in-vertical
+                    // snippet_selectors => to get drop-near, drop-in
                     $snippet = $(this);
                     var $base_body = $snippet.find('.oe_snippet_body');
                     var selector = [];
                     var selector_siblings = [];
                     var selector_children = [];
-                    var selector_vertical_children = [];
-                    for (var k in website.snippet.templateOptions) {
-                        if ($base_body.is(website.snippet.templateOptions[k].base_selector)) {
-                            selector.push(website.snippet.templateOptions[k].base_selector);
-                            if (website.snippet.templateOptions[k]['drop-near'])
-                                selector_siblings.push(website.snippet.templateOptions[k]['drop-near']);
-                            if (website.snippet.templateOptions[k]['drop-in'])
-                                selector_children.push(website.snippet.templateOptions[k]['drop-in']);
-                            if (website.snippet.templateOptions[k]['drop-in-vertical'])
-                                selector_vertical_children.push(website.snippet.templateOptions[k]['drop-in-vertical']);
+                    var vertical = false;
+                    var temp = website.snippet.templateOptions;
+                    for (var k in temp) {
+                        if ($base_body.is(temp[k].base_selector)) {
+                            selector.push(temp[k].base_selector);
+                            if (temp[k]['drop-near'])
+                                selector_siblings.push(temp[k]['drop-near']);
+                            if (temp[k]['drop-in'])
+                                selector_children.push(temp[k]['drop-in']);
                         }
                     }
 
@@ -362,15 +373,13 @@
                     action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
 
                     if( action === 'insert'){
-                        if (!selector_siblings.length && !selector_children.length && !selector_vertical_children.length) {
-                            console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: "+
-                                "data-drop-near, data-drop-in or data-drop-in-vertical");
+                        if (!selector_siblings.length && !selector_children.length) {
+                            console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: data-drop-near or data-drop-in");
                             return;
                         }
                         self.activate_insertion_zones({
                             siblings: selector_siblings.join(","),
                             children: selector_children.join(","),
-                            vertical_children: selector_vertical_children.join(","),
                         });
 
                     } else if( action === 'mutate' ){
@@ -482,57 +491,48 @@
             var self = this;
             var child_selector = selector.children;
             var sibling_selector = selector.siblings;
-            var vertical_child_selector   =  selector.vertical_children;
 
-            var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
+            var zone_template = $("<div class='oe_drop_zone oe_insert'></div>");
 
             if(child_selector){
                 self.$wrapwrap.find(child_selector).each(function (){
                     var $zone = $(this);
-                    $zone.find('> *:not(.oe_drop_zone):visible').after(zone_template);
-                    $zone.prepend(zone_template);
-                });
-            }
-
-            if(vertical_child_selector){
-                self.$wrapwrap.find(vertical_child_selector).each(function (){
-                    var $zone = $(this);
-                    var $template = $(zone_template).addClass("oe_vertical");
-                    var nb = 0;
-                    var $lastinsert = false;
-                    var left = 0;
-                    var temp_left = 0;
-                    $zone.find('> *:not(.oe_drop_zone):visible').each(function () {
-                        var $col = $(this);
-                        $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px');
-                        $lastinsert = $template.clone();
-                        $(this).after($lastinsert);
-
-                        temp_left = $col.position().left;
-                        if (left === temp_left) {
-                            $col.prev(".oe_drop_zone.oe_vertical").remove();
-                            $col.before($template.clone().css("clear", "left"));
-                        }
-                        else if (!nb) {
-                            $col.before($template.clone());
-                        }
-                        left = temp_left;
-                        nb ++;
-                    });
-                    if (!nb) {
-                        $zone.prepend($template.css('height', $zone.outerHeight()+'px'));
+                    var vertical;
+                    var float = window.getComputedStyle(this).float;
+                    if (float === "left" || float === "right") {
+                        vertical = $zone.parent().outerHeight()+'px';
+                    }
+                    var $drop = zone_template.clone();
+                    if (vertical) {
+                        $drop.addClass("oe_vertical").css('height', vertical);
                     }
+                    $zone.find('> *:not(.oe_drop_zone):visible').after($drop);
+                    $zone.prepend($drop.clone());
                 });
             }
 
             if(sibling_selector){
                 self.$wrapwrap.find(sibling_selector, true).each(function (){
                     var $zone = $(this);
+                    var $drop, vertical;
+                    var float = window.getComputedStyle(this).float;
+                    if (float === "left" || float === "right") {
+                        vertical = $zone.parent().outerHeight()+'px';
+                    }
+
                     if($zone.prev('.oe_drop_zone:visible').length === 0){
-                        $zone.before(zone_template);
+                        $drop = zone_template.clone();
+                        if (vertical) {
+                            $drop.addClass("oe_vertical").css('height', vertical);
+                        }
+                        $zone.before($drop);
                     }
                     if($zone.next('.oe_drop_zone:visible').length === 0){
-                        $zone.after(zone_template);
+                        $drop = zone_template.clone();
+                        if (vertical) {
+                            $drop.addClass("oe_vertical").css('height', vertical);
+                        }
+                        $zone.after($drop);
                     }
                 });
             }
@@ -699,11 +699,11 @@
         */
         set_active: function () {
             var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
-            this.$el.find('[data-check_class], [data-select_class]')
+            this.$el.find('[data-toggle_class], [data-select_class]')
                 .add(this.$el)
-                .filter('[data-check_class], [data-select_class]')
+                .filter('[data-toggle_class], [data-select_class]')
                 .removeClass("active")
-                .filter('[data-check_class="' + classes.join('"], [data-check_class="') + '"] ,'+
+                .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
                     '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
                 .addClass("active");
         },
@@ -728,16 +728,24 @@
         },
 
         reset: function (event) {
-            var self = this, $el, method;
+            var self = this;
+            var lis = self.$el.add(self.$el.find('li')).filter('.active').get();
+            lis.reverse();
+            _.each(lis, function (li) {
+                var $li = $(li);
+                for (var k in self.reset_methods) {
+                    var method = self.reset_methods[k];
+                    if ($li.is('[data-'+method+']') || $li.closest('[data-'+method+']').size()) {
+                        delete self.reset_methods[k];
+                    }
+                }
+                self.select("reset", $li);
+            });
+
             for (var k in self.reset_methods) {
-                method = self.reset_methods[k];
-                var $li = self.$el.find('[data-'+method+']').add(self.$el).filter('.active, :has(.active)');
-                if ($li.size()) {
-                    $li.each(function () {
-                        self.select("reset", $(this));
-                    });
-                } else {
-                    self[method]("reset", null, null);
+                var method = self.reset_methods[k];
+                if (method) {
+                    self[method]("reset", null);
                 }
             }
             self.reset_methods = [];
@@ -783,9 +791,10 @@
             _.each($methods, function (el) {
                 var $el = $(el);
                 var methods = method(el);
+
                 for (var k in methods) {
                     if (self[k]) {
-                        if (self.reset_methods.indexOf(k) === -1) {
+                        if (type !== "reset" && self.reset_methods.indexOf(k) === -1) {
                             self.reset_methods.push(k);
                         }
                         self[k](type, methods[k], $el);
@@ -797,11 +806,11 @@
         },
 
         // default method for snippet
-        check_class: function (type, value, $li) {
-            var $lis = this.$el.find('[data-check_class]').add(this.$el).filter('[data-check_class]');
+        toggle_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
 
             function map ($lis) {
-                return $lis.map(function () {return $(this).data("check_class");}).get().join(" ");
+                return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
             }
             var classes = map($lis);
             var active_classes = map($lis.filter('.active, :has(.active)'));
@@ -821,6 +830,10 @@
             this.$target.removeClass(classes.join(" "));
             if(value) this.$target.addClass(value);
         },
+        eval: function (type, value, $li) {
+            var fn = new Function("node", "type", "value", "$li", value);
+            fn.call(this, this, type, value, $li);
+        },
 
         clean_for_save: dummy
     });
@@ -835,8 +848,10 @@
         background: function(type, value, $li) {
             if (value && value.length) {
                 this.$target.css("background-image", 'url(' + value + ')');
+                this.$target.addClass("oe_img_bg");
             } else {
-                this.$target.css("background-image", "").removeClass("oe_img_bg");
+                this.$target.css("background-image", "");
+                this.$target.removeClass("oe_img_bg").removeClass("oe_custom_bg");
             }
         },
         choose_image: function(type, value, $li) {
@@ -855,15 +870,14 @@
             $image.on('saved', self, function (o) {
                 var value = $image.attr("src");
                 self.$target.css("background-image", 'url(' + value + ')');
-                self.$el.find('li[data-select_class="oe_custom_bg"]').data("src", value);
+                self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
                 self.$target.trigger("snippet-option-change", [self]);
                 $image.remove();
-                self.$target.addClass('oe_custom_bg').removeClass('oe_img_bg');
+                self.$target.addClass('oe_custom_bg oe_img_bg');
                 self.set_active();
             });
             editor.on('cancel', self, function () {
-                self.$target.removeClass("oe_img_bg")
-                    .trigger("snippet-option-change", [self]);
+                self.$target.trigger("snippet-option-change", [self]);
                 $image.remove();
             });
         },
@@ -872,21 +886,19 @@
             var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
             this._super();
 
-            this.$el.find('li[data-background]')
-                .filter(':not([data-background=""])')
+            this.$el.find('li[data-background]:not([data-background=""])')
                 .removeClass("active")
                 .each(function () {
-                    var background = $(this).data("background");
+                    var background = $(this).data("background") || $(this).attr("data-background");
                     if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
                         $(this).addClass("active");
                     }
                 });
-            if(!this.$el.find('li.active').size()) {
-                this.$el.find('li[data-select_class=""][data-background=""], '+
-                    'li[data-select_class=""] li[data-background=""], '+
-                    'li[data-background=""] li[data-select_class=""]').addClass("active");
-                this.$el.filter('li[data-select_class=""]').find('li[data-background=""]').addClass("active");
-                this.$el.filter('li[data-background=""]').find('li[data-select_class=""]').addClass("active");
+
+            if (!this.$el.find('li[data-background].active').size()) {
+                this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
+            } else {
+                this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
             }
         }
     });
@@ -1561,7 +1573,6 @@
             self.BuildingBlock.activate_insertion_zones({
                 siblings: self.selector_siblings,
                 children: self.selector_children,
-                vertical_children: self.selector_vertical_children,
             });
 
             $("body").addClass('move-important');
@@ -1590,14 +1601,12 @@
             this.styles = {};
             this.selector_siblings = [];
             this.selector_children = [];
-            this.selector_vertical_children = [];
             _.each(website.snippet.templateOptions, function (val, option_id) {
                 if (!self.$target.is(val.selector)) {
                     return;
                 }
                 if (val['drop-near']) self.selector_siblings.push(val['drop-near']);
                 if (val['drop-in']) self.selector_children.push(val['drop-in']);
-                if (val['drop-in-vertical']) self.selector_vertical_children.push(val['drop-in-vertical']);
 
                 var option = val['option'];
                 var Editor = website.snippet.options[option] || website.snippet.Option;
@@ -1610,11 +1619,8 @@
             this.selector_children = this.selector_children.join(",");
             if (this.selector_children === "")
                 this.selector_children = false;
-            this.selector_vertical_children = this.selector_vertical_children.join(",");
-            if (this.selector_vertical_children === "")
-                this.selector_vertical_children = false;
 
-            if (!this.selector_siblings && !this.selector_children && !this.selector_vertical_children) {
+            if (!this.selector_siblings && !this.selector_children) {
                 this.$overlay.find(".oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove").addClass('hidden');
             }