[REF] mass_mailing: convert templates to themes and clean code

* Remove mass mailing template switching system (lemon, airmail, ...)
and replace it with a theme selector which only toggle a different
class on the body.
* Lint JS files.
* Change the way the editor is overridden by mass_mailing in a more
odoo way (put the JS in assets and check on runtime if it must be
applied.

+ fix editor style
+ remove useless code
+ remove odoo template

11 files changed, 346 insertions, 340 deletions

diff --git a/addons/mass_mailing/static/src/css/airmail_template.css b/addons/mass_mailing/static/src/css/airmail_template.css
deleted file mode 100644
index 00c32beeace..00000000000
--- a/addons/mass_mailing/static/src/css/airmail_template.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*Airmail Template*/
-
-.airmail_template_header, .airmail_template_footer {
-    background-color: #d05d68;
-}
-.airmail_template {
-    background-color: #ededed;
-}
-.airmail_template_container {
-    background-color: white;
-    box-shadow: none;
-}
-
-/*Colors*/
-
-.airmail_template .bg-alpha {
-    background-color: #fff;
-}
-.airmail_template .bg-alpha p, .airmail_template .bg-alpha .display-1, .airmail_template .bg-alpha .display-2, .airmail_template .bg-alpha .display-3 {
-    color: #000;
-}
-.airmail_template .bg-beta {
-    background-color: #6077a8;
-}
-.airmail_template .bg-beta p, .airmail_template .bg-beta .display-1, .airmail_template .bg-beta .display-2, .airmail_template .bg-beta .display-3 {
-    color: #fff;
-}
-.airmail_template .bg-beta .link-color {
-    color: #dab4a8;
-}
-.airmail_template .bg-gamma {
-    background-color: #a17e92;
-}
-.airmail_template .bg-gamma .link-color {
-    color: #dab4a8;
-}
-.airmail_template .bg-gamma p, .airmail_template .bg-gamma .display-1, .airmail_template .bg-gamma .display-2, .airmail_template .bg-gamma .display-3 {
-    color: #fff;
-}
-.airmail_template .bg-delta {
-    background-color: #dab4a8;
-}
-.airmail_template .bg-delta p, .airmail_template .bg-delta .display-1, .airmail_template .bg-delta .display-2, .airmail_template .bg-delta .display-3 {
-    color: #000;
-}
-.airmail_template .bg-epsilon {
-    background-color: #d05d68;
-}
-.airmail_template .bg-epsilon p, .airmail_template .bg-epsilon .display-1, .airmail_template .bg-epsilon .display-2, .airmail_template .bg-epsilon .display-3 {
-    color: #fff;
-}
-.airmail_template .bg-epsilon .link-color {
-    color: #fff;
-}
-
-/*Link color*/
-
-.airmail_template .link-color {
-    color: #d05d68;
-}
-
-/*BTN styles*/
-
-.airmail_template .newsletter-btn {
-    color: #d05d68;
-    border: 1px solid #d05d68;
-    border-radius: 4px;
-    background-color: transparent;
-}
-.airmail_template .bg-gamma .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
-.airmail_template .bg-epsilon .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/css/lemon_template.css b/addons/mass_mailing/static/src/css/lemon_template.css
deleted file mode 100644
index 21b97f34fad..00000000000
--- a/addons/mass_mailing/static/src/css/lemon_template.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.lemon_template {
-    background-color: #fff;
-}
-.lemon_template_header {
-    background-color: #fe4e1e;
-}
-.lemon_template_container {
-    background-color: #f4ea00;
-}
-
-.lemon_template p {
-    color: #000;
-}
-.lemon_template .bg-alpha {
-    background-color: #fff;
-}
-.lemon_template .bg-alpha .display-1, .lemon_template .bg-alpha p, .lemon_template .bg-alpha .display-2, .lemon_template .bg-alpha .display-3{
-    color: #000;
-}
-.lemon_template .bg-beta {
-    background-color: #f4ea00;
-}
-.lemon_template .bg-beta p, .lemon_template .bg-beta .display-1, .lemon_template .bg-beta .display-2, .lemon_template .bg-beta .display-3 {
-    color: #000;
-}
-.lemon_template .bg-gamma {
-    background-color: #d6d5b6;
-}
-.lemon_template .bg-gamma p, .lemon_template .bg-gamma .display-1, .lemon_template .bg-gamma .display-2, .lemon_template .bg-gamma .display-3 {
-    color: #000;
-}
-.lemon_template .bg-gamma .link-color {
-    color: #fe4e1e;
-}
-.lemon_template .bg-delta {
-    background-color: #000;
-}
-.lemon_template .bg-delta p, .lemon_template .bg-delta .display-1, .lemon_template .bg-delta .display-2, .lemon_template .bg-delta .display-3 {
-    color: #fff;
-}
-.lemon_template .bg-delta .link-color {
-    color: #fe4e1e;
-}
-.lemon_template .bg-epsilon {
-    background-color: #fe4e1e;
-}
-.lemon_template .bg-epsilon p, .lemon_template .bg-epsilon .display-1, .lemon_template .bg-epsilon .display-2, .lemon_template .bg-epsilon .display-3 {
-    color: #fff;
-}
-.lemon_template .bg-epsilon .link-color {
-    color: #f4ea00;
-}
-
-.lemon_template .link-color {
-    color: #fe4e1e;
-}
-
-/*BTN styles*/
-
-.lemon_template .newsletter-btn {
-    color: #fff;
-    background-color: #fe4e1e;
-    font-size: 12px;
-}
-
-/*Snippet styles*/
-
-.lemon_template .separator {
-    background-color: #fff;
-}
-.lemon_template .snippet-general {
-    margin:0 auto;
-}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/css/odoo_template.css b/addons/mass_mailing/static/src/css/odoo_template.css
deleted file mode 100644
index 43d6486ac7a..00000000000
--- a/addons/mass_mailing/static/src/css/odoo_template.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.odoo_template {
-    background-color: #ededed;
-}
-.odoo_template_container {
-    background-color: #fff;
-    -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.3);
-    -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.3);
-    box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.3);
-}
-.odoo_template .bg-alpha {
-    background-color: #fff;
-}
-.odoo_template .bg-alpha .display-1, .odoo_template .bg-alpha p, .odoo_template .bg-alpha .display-2, .odoo_template .bg-alpha .display-3{
-    color: #000;
-}
-.odoo_template .bg-beta {
-    background-color: #875a7b;
-}
-.odoo_template .bg-beta p, .odoo_template .bg-beta .display-1, .odoo_template .bg-beta .display-2, .odoo_template .bg-beta .display-3 {
-    color: #fff;
-}
-.odoo_template .bg-gamma {
-    background-color: #e46f78;
-}
-.odoo_template .bg-gamma p, .odoo_template .bg-gamma .display-1, .odoo_template .bg-gamma .display-2, .odoo_template .bg-gamma .display-3 {
-    color: #fff;
-}
-.odoo_template .bg-gamma .link-color {
-    color: #3d5d6b;
-}
-.odoo_template .bg-delta {
-    background-color: #34c9a4;
-}
-.odoo_template .bg-delta p, .odoo_template .bg-delta .display-1, .odoo_template .bg-delta .display-2, .odoo_template .bg-delta .display-3 {
-    color: #fff;
-}
-.odoo_template .bg-delta .link-color {
-    color: #3d5d6b;
-}
-.odoo_template .bg-epsilon {
-    background-color: #3d5d6b;
-}
-.odoo_template .bg-epsilon p, .odoo_template .bg-epsilon .display-1, .odoo_template .bg-epsilon .display-2, .odoo_template .bg-epsilon .display-3 {
-    color: #fff;
-}
-
-.odoo_template .link-color {
-    color: #34c9a4;
-}
-
diff --git a/addons/mass_mailing/static/src/css/snippet_styles.css b/addons/mass_mailing/static/src/css/snippet_styles.css
index fc7d7d15ab9..2035ea37ea1 100644
--- a/addons/mass_mailing/static/src/css/snippet_styles.css
+++ b/addons/mass_mailing/static/src/css/snippet_styles.css
@@ -3,12 +3,6 @@
         width: 600px;
     }
 }
