pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mass_mailing: improve theme_default and default SCSS

Browse Source 
In previous versions of templates, all the styles were needed in every
template in `<styles id="design-element">`. This is no longer the
case and it has been cleaned up to only use the styles that differ from
the "default" ones found in the  `mass_mailing_design_constants.js` file.

There was a priority problem (ex: `a.btn` inside `p` takes
`p`'s text color instead of `.btn`), this is resolved by placing the
default styling in `theme_default.css`

`theme_default.scss` contained classes that were no longer necessary or
would override styles from the builder. These have been removed from the
SCSS file and from snippets and templates where these were applied.
If the styles are needed, they should be added as inline styles.

The theme_default template was calling snippets with `t-call`
which prevented customization of the theme.
Snippets have been added in full with further customization.

task-2835454

Part-of: odoo/odoo#95940
This commit is contained in:
Elisabeth Dickinson
2022-08-11 17:56:18 +02:00
committed by David Monjoie
parent c87b9e105c
commit 8db441a283
11 changed files with 99 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/data/mailing_data_templates.xml
+2 -2
View File
@@ -61,7 +61,7 @@
text-decoration: none;
}
@media screen and (max-width: 768px) {
.o_mail_table_styles {
.o_mail_snippet_general .container {
width: 100% !important;
}
.s_header_social table td, .s_header_text_social table td, .s_header_logo table td,
@@ -103,7 +103,7 @@
</p>
<p>
<t t-if="mailing.ab_testing_winner_selection == 'manual'">Don't forget to send your preferred version</t>
<t t-elif="not mailing.ab_testing_schedule_datetime">Since the date and time for this test has not been scheduled, don't forget to manually send your preferred version.</t>
<t t-elif="not mailing.ab_testing_schedule_datetime">Since the date and time for this test has not been scheduled, don't forget to manually send your preferred version.</t>
<t t-else="">
Then on <b><t t-out="mailing.ab_testing_schedule_datetime.strftime('%b %d, %Y')"/></b> the <t t-out="mailing.mailing_type_description"/> having the <b><t t-out="ab_testing_winner_selection_description"/></b> will be sent
</t> to the remaining <t t-out="remaining_ab_testing_pc"/>% of recipients.
addons/mass_mailing/data/mass_mailing_demo.xml
+5 -5
View File
@@ -92,7 +92,7 @@
<div class="col o_mail_no_options o_mail_wrapper_td bg-white oe_structure" style="text-align:left;width:100%;">
<div class="o_mail_block_header_logo" data-snippet="s_mail_block_header_logo">
<div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
<div class="container o_mail_table_styles o_mail_h_padding" style="padding:0 20px 0 20px;width:100%;border-collapse:separate;">
<div class="container o_mail_h_padding" style="padding:0 20px 0 20px;width:100%;border-collapse:separate;">
<div class="row">
<div valign="center" width="30%" class="col text-center o_mail_v_padding pb0" style="padding:20px 0 0px 0;vertical-align:middle;text-align:center;">
<a href="http://www.example.com" style="text-decoration:none;font-weight:bold;background-color:transparent;color:rgb(100, 89, 116);">
@@ -105,7 +105,7 @@
</div>
<div class="o_mail_block_footer_separator" data-snippet="s_hr" style="margin:0 20px 0 20px;">
<div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
<div class="container o_mail_table_styles o_mail_full_width_padding" style="width:100%;border-collapse:separate;">
<div class="container" style="width:100%;border-collapse:separate;">
<div class="row">
<div valign="top" style="padding:20px 0 20px 0;text-align:left;vertical-align:top;width:100%;" class="col o_mail_v_padding o_mail_no_colorpicker">
<div style="background-color:rgb(245, 245, 245);height:2px;width:100%;" class="separator"></div>
@@ -116,7 +116,7 @@
</div>
<div class="o_mail_block_text" data-snippet="s_text_block">
<div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
<div class="container o_mail_table_styles" style="width:100%;border-collapse:separate;">
<div class="container" style="width:100%;border-collapse:separate;">
<div class="row">
<div class="col-12 o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker" style="padding:20px;text-align:left;vertical-align:top;">
<p style="margin:0px 0 1rem 0;font-size:14px;">
@@ -130,7 +130,7 @@
</div>
<div class="o_mail_block_footer_social o_mail_footer_social_center" data-snippet="s_mail_block_footer_social">
<div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
<div align="center" class="o_mail_table_styles container o_mail_full_width_padding" style="border-style:solid none none none;padding:20px 0 20px 0;border-top-color:rgb(245, 245, 245);border-top-width:2px;width:100%;border-collapse:separate;">
<div align="center" class="container" style="border-style:solid none none none;padding:20px 0 20px 0;border-top-color:rgb(245, 245, 245);border-top-width:2px;width:100%;border-collapse:separate;">
<div class="row">
<div class="col o_mail_footer_links o_default_snippet_text" style="padding:10px 0 10px 0;text-align:center;vertical-align:middle;">
<a href="/unsubscribe_from_list" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-start-color:transparent;border-bottom-color:transparent;border-end-color:transparent;border-top-color:transparent;border-start-width:1px;border-bottom-width:1px;border-end-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Unsubscribe</a> |
@@ -151,7 +151,7 @@
</div>
</div>
</div>
<div align="center" class="container o_mail_table_styles o_mail_full_width_padding" style="width:100%;border-collapse:separate;">
<div align="center" class="container" style="width:100%;border-collapse:separate;">
<div class="row">
<div align="center" style="padding:16px 0 16px 0;" class="col pt16 pb16">
Powered by <a target="_blank" href="https://www.odoo.com" style="text-decoration:none;background-color:transparent;color:#875A7B;">Odoo</a>
addons/mass_mailing/static/src/img/theme_default/s_default_image_logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

addons/mass_mailing/static/src/img/theme_default/signature.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

addons/mass_mailing/static/src/img/theme_imgs/default_thumb_large.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 13 KiB

addons/mass_mailing/static/src/img/theme_imgs/default_thumb_small.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

addons/mass_mailing/static/src/scss/themes/theme_default.scss
+32 -36
View File
@@ -137,11 +137,6 @@ div.col:not([align]) {
// ===== Snippets (specific) =====
.o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
.o_mail_logo_container {
img {
width: auto;
}
}
.o_mail_header_social {
a:not(.btn), .btn.btn-link {
display: inline-block;
@@ -156,29 +151,6 @@ div.col:not([align]) {
.btn-link{
padding: 0;
}
.o_mail_table_styles {
padding-top: 20px;
padding-bottom: 20px;
}
.o_mail_footer_social > a {
text-decoration: none !important;
}
.o_mail_footer_links {
padding-top: 10px;
padding-bottom: 10px;
}
.o_mail_footer_copy {
font-size: 9px;
color: lighten($o-mm-def-text-color, 30%);
}
&.o_mail_footer_social_center {
.o_mail_footer_social, .o_mail_footer_links, .o_mail_footer_copy {
text-align: center;
}
}
}
// -- Bootstrap overrides for transparent colors -- //
@@ -199,15 +171,8 @@ div.col:not([align]) {
}
// ===== Misc =====
.o_mail_no_margin {
margin: 0;
&.o_mail_display_coupon {
line-height: 1.1;
}
}
.o_mail_table_styles {
.o_mail_snippet_general .container {
width: 100%;
border-collapse:separate;
}
@@ -220,3 +185,34 @@ div.col:not([align]) {
div.col[class*="mb"], div.col[class*="mt"] {
margin: 0!important;
}
// DEFAULT_CSS styles
.o_mail_wrapper {
h1 {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
h2 {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
h3 {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
p, p > *, li, li > * {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
a.btn-primary, a.btn-outline-primary, a.btn-fill-primary {
color: #FFFFFF;
background-color: #35979c;
border-color: #35979c;
}
a.btn-secondary, a.btn-outline-secondary, a.btn-fill-secondary {
color: #FFFFFF;
background-color: #685563;
border-color: #685563;
}
hr {
border-top-color: #212529;
width: 100%;
}
}
addons/mass_mailing/views/snippets/s_text_highlight.xml
+1 -1
View File
@@ -4,7 +4,7 @@
<template id="s_text_highlight" name="Text Highlight">
<div class="s_mail_text_highlight o_cc o_cc3 pt32 pb32 w-100 o_mail_snippet_general" data-snippet="s_text_highlight">
<h3 class=" text-center">Text Highlight</h3>
<p class="o_mail_no_margin text-center">Put the focus on what you have to say!</p>
<p class="text-center">Put the focus on what you have to say!</p>
</div>
</template>
addons/mass_mailing/views/snippets_themes.xml
+12 -12
View File
@@ -109,7 +109,7 @@
<!-- Snippet Templates -->
<template id="s_mail_block_header_social" name="Left Logo">
<div class="o_mail_snippet_general o_mail_block_header_social s_header_social">
<div class="o_mail_table_styles container">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16 pb16">
<a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
@@ -128,7 +128,7 @@
<template id="s_mail_block_header_text_social" name="Left Text">
<div class="o_mail_snippet_general o_mail_block_header_text_social s_header_text_social">
<div class="o_mail_table_styles container">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16 pb16">
<h3>
@@ -149,7 +149,7 @@
<template id="s_mail_block_header_logo" name="Centered Logo">
<div class="o_mail_snippet_general o_mail_block_header_logo s_header_logo">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-4"/>
<div class="col-lg-4 text-center pt16 pb16">
@@ -202,7 +202,7 @@
<template id="s_mail_block_discount1" name="Discount Offer">
<div class="o_mail_snippet_general o_mail_block_discount1 s_discount1">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg pt16 pb16 text-center">
<h4 class="text-o-color-2 text-center mt0 mb16" style="font-weight:800;">-20%</h4>
@@ -210,7 +210,7 @@
<a role="button" href="#" class="btn btn-primary">Redeem Discount!</a>
</div>
<div class="col-lg pt16 pb16">
<p class="o_mail_no_margin">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.</p>
<p>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.</p>
</div>
</div>
</div>
@@ -222,8 +222,8 @@
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 px-0 text-center">
<h3 class="o_mail_no_margin">21 Jul</h3>
<p class="o_mail_no_margin">ALL DAY</p>
<h3>21 Jul</h3>
<p>ALL DAY</p>
</div>
<div class="col-lg-2 px-0">
<img src="/web/image/mass_mailing.s_mail_block_event_default_image" class="img w-100"/>
@@ -244,20 +244,20 @@
<template id="s_mail_block_footer_social" name="Footer Center">
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general bg-200">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg o_mail_footer_social">
<t t-call="mass_mailing.social_links"/>
</div>
</div>
<div class="row">
<div class="col-lg o_mail_footer_links">
<div class="o_mail_footer_links">
<a role="button" href="/unsubscribe_from_list" class="btn btn-link">Unsubscribe</a>
</div>
</div>
<div class="row">
<div class="col-lg">
<p class="o_mail_no_margin o_mail_footer_copy">
<p>
© <t t-esc="datetime.datetime.now().year"/> All Rights Reserved
</p>
</div>
@@ -268,10 +268,10 @@
<template id="s_mail_block_footer_social_left" name="Footer Left">
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_left o_mail_snippet_general">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg o_mail_footer_description">
<p t-if="res_company" class="o_mail_no_margin">
<p t-if="res_company">
<strong><t t-esc="res_company.partner_id.name"/></strong>
</p>
<div class="o_mail_footer_links">
addons/mass_mailing/views/themes_templates.xml
+34 -21
View File
@@ -18,33 +18,46 @@
<!-- Default Theme -->
<template id="theme_default_template">
<style id="design-element">
h1 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
h2 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
h3 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: bolder;
}
p, p > *, li, li > * {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
color: #6c757d;
}
a:not(.btn), a.btn.btn-link {
color: #81709b;
}
a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary {
background-color: #81709b;
border-color: #81709b;
}
a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary {
background-color: #72e1d0;
border-color: #72e1d0;
hr {
border-top-color: #ced4da !important;
}
</style>
<t t-call="mass_mailing.s_mail_block_header_logo" />
<t t-call="mass_mailing.s_title" />
<t t-call="mass_mailing.s_text_block" />
<div class="s_header_logo o_mail_block_header_logo o_mail_snippet_general pt16 pb16">
<div class="container">
<div class="row">
<div class="col-lg-4"/>
<div class="col-lg-4" style="text-align: center;">
<a t-att-href="(company_id.website) or '#'" style="text-decoration:none;" target="_blank">
<img border="0" src="/mass_mailing/static/src/img/theme_default/s_default_image_header_logo.png" style="height:auto; max-width:100%;" width="180"/>
</a>
</div>
<div class="col-lg-4" style="text-align: right;"/>
</div>
</div>
</div>
<div class="s_text_block o_mail_snippet_general pt40 pb16 px-3">
<div class="container s_allow_columns">
<h2>Thank you for joining us!</h2>
<p><br/>We want to take this opportunity to welcome you to our ever-growing community!
<br/>Your platform is ready for work, it will help you reduce the costs of digital signatures, attract new customers and increase sales.</p>
<p><img src="/mass_mailing/static/src/img/theme_default/signature.png" style="width:125px; margin-top:8px;margin-bottom:-25px;" alt="Signature"/></p>
<p>Michael Fletcher<br/>
<span style="font-size: 12px; font-weight: bolder;">Customer Service</span>
</p>
<p style="text-align: center;">
<a role="button" href="#" class="btn btn-primary">LOGIN</a>
</p>
</div>
</div>
<div class="s_hr pt16 pb16" data-snippet="s_hr" data-name="Separator">
<hr class="s_hr_1px s_hr_solid"/>
</div>
<t t-call="mass_mailing.s_mail_block_footer_social_left"/>
</template>
</odoo>
addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
+13 -13
View File
@@ -34,7 +34,7 @@
</style>
<t t-set="now" t-value="datetime.datetime.now()"/>
<div class="s_header_social o_mail_block_header_social o_mail_snippet_general pt16 pb16" data-snippet="s_mail_block_header_social" style="background-color: rgb(26, 36, 54) !important;" data-name="Header Social">
<div class="o_mail_table_styles container">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16 pb16">
<a style="text-decoration:none;float:none;" href="http://www.example.com" target="_blank">
@@ -123,7 +123,7 @@
</div>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general bg-200" data-snippet="s_mail_block_footer_social" data-name="Footer Center">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-12 o_mail_footer_links">
<a role="button" href="/unsubscribe_from_list" class="btn btn-link ">Unsubscribe</a>
@@ -174,9 +174,9 @@
</style>
<t t-set="now" t-value="datetime.datetime.now()"/>
<div class="s_header_social o_mail_block_header_social o_mail_snippet_general" data-snippet="s_mail_block_header_social" data-name="Header Social">
<div class="o_mail_table_styles container">
<div class="container">
<div class="row">
<div class="col-8 o_mail_logo_container pt40 pb32">
<div class="col-8 pt40 pb32">
<a style="text-decoration:none;float:none;" href="#">
<img width="189" style="height:auto;max-width:400px;" src="/mass_mailing_themes/static/src/img/theme_tech/s_default_image_logo.png"/>
</a>
@@ -291,7 +291,7 @@
<hr class="s_hr_1px s_hr_solid"/>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general" data-snippet="s_mail_block_footer_social" data-name="Footer Social Center">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-12 o_mail_footer_links">
<a href="/unsubscribe_from_list" class="btn btn-link"><font style="color: rgb(147, 146, 146);">Unsubscribe</font></a>
@@ -350,7 +350,7 @@
<t t-set="now" t-value="datetime.datetime.now()"/>
<t t-set="future_date" t-value="(datetime.date.today() + datetime.timedelta(days=30))"/>
<div class="s_header_logo o_mail_block_header_logo o_mail_snippet_general" data-snippet="s_mail_block_header_logo" data-name="Centered Logo" style="background-color: rgb(36, 37, 48) !important;">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-4" style="text-align: center;">
<font style="color: rgb(255, 255, 255);">FREE</font>
@@ -415,7 +415,7 @@
</div>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general" data-snippet="s_mail_block_footer_social" data-name="Footer Center" style="background-color: rgb(36, 37, 48) !important;">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-12 o_mail_footer_social" t-translation="off">
<a aria-label="Facebook" title="Facebook" href="https://www.facebook.com/Odoo">
@@ -478,7 +478,7 @@
</style>
<t t-set="now" t-value="datetime.datetime.now()"/>
<div class="s_header_logo o_mail_block_header_logo o_mail_snippet_general bg-white pt32 pb16" data-snippet="s_mail_block_header_logo" data-name="Centered Logo">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-3">
<p style="text-align: center;"><t t-out="now.strftime('%b')" />
@@ -607,7 +607,7 @@
<hr class="s_hr_1px s_hr_solid"/>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general" data-snippet="s_mail_block_footer_social" data-name="Footer Center">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-12 o_mail_footer_social">
<a aria-label="Facebook" title="Facebook" href="https://www.facebook.com/Odoo">
@@ -671,7 +671,7 @@
<t t-set="now" t-value="datetime.datetime.now()"/>
<t t-set="future_date" t-value="(datetime.date.today() + datetime.timedelta(days=30))"/>
<div class="s_header_logo o_mail_block_header_logo o_mail_snippet_general bg-200" data-snippet="s_mail_block_header_logo" data-name="Header Logo">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 pt16 pb16" style="text-align: center;">
@@ -709,7 +709,7 @@
</div>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general bg-200" data-snippet="s_mail_block_footer_social" data-name="Footer Center">
<div class="container o_mail_table_styles">
<div class="container">
<div class="row">
<div class="col-lg-12 o_mail_footer_social" t-translation="off">
<a aria-label="Facebook" title="Facebook" href="https://www.facebook.com/Odoo">
@@ -768,7 +768,7 @@
</style>
<t t-set="now" t-value="datetime.datetime.now()"/>
<div class="s_header_text_social o_mail_block_header_text_social o_mail_snippet_general" data-snippet="s_mail_block_header_text_social" data-name="Left Text">
<div class="o_mail_table_styles container">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16 pb16">
<p>
@@ -835,7 +835,7 @@
</div>
</div>
<div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_left o_mail_snippet_general" data-snippet="s_mail_block_footer_social_left" data-name="Footer Left" style="background-color: rgb(255, 187, 0) !important;">
<div cellspacing="0" cellpadding="0" class="container o_mail_table_styles">
<div cellspacing="0" cellpadding="0" class="container">
<div class="row">
<div class="col-lg o_mail_footer_description">
<p>