[IMP] website_mail: improved template designer, added support for background color, font color and convert class to inline style in mail designer, changed snippet according to new format, added theme selector in mail_designer, added font-awesome support (convert in image) in mail snippets

3 files changed, 249 insertions, 20 deletions

diff --git a/addons/website_mail/static/src/css/snippets.css b/addons/website_mail/static/src/css/snippets.css
new file mode 100644
index 00000000000..c6e3ce1716f
--- /dev/null
+++ b/addons/website_mail/static/src/css/snippets.css
@@ -0,0 +1,85 @@
+/* ---- thumbnail ----  */
+.oe_snippet.o_mail_block_header_center_logo .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_header_center_logo.png");
+}
+.oe_snippet.o_mail_block_header_center_text .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_header_center_text.png");
+}
+.oe_snippet.o_mail_block_header_social .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_header_social.png");
+}
+.oe_snippet.o_mail_block_header_text_social .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_header_text_social.png");
+}
+.oe_snippet.o_mail_block_text_image .oe_snippet_thumbnail_img {
+    background-image: url("/website/static/src/img/blocks/block_text_image.png");
+}
+.oe_snippet.o_mail_block_footer_copyright .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_footer_copyright.png");
+}
+.oe_snippet.o_mail_block_footer_social .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_footer_social.png");
+}
+.oe_snippet.o_mail_block_footer_text .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_footer_text.png");
+}
+.oe_snippet.o_mail_block_footer_seprator .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_footer_seprator.png");
+}
+.oe_snippet.o_mail_block_footer_tag_line .oe_snippet_thumbnail_img {
+    background-image: url("/website_mail/static/src/img/blocks/block_footer_tag_line.png");
+}
+.oe_snippet.o_mail_block_two_cols .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_two-column-img.png");
+}
+.oe_snippet.o_mail_block_two_cols_content .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_two-column.png");
+}
+.oe_snippet.o_mail_block_title_text .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_title_text.png")
+}
+.oe_snippet.o_mail_block_title_sub .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_title.png")
+}
+.oe_snippet.o_mail_block_image_text .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_image-text.png")
+}
+.oe_snippet.o_mail_block_text_button .oe_snippet_thumbnail_img{
+    background-image: url("/website/static/src/img/blocks/block_jumbotron.png")
+}
+.oe_snippet.o_mail_block_table_content .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_table.png")
+}
+.oe_snippet.o_mail_block_discount1 .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_discount.png")
+}
+.oe_snippet.o_mail_block_discount2 .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_discount2.png")
+}
+.oe_snippet.o_mail_block_event .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_event.png")
+}
+.oe_snippet.o_mail_block_image .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_image_text.png")
+}
+.oe_snippet.o_mail_block_profile .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_user.png")
+}
+.oe_snippet.o_mail_block_four_cols .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_four_columns.png")
+}
+.oe_snippet.o_mail_block_button .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_button.png")
+}
+.oe_snippet.o_mail_block_simple_text .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_simple_text.png")
+}
+.oe_snippet.o_mail_block_three_cols .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_three_columns.png")
+}
+.oe_snippet.o_mail_block_text_on_img .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_text_on_image.png")
+}
+.oe_snippet.o_mail_block_steps .oe_snippet_thumbnail_img{
+    background-image: url("/website_mail/static/src/img/blocks/block_steps.png")
+}
diff --git a/addons/website_mail/static/src/css/website_mail.css b/addons/website_mail/static/src/css/website_mail.css
index ef0bbce4ab3..5678442416c 100644
--- a/addons/website_mail/static/src/css/website_mail.css
+++ b/addons/website_mail/static/src/css/website_mail.css
@@ -1,24 +1,4 @@
 .js_follow[data-follow='on'] .js_follow_btn ,
 .js_follow[data-follow='off'] .js_unfollow_btn {
     display: none;
-}
-
-.email_preview_border {
-    overflow:                 hidden !important;
-    border:                   2px solid grey;
-    height:                   300px;
-}
-.email_preview {
-    -webkit-transform:        scale(.50);
-    -ms-transform:            scale(.50);
-    transform:                scale(.50);
-    -webkit-transform-origin: 0 0; 
-    -ms-transform-origin:     0 0; 
-    transform-origin:         0 0; 
-    margin:                   0 0px -300px 0;
-}
-
-.o_mail_body {
-    width: 620px;
-    margin-left: 16px;
 }
