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

[IMP] mass_mailing, web_editor: add basic img shapes, remove img Style

Browse Source 
The `Styles` option contains styles which are unsupported in
emails. The few that are supported can be replaced by other options.
- Shadows: unsupported;
- Rounded rectangle: (unsupported in Outlook)
is replaced by the `Border` options which allows to customize the
border's radius more than the current option.
- Thumbnail: can be done with a combination of `Border` and `Padding`
- Circle: can be done with a shape
(which has been added along with other new shapes)

This option could be found on images and icons and has now been removed.
CSS styles in the `theme_default` file have also been removed since
they are no longer needed.

Three basic shapes (circle, triangle, "slanted" rectangle) have been
added to the `web_editor`'s `Basics` shapes page.
A condition was previously set on the page to avoid showing an empty
page. The condition is moved to each of its buttons instead, so that
new shapes added via xpath from `mass_mailing` to this page are now
visible.

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 5504c3f983
commit 24a4c7f897
6 changed files with 78 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/static/image_shapes/basic/circle.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath" d="M0.5,1C-0.1667,0.9795-0.1667,0.0203,0.5,0C1.1667,0.0205,1.1667,0.9797,0.5,1z"></path>
</defs>
<svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 586 B

addons/mass_mailing/static/image_shapes/basic/slanted.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="600">
<defs><clipPath id="clip-path" clipPathUnits="objectBoundingBox"><use xlink:href="#filterPath" fill="none"></use></clipPath><path id="filterPath" d="M0.4128,0h0.5872L0.5872,1H0L0.4128,0z"></path></defs><svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none"><use xlink:href="#filterPath" fill="darkgrey"></use></svg><image xlink:href="" clip-path="url(#clip-path)"></image></svg>
Side by Side

After

Width:  |  Height:  |  Size: 535 B

addons/mass_mailing/static/image_shapes/basic/triangle.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="600">
<defs><clipPath id="clip-path" clipPathUnits="objectBoundingBox"><use xlink:href="#filterPath" fill="none"></use></clipPath><path id="filterPath" d="M1,1L0,0h1V1z"></path></defs><svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none"><use xlink:href="#filterPath" fill="darkgrey"></use></svg><image xlink:href="" clip-path="url(#clip-path)"></image></svg>
Side by Side

After

Width:  |  Height:  |  Size: 511 B

addons/mass_mailing/static/src/scss/themes/theme_default.scss
-24
View File
@@ -103,30 +103,6 @@ div.col:not([align]) {
width: $width;
height: $height;
}
$size: 2rem;
&.rounded-circle,
&.rounded,
&.rounded-0,
&.rounded-leaf,
&.img-thumbnail,
&.shadow {
display: inline-block;
vertical-align: middle;
text-align: center;
// fa-1x is not ouput
width: $size;
height: $size;
line-height: $size;
@for $i from 2 through 5 {
&.fa-#{$i}x {
width: $size + $i;
height: $size + $i;
line-height: $size + $i;
}
}
}
}
// Background Images
.oe_img_bg {
addons/mass_mailing/views/snippets_themes.xml
+43 -1
View File
@@ -346,10 +346,52 @@
t-att-data-variable="radius_variable"/>
</template>
<template id="snippet_options_extra_shapes" inherit_id="web_editor.snippet_options">
<xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="inside">
<we-button data-set-img-shape="mass_mailing/basic/circle" data-select-label="Circle"/>
<we-button data-set-img-shape="mass_mailing/basic/triangle" data-select-label="Triangle"/>
<we-button data-set-img-shape="mass_mailing/basic/slanted" data-select-label="Slanted"/>
</xpath>
<xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="attributes">
<attribute name="t-if">True</attribute>
</xpath>
</template>
<template id="snippet_options_image_styles" inherit_id="web_editor.snippet_options">
<xpath expr="//div[hasclass('o_we_image_options')]" position="replace">
<div data-selector="span.fa, i.fa, img">
<we-select string="Alignment" data-state-to-first-class="true">
<we-button data-select-class="" title="Unalign">None</we-button>
<we-button data-select-class="float-start" title="Align Left">Left</we-button>
<we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
<we-button data-select-class="float-end" title="Align Right">Right</we-button>
</we-select>
<t t-call="mass_mailing.snippet_options_border_line_widgets">
<t t-set="label">Border</t>
<t t-set="with_bs_class" t-value="True"></t>
</t>
<we-input string="Round Corners"
data-select-style="0" data-css-property="border-radius"
data-unit="px" data-extra-class="rounded"
t-att-data-variable="radius_variable"/>
<we-row string="Padding ⭤">
<we-input data-select-style="" data-unit="px" data-css-property="padding-left"/>
<we-input data-select-style="" data-unit="px" data-css-property="padding-right"/>
</we-row>
<we-row string="Padding ↕">
<we-input data-select-style="" data-unit="px" data-css-property="padding-top"/>
<we-input data-select-style="" data-unit="px" data-css-property="padding-bottom"/>
</we-row>
</div>
</xpath>
</template>
<!-- Snippet themes Options -->
<template id="snippet_options">
<t t-set="no_animations" t-value="True"/>
<t t-call="web_editor.snippet_options"/>
<t t-call="mass_mailing.snippet_options_extra_shapes"/>
<t t-out="0"/>
<!-- Border | Columns -->
addons/web_editor/views/snippets.xml
+17 -13
View File
@@ -458,18 +458,22 @@
<div class="o_we_image_shape">
<we-row string="Shape" class="o_we_full_row">
<we-select-pager data-name="shape_img_opt" class="o_we_select_grid o_we_fake_transparent_background">
<we-select-page string="Basics" t-if="not no_animations">
<we-button data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
<!-- This page only contains animated shapes by default. If
using xpath to add non-animated shapes, also use xpath to
remove the t-if on the page. This is why individual options
also have that t-if. -->
<we-select-page class="o_we_basic_shapes" string="Basics" t-if="not no_animations">
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
<we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
</we-select-page>
<we-select-page string="Solids">
<we-button data-set-img-shape="web_editor/solid/blob_1_solid_rd" data-select-label="Blob Solid 1" />
@@ -588,7 +592,7 @@
</we-button-group>
</div>
<div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]">
<div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]" class="o_we_image_options">
<we-select string="Alignment" data-state-to-first-class="true">
<we-button data-select-class="" title="Unalign">None</we-button>
<we-button data-select-class="float-start" title="Align Left">Left</we-button>