An extra option is added in order to have control over the paddings.
Snippets using the `px-3` class have had it replaced with inline styles
and now have the padding option in the builder.
This was initially done for the media_list snippet, but it seems it's
useful for many more snippets.
Part-of: odoo/odoo#95940
Old thumbnails for deprecated snippets have been removed. The
other snippet thumbnails have been grouped together in same folder.
Some images are unnecessary since the new mail builder, some are simply
not used anywhere.
The references snippet is limited to four images, adding more columns
will copy the last column's image, so no need for images 5 and 6.
The basic template doesn't allow snippets - the editor doesn't even
appear - since no snippets can be added, their images are unnecessary in
the templates image folder.
In all cases, the drag&dropped snippets, even from other templates,
use the theme_default images and not the templates' images.
Move all images in snippets_demo folder to theme_default folder
For more consistency, default images have been renamed according to
their snippet names
Part-of: odoo/odoo#95940
This snippet is now similar to the one being used in the web editor.
What was once a single event on three columns is now two events on
two columns.
The snippet's thumbnail has been redesigned to correspond to the
snippet's new design.
Part-of: odoo/odoo#95940
We shouldn't add a data-snippet in the declaration of a snippet,
as they are meant to be drag & dropped, the editor/right panel is going
to add that for you. We generally add them when we copy paste a snippet
definition into another view directly in our sources (ie: template)
Ref: https://github.com/odoo/odoo/pull/87059#discussion_r866903584
Part-of: odoo/odoo#95940
Replace bootstrap class for text alignment with inline styles
Remove Horizontal alignment on whole snippet to allow individual
alignment on <h3> and <p> elements.
Part-of: odoo/odoo#95940
There used to be a middle column to allow for a border between
the two columns, but this was selectable (not editable) with the mailing
builder.
`.o_no_editable` or other similar classes didn't seem to work.
Instead, the snippet has been revamped by removing the middle column and
adding a right border to the second column on each row.
This border is not yet editable in the builder, so the user cannot
adapt the width/color/style yet.
Bootstrap classes for text alignment have been replaced w/ inline styles
Part-of: odoo/odoo#95940
Replaced bootstrap classes by inline styles and removed
`.o_default_snippet_text`.
Wrapping the `<a>` in a `<p>` allows the user to align the button
separately from the text.
On mobile, the columns are stacked, the paddings top and bottom are thus
moved to the columns to allow top and bottom spacing between them.
Part-of: odoo/odoo#95940
Replaced bootstrap classes by inline styles and removed unused
`.figure-caption` class.
Allow columns and give image `max-width: 100%`
As the "thumbnail" option (in the image's Style option) is to be removed,
the `.img-thumbnail` class has been removed from the image.
The result can be done with the "padding" option already available on
images and the "border" widget that is to be added for its border-radius
option.
It is only missing a background-color to get the same result as the
styling given with the removed `.img-thumbnail` class.
Note: The styles are directly applied to the image element but Outlook
would need the styles to be applied to a wrapping element instead.
Outlook doesn't support styling directly on images.
Part-of: odoo/odoo#95940
Replaced bootstrap classes by inline styles and removed
`.o_default_snippet_text` and `.s_number` classes which aren't needed.
`<h5>` is no longer supported, it's been changed to `<p>`.
Added `.o_cc` on columns to allow background color edition with builder.
Part-of: odoo/odoo#95940
Replaced bootstrap classes by inline styles. Added .o_cc on columns to
allow background color edition with builder.
Mobile stacks the columns, the paddings top and bottom are thus moved to
the columns to allow top and bottom spacing between them.
Part-of: odoo/odoo#95940
Replaced bootstrap classes by inline styles and removed unused classes.
`<h4>` and `<h5>` are no longer supported, these have been changed to
`<p>` or `<h3>`.
Added .o_cc on columns to allow background color edition with builder.
Part-of: odoo/odoo#95940
Replace bootstrap classes by inline styles.
Added a <p> around the ENDOFSUMMER20 text so it can be edited with the
design-tab along with other text.
A `.o_mail_no_margin` class is added to the <p> element otherwise the
text isn't vertically centered inside the the table cell.
Part-of: odoo/odoo#95940
Removed unnecessary classes and replaced bootstrap classes with inline
styles.
Removed `.btn-block` classes because it isn't an option supported
by the builder.
The `<li>`'s `.list-group-item` class overrides the design-tab's text
color. For this particular case, the list elements have a `<p>` added
around the text.
When selecting text inside the second block's list and backspacing,
the line would become purple and impossible to remove. This was probably
due to the text being inside a <span> inside a <p> (this issue isn't
present in the first block which only contains <p> elements).
Part-of: odoo/odoo#95940
Placed all the columns in a single row, litmus tests approve.
Removed unnecessary classes which prevented to move columns around and
add background colors to the columns.
Also changed all `<h4>`s into `<h3>`s
Part-of: odoo/odoo#95940
Replace bootstrap class for text alignment with inline style
Wrapping the `a` inside a `p` and placing the text alignment on the `h2`
and `p`s allows the user to align the elements individually.
Part-of: odoo/odoo#95940
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
Structure and styling changed to allow padding X when this snippet is
not inside another snippet. Otherwise the alert block, in w-100, didn't
have any space between the edge of the email template and the block.
The "Type" option wasn't working: as all the elements can be changed
with other options anyway, the code for this one has been removed
instead of trying to fix it.
Part-of: odoo/odoo#95940
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
Since removing the "Styles" option and the CSS that went with it,
there is an issue with the center alignment on icons.
Indeed, having a fixed width/height value on `fa.rounded` allowed the
icon to be centered along with its background.
By removing the fixed with/height values, the center alignment
(using `.mx-auto` and `.d-block`) would center the icon but stretch the
background color to the full width of the parent.
To achieve the same result, the cheat is to set the
default value of the wrapping block to text-center and remove
`.mx-auto` and `.d-block`.
closesodoo/odoo#95974
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
The default image in masonry is very dark, making the black text on it
(if the user starts typing) practically invisible. This makes that text
white by default.
task-2856858
Part-of: odoo/odoo#91314
The `s_cover` snippet was designed to have text over it but this was not
supported in `mass_mailing` because of a limitation of Outlook on
Windows so we replaced it with just an image with no text. Now that we
support text over images thanks to the conversion process, we can offer
that possibility for the `s_cover` snippet in `mass_mailing` as well.
Note that buttons over images are not supported so they were not added
to the snippet like they are in `website`.
task-2856858
Part-of: odoo/odoo#91314
`wWebsite`'s `s_hr` snippet css targets the same element as
`mass_mailing`'s `hr` snippet, resulting in interferences. This raises
the speciticity of `mass_mailing.s_hr`'s css to counter that issue.
X-original-commit: 112758b7c07870c5d002a87f4eed58bd8feb9bee
Part-of: odoo/odoo#92138
Reduce the content of the title to make sure it fits in a single line.
Task-2781002
X-original-commit: 2b87e5617c4cb25c6593df03b752f0c90814a7ff
Part-of: odoo/odoo#88679
The shape feature only applies to attachments. This moves images from
mass_mailing snippets into attachments so they can be shaped in the
editor.
task-2760157
Part-of: odoo/odoo#84926
The `loading="lazy"` attribute was set by default on all images but this
affected the `mass_mailing` module as well while that attribute doesn't
work in emails and can cause some issues in edition.
One known such issue this addresses is to be reproduced as follows:
1. Create a new mail
2. Drop the "cover" snippet
It has height 0 so it won't load until another snippet (with a non-zero
height) is dropped.
task-2761074
closesodoo/odoo#84415
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
The text_block snippet has the option to add columns in website but not
in mass_mailing. This is a clear oversight that is hereby addressed.
task-2737896
closesodoo/odoo#83174
X-original-commit: 2738b45deeb6eec7209ece72b9c9dabf8dda0871
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
A horizontal padding was applied to each media list item, making it
impossible to make the media list items full width. Full width media
list items can always be reduced by adding padding in the editor, but
the converse is not true. For this reason, this commit applies
horizontal padding 0 to each media list item in the snippet template.
task-2716398
closesodoo/odoo#81637
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
When the cover snippet's image is in full width, we don't notice it's
not centered. But reduce its width and it appears at the left of its
container. There is no reasonable scenario in which this would be what
we expect so this commit centers that image by default.
task-2716399
Part-of: odoo/odoo#81637
When double clicking a number in the numbers snippet, then typing a new
number, the number line would be merge with the text underneath. This
prevents that by adding a line break in between so they aren't
considered the same line by the editor (an inline with a block as
sibling is a tricky case for edition).
task-2711644
closesodoo/odoo#81551
X-original-commit: 886af1f328a9f1664b0d3e204bf984bfee28b215
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet <age@odoo.com>
*: mass_mailing, website, website_sale
Before this commit, it was impossible to add `fa-fw` directly on a
`we-button` as it would make the icon half invisible, since the whole
`we-button` would have the font-awesome `.fa-fw` css rule applied on it;
width: ~1.28em.
Then, one would need to insert a `<i/>` tag inside the `we-button` for
it to work.
This commit improves that behavior by handling automatically such cases,
and will preserve the purpose of the `fa-fw` class which is to have a
fixed width for those icons.
Note that the util class introduced in [1] (o_we_button_icon renamed
here in o_we_icon_button) is still useful to handle the case of svg
images, they are not allowed to shrink, the same way the fa buttons are.
[1]: https://github.com/odoo/odoo/commit/e4233643b93b521454cc146c6a2ae876781fb9ba
Related to task-2172311
closesodoo/odoo#77980
X-original-commit: e8ab9d76b802e80bb386812e4c8566825cbc2c92
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
The css of some website snippets conflicted with their mass_mailing
equivalents. A quick, non-intrusive solution had been to contain that
css so it wouldn't conflict. This replaces that solution with the more
neighborly renaming of said snippets in mass_mailing. This way there is
no added awareness of mass_mailing within the code of website.
Part-of: odoo/odoo#77724
Commit [1] copied a lot of website snippet options into mass mailing.
Some were moved to web_editor and xpathed to be used in both without
duplicating code. Sadly that is not without side effects and it was
therefore decided to duplicate them instead so they can live separate
lives in the future.
[1] https://github.com/odoo/odoo/commit/4f7cd33d0fd69ee5984d0968233ffc73d7751030
Part-of: odoo/odoo#77724
David Monjoie