diff --git a/addons/mass_mailing/__manifest__.py b/addons/mass_mailing/__manifest__.py index b2baefeeed797f55af0d225ea8be9305ae78e8a4..3adda9bc43465c3e91a920ab484415c2b5b0693b 100644 --- a/addons/mass_mailing/__manifest__.py +++ b/addons/mass_mailing/__manifest__.py @@ -36,7 +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/theme_list.xml', ], 'demo': [ 'data/mass_mailing_demo.xml', diff --git a/addons/mass_mailing/controllers/web_editor.py b/addons/mass_mailing/controllers/web_editor.py index 88e9f768690698b84cb17938aff326e66a41873f..209ff5a30c13546ee9b6172e5aaed45794ebd1f8 100644 --- a/addons/mass_mailing/controllers/web_editor.py +++ b/addons/mass_mailing/controllers/web_editor.py @@ -18,6 +18,8 @@ class Web_Editor(Web_Editor): def mass_mailing_FieldTextHtmlEmailTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs): kwargs['snippets'] = '/mass_mailing/snippets' kwargs['template'] = 'mass_mailing.FieldTextHtmlInline' + if 'css' not in kwargs: + kwargs['css'] = '/mass_mailing/static/src/css/odoo_template.css' return self.FieldTextHtmlInline(model, res_id, field, callback, **kwargs) @http.route(['/mass_mailing/snippets'], type='json', auth="user", website=True) diff --git a/addons/mass_mailing/static/src/css/odoo_template.css b/addons/mass_mailing/static/src/css/odoo_template.css new file mode 100644 index 0000000000000000000000000000000000000000..b1f593d7c63f218758bd8cb005e430ede47ea641 --- /dev/null +++ b/addons/mass_mailing/static/src/css/odoo_template.css @@ -0,0 +1,82 @@ +@media screen and (max-width: 320px) { + .mobile-col { + width: 600px; + } +} +#oe_snippets #snippets_menu li { + width: 20%; +} +#email_designer_layout .o_panel_body .oe_snippet_thumbnail_img { + cursor: crosshair; +} + +.horizontal-padding { + padding-left: 20px; + padding-right: 20px; +} +.vertical-padding { + padding-top: 20px; + padding-bottom: 20px; +} +.no-margin { + margin: 0; +} +.display-1, .display-2, .display-3 { + font-family: 'Helvetica'; + font-weight:300; + text-decoration: none !important; +} +.display-1 { + font-size: 30px; + color: #875a7b; +} +.display-2 { + font-size: 25px; + color: #282f33; +} +.display-3 { + font-size: 18px; + color: #282f33; +} +p, th, td { + text-align:left; + color:#282f33; + font-size:14px; + font-family: 'Helvetica'; +} +a, a:hover { + color: inherit; +} +.text-center { + text-align: center; +} + +.table-styles { + border-collapse:separate; + font-family: 'Helvetica'; +} +.snippet-general { + width:600px; + margin:0 auto; + color:#464646; + background-color: #ffffff; +} +.banner { + width:600px; + margin:0 auto; + padding:0; +} +.newsletter-btn { + -webkit-user-select: none; + padding: 6px 12px; + font-size: 14px; + color: #ffffff; + border: none; + text-decoration: none; + display: inline-block; + font-weight: 400; + font-family: 'Helvetica'; + text-align: center; + cursor: pointer; + background-color: #34c9a4; +} 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 7e84ff6259497b4d313e76e6e86e21457d470e47..fd92d7d15e7613714f5deb8a3d0acb1d97169569 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js @@ -129,111 +129,42 @@ $.summernote.eventHandler.modules.popover.update = function ($popover, oStyle, i $("span.o_table_handler, div.note-table").remove(); }; -web_editor.Class.include({ - start: function () { - var self = this; - $('[data-toggle="tooltip"]').tooltip(); - if (location.search.indexOf("enable_editor") !== -1) { - this.on('rte:start', this, function () { - $("#choose_template").off("click").on("click", _.bind(self.on_choose_template, self)); - $(".theme_thumbnail [data-snippet-theme]").off("click").on("click", _.bind(self.on_set_snippet_theme, self)); - var $editable = $("#editable_area"); - $editable.html($editable.prop("innerHTML").replace(/^<p[^>]*>\s*<\/p>$/, '')); - }); - this.on("snippets:ready", this, _.bind(self.display_theme_from_html, self)); - } - return this._super.apply(this, arguments); - }, - display_theme_from_html: function () { - var theme = $("#editable_area [data-snippet-theme]").data("snippet-theme"); - if (theme) { - $("#choose_template").show(); - this.set_snippet_theme(theme); - } else { - $("#choose_template").hide(); - this.on_choose_template(); - } - var mailing_model = JSON.parse($.deparam(location.search).datarecord).mailing_model; - if (mailing_model) { - this.get_snippet_template( mailing_model ); - } - }, - - on_choose_template: function (event) { - if (event) { - $("#choose_template").show(); - } - var $editable = $("#editable_area"); - $(".o_table_handler").remove(); - $editable.add("#oe_snippets, #templates, .note-popover").toggleClass("hidden"); - $("#choose_template").children().toggleClass("hidden"); - $("body").trigger("resize"); - $(window.top).trigger('resize'); - setTimeout(function () { - $(".note-popover").toggleClass("hidden", $("#templates").is(":visible")); - },0); - }, - on_set_snippet_template: function (event) { - var $editable = $("#editable_area"); - this.rte.historyRecordUndo($editable); - $editable.html( $(event.target).closest(".theme_thumbnail").find(".js_content").html() ); - $editable.add("#oe_snippets, #templates, .note-popover").toggleClass("hidden"); - $("#choose_template").children().toggleClass("hidden"); - setTimeout(function () { - $("body").trigger("resize"); - $("body")[0].scrollTop = 0; - },0); - event.preventDefault(); - }, - on_set_snippet_theme: function (event) { - this.set_snippet_theme($(event.target).data("snippet-theme")); - this.on_choose_template(event); - event.preventDefault(); - }, - set_snippet_theme: function (theme) { - $("#oe_snippets .o_panel_body > div").addClass("hidden"); - $("#oe_snippets .o_panel_body > div."+theme).removeClass("hidden"); - $("#editable_area").trigger("content_changed"); - }, - get_snippet_template: function (mailing_model) { - var self = this; - var domain = [['model', '=', mailing_model]]; - return new Model('mail.template').call('search_read', [domain]).then(function (datas) { - var $template = $("#templates > div:last").addClass("hidden"); - var $tclone = $template.find("> div > div:first"); - $tclone.siblings().remove(); - _.each(datas, function (data) { - if (!data.body_html) { - return; - } - $template.removeClass("hidden"); - var $clone = $tclone.clone().removeClass("hidden"); - $clone.find("p:first").html(data.name); - $clone.find(".template_preview").html(data.body_html); - $tclone.after($clone); - }); - - $(".js_template_set").off("click").on("click", _.bind(self.on_set_snippet_template, self)); - }); - } -}); - snippets_editor.Class.include({ _get_snippet_url: function () { return snippets_url; }, - clean_for_save: function () { - this._super(); - var $editable = $("#editable_area"); - var theme = ($("#oe_snippets .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, ''); - var $theme = $("#editable_area [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme"); - $editable.children().first().attr("data-snippet-theme", theme); - $editable.find(":not(br):hidden").remove(); + 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(); + + 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); + } else { + $('#editable_area').html($html); + } + }); }, + }); -var _set_value = window.top.odoo[callback+"_updown"]; var odoo_top = window.top.odoo; +var _set_value = odoo_top[callback+"_updown"]; window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) { if (!window) { delete odoo_top[callback+"_updown"]; @@ -258,8 +189,6 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name $editable.html(value); if (editor_enable) { - web_editor.editor_bar.display_theme_from_html(); - if (value !== fields_values[field_name]) { $editable.trigger("content_changed"); } @@ -268,7 +197,6 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name } if (fields_values.mailing_model && web_editor.editor_bar) { - web_editor.editor_bar.get_snippet_template(fields_values.mailing_model); if (value.indexOf('on_change_model_and_list') !== -1) { odoo_top[callback+"_downup"](_val); } diff --git a/addons/mass_mailing/static/src/less/mass_mailing_editor.less b/addons/mass_mailing/static/src/less/mass_mailing_editor.less deleted file mode 100644 index e463ec1b6d1449643697f42eedb21a6366346a36..0000000000000000000000000000000000000000 --- a/addons/mass_mailing/static/src/less/mass_mailing_editor.less +++ /dev/null @@ -1,121 +0,0 @@ - -#email_theme_list, #email_template_list { - clear: both; - text-align: center; - - > div { - width: 200px; - display: inline-block; - position: relative; - } -} -.theme_thumbnail { - position: inherit; - margin-top: 15px; - - div { - .o-transition(opacity, 0.5s); - - &.overlay { - z-index: 2; - max-height: 135px; - position:absolute; - padding:25% 0; - opacity: 0; - width: 100%; - - p { - color:#616161; - font-weight:bold; - text-transform: capitalize; - } - } - } - img.img { - width: auto; - height: 180px; - } - - &:hover { - > img.img { - opacity:0.3; - } - > div.overlay { - opacity: 1; - } - > .template_preview { - opacity:0.3; - } - } -} -.modal-body .theme_thumbnail img.img { - height: 100px; -} -.email_head { - border-width: 0px 0px 2px 0px; - div { - font-size:14px; - } - .popover-title { - font-weight:bold; - } -} -.template_name { - width: 160px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.email_template * { - .o-transition(opacity, 0.5s); - &:hover { - .template_thumbnail { - opacity:0.3; - } - .template_options { - opacity:1; - } - } -} -#templates { - margin: -@odoo-navbar-height 0 0 -@o-we-sidebar-width; - padding: 10px @odoo-horizontal-padding; - border: 1px solid @odoo-brand-secondary; - background-color: white; - - .template_preview_border { - overflow: hidden !important; - border: 2px solid grey; - height: 300px; - } - .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; - } -} -#choose_template { - display: none; - margin: 5px; - position: fixed; - top: 0; - right: 28px; - z-index: 2000; - - span { - padding: 1px 5px; - height: 24px; - } -} -#email_template_list { - > div { - overflow: hidden; - height: 300px; - } - .theme_thumbnail div.overlay { - max-height: 300px; - } -} diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml index 772445866698a6c77b4c605eac1ba14d4c19429f..5dc4d4493378eec51165ea91e0d9f6124934e8c5 100644 --- a/addons/mass_mailing/views/editor_field_html.xml +++ b/addons/mass_mailing/views/editor_field_html.xml @@ -1,57 +1,17 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> -<template id="assets_editor" inherit_id="web_editor.assets_editor"> - <xpath expr="link[last()]" position="after"> - <link rel="stylesheet" type="text/less" href="/mass_mailing/static/src/less/mass_mailing_editor.less"/> - </xpath> -</template> - <!-- Template Choice page --> <template id="FieldTextHtmlInline" name="Editor layout"> <t t-set="head"> <t t-if="enable_editor"> + <link t-if="css" rel="stylesheet" type="text/css" t-att-href="css"/> <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor_thumb.css" type="text/css"/> <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing_editor.js"></script> </t> </t> - - <t t-set="add_html"> - <t t-if="enable_editor"> - <span id="choose_template" class="o_not_editable o_css_editor"> - <span class="btn btn-primary">Theme</span> - <span class="btn btn-primary hidden">Cancel selection</span> - </span> - </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 id="templates" class="o_not_editable o_css_editor hidden" t-if="enable_editor"> - <h1 class="page-header mt16 email_head panel-primary"> - Select a theme - <button type="button" class="btn btn-sm btn-default fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="Here you can design your own template from scratch by selecting your favorite theme."></button> - </h1> - <t t-call="mass_mailing.mass_mail_theme_list"/> - - <div class="hidden"> - <h1 class="page-header mt16"> - Choose a Template - </h1> - <div id="email_template_list"> - <div class="hidden"> - <div class="theme_thumbnail"> - <div class="overlay text-center"> - <p>template</p> - <a class="btn btn-primary btn-sm js_template_set"> Select </a> - </div> - <div class="template_preview js_content"/> - </div> - </div> - </div> - </div> - </div> </t> </template> diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml index 6ffac3a26489ecd47c6d22a06baad2382e2d571b..eef9b8db448912723169f127201f0a2f117595ee 100644 --- a/addons/mass_mailing/views/snippets_themes.xml +++ b/addons/mass_mailing/views/snippets_themes.xml @@ -3,6 +3,19 @@ <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"> + <span class="fa-stack"> + <i class="fa fa-list-alt fa-stack-1x"></i> + </span> Choose a layout + </div> + <div class="o_panel_body"> + + <div name="Default" class="odoo o_mail_block_header_center_logo"> + <div class="odoo o_layout"></div> + </div> + </div> + </div> <div id="email_designer_default_headers" class="o_panel"> <div class="o_panel_header"> <span class="fa-stack"> @@ -11,115 +24,222 @@ </span> Headers </div> <div class="o_panel_body"> - <div name="Center Logo" class="basic_theme o_mail_block_header_center_logo"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777"> - <table style="margin: 0 auto;border-collapse:collapse;background:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0"> - <tbody> + + <div name="Left Logo" class="odoo o_mail_block_header_center_logo"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600"> + <tbody> + <tr> + <td width="100%" valign="top" class="horizontal-padding vertical-padding"> + &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> + &nbsp; + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Banner" class="odoo o_mail_block_header_center_logo"> + <div class="odoo 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> + + <div name="Text Left" class="odoo o_mail_block_header_center_text"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600"> + <tbody> + <tr> + <td width="100%" class="horizontal-padding vertical-padding"> + &nbsp; + <a t-att-href="(company_id.website) or '#'" class="display-1"> + My Company + </a> + &nbsp; + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Logo - Social" class="odoo o_mail_block_header_social"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + + <!-- <table align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse:separate" width="600"> <tr> - <td valign="center" style="text-align:center"> + <td width="300" style="padding:20px 0;"> &nbsp; - <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;"> - <img class="padding-medium" src="/logo.png" style="height:auto;max-width:600px;width:200px" alt="Your Logo" /> + <a t-att-href="(company_id.website) or '#'" style="text-decoration:none"> + <img src="/logo.png" style="height:auto;max-width:600px;width:100px" alt="Your Logo" /> </a> &nbsp; </td> + <td width="300"> + <table border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate"> + <tr> + <td align="right"> + <a> + <span class="odoo fa fa-facebook-square fa-2x"></span> + </a> + </td> + <td align="right" style="padding-left:5px"> + <a> + <span class="odoo fa fa-google-plus-square fa-2x"></span> + </a> + </td> + <td align="right" style="padding-left:5px"> + <a> + <span class="odoo fa fa-linkedin-square fa-2x"></span> + </a> + </td> + <td align="right" style="padding-left:5px"> + <a> + <span class="odoo fa fa-twitter-square fa-2x"></span> + </a> + </td> + </tr> + </table> + </td> </tr> - </tbody> - </table> - </div> - </div> + </table> --> - <div name="Center Text" class="basic_theme o_mail_block_header_center_text"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777"> - <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0"> - <tbody> + <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600"> <tr> - <td valign="center" style="text-align:center;font-size: 30px"> + <td width="100%" class="horizontal-padding vertical-padding"> &nbsp; - <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit;"> - <strong>My Company</strong> + <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:600px;width:100px" alt="Your Logo" /> </a> &nbsp; </td> + <td width="300"> + <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate"> + <tr> + <t t-if="website.social_facebook"> + <td align="right"> + <a t-att-href="website.social_facebook"> + <span class="odoofa fa-facebook-square 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="odoofa fa-google-plus-square 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="odoofa fa-linkedin-square 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="odoofa fa-twitter-square fa-2x"></span> + </a> + </td> + </t> + </tr> + </table> + </td> </tr> - </tbody> - </table> + </table> + </div> </div> </div> - <div name="Logo - Social" class="basic_theme o_mail_block_header_social"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777"> - <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit"> - <tr> - <td valign="center" width="270" style="padding:10px 10px 10px 5px;"> - &nbsp; - <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;"> - <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" /> - </a> - &nbsp; - </td> - <td valign="center" width="270" style="padding:10px 15px 10px 10px"> - <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit"> - <tr> - <td align="right"> - <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - </tr> - </table> - </td> - </tr> - </table> + <div name="Text - Social" class="odoo o_mail_block_header_text_social"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" class="table-styles"> + <tr> + <td width="100%" class="horizontal-padding vertical-padding"> + &nbsp; + <a t-att-href="(company_id.website) or '#'" class="display-1"> + My Company + </a> + &nbsp; + </td> + <td valign="center" width="270"> + <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate"> + <tr> + <t t-if="website.social_facebook"> + <td align="right"> + <a t-att-href="website.social_facebook"> + <span class="odoofa fa-facebook-square 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="odoofa fa-google-plus-square 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="odoofa fa-linkedin-square 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="odoofa fa-twitter-square fa-2x"></span> + </a> + </td> + </t> + </tr> + </table> + </td> + </tr> + </table> + </div> </div> </div> - <div name="Text - Social" class="basic_theme o_mail_block_header_text_social"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777"> - <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit"> - <tr> - <td valign="center" width="270" style="padding:10px 10px 10px 5px;font-size: 30px"> - &nbsp; - <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit"> - <strong>My Company</strong> - </a> - &nbsp; - </td> - <td valign="center" width="270" style="padding:10px 15px 10px 10px"> - <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit"> - <tr> - <td align="right"> - <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - <td align="right" style="padding-left:5px"> - <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a> - </td> - </tr> - </table> - </td> - </tr> - </table> + <div name="Button" class="odoo o_mail_block_button"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" style="text-align:center;" class="table-styles" width="600"> + <tr> + <td class="horizontal-padding vertical-padding" style="padding:10px;"> + &nbsp; + <a href="#" class="newsletter-btn" style="padding:10px;">My Account</a> + &nbsp; + </td> + </tr> + </table> + </div> </div> </div> + </div> </div> <div id="email_designer_default_body" class="o_panel"> @@ -129,192 +249,449 @@ </span> Body </div> <div class="o_panel_body"> - <div name="Title - Subtitle" class="basic_theme o_mail_block_title_sub"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777"> - <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background:inherit;color:inherit"> - <tbody> - <tr> - <td style="text-align:center;padding-bottom:10px"> - <p style="margin:0;font-size:36px">Check this out!</p> - </td> - </tr> - <tr> - <td style="font-size:20px; text-align:center; padding: 0 5px"> - <p style="margin:0">Come check out my stuff!</p> - </td> - </tr> - </tbody> - </table> + + <div name="Title Content" class="odoo o_mail_block_title_text"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600"> + <tbody> + <tr> + <td width="100%" class="horizontal-padding vertical-padding"> + <p class="display-1">Your order has been shipped!</p> + <div> + <p>Hello Bob,</p> + <p>We would like you to know that your order has shipped! To view your order or make any changes please click the "my order" button below.</p> + <div class="vertical-padding"> + <a href="#" class="newsletter-btn">Track shipping</a> + &nbsp; + </div> + </div> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> - <div name="Text-Image" class="basic_theme o_mail_block_text_image"> - <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777"> - <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit"> - <tbody> + <div name="Title - Subtitle" class="odoo o_mail_block_title_sub"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding"> + <p class="display-1" style="margin:0;">Check this out!</p> + <p class="no-margin">Apps That Help You Grow Your Business!</p> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Discount Coupon" class="odoo o_mail_block_discount2"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding"> + <p class="display-1" style="margin:0;"> + Upgrade to Premium Account! + </p> + </td> + </tr> + <tr> + <td style="background-color:#875a7b;" bgcolor="#875a7b"> + <p class="horizontal-padding vertical-padding no-margin" style="margin:10px 0;text-align:center;color:#ffffff;"> Code: <strong>45A9E77DGW8455</strong></p> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Discount Offer" class="odoo o_mail_block_discount1"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellpadding="0" cellspacing="0" width="600" class="table-styles"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding"> + <p style="margin:0" class="display-1">20% off for EVERY PRODUCT today!</p> + </td> + </tr> + <tr> + <td class="horizontal-padding text-center"> + <p style="margin:0" class="display-2">Hurry Up!</p> + </td> + </tr> + <tr> + <td class="horizontal-padding vertical-padding"><br/> + <p style="margin:0">We are continuing to grow and we miss seeing you be a part of it! We've increased store hours and have lot's of new brands available. To welcome you back please accept this 20% discount on you next purchase by clicking the button below.</p> + </td> + </tr> + <tr> + <td class="horizontal-padding vertical-padding text-center"> + &nbsp; + <a href="#" class="newsletter-btn">Redeem Discount!</a> + &nbsp; + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <!-- <div name="Event" class="odoo o_mail_block_event"> + <div class="odoo snippet_row" style="padding:0px;width:600px;margin:auto;color:#fff"> + <div class="snippet-general"> + <table align="center" cellpadding="0" cellspacing="0" width="600"> <tr> - <td align="left" style="padding:20px;font-size:14px" class="col_mv bg-color"> - <p style="margin:0;font-size:30px">Your order has shipped!</p> - <p style="margin:0">Dear Bob,</p> - <p style="margin:0"> - We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below. - </p> - <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: rgb(255, 255, 255); border: 1px solid rgb(228, 55, 37); text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(231, 76, 60);">Your Order</a> - &nbsp; + <td style="width: 150px;height: 150px;padding: 0;margin: 0;background-color: rgb(77,107,187);text-align:center;vertical-align:middle;color:#FFFFFF"> + <span style="display: block;font-size: 50px;line-height: 1;padding-top: 10px">21</span> <span style="display: block;font-size: 30px;line-height: 1">Jul</span> <span style="display: block;font-size: 16px;line-height: 1;color: #fff;font-weight: 600">ALL DAY</span> </td> - <td style="padding-top:20px;padding-bottom:0;vertical-align:middle;width:200px;" class="bg-color col_mv"> - <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;background:inherit"> - <tbody> - <tr> - <td style="vertical-align:middle;text-align:center"> - &nbsp; - <span class="fa fa-10x fa-music"></span> - &nbsp; - </td> - </tr> - </tbody> + <td style="width: 150px;height: 150px;padding: 0px;margin: 0px;text-align: center;background-color: rgb(229,96,84)"> + <div style="margin:27px auto"> + &nbsp; + <span class="odoo fa fa-calendar fa-5x"></span> + &nbsp; + </div> + </td> + <td style="position: relative;text-align: left;background-color:#f5f5f5;color:#464646;vertical-align:top;width:298px;height:150px;min-width:255px" class="odoocol_mv bg-color"> + <table style="width:100%;border-collapse:separate;background:inherit;color:inherit"> + <tr> + <td style="padding-top:20px;padding-left:20px;float:left" width="90%"> + <div style="min-height:100px;text-align:left"> + <p style="margin:0;font-size:18px">Your Event Name</p> + <p style="margin:0;font-size:14px">Description</p> + </div> + <ul style="padding-left:0"> + <li style="display: table-cell;cursor: pointer;color: #1e1e1e;font-size: 11px;font-weight: 300;padding: 3px 30px;text-align: center"><a href="#" style="color:#1e1e1e">Link </a></li> + <li style="display: table-cell;cursor: pointer;color: #1e1e1e;font-size: 11px;font-weight: 300;padding: 3px 30px;text-align: center"><a href="#" style="color:#1e1e1e">Info</a></li> + </ul> + </td> + <td style="width: 60px;vertical-align:middle;display: table-cell"> + <ul t-if="website" style="border-left:1px solid #e6e6e6;list-style-type:none;padding-left:16px"> + <t t-if="website.social_facebook"> + <li style="width:33%;margin-left:0"> + <a t-att-href="website.social_facebook"> + <span style="color: rgb(75,110,168);" class="odoo fa fa-facebook-square fa-2x"></span> + </a> + </li> + </t> + <t t-if="website.social_twitter"> + <li style="width:34%;margin-left:0"> + <a t-att-href="website.social_twitter"> + <span style="color: rgb(75,110,168);" class="odoo fa fa-twitter-square fa-2x"></span> + </a> + </li> + </t> + <t t-if="website.social_googleplus"> + <li style="width:33%;margin-left:0"> + <a t-att-href="website.social_googleplus"> + <span style="color: rgb(221,75,57);" class="odoo fa fa-google-plus-square fa-2x"></span> + </a> + </li> + </t> + </ul> + </td> + </tr> </table> </td> </tr> - </tbody> - </table> + </table> + </div> </div> - </div> + </div> --> - <div name="Image Title" class="basic_theme o_mail_block_title_text"> - <div class="snippet_row bg-color" style="padding:0px; margin:auto;width:600px;background: #fff repeat top /100%;color:#777777"> - <table cellpadding="0" cellspacing="0" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit;width:600px"> - <tbody> + <div name="User Profile" class="odoo o_mail_block_profile"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellpadding="0" cellspacing="0" width="600" class="table-styles"> <tr> - <td align="left" style="padding:20px"> - <p style="margin:0;font-size:30px">Your order has shipped!</p> - <p style="margin:0;font-size:14px"> - Dear Bob,<br/> - We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below. - </p> + <td class="horizontal-padding vertical-padding" style="text-align:center;width:30%"> + &nbsp; + <span class="odoo fa fa-user fa-5x" style="margin: 5px 20px;"></span> + &nbsp; + <p>User: John Doe</p> + </td> + <td class="horizontal-padding vertical-padding"> + <p style="margin:0">Hey Bob,</p> + <p style="margin:0">I set up an Odoo profile where I can do tons of really awesome stuff. I want you to follow me so we can keep in touch!</p> + <p style="margin:0">See you soon!</p> </td> </tr> <tr> - <td style="text-align:center;width:200px;"> - &nbsp; - <span class="fa fa-10x fa-music"></span> - &nbsp; + <td class="horizontal-padding vertical-padding" colspan="2"> + <p style="margin:0">Because I've invited you, you can also use the below coupon code to receive a 50% discount on you first months subscription!</p> </td> </tr> - </tbody> - </table> + </table> + </div> </div> </div> - <div name="Content Image" class="basic_theme o_mail_block_text_image"> - <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777"> - <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit"> - <tbody> - <tr> - <td align="left" style="padding:20px" class="col_mv bg-color"> - <p style="margin:0;font-size:14px"> - We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below. - </p> - </td> - <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color"> - &nbsp; - <span class="fa fa-10x fa-music"></span> - &nbsp; - </td> - </tr> - </tbody> - </table> + <div name="Content Table" class="odoo o_mail_block_table_content"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding"> + <table width="560" cellspacing="0" cellpadding="0" class="table-styles vertical-padding" style="margin-bottom:10px;"> + <tbody> + <tr> + <td valign="top" width="300"> + <p style="margin:0"><strong>Bob Erlicious</strong></p> + <p style="margin:0"> + 123 Flower Drive<br/> + Victoria, BC<br/> + V9P 2E8<br/> + 1(250)222-2232 + </p> + </td> + <td valign="top" width="300"> + <p style="margin:0"><strong>Invoice: 00234</strong></p> + <p style="margin:0">April 3, 2014</p> + </td> + </tr> + </tbody> + </table> + <table width="560" cellspacing="0" cellpadding="0" class="table-styles"> + <tbody> + <tr> + <td> + <table width="560" cellspacing="0" cellpadding="0" class="table-styles" data-max-width="560px"> + <thead> + <tr style="background-color:#875a7b;" bgcolor="#875a7b" class="odoo row col"> + <th style="padding: 10px 0px 10px 10px;color: #ffffff;color: #ffffff;" class="odoo mv">Plan</th> + <th style="padding: 10px 0px;color: #ffffff;" class="odoo mv">Period</th> + <th style="padding: 10px 10px 10px 0;color: #ffffff;text-align:right;" class="odoo mv">Amount</th> + </tr> + </thead> + <tbody> + <tr style="color:#464646" class="odoo row bg-color"> + <td style="padding: 10px 0px 10px 10px;">Silver Plan</td> + <td style="padding:10px 0px;">August</td> + <td style="padding:10px 10px 10px 0;text-align:right;">$50.00</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td class="horizontal-padding vertical-padding"> + <p> + The amount of $50.00 CAD has been charged on the credit card ending with 0123. + </p> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> - <div name="Image Content" class="basic_theme o_mail_block_image_text"> - <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777"> - <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit"> - <tbody> - <tr> - <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color"> - &nbsp; - <span class="fa fa-10x fa-music"></span> - &nbsp; - </td> - <td style="padding:20px" class="col_mv bg-color"> - <p style="margin:0;font-size:14px"> - We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below. - </p> - </td> - </tr> - </tbody> - </table> + <div name="Two Columns" class="odoo o_mail_block_two_cols"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td style="vertical-align:top;width:270;padding:20px 10px 20px 20px;" class="odoo col_mv"> + <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/crm/case_study_eolides.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" /> + <p class="display-2 text-center">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> + </td> + <td style="vertical-align:top;width:270;padding:20px 20px 20px 10px;" class="odoo col_mv"> + <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/crm/case_study_progenda.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" /> + <p class="display-2 text-center">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> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Image - Text" class="odoo o_mail_block_image_text"> + <div class="odoo snippet_row mv"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td style="width:270px;text-align:center;vertical-align:middle" class="odoo col_mv horizontal-padding vertical-padding"> + <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/crm/case_study_eolides.jpg" style="height:auto;width:100%;" alt="Your Logo" /> + </td> + <td style="width:270px;vertical-align:middle;text-align:justify;" class="odoo col_mv bg-color horizontal-padding vertical-padding"> + <p style="margin:0">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> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> - <div name="Button" class="basic_theme o_mail_block_button"> - <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777"> - <table style="width:600px;text-align:center;margin:0 auto;border-collapse:collapse;background:inherit;color:inherit"> - <tr> - <td class="row" style="padding:10px 0;text-align:center"> - &nbsp; - <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; color: rgb(255,255,255); border: none; text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(101,101,101);border-radius:4px">My Account</a> - &nbsp; - </td> - </tr> - </table> + <div name="Text - Image" class="odoo o_mail_block_image_text"> + <div class="odoo snippet_row mv"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td style="width:270px;vertical-align:middle;text-align:justify;" class="odoo col_mv bg-color horizontal-padding vertical-padding mobile-col"> + <p style="margin:0">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> + </td> + <td style="width:270px;text-align:center;vertical-align:middle" class="odoo col_mv horizontal-padding vertical-padding"> + <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/crm/case_study_eolides.jpg" style="height:auto;width:100%;" alt="Your Logo" /> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + + <div name="Image" class="odoo o_mail_block_image"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td width="100%" align="center" style="text-align:center" class="horizontal-padding vertical-padding"> + &nbsp; + <span class="odoo fa fa-camera fa-10x"></span> + &nbsp; + </td> + </tr> + <tr> + <td width="100%" class="horizontal-padding vertical-padding"> + <p style="margin:0"><strong>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.</strong></p> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> - <div name="Three Columns" class="basic_theme o_mail_block_three_cols"> - <div style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#000;color:#777777"> - <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;background:inherit;color:inherit"> + <div name="Text Block" class="odoo o_mail_block_simple_text"> + <div class="odoo snippet_row"> + <div class="snippet-general"> <tbody> - <tr> - <td style="padding:30px 15px;width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color"> - &nbsp; - <span class="fa fa-check fa-3x"></span> - &nbsp; - <p style="margin:0;font-size:24px;font-weight:bold">Step 1</p> - <p style="margin:0"> - 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> - </td> - <td style="vertical-align:top; padding: 30px 15px; width:34%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color"> - &nbsp; - <span class="fa fa-truck fa-3x"></span> - &nbsp; - <p style="margin:0;font-size:24px;font-weight:bold">Step 2</p> - <p style="margin:0"> - 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> - </td> - <td style="vertical-align:top; padding: 30px 15px; width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color"> - &nbsp; - <span class="fa fa-usd fa-3x"></span> - &nbsp; - <p style="margin:0;font-size:24px;font-weight:bold">Step 3</p> - <p style="margin:0"> - 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> - </td> - </tr> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding"> + <p><strong>Dear ${object.name}</strong></p> + <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p> + <p>Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p> + <p>Kind Regards,</p> + <p style="margin:0">Michael Fletcher</p> + </td> + </tr> + </tbody> + </table> </tbody> - </table> + </div> </div> </div> - <div name="Text Block" class="basic_theme o_mail_block_simple_text"> - <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777"> - <table style="width:100%;text-align:justify;margin:0 auto;background:inherit;color:inherit;border-collapse:collapse;color:inherit"> - <tr> - <td style="padding:10px 30px;font-size:14px"> - <p style="margin:0">Dear ${object.name}</p> - <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p> - <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p> - <p style="margin:0">Kind Regards,</p> - <p style="margin:0">Michael Fletcher</p> - </td> - </tr> - </table> + <div name="Background Image" class="odoo o_mail_block_text_on_img"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" style="background-image:url('/mass_mailing_themes/static/src/img/skyline_bg.gif')" width="600"> + <tbody> + <tr> + <td class="horizontal-padding vertical-padding text-center" style="vertical-align:middle"> + <p class="display-1"> + YOUR ORDER HAS SHIPPED + </p> + <p class="display-2"> + To track your order or make any changes please click the button below. + </p> + <a href="#" class="newsletter-btn">My Account</a> + &nbsp; + </td> + </tr> + </tbody> + </table> + </div> </div> </div> + + <div name="Steps" class="odoo o_mail_block_steps"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td style="background-color:#34c9a4;" class="odoo col_mv bg-color horizontal-padding vertical-padding"> + <table class="table-styles"> + <tr> + <td rowspan="2"> + &nbsp; + <span class="fa fa-check fa-3x" style="color:#fff;"></span> + &nbsp; + </td> + <td style="padding-left:10px;"> + <p style="font-weight:bold;margin:0 0 3px 0;color:#fff;" class="display-3">Step 1:</p> + <p style="margin:0;color:#fff;">Place Order</p> + </td> + </tr> + </table> + </td> + <td style="background-color:#F9F8F8;" class="odoo col_mv bg-color horizontal-padding vertical-padding"> + <table class="table-styles"> + <tr> + <td rowspan="2"> + &nbsp; + <span class="fa fa-truck fa-3x"></span> + &nbsp; + </td> + <td style="padding-left:10px;"> + <p style="font-weight:bold;margin:0 0 3px 0" class="display-3">Step 2:</p> + <p style="margin:0">Shipping</p> + </td> + </tr> + </table> + </td> + <td style="background-color:#F9F8F8;" class="odoo col_mv bg-color horizontal-padding vertical-padding"> + <table class="table-styles"> + <tr> + <td rowspan="2"> + &nbsp; + <span class="fa fa-usd fa-3x"></span> + &nbsp; + </td> + <td style="padding-left:10px;"> + <p style="font-weight:bold;margin:0 0 3px 0" class="display-3">Step 3:</p> + <p style="margin:0">Payment</p> + </td> + </tr> + </table> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> </div> <div id="email_designer_default_extra" class="o_panel"> @@ -324,35 +701,40 @@ </span> Extra </div> <div class="o_panel_body"> - <div name="Separator" class="basic_theme o_mail_block_footer_seprator"> - <div style="padding:0px;width:600px;margin:auto;color:#777777;background-color:#FFFFFF"> - <table cellspacing="0" cellpadding="0" style="vertical-align:top;padding:0px;font-family:arial;font-size:12px;border-collapse:collapse;background:inherit;color:inherit"> - <tbody> - <tr> - <td valign="top" style="width:600px"> - <div> - <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0;margin:15px auto;padding:0"/> - </div> - </td> - </tr> - </tbody> - </table> + + <div name="Separator" class="odoo o_mail_block_footer_seprator"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td valign="top" style="width:600px"> + <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;min-height:1px;line-height:0;margin:15px auto;"/> + </td> + </tr> + </tbody> + </table> + + </div> </div> </div> - <div name="Tag Line" class="basic_theme o_mail_block_footer_tag_line"> - <div class="bg-color" style="padding:0px;width:600px;margin:auto;background:#fff;color:#777777"> - <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0"> - <tbody> - <tr> - <td valign="center" style="text-align:center;padding:5px"> - <p style="margin:0;color:inherit;font-size:18px">Apps That Help You Grow Your Business</p> - </td> - </tr> - </tbody> - </table> + <div name="Tag Line" class="odoo o_mail_block_footer_tag_line"> + <div class="odoo snippet_row bg-color"> + <div class="snippet-general" bgcolor="#875a7b" style="background-color:#875a7b;width:600px;"> + <table class="table-styles" width="600" align="center" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td width="600" class="text-center horizontal-padding vertical-padding" bgcolor="#875a7b" style="background-color:#875a7b;"> + <p class="display-2" style="color:#ffffff;margin:10px 0;">Apps That Help You Grow Your Business</p> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> + </div> </div> <div id="email_designer_default_footer" class="o_panel"> @@ -363,102 +745,102 @@ </span> Footers </div> <div class="o_panel_body"> - <div t-if="website" name="Social + Text" class="basic_theme o_mail_block_footer_social"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777"> - <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0"> - <tbody> - <tr> - <td valign="center" style="padding:10px 15px 10px 10px"> - <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;color:inherit"> - <tr> - <td align="right"> - &nbsp; - <a t-att-href="(website.social_facebook) or '#'"> - <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /> - </a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_twitter) or '#'"> - <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /> - </a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_googleplus) or '#'"> - <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /> - </a> - </td> - <td align="right" style="padding-left:5px"> - <a t-att-href="(website.social_linkedin) or '#'"> - <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /> - </a> - </td> - <td align="right" style="padding-left:5px"> - <a href="#"> - <img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /> - </a> - &nbsp; - </td> - </tr> - </table> - </td> - </tr> - <tr> - <td style="font-size:12px;text-align:center;padding:10px"> - &nbsp; - <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:inherit" href="/page/contactus">Contact</a> - &nbsp; - </td> - </tr> - </tbody> - </table> + + <!-- <div t-if="website" name="Social + Text" class="odoo o_mail_block_footer_social"> + <div class="odoo snippet_row bg-color"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td style="text-align:center"> + &nbsp; + <t t-if="website.social_facebook"> + <a t-att-href="website.social_facebook"> + <span class="odoofa fa-facebook-square fa-2x"></span> + </a> + </t> + <t t-if="website.social_googleplus"> + <a t-att-href="website.social_googleplus"> + <span class="odoofa fa-google-plus-square fa-2x"></span> + </a> + </t> + <t t-if="website.social_linkedin"> + <a t-att-href="website.social_linkedin"> + <span class="odoofa fa-linkedin-square fa-2x"></span> + </a> + </t> + <t t-if="website.social_twitter"> + <a t-att-href="website.social_twitter"> + <span class="odoofa fa-twitter-square fa-2x"></span> + </a> + </t> + &nbsp; + </td> + </tr> + <tr> + <td style="font-size:12px;text-align:center;padding:10px"> + &nbsp; + <a href="/unsubscribe_from_list" style="color:#464646">Unsubscribe</a> | <a href="/page/contactus" style="color:#464646">Contact</a> + &nbsp; + </td> + </tr> + </tbody> + </table> + </div> </div> - </div> + </div> --> - <div name="Text + Copyright" class="basic_theme o_mail_block_footer_copyright"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777"> - <table cellspacing="0" cellpadding="0" style="margin:auto;width:600px;border-collapse:collapse;background:inherit;color:inherit"> - <tbody> - <tr> - <td style="font-size:12px;text-align:center;padding:10px"> - &nbsp; - <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a> - <t t-if="website"> | <a style="color:inherit" href="/page/contactus">Contact</a> </t> - &nbsp; - </td> - </tr> - <tr> - <td style="font-size:12px;text-align:center;padding-bottom:10px"> - <p style="margin:0">© 2014 All Rights Reserved</p> - </td> - </tr> - </tbody> - </table> + <div name="Text + Copyright" class="odoo o_mail_block_footer_copyright"> + <div class="odoo snippet_row"> + <div class="snippet-general"> + <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600"> + <tbody> + <tr> + <td class="horizontal-padding text-center" style="padding-top:10px;"> + &nbsp; + <a href="https://apps.odoo.com/unsubscribe_from_list" style="color:#34c9a4;text-align:center;">Unsubscribe</a> + <t t-if="website"> | <a href="/page/contactus" style="color:#34c9a4;text-align:center;">Contact</a> </t> + &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> </div> </div> - <div name="Text Only" class="basic_theme o_mail_block_footer_text"> - <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777"> - <center> - <table width="600" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto; width:600px; border-collapse:collapse;background:inherit;color:inherit"> + <div name="Text Only" class="odoo o_mail_block_footer_text"> + <div class="odoo snippet_row"> + <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:20px;text-align:center"> + <td valign="middle" align="right" style="font-size:12px;padding:10px;text-align:center"> &nbsp; <t t-if="website"> - <a style="color:inherit" href="/page/contactus">Contact Us</a> | - <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | - <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | - <a style="color:inherit" href="#">Support</a> | + <a href="/page/contactus" style="padding-right:3px;color:#464646">Contact Us</a> | + <t t-if="website.social_facebook"> + <a t-att-href="website.social_facebook" style="padding-right:3px;color:#464646">Facebook</a> | + </t> + <t t-if="website.social_twitter"> + <a t-att-href="website.social_twitter" style="padding-right:3px;color:#464646">Twitter</a> | + </t> </t> - <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a> + <a href="https://apps.odoo.com/unsubscribe_from_list" style="color:#464646">Unsubscribe</a> &nbsp; </td> </tr> </tbody> </table> - </center> + </div> </div> </div> + </div> </div> </div> diff --git a/addons/mass_mailing/views/snippets_themes_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml index 7b2248b88c83b7f67f790b68bd49f63dff4ec0f1..72707dc475d44e55f963c7de19ee27176223eff6 100644 --- a/addons/mass_mailing/views/snippets_themes_options.xml +++ b/addons/mass_mailing/views/snippets_themes_options.xml @@ -25,14 +25,14 @@ </div> <div data-js='content' class="hidden" - data-selector="[data-oe-field='body_html'] > div, .oe_snippet_body" - data-drop-near="[data-oe-field='body_html'] > *" - data-drop-in="[data-oe-field='body_html']"> + data-selector="[data-oe-field='body_html'] > div:not(.o_layout), [data-oe-field='body_html'] .oe_structure > div, .oe_snippet_body" + data-drop-near="[data-oe-field='body_html']:not(:has(.o_layout)) > *, .oe_structure > *" + data-drop-in="[data-oe-field='body_html']:not(:has(.o_layout)), .oe_structure"> </div> <div data-js='resize' data-selector="div.snippet_row" - data-drop-in=".oe_structure, [data-oe-type=html]"> + data-drop-in=".oe_structure, [data-oe-type=html]:not(:has(.o_layout))"> </div> <div data-js='background' @@ -41,6 +41,14 @@ <li data-background=""><a>No background image</a></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/theme_list.xml b/addons/mass_mailing/views/theme_list.xml deleted file mode 100644 index 06352512daa1ef105636c43ce056e5ae34e23ff4..0000000000000000000000000000000000000000 --- a/addons/mass_mailing/views/theme_list.xml +++ /dev/null @@ -1,18 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<odoo> - - <template id="mass_mail_theme_list"> - <div id="email_theme_list"> - <div> - <div class="theme_thumbnail"> - <div class="overlay text-center"> - <p>Basic Theme</p> - <a class="btn btn-primary btn-sm" data-snippet-theme="basic_theme"> Select </a> - </div> - <img class="img img-responsive img-thumbnail" src="/website_mail/static/src/img/thumbnail/basic.png"/> - </div> - </div> - </div> - </template> - -</odoo> 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 054072141d09cccab0661a0a198ad91fef26922a..49d8d76306f367487440aee2416d22035e626a90 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -1055,18 +1055,6 @@ body.editor_enable { #web_editor_inside_iframe { background-color: @odoo-brand-secondary; - #editable_area { - font: initial; - line-height: initial; - color: initial; - - p { - margin: initial; - } - a, a:hover { - color: inherit; - } - } &.editor_enable #wrapwrap { height: 100%; padding-top: @odoo-navbar-height; @@ -1077,7 +1065,7 @@ body.editor_enable { overflow: hidden; max-width: 600px; min-height: 100%; - margin: auto; + margin: 0 auto 50px auto; background-color: white; }