[IMP] mass_mailing: adapt snippets with rounded images

As mentioned in the previous commit, the circle in the `Styles` option
has been replaced by a shape.
Previously we used `.rounded-circle` on images to make them round,
now we use the new circle shape from the `Shapes` option to achieve
the same effect.
This change has been applied on the snippets' images.
Snippets containing icons with these options have also been modified.

In the builder, the `Shapes` option generates a second image (circle)
from an original source (square image) and applies various
data-attributes.
In order for the option to function correctly on snippets,
the different data-attributes such as `data-original-src` and
`data-shape` have been added manually to the snippet's images.
This creates a need for an original image and a shaped version of the
image in the repo.

task-2836942

Part-of: odoo/odoo#95974
This commit is contained in:
Elisabeth Dickinson
2022-08-09 11:32:07 +02:00
committed by David Monjoie
parent 24a4c7f897
commit f4995f5600
10 changed files with 35 additions and 35 deletions
+12 -12
View File
@@ -26,29 +26,29 @@
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_media_list_3.jpg</field>
</record>
<record id="mass_mailing.s_company_team_image_1" model="ir.attachment">
<record id="mass_mailing.s_company_team_default_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_company_team_image_1.png</field>
<field name="name">s_company_team_default_image_1.png</field>
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_team_member_1.png</field>
<field name="url">/mass_mailing/static/src/img/theme_default/s_default_image_team_member_1-circle.png</field>
</record>
<record id="mass_mailing.s_company_team_image_2" model="ir.attachment">
<record id="mass_mailing.s_company_team_default_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_company_team_image_2.png</field>
<field name="name">s_company_team_default_image_2.png</field>
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_team_member_2.png</field>
<field name="url">/mass_mailing/static/src/img/theme_default/s_default_image_team_member_2-circle.png</field>
</record>
<record id="mass_mailing.s_company_team_image_3" model="ir.attachment">
<record id="mass_mailing.s_company_team_default_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_company_team_image_3.png</field>
<field name="name">s_company_team_default_image_3.png</field>
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_team_member_3.png</field>
<field name="url">/mass_mailing/static/src/img/theme_default/s_default_image_team_member_3-circle.png</field>
</record>
<record id="mass_mailing.s_company_team_image_4" model="ir.attachment">
<record id="mass_mailing.s_company_team_default_image_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_company_team_image_4.png</field>
<field name="name">s_company_team_default_image_4.png</field>
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_team_member_4.png</field>
<field name="url">/mass_mailing/static/src/img/theme_default/s_default_image_team_member_4-circle.png</field>
</record>
<record id="mass_mailing.s_reference_demo_image_1" model="ir.attachment">
<field name="public" eval="True"/>
Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