\ No newline at end of file
diff --git a/addons/website_mail/static/src/css/website_mail_iframe.css b/addons/website_mail/static/src/css/website_mail_iframe.css
new file mode 100644
index 00000000000..6e8d6541c95
--- /dev/null
+++ b/addons/website_mail/static/src/css/website_mail_iframe.css
@@ -0,0 +1,164 @@
+body {
+    background-color: #fff;
+}
+p {
+    margin: initial;
+}
+a {
+    color: inherit;
+}
+a:hover {
+    color: inherit;
+}
+#wrapwrap .o_editable {
+    font: initial;
+    line-height: initial;
+    color: initial;
+}
+#oe_snippets ~ #wrapwrap .o_editable {
+    margin-bottom: 100px;
+}
+
+#wrapwrap > main > div:first-child {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+
+.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after {
+    content: " ";
+    display: block;
+    height: 100%;
+    position: fixed;
+    top: -4px;
+    width: 0;
+    overflow: hidden;
+}
+.editor_enable #wrapwrap > main > div:first-child:before {
+    border-right: 1px dashed #ccc;
+    margin-left: -5px;
+}
+.editor_enable #wrapwrap > main > div:first-child:after {
+    border-left: 1px dashed #ccc;
+    margin-left: 605px;
+}
+
+.note-color-palette .colorpicker {
+    display: none;
+}
+
+/***************************/
+
+#email_theme_list, #email_template_list {
+    clear: both;
+    text-align: center;
+}
+
+#email_theme_list > div, #email_template_list > div {
+    width: 200px;
+    display: inline-block;
+    position: relative;
+}
+
+.theme_thumbnail{
+    position:inherit;
+    margin-top:15px;
+}
+.theme_thumbnail div{
+    -webkit-transition: opacity 0.5s;
+    transition: opacity 0.5s;
+}
+.theme_thumbnail img.img{
+    height: 180px;
+    width: auto;
+}
+
+.modal-body  .theme_thumbnail img.img{
+    height: 100px;
+}
+
+.theme_thumbnail div.overlay{
+    z-index: 2;
+    max-height: 135px;
+    position:absolute;
+    padding:25% 0;
+    opacity: 0;
+    width: 100%;
+}
+.theme_thumbnail div.overlay p{
+    color:#616161;
+    font-weight:bold;
+    text-transform: capitalize;
+}
+.theme_thumbnail:hover>img.img{
+    opacity:0.3;
+}
+.theme_thumbnail:hover>div.overlay{
+    opacity: 1;
+}
+
+.email_head {
+    border-width: 0px 0px 2px 0px;
+}
+.email_head div{
+    font-size:14px;
+}
+.email_head .popover-title{
+    font-weight:bold;
+}
+
+.template_name{
+    width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.email_template *{
+    -webkit-transition: opacity 0.5s;
+    transition: opacity 0.5s;
+}
+.email_template:hover .template_thumbnail{
+    opacity:0.3;
+}
+.email_template:hover .template_options{
+    opacity:1;
+}
+
+/***************************/
+
+#templates{
+    width: 98%;
+}
+#choose_template{
+    display: none;
+    margin: 5px;
+    padding: 1px 5px;
+    position: fixed;
+    top: 0;
+    right: 50px;
+    z-index: 2000;
+}
+#templates .template_preview_border{
+    overflow: hidden !important;
+    border: 2px solid grey;
+    height: 300px;
+}
+#email_template_list > div{
+    overflow: hidden;
+    height: 300px;
+}
+#email_template_list .theme_thumbnail div.overlay{
+    max-height: 300px;
+}
+#templates .template_preview{
+    -webkit-transform: scale(.33);
+    -ms-transform: scale(.33);
+    transform: scale(.33);
+    -webkit-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+}
+.theme_thumbnail:hover>.template_preview{
+    opacity:0.3;
+}
\ No newline at end of file