[IMP] mass_mailing: blockquote snippet improved

Removed unnecessary classes and placed necessary styles as inline styles
for better support by the builder.

Removed options.js which allows to change the blockquote's style as in
the web editor, but none of the other options is well supported in
emails. Due to this change, the blockquote's cover image is removed.

Changes to text done via the Design tab in the builder weren't being
applied to text inside `<span>`, so this has been changed to a `<p>`
element in order for the changes to be applied.

Part-of: odoo/odoo#95940
This commit is contained in:
Elisabeth Dickinson
2022-08-11 17:56:20 +02:00
committed by David Monjoie
parent 7eda17fd4d
commit 9c7264fb48
6 changed files with 8 additions and 61 deletions
-1
View File
@@ -118,7 +118,6 @@
'mass_mailing/static/tests/field_html_test.js',
'mass_mailing/static/tests/mass_mailing_favourite_filter_tests.js',
'mass_mailing/static/src/js/mass_mailing_snippets.js',
'mass_mailing/static/src/snippets/s_blockquote/options.js',
'mass_mailing/static/src/snippets/s_media_list/options.js',
'mass_mailing/static/src/snippets/s_showcase/options.js',
'mass_mailing/static/src/snippets/s_rating/options.js',
@@ -128,12 +128,6 @@
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_team_member_2.png</field>
</record>
<record id="mass_mailing.s_blockquote_cover_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_blockquote_cover_default_image.jpg</field>
<field name="type">url</field>
<field name="url">/mass_mailing/static/src/img/snippets_demo/s_blockquote_cover.jpg</field>
</record>
<record id="mass_mailing.s_image_text_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_image_text_default_image.jpg</field>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

@@ -16,7 +16,6 @@ var MassMailingFieldHtml = FieldHtml.extend({
jsLibs: [
'/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js',
'/mass_mailing/static/src/js/mass_mailing_snippets.js',
'/mass_mailing/static/src/snippets/s_blockquote/options.js',
'/mass_mailing/static/src/snippets/s_masonry_block/options.js',
'/mass_mailing/static/src/snippets/s_media_list/options.js',
'/mass_mailing/static/src/snippets/s_showcase/options.js',
@@ -1,45 +0,0 @@
odoo.define('mass_mailing.s_blockquote_options', function (require) {
'use strict';
const options = require('web_editor.snippets.options');
options.registry.Blockquote = options.Class.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Change blockquote design.
*
* @see this.selectClass for parameters
*/
display: function (previewMode, widgetValue, params) {
// Classic
this.$target.find('.s_blockquote_avatar').toggleClass('d-none', widgetValue !== 'classic');
// Cover
const $blockquote = this.$target.find('.s_blockquote_content');
if (widgetValue === 'cover') {
$blockquote.css({"background-image": "url('/web/image/mass_mailing.s_blockquote_cover_default_image')"});
$blockquote.addClass('oe_img_bg o_bg_img_center');
if (!$blockquote.find('.o_we_bg_filter').length) {
const bgFilterEl = document.createElement('div');
bgFilterEl.classList.add('o_we_bg_filter', 'bg-white-50');
$blockquote.prepend(bgFilterEl);
}
} else {
$blockquote.css({"background-image": ""});
$blockquote.css({"background-position": ""});
$blockquote.removeClass('oe_img_bg o_bg_img_center');
$blockquote.find('.o_we_bg_filter').remove();
$blockquote.find('.s_blockquote_filter').contents().unwrap(); // Compatibility
}
// Minimalist
this.$target.find('.s_blockquote_icon').toggleClass('d-none', widgetValue === 'minimalist');
this.$target.find('footer').toggleClass('d-none', widgetValue === 'minimalist');
},
});
});
@@ -2,23 +2,23 @@
<odoo>
<template id="s_blockquote" name="Blockquote">
<div class="s_mail_blockquote o_cc o_cc2 pt16 pb16 o_mail_snippet_general s_blockquote_classic blockquote mb-0" data-snippet="s_blockquote">
<div class="s_mail_blockquote blockquote o_mail_snippet_general o_cc o_cc2 pt16 pb16 mb-0 w-100" data-snippet="s_blockquote">
<div class="container">
<div class="row">
<div class="col-lg-1 d-flex align-items-start o_mail_no_resize" valign="top" align="right">
<i class="s_blockquote_icon fa fa-1x fa-quote-left"/>
<div class="col-lg-1 pb80" style="text-align: right;">
<i class="fa fa-quote-left"/>
</div>
<div class="col-lg-10 px-0">
<div class="s_blockquote_content">
<div class="col-lg-10">
<div>
<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="/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>
<p style="font-weight: bolder; font-size: 14px;"><b>John DOE</b> &#8226; CEO of MyCompany</p>
</div>
</div>
</div>
<div class="col-lg-1 d-flex align-items-end o_mail_no_resize" valign="bottom" align="left">
<i class="s_blockquote_icon fa fa-1x fa-quote-right"/>
<div class="col-lg-1 pt80" style="text-align: left;">
<i class="fa fa-quote-right"/>
</div>
</div>
</div>