@@ -12,8 +12,8 @@
<div class="s_blockquote_content">
<p><i>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</i></p>
<div>
<img src="/web/image/mass_mailing.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle me-2" style="width: 40px" alt=""/>
<span class="s_blockquote_author"><b>John DOE</b> &#8226; CEO of MyCompany</span>
<img src="/mass_mailing/static/src/img/theme_default/team_member_2-circle.png" style="width: 40px" class="img me-2" data-original-id="361" data-original-src="/mass_mailing/static/src/img/theme_default/s_default_image_team_member_2.jpg" data-mimetype="image/svg+xml" data-shape="mass_mailing/basic/circle" data-file-name="team_member_2-circle.png" data-shape-colors=";;;;" data-original-mimetype="image/png"/>
<span style="font-weight: bolder; font-size: 14px;">John DOE</span><span style="font-size: 14px;"> &#8226; CEO of MyCompany</span>
</div>
</div>
</div>
@@ -7,9 +7,9 @@
<div class="row s_nb_column_fixed">
<div class="col-lg-6 pt24 pb24">
<div class="container">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-3 pb16 px-0 o_not_editable" contenteditable="false" valign="top">
<img alt="" src="/web/image/mass_mailing.s_company_team_image_1" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
<div class="row">
<div class="col-lg-3 pb16 px-0">
<img src="/web/image/mass_mailing.s_company_team_default_image_1" class="img-fluid mx-auto" data-original-id="361" data-original-src="/mass_mailing/static/src/img/theme_default/s_default_image_team_member_1.png" data-mimetype="image/svg+xml" data-shape="mass_mailing/basic/circle" data-file-name="team_member_1-circle.png" data-shape-colors=";;;;" data-original-mimetype="image/png"/>
</div>
<div class="col-lg-9">
<h4>Tony Fred, CEO</h4>
@@ -24,9 +24,9 @@
</div>
<div class="col-lg-6 pt24 pb24">
<div class="container">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-3 px-0 pb16 o_not_editable" contenteditable="false" valign="top">
<img alt="" src="/web/image/mass_mailing.s_company_team_image_2" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
<div class="row">
<div class="col-lg-3 px-0 pb16">
<img src="/web/image/mass_mailing.s_company_team_default_image_2" class="img-fluid mx-auto" data-original-id="361" data-original-src="/mass_mailing/static/src/img/theme_default/s_default_image_team_member_2.png" data-mimetype="image/svg+xml" data-shape="mass_mailing/basic/circle" data-file-name="team_member_2-circle.png" data-shape-colors=";;;;" data-original-mimetype="image/png"/>
</div>
<div class="col-lg-9">
<h4>Mich Stark, COO</h4>
@@ -39,9 +39,9 @@
<div class="row s_nb_column_fixed">
<div class="col-lg-6 pt24 pb24">
<div class="container">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-3 px-0 pb16 o_not_editable" contenteditable="false" valign="top">
<img alt="" src="/web/image/mass_mailing.s_company_team_image_3" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
<div class="row">
<div class="col-lg-3 px-0 pb16">
<img src="/web/image/mass_mailing.s_company_team_default_image_3" class="img-fluid mx-auto" data-original-id="361" data-original-src="/mass_mailing/static/src/img/theme_default/s_default_image_team_member_3.png" data-mimetype="image/svg+xml" data-shape="mass_mailing/basic/circle" data-file-name="team_member_3-circle.png" data-shape-colors=";;;;" data-original-mimetype="image/png"/>
</div>
<div class="col-lg-9">
<h4>Aline Turner, CTO</h4>
@@ -52,9 +52,9 @@
</div>
<div class="col-lg-6 pt24 pb24">
<div class="container">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-3 px-0 pb16 o_not_editable" contenteditable="false" valign="top">
<img alt="" src="/web/image/mass_mailing.s_company_team_image_4" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
<div class="row">
<div class="col-lg-3 px-0 pb16">
<img src="/web/image/mass_mailing.s_company_team_default_image_4" class="img-fluid mx-auto" data-original-id="361" data-original-src="/mass_mailing/static/src/img/theme_default/s_default_image_team_member_4.png" data-mimetype="image/svg+xml" data-shape="mass_mailing/basic/circle" data-file-name="team_member_4-circle.png" data-shape-colors=";;;;" data-original-mimetype="image/png"/>
</div>
<div class="col-lg-9">
<h4>Iris Joe, CFO</h4>
@@ -6,17 +6,17 @@
<div class="container">
<div class="row">
<div class="col-lg-4 text-center">
<i class="fa fa-3x fa-gear rounded bg-primary m-3"></i>
<i class="fa fa-3x fa-gear bg-primary m-3" style="padding: 10px; border-radius: 3px !important;"></i>
<h3>First Feature</h3>
<p>Tell what's the value for the <br/>customer for this feature.</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-3x fa-photo rounded bg-o-color-5 m-3"></i>
<i class="fa fa-3x fa-photo bg-o-color-5 m-3" style="padding: 10px; border-radius: 3px !important;"></i>
<h3>Second Feature</h3>
<p>Write what the customer would like to know, <br/>not what you want to show.</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-3x fa-leaf rounded bg-secondary m-3"></i>
<i class="fa fa-3x fa-leaf bg-secondary m-3" style="padding: 10px; border-radius: 3px !important;"></i>
<h3>Third Feature</h3>
<p>A small explanation of this great <br/>feature, in clear words.</p>
</div>
@@ -15,7 +15,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-font-awesome rounded-circle bg-primary"></i>
<i class="fa fa-2x fa-font-awesome bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Change Icons</h4>
@@ -24,7 +24,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-files-o rounded-circle bg-primary"></i>
<i class="fa fa-2x fa-files-o bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Duplicate</h4>
@@ -33,7 +33,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-trash rounded-circle bg-primary"></i>
<i class="fa fa-2x fa-trash bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Delete Blocks</h4>
@@ -52,7 +52,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-magic rounded bg-secondary"></i>
<i class="fa fa-2x fa-magic bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Great Value</h4>
@@ -61,7 +61,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-eyedropper rounded bg-secondary"></i>
<i class="fa fa-2x fa-eyedropper bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Edit Styles</h4>
@@ -70,7 +70,7 @@
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<i class="fa fa-2x fa-picture-o rounded bg-secondary"></i>
<i class="fa fa-2x fa-picture-o bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
<h4>Sample Icons</h4>