[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

22 files changed, 373 insertions, 883 deletions

diff --git a/addons/mass_mailing/__manifest__.py b/addons/mass_mailing/__manifest__.py
index 595e2c1c82a..3adda9bc434 100644
--- a/addons/mass_mailing/__manifest__.py
+++ b/addons/mass_mailing/__manifest__.py
@@ -36,10 +36,6 @@ professional emails and reuse templates in a few clicks.
         'views/editor_field_html.xml',
         'views/snippets_themes.xml',
         'views/snippets_themes_options.xml',
-        'views/odoo_template.xml',
-        'views/airmail_template.xml',
-        'views/lemon_template.xml',
-        'views/tech_template.xml',
     ],
     'demo': [
         'data/mass_mailing_demo.xml',
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>
diff --git a/addons/mass_mailing/views/airmail_template.xml b/addons/mass_mailing/views/airmail_template.xml
deleted file mode 100644
index 71924ec9900..00000000000
--- a/addons/mass_mailing/views/airmail_template.xml
+++ /dev/null
@@ -1,135 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <data>
-        <!-- Airmail Template -->
-        <template name="Airmail Template" id="airmail_email_template">
-            <div class="o_mail_block_airmail_template">
-                <table class="o_layout airmail_template" style="width:100%;background-color: #ededed;">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <!-- Template Header -->
-                                <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles bg-epsilon airmail_template_header">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <!-- Logo -->
-                                                <div class="snippet_row">
-                                                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                        <tbody>
-                                                          <tr>
-                                                              <td width="60%" align="left" style="padding:5px 0">
-                                                                    &amp;nbsp;
-                                                                    <a t-att-href="(company_id.website) or '#'">
-                                                                        <img border="0" src="http://www.odoocdn.com/openerp_website/static/src/img/2016/logos/odoo_logo_small.png" style="height:auto;max-width:600px;width:70px;margin-left:-6px;" alt="Your Logo" />
-                                                                    </a>
-                                                                    &amp;nbsp;
-                                                              </td>
-                                                              <td t-if="website" width="40%" align="right" style="padding:8px 0">
-                                                                    &amp;nbsp;
-                                                                    <t t-if="website.social_facebook">
-                                                                        <a t-att-href="website.social_facebook" style="padding-left:5px;float:right;color:#fff;">
-                                                                            <span class="odoo fa fa-facebook fa-2x" style="font-size:15px;"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_googleplus">
-                                                                        <a t-att-href="website.social_googleplus" style="padding-left:5px;float:right;color:#fff;">
-                                                                            <span class="odoo fa fa-google-plus fa-2x" style="font-size:15px;"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_linkedin">
-                                                                        <a t-att-href="website.social_linkedin" style="padding-left:5px;float:right;color:#fff;">
-                                                                            <span class="odoo fa fa-linkedin fa-2x" style="font-size:15px;"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_twitter">
-                                                                        <a t-att-href="website.social_twitter" style="padding-left:5px;float:right;color:#fff;">
-                                                                            <span class="odoo fa fa-twitter fa-2x" style="font-size:15px;"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    &amp;nbsp;
-                                                              </td>
-                                                          </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Template Body -->
-                                <table style="margin:30px auto;" align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles airmail_template_container bg-alpha">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row" style="width:600px;">
-                                                    <div class="snippetbanner">
-                                                        <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                            <tbody>
-                                                              <tr>
-                                                                  <td width="100%" valign="top">
-                                                                        <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/home/laptop_sale_desktop.jpg" style="height:auto;max-width:600px;width:600px;" alt="Your Logo" />
-                                                                  </td>
-                                                              </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                                <div class="oe_structure"></div>
-                                                <div class="snippet_row" t-if="website">
-                                                    <div class="snippet-general">
-                                                        <table width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td valign="middle" align="right" style="font-size:12px;padding:10px;text-align:center">
-                                                                        &amp;nbsp;
-                                                                        <t t-if="website">
-                                                                            <a href="/page/contactus" style="padding-right:3px;" class="link-color">Contact Us</a> | 
-                                                                            <t t-if="website.social_facebook">
-                                                                                <a t-att-href="website.social_facebook" style="padding-right:3px;" class="link-color">Facebook</a> | 
-                                                                            </t>
-                                                                            <t t-if="website.social_twitter">
-                                                                                <a t-att-href="website.social_twitter" style="padding-right:3px;" class="link-color">Twitter</a> | 
-                                                                            </t>
-                                                                        </t>
-                                                                        <a href="https://apps.odoo.com/unsubscribe_from_list" class="link-color">Unsubscribe</a>
-                                                                        &amp;nbsp;
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Template Footer -->
-                                <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles bg-epsilon airmail_template_footer bg-epsilon">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <!-- Logo -->
-                                                <div class="snippet_row">
-                                                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                        <tbody>
-                                                            <tr>
-                                                                <td width="100%" align="left" style="padding:8px 0">
-                                                                    <p class="text-center" style="color:#fff;">Your company here, all rights reserved 2013 © </p>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </template>
-    </data>
-</odoo>
\ No newline at end of file
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index 24007eb7865..c93cee8d353 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -1,36 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-<!-- Template Choice page -->
 <template id="FieldTextHtmlInline" name="Editor layout">
     <t t-set="head">
         <t t-if="enable_editor">
             <link rel="stylesheet" href="/mass_mailing/static/src/css/snippet_styles.css" type="text/css"/>
-            <!-- <link rel="stylesheet" href="/mass_mailing/static/src/css/odoo_template.css" type="text/css"/>
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/airmail_template.css" type="text/css"/>
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/lemon_template.css" type="text/css"/>
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/tech_template.css" type="text/css"/> -->
-            <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing_editor.js"></script>
+
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/airmail.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/lemon.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/tech.css" type="text/css"/>
         </t>
     </t>
     <t t-call="web_editor.layout">
-        <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
-        <div t-if="edit_translations" id="editable_area"><t t-raw="content"/></div>
+        <div t-if="not edit_translations" id="editable_area" class="o_editable o_mail_area" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
+        <div t-if="edit_translations" id="editable_area" class="o_mail_area"><t t-raw="content"/></div>
     </t>
 </template>
 
 <template id="FieldTextHtmlPopupContent" name="Editor layout">
     <t t-set="head">
         <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
-     </t>
+    </t>
     <t t-call="web_editor.layout">
         <div class="modal-dialog modal-md show" id="o_newsletter_popup">
             <div class="modal-content o_popup_modal_content">
                 <div class="o_popup_modal_body text-center">
                     <div class="o_popup_content_dev">
-                        <div id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
+                        <div id="editable_area" class="o_editable o_mail_area" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
                             <!-- Can be removed once default values are ok for the editor -->
-                            <t t-raw="content">
-                            </t>
+                            <t t-raw="content"/>
                         </div>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/views/lemon_template.xml b/addons/mass_mailing/views/lemon_template.xml
deleted file mode 100644
index a1dfea12ee4..00000000000
--- a/addons/mass_mailing/views/lemon_template.xml
+++ /dev/null
@@ -1,112 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <data>
-        <!-- Lemon Template -->
-        <template name="Lemon Template" id="lemon_email_template">
-            <div class="o_mail_block_lemon_template">
-                <div class="o_layout lemon_template" style="width:100%;">
-                    <!-- Template Header -->
-                    <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles bg-epsilon lemon_template_header">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <div class="snippet_row">
-                                        <table align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                                            <tbody>
-                                                <tr>
-                                                    <td class="horizontal-padding vertical-padding">
-                                                        <p class="display-1 text-center" style="margin:0;color:#000;">The offer of the month!</p>
-                                                        <p class="display-3 no-margin text-center" style="color:#fff;">Apps That Help You Grow Your Business!</p>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <!-- Logo Bar -->
-                    <table style="margin:50px auto 0;" align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <div class="snippet_row">
-                                        <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                            <tr>
-                                                <td width="80%"  class="horizontal-padding vertical-padding">
-                                                    &amp;nbsp;
-                                                    <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
-                                                         <img border="0" src="http://www.odoocdn.com/openerp_website/static/src/img/2016/logos/odoo_logo_small.png" style="height:auto;max-width:400px;width:100px;margin-left:-6px;" alt="Your Logo" />
-                                                    </a>
-                                                    &amp;nbsp;
-                                                </td>
-                                                <td width="20%">
-                                                    <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate; margin-right:20px;">
-                                                        <tr>
-                                                            <t t-if="website.social_facebook">
-                                                                <td align="right">
-                                                                    <a t-att-href="website.social_facebook">
-                                                                      <span class="odoo fa fa-facebook fa-2x"></span>
-                                                                    </a>
-                                                                </td>
-                                                            </t>
-                                                            <t t-if="website.social_googleplus">
-                                                                <td align="right" style="padding-left:5px">
-                                                                    <a t-att-href="website.social_googleplus">
-                                                                      <span class="odoo fa fa-google-plus fa-2x"></span>
-                                                                      </a>
-                                                                </td>
-                                                            </t>
-                                                            <t t-if="website.social_linkedin">
-                                                                <td align="right" style="padding-left:5px">
-                                                                    <a t-att-href="website.social_linkedin">
-                                                                      <span class="odoo fa fa-linkedin fa-2x"></span>
-                                                                      </a>
-                                                                </td>
-                                                            </t>
-                                                            <t t-if="website.social_twitter">
-                                                                <td align="right" style="padding-left:5px">
-                                                                    <a t-att-href="website.social_twitter">
-                                                                      <span class="odoo fa fa-twitter fa-2x"></span>
-                                                                      </a>
-                                                                </td>
-                                                            </t>
-                                                        </tr>
-                                                    </table>
-                                                </td>
-                                            </tr>
-                                        </table>
-                                    </div>   
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <!-- Template Body -->
-                    <table style="margin:0 auto;" align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles lemon_template_container">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <div class="snippet_row" style="width:600px;">
-                                        <div class="snippetbanner">
-                                            <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                <tbody>
-                                                    <tr>
-                                                        <td width="100%" valign="top">
-                                                            <img src="http://www.odoocdn.com/openerp_website/static/src/img/content/hr_holidays_01.jpg" style="height:auto;max-width:600px;width:600px;" alt="Your Logo" />
-                                                        </td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                    <div class="oe_structure"></div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </template>
-    </data>
-</odoo>
\ No newline at end of file
diff --git a/addons/mass_mailing/views/mass_mailing_template.xml b/addons/mass_mailing/views/mass_mailing_template.xml
index 0645abcd18c..5e7037c805b 100644
--- a/addons/mass_mailing/views/mass_mailing_template.xml
+++ b/addons/mass_mailing/views/mass_mailing_template.xml
@@ -7,4 +7,13 @@
             <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing.js"></script>
         </xpath>
     </template>
+
+    <template id="assets_editor" inherit_id="web_editor.assets_editor">
+        <xpath expr="//link[last()]" position="after">
+            <link type="text/less" rel="stylesheet" href="/mass_mailing/static/src/less/mass_mailing.ui.less"/>
+        </xpath>
+        <xpath expr="//script[last()]" position="after">
+            <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing_editor.js"></script>
+        </xpath>
+    </template>
 </odoo>
diff --git a/addons/mass_mailing/views/odoo_template.xml b/addons/mass_mailing/views/odoo_template.xml
deleted file mode 100644
index 80a5f90971b..00000000000
--- a/addons/mass_mailing/views/odoo_template.xml
+++ /dev/null
@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <data>
-        <!-- Odoo Template -->
-        <template name="Odoo Template" id="odoo_email_template">
-            <div class="o_mail_block_odoo_template">
-                <table class="o_layout odoo_template table-styles" align="center" width="100%" cellspacing="0" cellpadding="0">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <!-- Logo -->
-                                <table style="margin:0 auto 20px;" align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row">
-                                                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                        <tbody>
-                                                          <tr>
-                                                              <td width="100%" valign="top" class="vertical-padding">
-                                                                    &amp;nbsp;
-                                                                    <a t-att-href="(company_id.website) or '#'">
-                                                                        <img border="0" src="http://www.odoocdn.com/openerp_website/static/src/img/2016/logos/odoo_logo_small.png" style="height:auto;max-width:600px;width:100px;margin-left:-6px;" alt="Your Logo" />
-                                                                    </a>
-                                                                    &amp;nbsp;
-                                                              </td>
-                                                          </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Banner & Template Body -->
-                                <table style="margin:20px auto;" align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles odoo_template_container">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row">
-                                                    <div class="snippetbanner">
-                                                        <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                            <tbody>
-                                                              <tr>
-                                                                  <td width="100%" valign="top">
-                                                                        <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/home/laptop_sale_desktop.jpg" style="height:auto;max-width:600px;width:600px;" alt="Your Logo" />
-                                                                  </td>
-                                                              </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                                <div class="oe_structure"></div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Footer -->
-                                <table style="margin:20px auto 0;" align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row">
-                                                    <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                                                        <tbody>
-                                                            <tr>
-                                                                <td class="horizontal-padding text-center" style="padding-top:10px;">
-                                                                    &amp;nbsp;
-                                                                    <a href="https://apps.odoo.com/unsubscribe_from_list" class="link-color text-center">Unsubscribe</a>
-                                                                    <t t-if="website"> | <a href="/page/contactus" class="link-color text-center">Contact</a> </t>
-                                                                    &amp;nbsp;
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td class="horizontal-padding vertical-padding">
-                                                                    <p style="margin:0;font-size:12px;text-align:center;">© 2014 All Rights Reserved</p>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <!-- Template Body -->
-                </table>
-            </div>
-        </template>
-    </data>
-</odoo>
\ No newline at end of file
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index e66151e8925..44c477a92bb 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -1,39 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+<!-- Snippets & Themes Menu -->
 <template id="email_designer_snippets" inherit_id="web_editor.snippets" primary="True">
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
-            <div id="email_designer_layout" class="o_panel">
-                <!-- <div class="o_panel_header o_snippet_section">
-                    <span class="fa-stack">
-                        <i class="fa fa-paint-brush fa-stack-1x"></i>
-                    </span> Choose Template
-                </div> -->
-
-                <!-- Templates -->
-
+            <div id="email_designer_themes">
+                <div data-class="o_default_theme" data-img="/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png"/>
+                <div data-class="o_airmail_theme" data-img="/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png"/>
+                <div data-class="o_tech_theme" data-img="/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png"/>
+                <div data-class="o_lemon_theme" data-img="/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png"/>
+            </div>
             <div id="email_designer_default_headers" class="o_panel">
                 <div class="o_panel_header">
                     <i class="fa fa-angle-double-up"/> Headers
                 </div>
                 <div class="o_panel_body">
-                    <!-- Default Template -->
-                    <!-- <div name="Default" class="o_mail_block_default_template">
-                        <div class="o_layout"></div>
-                    </div> -->
-
-                    <!-- Odoo Template -->
-                    <!-- <t t-call="mass_mailing.odoo_email_template"></t> -->
-                    
-                    <!-- Lemon Template -->
-                    <!-- <t t-call="mass_mailing.lemon_email_template"></t> -->
-
-                    <!-- Tech Template -->
-                    <!-- <t t-call="mass_mailing.tech_email_template"></t> -->              
-
-                    <!-- Airmail Template -->
-                    <!-- <t t-call="mass_mailing.airmail_email_template"></t> -->
-
                     <t t-snippet="mass_mailing.s_mail_block_header_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_social.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_header_text_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_text_social.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_banner" t-thumbnail="/mass_mailing/static/src/img/blocks/block_banner.png"/>
diff --git a/addons/mass_mailing/views/snippets_themes_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml
index 2b9c434a782..d64cedab140 100644
--- a/addons/mass_mailing/views/snippets_themes_options.xml
+++ b/addons/mass_mailing/views/snippets_themes_options.xml
@@ -2,7 +2,6 @@
 <odoo>
 
 <template id="snippet_options">
-
     <t t-raw="0"/>
 
     <div data-js='width-x'
@@ -34,7 +33,7 @@
         data-selector="div.snippet_row"
         data-drop-in=".oe_structure, [data-oe-type=html]:not(:has(.o_layout))">
     </div>
-    
+
     <!-- <div data-js='background'
         data-selector="div.snippet_row">
         <li data-choose_image="choose_image" data-background=""><a>Choose a background image</a></li>
@@ -123,15 +122,6 @@
             </ul>
         </li>
     </div>
-
-    <div class="odoo o_theme_palette odoo">
-        <div class="odoo note-palette-title mt8"> Mail Theme Colors</div>
-        <div class="odoomail-colorpicker note-color-row">
-            <t t-set="colors" t-value="['#E56054', '#4D6BBB', '#1F1F1F', '#464646', '#808080', '#E5E5E5', '#f9f8f8', '#41C534']"/>
-            <t t-foreach="colors" t-as="c"><button type="button" class="odoonote-color-btn" t-attf-style="background-color:#{c};" t-attf-data-value="#{c}" t-attf-title="#{c}" data-toggle="button" tabindex="-1"></button></t>
-        </div>
-    </div>
-
 </template>
 
 </odoo>
diff --git a/addons/mass_mailing/views/tech_template.xml b/addons/mass_mailing/views/tech_template.xml
deleted file mode 100644
index 6ae8393d85a..00000000000
--- a/addons/mass_mailing/views/tech_template.xml
+++ /dev/null
@@ -1,143 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <data>
-        <!-- Tech Template -->
-        <template name="Tech Template" id="tech_email_template">
-            <div class="o_mail_block_tech_template">
-                <table class="o_layout tech_template" style="width:100%;">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <!-- Template Header -->
-                                <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles tech_template_header">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row">
-                                                    <table align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                                                        <tbody>
-                                                            <tr>
-                                                                <td class="horizontal-padding vertical-padding text-center">
-                                                                    <a t-att-href="(company_id.website) or '#'">
-                                                                        <img border="0" src="http://www.odoocdn.com/openerp_website/static/src/img/2016/logos/odoo_logo_small.png" style="margin:0 auto;height:auto;max-width:600px;width:100px;" alt="Your Logo" />
-                                                                    </a>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                                <div class="snippet_row" style="width:600px;margin:0 auto;">
-                                                    <div class="snippetbanner" style="padding:20px 0;">
-                                                        <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <p class="display-1 text-center">The Future of Emails</p>
-                                                                    <td width="100%" valign="top">
-                                                                        <img src="http://www.odoocdn.com/openerp_website/static/src/img/content/website_blog_01.png" style="height:auto;max-width:600px;width:600px;" alt="Your Logo" />
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Template Body -->
-                                <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles tech_template_container">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row vertical-padding">
-                                                    <div class="snippet-general">
-                                                        <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="vertical-align:top;width:270px;padding:20px 10px 20px 20px;" class="odoo col_mv">
-                                                                        <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_inspiral.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" />
-                                                                        <p class="display-2 text-center" style="margin-top:20px;">Step 1</p>
-                                                                        <p style="margin:0;" class="text-center">
-                                                                            We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
-                                                                        </p>
-                                                                        <div class="text-center" style="margin-top:15px;">
-                                                                            <a href="#" class="link-color">Read More...</a>
-                                                                        </div>
-                                                                    </td>
-
-                                                                    <td style="vertical-align:top;width:270px;padding:20px 20px 20px 10px;" class="odoo col_mv">
-                                                                        <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_universem.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" />
-                                                                        <p class="display-2 text-center" style="margin-top:20px;">Step 2</p>
-                                                                        <p style="margin:0;" class="text-center">
-                                                                            We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
-                                                                        </p>
-                                                                        <div class="text-center" style="margin-top:15px;">
-                                                                            <a href="#" class="link-color">Read More...</a>
-                                                                        </div>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                                <div class="oe_structure"></div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <!-- Template Foooter -->
-                                <table align="center" width="100%" cellspacing="0" cellpadding="0" class="table-styles">
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <div class="snippet_row">
-                                                    <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                                                        <tbody>
-                                                            <tr t-if="website">
-                                                                <td style="text-align:center">
-                                                                    &amp;nbsp;
-                                                                    <t t-if="website.social_facebook">
-                                                                        <a t-att-href="website.social_facebook" class="link-color">
-                                                                            <span class="odoo fa fa-facebook-square fa-2x"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_googleplus">
-                                                                        <a t-att-href="website.social_googleplus" style="padding-left:5px;" class="link-color">
-                                                                            <span class="odoo fa fa-google-plus-square fa-2x"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_linkedin">
-                                                                        <a t-att-href="website.social_linkedin" style="padding-left:5px;" class="link-color">
-                                                                            <span class="odoo fa fa-linkedin-square fa-2x"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    <t t-if="website.social_twitter">
-                                                                        <a t-att-href="website.social_twitter" style="padding-left:5px;" class="link-color">
-                                                                            <span class="odoo fa fa-twitter-square fa-2x"></span>
-                                                                        </a>
-                                                                    </t>
-                                                                    &amp;nbsp;
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td style="font-size:12px;text-align:center;padding:10px">
-                                                                    &amp;nbsp;
-                                                                    <a href="/unsubscribe_from_list" class="link-color">Unsubscribe</a> | <a href="/page/contactus" class="link-color">Contact</a>
-                                                                    &amp;nbsp;
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </template>
-    </data>
-</odoo>
\ No newline at end of file
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index c6513472fcb..bbf8b6ce764 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -125,10 +125,6 @@ html[lang] > body.editor_enable{
                 margin-right: 5px;
             }
         }
-        .o_snippet_section {
-            background-color: @o-we-color-darker;
-            text-transform: uppercase;
-        }
         .o_panel_body {
             &:after {
                 content: " ";
@@ -1063,14 +1059,13 @@ body.editor_enable {
 
     &.editor_enable #wrapwrap {
         height: 100%;
-        padding-top: @odoo-navbar-height;
         > main {
             height: 100%;
             #editable_area {
                 position: relative;
                 overflow: hidden;
                 min-height: 100%;
-                margin: 0 auto 50px auto;
+                margin: 0 auto;
 
                 background-color: white;
             }
diff --git a/addons/website_mail/static/src/img/thumbnail/odoo.png b/addons/website_mail/static/src/img/thumbnail/odoo.png
deleted file mode 100644
index 95a72e0f2f1..00000000000
--- a/addons/website_mail/static/src/img/thumbnail/odoo.png
+++ /dev/null