-#oe_snippets #snippets_menu li {
-    width: 20%;
-}
-#email_designer_layout .o_panel_body .oe_snippet_thumbnail_img {
-    cursor: crosshair;
-}
 
 /* ======================== TYPO ====================== */
 
diff --git a/addons/mass_mailing/static/src/css/tech_template.css b/addons/mass_mailing/static/src/css/tech_template.css
deleted file mode 100644
index 3d63a88ad94..00000000000
--- a/addons/mass_mailing/static/src/css/tech_template.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.tech_template {
-    background-color: #fff;
-}
-.tech_template_header {
-    background-color: #e3e3e3;
-}
-
-.tech_template p {
-    color: #494949;
-}
-.tech_template .bg-alpha {
-    background-color: #fff;
-}
-.tech_template .bg-alpha .display-1, .tech_template .bg-alpha p, .tech_template .bg-alpha .display-2, .tech_template .bg-alpha .display-3{
-    color: #000;
-}
-.tech_template .bg-beta {
-    background-color: #dadada;
-}
-.tech_template .bg-beta p, .tech_template .bg-beta .display-1, .tech_template .bg-beta .display-2, .tech_template .bg-beta .display-3 {
-    color: #000;
-}
-.tech_template .bg-beta .link-color {
-    color: #de5745;
-}
-.tech_template .bg-gamma {
-    background-color: #de5745;
-}
-.tech_template .bg-gamma p, .tech_template .bg-gamma .display-1, .tech_template .bg-gamma .display-2, .tech_template .bg-gamma .display-3 {
-    color: #fff;
-}
-.tech_template .bg-gamma .link-color {
-    color: #ccda3f;
-}
-.tech_template .bg-delta {
-    background-color: #4a9fba;
-}
-.tech_template .bg-delta p, .tech_template .bg-delta .display-1, .tech_template .bg-delta .display-2, .tech_template .bg-delta .display-3 {
-    color: #fff;
-}
-.tech_template .bg-delta .link-color {
-    color: #ccda3f;
-}
-.tech_template .bg-epsilon {
-    background-color: #ccda3f;
-}
-.tech_template .bg-epsilon p, .tech_template .bg-epsilon .display-1, .tech_template .bg-epsilon .display-2, .tech_template .bg-epsilon .display-3 {
-    color: #000;
-}
-.tech_template .bg-epsilon .link-color {
-    color: #de5745;
-}
-
-.tech_template .link-color {
-    color: #ccda3f;
-}
-
-/*BTN styles*/
-
-.tech_template .newsletter-btn {
-    color: #fff;
-    background-color: #ccda3f;
-    font-size: 12px;
-}
-.tech_template .bg-epsilon .newsletter-btn {
-    background-color: #de5745;
-}
-
-/*Snippet styles*/
-
-.tech_template .snippet-general {
-    margin:0 auto;
-}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/css/themes/airmail.css b/addons/mass_mailing/static/src/css/themes/airmail.css
new file mode 100644
index 00000000000..655d4bd19ee
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/airmail.css
@@ -0,0 +1,77 @@
+/*Airmail Template*/
+
+.o_airmail_theme_header, .o_airmail_theme_footer {
+    background-color: #d05d68;
+}
+.o_airmail_theme {
+    background-color: #ededed;
+}
+.o_airmail_theme_container {
+    background-color: white;
+    box-shadow: none;
+}
+
+/*Colors*/
+
+.o_airmail_theme .bg-alpha {
+    background-color: #fff;
+}
+.o_airmail_theme .bg-alpha p, .o_airmail_theme .bg-alpha .display-1, .o_airmail_theme .bg-alpha .display-2, .o_airmail_theme .bg-alpha .display-3 {
+    color: #000;
+}
+.o_airmail_theme .bg-beta {
+    background-color: #6077a8;
+}
+.o_airmail_theme .bg-beta p, .o_airmail_theme .bg-beta .display-1, .o_airmail_theme .bg-beta .display-2, .o_airmail_theme .bg-beta .display-3 {
+    color: #fff;
+}
+.o_airmail_theme .bg-beta .link-color {
+    color: #dab4a8;
+}
+.o_airmail_theme .bg-gamma {
+    background-color: #a17e92;
+}
+.o_airmail_theme .bg-gamma .link-color {
+    color: #dab4a8;
+}
+.o_airmail_theme .bg-gamma p, .o_airmail_theme .bg-gamma .display-1, .o_airmail_theme .bg-gamma .display-2, .o_airmail_theme .bg-gamma .display-3 {
+    color: #fff;
+}
+.o_airmail_theme .bg-delta {
+    background-color: #dab4a8;
+}
+.o_airmail_theme .bg-delta p, .o_airmail_theme .bg-delta .display-1, .o_airmail_theme .bg-delta .display-2, .o_airmail_theme .bg-delta .display-3 {
+    color: #000;
+}
+.o_airmail_theme .bg-epsilon {
+    background-color: #d05d68;
+}
+.o_airmail_theme .bg-epsilon p, .o_airmail_theme .bg-epsilon .display-1, .o_airmail_theme .bg-epsilon .display-2, .o_airmail_theme .bg-epsilon .display-3 {
+    color: #fff;
+}
+.o_airmail_theme .bg-epsilon .link-color {
+    color: #fff;
+}
+
+/*Link color*/
+
+.o_airmail_theme .link-color {
+    color: #d05d68;
+}
+
+/*BTN styles*/
+
+.o_airmail_theme .newsletter-btn {
+    color: #d05d68;
+    border: 1px solid #d05d68;
+    border-radius: 4px;
+    background-color: transparent;
+}
+.o_airmail_theme .bg-gamma .newsletter-btn {
+    color: #fff;
+    border: 1px solid #fff;
+}
+.o_airmail_theme .bg-epsilon .newsletter-btn {
+    color: #fff;
+    border: 1px solid #fff;
+}
diff --git a/addons/mass_mailing/static/src/css/themes/lemon.css b/addons/mass_mailing/static/src/css/themes/lemon.css
new file mode 100644
index 00000000000..df6a83f9e17
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/lemon.css
@@ -0,0 +1,75 @@
+/* ======================== COLORS ====================== */
+
+.o_lemon_theme {
+    background-color: #fff;
+}
+.o_lemon_theme_header {
+    background-color: #fe4e1e;
+}
+.o_lemon_theme_container {
+    background-color: #f4ea00;
+}
+
+.o_lemon_theme p {
+    color: #000;
+}
+.o_lemon_theme .bg-alpha {
+    background-color: #fff;
+}
+.o_lemon_theme .bg-alpha .display-1, .o_lemon_theme .bg-alpha p, .o_lemon_theme .bg-alpha .display-2, .o_lemon_theme .bg-alpha .display-3{
+    color: #000;
+}
+.o_lemon_theme .bg-beta {
+    background-color: #f4ea00;
+}
+.o_lemon_theme .bg-beta p, .o_lemon_theme .bg-beta .display-1, .o_lemon_theme .bg-beta .display-2, .o_lemon_theme .bg-beta .display-3 {
+    color: #000;
+}
+.o_lemon_theme .bg-gamma {
+    background-color: #d6d5b6;
+}
+.o_lemon_theme .bg-gamma p, .o_lemon_theme .bg-gamma .display-1, .o_lemon_theme .bg-gamma .display-2, .o_lemon_theme .bg-gamma .display-3 {
+    color: #000;
+}
+.o_lemon_theme .bg-gamma .link-color {
+    color: #fe4e1e;
+}
+.o_lemon_theme .bg-delta {
+    background-color: #000;
+}
+.o_lemon_theme .bg-delta p, .o_lemon_theme .bg-delta .display-1, .o_lemon_theme .bg-delta .display-2, .o_lemon_theme .bg-delta .display-3 {
+    color: #fff;
+}
+.o_lemon_theme .bg-delta .link-color {
+    color: #fe4e1e;
+}
+.o_lemon_theme .bg-epsilon {
+    background-color: #fe4e1e;
+}
+.o_lemon_theme .bg-epsilon p, .o_lemon_theme .bg-epsilon .display-1, .o_lemon_theme .bg-epsilon .display-2, .o_lemon_theme .bg-epsilon .display-3 {
+    color: #fff;
+}
+.o_lemon_theme .bg-epsilon .link-color {
+    color: #f4ea00;
+}
+
+.o_lemon_theme .link-color {
+    color: #fe4e1e;
+}
+
+/*BTN styles*/
+
+.o_lemon_theme .newsletter-btn {
+    color: #fff;
+    background-color: #fe4e1e;
+    font-size: 12px;
+}
+
+/*Snippet styles*/
+
+.o_lemon_theme .separator {
+    background-color: #fff;
+}
+.o_lemon_theme .snippet-general {
+    margin:0 auto;
+}
diff --git a/addons/mass_mailing/static/src/css/themes/tech.css b/addons/mass_mailing/static/src/css/themes/tech.css
new file mode 100644
index 00000000000..00ea206cd48
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/tech.css
@@ -0,0 +1,75 @@
+/* ======================== COLORS ====================== */
+
+.o_tech_theme {
+    background-color: #fff;
+}
+.o_tech_theme_header {
+    background-color: #e3e3e3;
+}
+
+.o_tech_theme p {
+    color: #494949;
+}
+.o_tech_theme .bg-alpha {
+    background-color: #fff;
+}
+.o_tech_theme .bg-alpha .display-1, .o_tech_theme .bg-alpha p, .o_tech_theme .bg-alpha .display-2, .o_tech_theme .bg-alpha .display-3{
+    color: #000;
+}
+.o_tech_theme .bg-beta {
+    background-color: #dadada;
+}
+.o_tech_theme .bg-beta p, .o_tech_theme .bg-beta .display-1, .o_tech_theme .bg-beta .display-2, .o_tech_theme .bg-beta .display-3 {
+    color: #000;
+}
+.o_tech_theme .bg-beta .link-color {
+    color: #de5745;
+}
+.o_tech_theme .bg-gamma {
+    background-color: #de5745;
+}
+.o_tech_theme .bg-gamma p, .o_tech_theme .bg-gamma .display-1, .o_tech_theme .bg-gamma .display-2, .o_tech_theme .bg-gamma .display-3 {
+    color: #fff;
+}
+.o_tech_theme .bg-gamma .link-color {
+    color: #ccda3f;
+}
+.o_tech_theme .bg-delta {
+    background-color: #4a9fba;
+}
+.o_tech_theme .bg-delta p, .o_tech_theme .bg-delta .display-1, .o_tech_theme .bg-delta .display-2, .o_tech_theme .bg-delta .display-3 {
+    color: #fff;
+}
+.o_tech_theme .bg-delta .link-color {
+    color: #ccda3f;
+}
+.o_tech_theme .bg-epsilon {
+    background-color: #ccda3f;
+}
+.o_tech_theme .bg-epsilon p, .o_tech_theme .bg-epsilon .display-1, .o_tech_theme .bg-epsilon .display-2, .o_tech_theme .bg-epsilon .display-3 {
+    color: #000;
+}
+.o_tech_theme .bg-epsilon .link-color {
+    color: #de5745;
+}
+
+.o_tech_theme .link-color {
+    color: #ccda3f;
+}
+
+/*BTN styles*/
+
+.o_tech_theme .newsletter-btn {
+    color: #fff;
+    background-color: #ccda3f;
+    font-size: 12px;
+}
+.o_tech_theme .bg-epsilon .newsletter-btn {
+    background-color: #de5745;
+}
+
+/*Snippet styles*/
+
+.o_tech_theme .snippet-general {
+    margin:0 auto;
+}
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 6d2f025a438..23e8a84f155 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -1,33 +1,41 @@
 odoo.define('mass_mailing.editor', function (require) {
 "use strict";
 
-var Model = require('web.Model');
+var ajax = require("web.ajax");
+var core = require("web.core");
 var rte = require('web_editor.rte');
 var web_editor = require('web_editor.editor');
 var options = require('web_editor.snippets.options');
 var snippets_editor = require('web_editor.snippet.editor');
 
+var _t = core._t;
+
+var $editable_area = $("#editable_area");
+if ($editable_area.length === 0 || !$editable_area.is(".o_mail_area")) {
+    return;
+}
+
 // Snippet option for resizing  image and column width inline like excel
 options.registry["width-x"] = options.Class.extend({
     start: function () {
         this.container_width = 600;
         var parent = this.$target.closest('[data-max-width]');
-        if( parent.length ){
+        if (parent.length) {
             this.container_width = parseInt(parent.attr('data-max-width'));
-        } 
+        }
         var self = this;
         var offset, sib_offset, target_width, sib_width;
         this.is_image = false;
         this._super();
 
         this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
-        if( this.$target.is('img')){
+        if (this.$target.is('img')) {
             this.$overlay.find(".oe_handle.w").addClass("readonly");
             this.$overlay.find(".oe_snippet_remove, .oe_snippet_move, .oe_snippet_clone").addClass("hidden");
             this.is_image=true;
         }
 
-        this.$overlay.find(".oe_handle").on('mousedown', function (event){
+        this.$overlay.find(".oe_handle").on('mousedown', function (event) {
             event.preventDefault();
             var $handle = $(this);
             var compass = false;
@@ -35,12 +43,12 @@ options.registry["width-x"] = options.Class.extend({
             _.each(['n', 's', 'e', 'w' ], function(handler) {
                 if ($handle.hasClass(handler)) { compass = handler; }
             });
-            if(self.is_image){ compass = "image"; }
+            if (self.is_image) { compass = "image"; }
             self.buildingBlock.editor_busy = true;
 
             var $body = $(document.body);
 
-            var body_mousemove = function (event){
+            var body_mousemove = function (event) {
                 event.preventDefault();
                 offset = self.$target.offset().left;
                 target_width = self.get_max_width(self.$target);
@@ -56,11 +64,11 @@ options.registry["width-x"] = options.Class.extend({
                     self.change_width(event, self.$target, target_width, offset ,'minus');
                     self.change_width(event, self.$target.prev(), sib_width, sib_offset, 'plus');
                 }
-                if (compass === 'image'){
+                if (compass === 'image') {
                     self.change_width(event, self.$target, target_width, offset ,'plus');
                 }
-            }
-            var body_mouseup = function(){
+            };
+            var body_mouseup = function () {
                 $body.unbind('mousemove', body_mousemove);
                 $body.unbind('mouseup', body_mouseup);
                 self.buildingBlock.editor_busy = false;
@@ -70,12 +78,13 @@ options.registry["width-x"] = options.Class.extend({
             $body.mouseup(body_mouseup);
         });
     },
-    change_width:function(event, target ,target_width, offset, type){
+    change_width: function (event, target ,target_width, offset, type) {
         var self = this;
-        if(type == 'plus'){
-            var width = event.pageX-offset;
-        }else{
-            var width = offset + target_width - event.pageX;
+        var width;
+        if (type === 'plus') {
+            width = event.pageX-offset;
+        } else {
+            width = offset + target_width - event.pageX;
         }
         target.css("width", width + "px");
         self.buildingBlock.cover_target(self.$overlay, self.$target);
@@ -90,17 +99,17 @@ options.registry["width-x"] = options.Class.extend({
         var self = this;
         _.each($el.siblings(),function(sib){
             max_width +=  self.get_int_width($(sib));
-        })
+        });
         return this.container_width - max_width;
     },
     on_clone: function ($clone) {
         var clone_index = $(this.$target).index();
         var $table = this.$target.parents('table[data-max-width]');
-        if($table.length == 1){
+        if ($table.length === 1){
             _.each($table.find('tbody>tr'),function(row){
                 var clone_selector = 'td:eq(' + clone_index + ')';
                 var $col_to_clone = $(row).find(clone_selector);
-                if($col_to_clone.length != 0){
+                if ($col_to_clone.length !== 0){
                     $col_to_clone.after($col_to_clone.clone());
                 }
             });
@@ -111,63 +120,86 @@ options.registry["width-x"] = options.Class.extend({
     on_remove: function () {
         var remove_index = $(this.$target).index();
         var $table = this.$target.parents('table[data-max-width]');
-        if($table.length == 1){
+        if ($table.length === 1){
             _.each($table.find('tbody>tr'),function(row){
                 var remove_selector = 'td:eq(' + remove_index + ')';
                 $(row).find(remove_selector).remove();
             });
         }
-        this._super();
+        this._super.apply(this, arguments);
         this.buildingBlock.cover_target(this.$overlay, this.$target);
     },
 });
 
-
 var fn_popover_update = $.summernote.eventHandler.modules.popover.update;
 $.summernote.eventHandler.modules.popover.update = function ($popover, oStyle, isAirMode) {
     fn_popover_update.call(this, $popover, oStyle, isAirMode);
     $("span.o_table_handler, div.note-table").remove();
 };
 
+ajax.loadXML("/mass_mailing/static/src/xml/mass_mailing.xml", core.qweb);
+
 snippets_editor.Class.include({
     _get_snippet_url: function () {
-        return snippets_url;
+        var url = (typeof snippets_url !== "undefined" ? window["snippets_url"] : this._super.apply(this, arguments));
+        return url;
     },
     compute_snippet_templates: function (html) {
-        this._super(html);
-        var self = this;
-        var $layouts = this.$('#email_designer_layout .o_panel_body > *');
-        $layouts.removeClass("oe_snippet_body");
-        $layouts.find('*').add($layouts).off();
-        $layouts.on('click', function (event) {
-            event.preventDefault();
-            var $editable = $('#editable_area');
-            var $o_layout = $editable.find('.o_layout');
-            var $html = ($o_layout.length ? $o_layout.find('.oe_structure').first() : $editable).contents();
-            var $layout = $(".o_layout", this).clone().removeClass('oe_snippet_body');
-
-            if ($o_layout.length) {
-                $('body').removeClass($o_layout.attr('class'));
-            }
-            $('body').addClass($layout.attr('class')).removeClass('odoo o_layout oe_snippet_body');
-
-            var $structure = $layout.find('.oe_structure');
-            if ($structure.length) {
-                $structure.html($html);
-                $('#editable_area').html($layout);
+        var ret = this._super.apply(this, arguments);
+
+        var $themes = this.$("#email_designer_themes").children().addClass("oe_snippet_body");
+        if ($themes.length === 0) return ret;
+
+        var all_classes = "";
+        var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", {
+            themes: _.map($themes, function (theme) {
+                var $theme = $(theme);
+                var classname = $theme.data("class");
+                all_classes += " " + classname;
+                return {
+                    className: classname,
+                    imgSource: $theme.data("img"),
+                };
+            }),
+        }));
+
+        var $body = $(document.body);
+        $dropdown.on("mouseenter click", "li > a", function (e) {
+            e.preventDefault();
+            var classname = $(e.currentTarget).data("class");
+            $body.removeClass(all_classes).addClass(classname);
+            var $layout = $editable_area.find(".o_layout");
+            var $contents;
+            if ($layout.length) {
+                $contents = ($layout.hasClass("oe_structure") ? $layout : $layout.find(".oe_structure").first()).contents();
             } else {
-                $('#editable_area').html($html);
+                $contents = $editable_area.contents();
             }
+            var $div = $("<div/>", {"class": "o_layout oe_structure " + classname});
+            $editable_area.append($div);
+            $div.append($contents);
+            $layout.remove();
+        });
+
+        var $snippets_menu = this.$el.find("#snippets_menu");
+        var old_title = $snippets_menu.text();
+        $dropdown.on("shown.bs.dropdown", function () {
+            $snippets_menu.text(_t("Choose a Theme"));
+        });
+        $dropdown.on("hidden.bs.dropdown", function () {
+            $snippets_menu.text(old_title);
         });
-    },
 
+        $dropdown.insertAfter($snippets_menu);
+
+        return ret;
+    },
 });
 
 var odoo_top = window.top.odoo;
-var _set_value = odoo_top[callback+"_updown"];
-window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) {
+window.top.odoo[window["callback"]+"_updown"] = function (value, fields_values, field_name) {
     if (!window) {
-        delete odoo_top[callback+"_updown"];
+        delete odoo_top[window["callback"]+"_updown"];
         return;
     }
 
@@ -175,7 +207,7 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
     var _val = $editable.prop("innerHTML");
     var editor_enable = $('body').hasClass('editor_enable');
     value = value || "";
-    
+
     if(value !==_val) {
         if (editor_enable) {
             if (value !== fields_values[field_name]) {
@@ -183,7 +215,7 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
             }
             snippets_editor.instance.make_active(false);
         }
-        
+
         if (value.indexOf('on_change_model_and_list') === -1) {
 
             $editable.html(value);
@@ -198,14 +230,12 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
 
     if (fields_values.mailing_model && web_editor.editor_bar) {
         if (value.indexOf('on_change_model_and_list') !== -1) {
-            odoo_top[callback+"_downup"](_val);
+            odoo_top[window["callback"]+"_downup"](_val);
         }
     }
 };
 
-
-if ($("#editable_area").html().indexOf('on_change_model_and_list') !== -1) {
-    $("#editable_area").empty();
+if ($editable_area.html().indexOf('on_change_model_and_list') !== -1) {
+    $editable_area.empty();
 }
-
 });
diff --git a/addons/mass_mailing/static/src/less/mass_mailing.ui.less b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
new file mode 100644
index 00000000000..9b72a72adc7
--- /dev/null
+++ b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
@@ -0,0 +1,17 @@
+.o_mail_theme_selector {
+    > a {
+        .o-position-absolute(6px, 6px);
+    }
+
+    .dropdown-menu {
+        .o-position-absolute(@odoo-navbar-height - 1, -1px, -1px, -1px);
+        margin: 0;
+        border-radius: 0;
+        overflow: auto;
+        background-color: @o-we-color-dark;
+
+        > li:hover > a {
+            background-color: @o-we-color-darker;
+        }
+    }
+}
diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
new file mode 100644
index 00000000000..e82f4dbf88e
--- /dev/null
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="mass_mailing.theme_selector">
+        <div class="o_mail_theme_selector">
+            <a href="#" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-paint-brush"/>
+            </a>
+            <div class="dropdown-menu">
+                <li t-foreach="themes" t-as="theme">
+                    <a href="#" t-att-data-class="theme.className">
+                        <img class="img img-responsive" t-att-src="theme.imgSource"/>
+                    </a>
+                </li>
+            </div>
+        </div>
+    </t>
+</templates>