Commit Graph
177 Commits
Author SHA1 Message Date
Mathieu (mano) 3e683cc716 [IMP] web_editor, website: add minor design improvements to the editor
This commit gives a small refresh to the web_editor UI. To do so we
remove the borders from the buttons and inputs. We also increase the
border radius to 4px instead of 2px. The nested menus such as in Themes
tab now have the same  background color than the rest of the UI.

The box shadows on the `we-title`, `we-customize-block-options` and the
checkbox switch have been removed.

All the buttons and select components are now taking the full available
width. The inputs fields remain unchanged except their font which is now
set to sans-serif.

Finally a `<div>` have been added to the replace media snippet to make
it consistent with the other buttons having an icon. Maybe in the future
we'll need a better way to define those.

task-3265187

closes odoo/odoo#119697

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-04-28 16:04:35 +02:00
abd-msyukyu-odoo f04b8191c8 [IMP] web_editor: make mocha tests odoo modules
In order to be able to use web dependencies for mocha tests, convert every
existing test to an `@odoo-module` and make a new asset
`web_editor.mocha_tests` that will be used for tests in `/web_editor/tests`

Task-2821374

Part-of: odoo/odoo#104680
2023-04-20 10:51:21 +02:00
Benoit Socias 14bcdbc6f5 [FIX] web_editor: align image to the right
Align images to the right by using an auto left margin.

Steps to reproduce:
- Drop a "Columns" block.
- Select an image.
- Resize image to 50%.
- Align image to the right.
=> Image did not get aligned to the right.

task-2841127

X-original-commit: d2364278371828fa353c17d53fd266350aa2446b
Part-of: odoo/odoo#118684
2023-04-17 10:34:32 +02:00
Benoit Socias 95bb8dc0f8 [FIX] web_editor, website, *: make snippets name translatable
*: mass_mailing, website_blog, website_event, website_mail_group,
   website_mass_mailing, website_payment, website_sale, website_twitter

The names of snippet blocks are not translatable because their name is
obtained from a their template name which is not a translatable item.
For markets that use a non-latin alphabet this is a no go.

This commit makes it possible to specify a `string` attribute in the
`t-snippet` blocks that makes their name inventoried by the translation
process.

closes odoo/odoo#118530

X-original-commit: a501d226d8674ed0c9b183c69a9e754c79682237
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
2023-04-17 08:24:47 +02:00
Mathieu (mano) 934069f834 [IMP] web_editor, mass_mailing: add and sort shapes
This commit is the first step towards the addition of various SVG shapes
for the website app.

The purpose of this commit is to add the new shapes SVGs and to sort the
current shape menu into new categories.

The avoid duplicating the shapes added in mass_mailing, the 3 shapes:
   - Circle
   - Slanted
   - Triangle (corner)

Are now in the web_editor, their existing reference in mass_mailing
template have have been changed to their new locations. To adapt to
`b1a3a3b18370ad76280726298602815769dce1c2` the paths have been changed
and a new record for `s_tech_default_image.jpg` have been created in
the new file `mass_mailing_themes/data/ir_attachment_data.xml` since 
it's an image only used in themes. (Also removing  `noupdate=0` from
the data element in `mass_mailing/data/ir_attachment_data.xml` 
since it is the default value).

I also removed the .png and old .jpg of this image since now the shape 
is applied directly on the image. 

Since the shapes + their image are converted in a base64 img+svg on
save, we can move the assets of the current website shapes in use 
without compatibility issue. Therefore these shapes were renamed and 
moved their new folder category.

The SVG width and height of the new and previous shapes was set to
600x600 since they are mostly squarish and are going to be rendered in a
square preview in the future.

To simulate the future preview of the shape selection menu, the
`we-button img` width was set to
`$o-we-sidebar-content-field-dropdown-grid-item-height` and the
`we-button` width to `1/4` in the file `wysiwyg_snippets.scss`.

It makes the preview 60x60 and displayed in a four tiles layout.

Note : 

- If later on the SVG are rendered as inline-svg rather than base64
the current IDs inside the .svg might conflict if multiple svg are
on the same page.

- The previous shapes might look a bit weird with the squarish ratio
in preview, alternatives solutions should be explored during the 
implementation of the new UI. 

task-3094258

closes odoo/odoo#110673

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2023-03-17 23:24:06 +01:00
Arthur Detroux (ard)andqsm-odoo 84f6010fc1 [FIX] mass_mailing, *: fix options conflicts between modules
*: web_editor, website

Prior to this commit, the template structure for declaring the snippet
options used in a specific context (website, mass_mailing, ...) made it
hard to easily modify SnippetOptions defined in web_editor.

Indeed, the structure was as below
```xml
<template>
    <t t-call="web_editor.snippet_options" />
    ... Additional Options ...
</template>
```
If someone wanted to alter the behaviour of an option from web_editor
for their module, they had 2 solutions

- To extract that option inside another template, extend that template
inside their own module, remove its call from web_editor and instead
call manually the option inside each module (preferred method)

- To impact the web_editor template directly with an extension instead
of a new primary template or override JS options using include or
replacing an option inside the registry.

The second solution was often used but created extra code to make sure
that other modules were not impacted... and it was often not properly
done. For example:

- [1] and [2] introduced javascript code inside the web_editor options
  and isolating it by checking if they are in fact, inside mass_mailing.

- [3] adds code in mass_mailing mentioning JS classes of website, and
  actually broke parallax for website (after [5]).

- [4] broke the image transform option for website (after [5]).

- [6] added some shapes for mass mailing images but ended up adding them
  for the website builder too.

- [7] created different images options for mass_mailing... but ended up
  impacting website options too. Half of those can actually either be
  put in web_editor to improve everything or just in mass_mailing to not
  break the website.

- ...

This commit tries to fix everything "the right way" in master (and will
be backported for the recent 16.0). Other stable fixes will need to be
made to restore the website options in a stable way.

To fix that, this commit changes the structure to
```xml
<template inherit_id="web_editor.snippet_options" primary="True">
    <xpath ...>
        ... Change existing options ...
    </xpath>
    <xpath expr="." position="inside">
        ... Additional options ...
    </xpath>
</template>
```
This allows each module to modify the existing web_editor templates
without impacting it and each other. They can even change the JS
behaviour by using an XPath to replace the data-js of an option, and
changing it to their own extended version of the JS option.

[1]: https://github.com/odoo/odoo/commit/f296992317e96562c66bd7ad59a5080d6c551ed5#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R134-R138
[2]: https://github.com/odoo/odoo/commit/cd403480f90cf7103651f3be818a14b06d3c73ca#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R175
[3]: https://github.com/odoo/odoo/commit/e9237ae8004502a3071e8ceb132d9dac11fe00b3#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R372
[4]: https://github.com/odoo/odoo/commit/ff422df49201be6ed7baa11ef3deb5b9a41042a7
[5]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[6]: https://github.com/odoo/odoo/commit/24a4c7f897d4db6bdf0f3cbfc91a3ce7351241a2
[7]: https://github.com/odoo/odoo/commit/d0c2d8e9a1436a8eaf263797c790329f81d7615b

closes odoo/odoo#99850

Related: odoo/design-themes#597
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
2022-10-04 17:01:17 +02:00
Gorash 5410b7c238 [IMP] base/web: XML templates are added into the asset bundles.
XML files are now declared in python module manifests. During the qweb
't-call-asset' directive, assetbundle will fetch the declared xml files,
apply the inheritance (t-inherit) and create a javascript service (for
eg: 'web.assets_backend.bundle.xml') which is added at the end of the
*.js mimifier file.

When the debug mode is activated, comments are added in the template
indicating which file the template comes from as well as the
inheritances applied to it.

****

JavaScript:

assets.js (module @web/core/assets) takes care of loading libraries,
javascripts and styles.
`loadJS(url)` (loads the javascript and returns a resolved promise when
the templates are also loaded via the '*.bundle.xml' service)
`loadCSS(url)` (loads the style a resolved promise when the file is
loaded)
`loadXML(xml, app=assets.defaultApp)` (load template into
application/owl, used by the `*.bundle.xml` services)
`getBundle(bundleName)` (get the bundle descriptor)
`loadBundle(desc)` (load the files and bundle from a descriptor)

templates (XML element content all owl templates)

A new `ready(serviceName)` method on boot.js lets you know when a
service is loaded are the require.

The xmlDependencies attribute no longer exists.

Python:

The xmls taken into account by assetbundle.py, applying `t-inherit`
inheritances and adding an `name_of_the_bundle.bundle.xml` service in
the generated JavaScript file.

****

Every manifest changes is into the next commit, except 'web_tour' in
this current commit as example.

Part-of: odoo/odoo#95500
2022-09-14 20:25:01 +02:00
Sébastien Geelen (sge) f4ec5ad9e9 [IMP] web_editor: improve unit tests
* Add test for the new Odoo Editor Tabs.
* Refactor test utils to simplify and
  remove deprecated or unused features.

task-2871848

Part-of: odoo/odoo#99460
2022-09-08 11:44:56 +02:00
Benjamin Vray 6bfca9f714 [IMP] web_editor: adds a remove button next to the shape selector
This commit aims to make it easier to remove a shape over a background
image.

Before this commit, we could only remove a shape by clicking on the
"shape" button in the background options (it was not easy to find
quickly), but with this commit we can now also remove it thanks to a
"remove" button that has been added next to the shape selector.

task-2827802

closes odoo/odoo#96788

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-17 19:48:18 +02:00
Elisabeth Dickinson 24a4c7f897 [IMP] mass_mailing, web_editor: add basic img shapes, remove img Style
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
2022-08-09 11:32:07 +02:00
Antoine Guenet f9cbcccdfe [REF] web_editor: convert editor styles to scss
Odoo Editor's styles were defined in CSS when it was all still part of
a separate repository. They can now be converted to SCSS, which will
allow us to use Odoo's SCSS variables in the future, and allows us now
to refactor the styles in the more readable SCSS format.

Part-of: odoo/odoo#96287
2022-08-08 14:17:01 +02:00
qsm-odoo 29613c6ec4 [FIX] web_editor: fix the look of the indent symbol in the editor panel
As a stable fix, to not touch XML templates and break existing
translations, the ⌙ character was automatically replaced by └ which
makes more sense for the usecase and should work properly in all
browsers. The ⌙ character is actually rendered mirrored on Windows 11
Chrome (and others) as the font used for those unicode characters is
left to the browser. We could force a font of our own but it's probably
not worth it.

A better solution with a SVG or CSS solution has to be done in master.
That would unify the look of the symbol across all browsers and
also prevent special characters to be placed in translations.

With this forward-port commit, we'll start first by using └ via a CSS
rule. Three new classes have been created: o_we_sublevel_1,
o_we_sublevel_2 and o_we_sublevel_3. Adding any of them on a widget
automatically adds the └ character. Then choosing 1, 2 or 3 controls
the indentation, which was previously controlled by placing the &emsp;
HTML entity directly inside strings.

This commit also takes the opportunity to fix some of those level
indentations (sometimes 2 was used instead of 1 or 1 was used instead of
2, etc) and also review some related labels.

closes odoo/odoo#97361

X-original-commit: e5d45643598671077ade7e41f0dbfe2b502665b8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2022-08-04 11:45:31 +02:00
Tom De Caluwéandqsm-odoo faff8ddb30 [FIX] web_editor, *: fix animations on transformed images
*: website

Setting transformations on images is handled by the jQuery transfo
plugin. This plugin, however, also manipulates animations related css
properties allowing the plugin to work on animated images.

After closing the transformation tools these properties stay in the DOM,
preventing the animation options to work properly. Animations are not
played when previewing or selecting a choice from the dropdown list.
Instead they remain stuck in their initial keyframe.

To avoid complications from the interaction between both options, this
commit hides either option when the other is activated. Additionally,
css properties added by the transform option are cleaned, avoiding
potential interactions after the transform option is reset again.

opw-2765529

closes odoo/odoo#97137

X-original-commit: 3ac59a7f841b528a32c14a2111e7a1a7e11c830a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
2022-08-01 13:26:38 +02:00
David Monjoie 467415f631 [IMP] web_editor: rename Auto width to Default
This nomenclature was taken straight from the old Summernote options
when the new editor was merged in 15.0.

While perfectly correct from a technical point of view, the use of the
word "Auto" in this context is confusing because the user might think
that the system is going to choose an optimal size for them while this
is not what this option does at all. What it does is simply removing any
width style property that might be set on the image, thus letting the
image be sized appropriately by the browser in accordance with active
CSS rules at that position in the page, hence its "Default" width.

closes odoo/odoo#96679

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-07-28 01:30:23 +02:00
Romeo Fragomeli 1fcd098af5 [REF] *: BS5: migration
Automated change made by a lot of RegEx to change all think that is
possible to automate.

https://getbootstrap.com/docs/5.1/migration

Task ID: 2766483

Part-of: odoo/odoo#95450
2022-07-07 13:30:24 +02:00
Antoine Guenet ae7110f44e [IMP] web_editor: add route for Odoo Editor tests
Loading assets for Odoo Editor's tests was a problematic matter since
some were in the lib folder while others were in src. This solves that
issue by finally creating a route for these tests, like web has one for
QUnit tests.

Part-of: odoo/odoo#94516
2022-07-04 18:53:07 +02:00
Benjamin Vray dab8827e3b [IMP] web_editor: page options activated on click on the customize tab
With this commit, clicking on the "customize" tab automatically
activates the page options (if there are any). This commit also replaces
the name of the "style" tab by naming it "customize".

task-2710582
2022-06-24 10:28:05 +02:00
Benjamin Vray 1216cea321 [IMP] web_editor: add a new string attribute on snippet option
This commit introduces a new way to set the title of an option section
in the customize panel. The title can now be filled in a new "string"
attribute in the template of an option.

See merge commit for more information.

task-2710582
2022-06-24 10:28:05 +02:00
qsm-odoo 038ecd07fb [FIX] web_editor: hide media options on editable root media elements
This works follows [1] which already hid lots of options which were not
supposed to show up on some images. That concerned mainly t-field images
and others. This commit is about media elements (images, icons, ...)
which are editable roots, meaning they carry the branding of the portion
of the view they belong to.

In 14.0, such root media elements were simply not editable. Indeed, the
media tools (which were amongst text tools of summernote) simply did not
show up. With the new editor of 15.0, all media options were converted
as "snippet" options for the website editor. The system being entirely
different, explicit conditions for the options to not appear had to be
made.

Technically, some of those options may work on editable roots. With [2],
the "class" and "style" attributes are savable on such items... unless
they are computed. In the future, we may allow more attributes. The
problem in allowing some options to appear (depending if they work on
a given element) is that it would require:
- knowing which attributes an option modifies (class? style? others?)
- knowing which attributes are computed in the qweb view

We may consider improving all of that in future versions, but in stable,
we decided to simply hide all media options on editable roots.
Theoretically, some non-media options could still appear on non-media
editable root elements and not work... but probably no standard option
matches this case.

[1]: https://github.com/odoo/odoo/commit/e707789d43a5754dc2a28192e5502cc14eaca73f
[2]: https://github.com/odoo/odoo/commit/8579c0cae839c615415120b79d6ec22c71f7affd

opw-2817765
opw-2854285
opw-2864584

closes odoo/odoo#93751

X-original-commit: 9dc76ce4b0a646563a29a431e28cf96218a66991
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-06-16 14:44:48 +02:00
Antoine Guenet b45cfda756 [FIX] mass_mailing, web_editor, website: remove bg shape/video in m_mail
The conversion of background images for mass_mailing doesn't support the
conversion of shapes on them (limitation of html2canvas), and emails
should not contain videos. This removes these options for mass_mailing.
Since the video option was added in place by `website`, this adds an
option in its template so it can be disabled. A similar option was added
for shapes, which depends on images being enabled as well.

task-2856858

closes odoo/odoo#91314

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-05-24 14:51:08 +02:00
xO-Tx f0fe283c76 [FIX] web_editor, *: fix image options visibility
*: website

Issue: from 15.0 onwards all image options are available on "/shop".

Details:

On 14.0, images options were removed for unsupported images (we had
a message "Quality Options Unavailable" - see [1]) and images related
options on old editor toolbar were hidden too.

On 14.4 and after [2], images options from the toolbar (crop, width,...)
were moved to a separate 'ImageTools' option and as a consequence, they
don't respect the same visibility rules as 'ImageOptimize'. Other
options were added in XML and they have the same issue, they are visible
as long as the target is an 'img'.

This is a list of options that should be available for unsupported or
partly supported images:

[A] For "t-field" images (shape & quality options are available only if
the image is supported for processing):

- Shape
- Filter
- Width (image width)
- Quality
- Transform (crop)

[B] For external images or images unsupported for processing:

- Description
- Tooltip
- Transform (crop, transform)
- width (CSS width)
- Alignment
- Style
- Padding
- Animate

[C] For illustrations:

- Same as [B]
- Dynamic colors

The goal of this commit is to fix this visibility issue on the JS code
of image options.

[1]: https://github.com/odoo/odoo/commit/84417a174bc2bb76730cc89783d3426a3a3b07d9
[2]: https://github.com/odoo/odoo/commit/d934b81aaae8d68b5579d1489b1fbe8ea347b4ed

task-2724946

closes odoo/odoo#90224

closes odoo/odoo#90832

X-original-commit: 8e6ca51ed3ebf121acfc7cb1ab992984d0764c90
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-05-10 15:16:44 +02:00
Guillaume (gdi) df28bde6f1 [FIX] web_editor: disable link tool for s_share links
As the social media can now be handled via the s_social_media snippet,
the media link tool is useless for s_share snippet.

task-2739937

X-original-commit: 2238c8883ef83251ca230acf183da3078b79b961
Part-of: odoo/odoo#87933
2022-04-05 10:54:08 +02:00
Antoine Guenet 6fc2f208ca [FIX] mass_mailing, web_editor: remove animated shapes from mass_mailing
Email clients do not support svg images so we can't support animated
shapes in mass_mailing. This removes them from the options.

task-2760157

Part-of: odoo/odoo#84926
2022-03-28 10:45:46 +02:00
Brieuc-brd 93d5ace34a [IMP] web_editor: add device shapes for images
This commit adds a new category of image shapes: Devices.
The purpose is to give the possibility to add images in device mockups
with the image shapes.
To use it correctly the image needs to be in a specific ratio depending
on the shape. To help the user to have the perfect render, an average
resolution is shown when hovering the thumbnail of the shape.

task-2666049

closes odoo/odoo#79068

Related: odoo/design-themes#525
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-03-08 15:54:44 +00:00
Nicolas BayetandAntoine Guenet a8cf97bdee [FIX] web_editor: prevent double-loading css in mass_mailing
`web.assets_frontend` was called in `wysiwyg_iframe_editor_assets` _and_
in `iframe_css_assets_edit`. As a result, they were loaded twice in edit
mode.

X-original-commit: 4bea292681039c1954c6c9038742fa6e2cc2c31e
Part-of: odoo/odoo#84513
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
2022-02-14 14:51:24 +00:00
Guillaume (gdi) 36258053c5 [FIX] web_editor: clean media link tool for master
As we added the media link tools in a stable release (15.0) with [1], we
had to make all the changes in static files (JS and lazy loaded XML).
We don't have to worry about that in master so the code is simplified
with this commit.

[1]: https://github.com/odoo/odoo/commit/bfcd25c5d66765b7436114dba3316ac7331a4d97

task-2666467

closes odoo/odoo#78578

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-01-24 16:05:49 +00:00
Guillaume (gdi)andRomain Derie 8f7c6997e8 [IMP] website: propose a new social media snippet
This commit introduces a new social_media snippet that allows social
networks to be displayed. This snippet shares the same options as the
share snippet, but also provides a list to edit the URLs of the social
networks in the company data (social_facebook, ...). This list also
allows to manage links to custom social networks (which are not stored
in the DB).

Headers and footers now use this new social_media snippet instead of the
share snippet and in the settings, the urls to the DB social networks
are editable/visible only in developer mode.

task-2687447

closes odoo/odoo#80217

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Guillaume (gdi) <gdi@odoo.com>
Co-authored-by: Romain Derie <rde@odoo.com>
2022-01-16 23:36:46 +00:00
Arthur Detroux (ard) b7a110bf21 [IMP] web_editor: improve snippet search placeholder message
Tests showed that users didn't understand the goal of the search bar
above the snippets block under the tabs.

This commit changes the placeholder of the search bar to better
indicate its purpose.

task-2607728

closes odoo/odoo#81222

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-12-17 13:39:57 +00:00
Brieuc-brd 1e466775fe [IMP] web_editor: add new background shapes
This commit introduces two new background shapes (Float 13 and 14).

task-2687297

closes odoo/odoo#80658

Related: odoo/design-themes#529
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-12-07 11:00:46 +00:00
xO-Tx 89ce9f9ab5 [FIX] web_editor, mass_mailing: fix editor history for image shapes
Issue:

1- Website editor > Set shape on image
2- Crop > shape is reapplied on the croped image
3- Change another option (e.g. image width)
4- Undo > image will be shown cropped but without any
shape applied on it.

In the current code we apply shapes on cropped images using
the event listener 'ImageOptimize > _onImageCropped', so in
'ImageTools', the 'crop()' option method will record the
"crop" action but the step where the shape is added is lost.
(See: SnippetOptionWidget > _onUserValueUpdate()).

The goal of this commit is to merge the 'ImageTools' and
'ImageOptimize' in one option so we can simply use shape
related methods to apply shapes when the crop() & resetCrop()
methods are called.
This way, the step to record will be a "cropped image with
a shape on it" instead of just a "cropped image".

task-2628964

closes odoo/odoo#80208

X-original-commit: 7c17d78fbdbb64b1aa5b55f78d3202a64a85ed2f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-11-26 15:10:34 +00:00
Nasreddin Boulif (bon) 33f8c747b3 [FIX] web_editor: Display correctly top buttons of the editor sidebar
Steps to reproduce :

  - Install website module
  - Activate (and translate website) French language
  - Go to translated terms and fetch for "Discard" in website module
  - Replace the translated value by "Ne pas sauvegarder"
  - Go to Website -> Configuration -> Websites
  - Select main website and change language to french then save
  - Go to Website and edit homepage
  - Add any block

Issues :

  On top of editor sidebar, buttons are not displayed correctly.

Solutions :

  Add css class `d-flex` to the div arround the buttons.

opw-2683602

closes odoo/odoo#79612

X-original-commit: 772156078418544907f9073e242e4491ddae1e5d
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Nasreddin Boulif (bon) <bon@odoo.com>
2021-11-10 13:46:21 +00:00
fb20b16d48 [FIX] web_editor, *: review icon buttons sizing and paddings
*: 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

closes odoo/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>
2021-10-07 13:09:26 +00:00
stefanorigano (SRI) 27604376a9 [IMP] web_editor, website: improve "palettes-chooser" dropdown design
This commit reviews the component design in order to match the
"Configurator" one.

As a result, 'color-4' and 'color-5' are hidden in the palette-chooser
while remaining visible/editable once the palette is active.

This commit will also reorder color fields in the sidebar and in the
colopicker in order to match both the palette-preview & CC-list colors
order.

Beside design consistency, another reason behind these changes goes back
to the initial stages of the color system introduced with v14.

At the very beginning the system was designed to handle 3 custom colors
+ "locked" black and white.
Being able to edit black and white sounded interesting at that time;
as a result 'color-4' and 'color-5' have been introduced in the
system.

Despite being a powerful tool for designers and pro-users, the edition
of these color has been proven to be tricky an potentially unsafe.

Together with new default palettes that standardize 'color-4' and
'color-5' to safe values, hiding these color from the list simplify
the palette selection process and aims, implicitly, to communicate to
"normal" users that these colors are "not part of the palette", while
somehow related.

task-2656337

closes odoo/odoo#77857

X-original-commit: 02aba326710523bf210644e9038198059db1672c
Related: odoo/design-themes#514
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-10-05 14:17:48 +00:00
Antoine Guenet ff9a77c4be [FIX] mass_mailing, web(site,_editor): restore original website options
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
2021-10-04 15:31:11 +00:00
Antoine GuenetandElisabeth Dickinson d0c2d8e9a1 [ADD] mass_mailing, web[site|_editor]: website snippets to mass_mailing
The following snippets (and their relevant options) were added to
`mass_mailing`, mostly duplicated from the website builder:

- s_cover
- s_title
- s_text_block
- s_comparisons
- s_color_blocks_2
- s_three_columns
- s_image_text
- s_text_image
- s_picture
- s_features
- s_numbers
- s_masonry_block
- s_media_list
- s_showcase
- s_company_team
- s_call_to_action
- s_references
- s_product_list
- s_features_grid
- s_alert
- s_rating
- s_blockquote
- s_hr
- s_text_highlight
- s_coupon_code

The following snippets were removed to make way for the new:

- s_mail_block_banner
- s_mail_block_title_sub
- s_mail_block_paragraph
- s_mail_block_comparison_table
- s_mail_block_two_cols
- s_mail_block_three_cols
- s_mail_block_image_text
- s_mail_block_text_image
- s_mail_block_image
- s_mail_block_footer_separator
- s_mail_block_steps
- s_mail_block_discount2

The following standalone snippet options were added, mostly duplicated from the
website builder:

- Box
- layout_column
- SnippetMove
- snippet_options_text_align (via web_editor)
- snippet_options_width (via web_editor)
- snippet_options_block_align (via web_editor)
- BodyWidth (based on ContainerWidth but only for the mailing's body)
- minHeight
- so_snippet_addition
- so_content_addition
- sizing_x
- vAlignment

Styles and selectors were adapted to the specifics of `mass_mailing`.

task-2554899

X-original-commit: e5e1d4255ab416581b2ef7159c0c28540528771c
Part-of: odoo/odoo#77724
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Elisabeth Dickinson <edi@odoo.com>
2021-10-04 15:31:07 +00:00
qsm-odoo 48092fcf85 [IMP] web_editor, *: add a generic class for large editor widgets
*: website, website_payment, website_sale

Instead of having a "o_we_large_input" class, now to have large widget, we can
use the generic "o_we_large" class (a future update is needing that for a non-
input widget).

task-2431285

X-original-commit: a8446e5d0f0b10f99f8174c012a6a53e2134b77a
Part-of: odoo/odoo#77255
2021-09-28 09:29:02 +00:00
Cocographique af666dff20 [IMP] web_editor: add new "Zigs" background shape
Related to task-2545200

closes odoo/odoo#77119

X-original-commit: 1624b1659d15df731a954912b88908a24aeddb5d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-09-24 01:50:16 +00:00
Benoit Socias d3c9a9cc00 [IMP] web, web_editor, website: make gradients editable
task-2599771

X-original-commit: bfb97ce3ed829905e943f18cd83107a92e695e76
Part-of: odoo/odoo#76608
2021-09-15 23:51:13 +00:00
Philémon van Helden d2a59b731a [IMP] web_editor: rename dyn. colors to main color
"Dyn. Colors" implies that the colors are dynamic, such as in an
animation. This is not the case, as it just represents the main color,
or accent.

This commit renames the "Dyn. Colors" option to "Main Color" to better
match its functionality.

task-2618494

Part-of: odoo/odoo#75730
2021-08-30 10:59:14 +00:00
qsm-odooandBenoit Socias a48a30f954 [IMP] website, web_editor, *: allow to use pre-configured gradients
*: web

After this commit pre-configured gradients can be used as snippet
backgrounds, snippet filters or as text effects / highlight effects.

The background colors (and now gradients) are now possible to add
*alongside* a color combination class (editing one does not remove the
other). Background colors and gradients are mutually exclusive.

Part of https://github.com/odoo/odoo/pull/73611
task-2599770

closes odoo/odoo#73611

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
2021-08-17 17:43:50 +00:00
Younn Olivier fe2c914067 [FIX] web_editor: clean the ImageTools transform and crop option
Added documentation to the methods of the ImageTools SnippetOption.

Also, removed unnecessary config from the transform method, which was
specific to the wysiwyg transform method to allow for reset on double
click.

The ImageTools transform and crop options now correctly set their button
to active or not.

Two reset buttons are added next to the transform and crop buttons,
visible when a transformation was made on the image.

Part of https://github.com/odoo/odoo/pull/74592
task-2554608

closes odoo/odoo#74592

X-original-commit: fc3706a0736c2c76dfd1a261a1455146b1699ce7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-08-05 08:10:24 +00:00
qsm-odoo 017c335ab2 [FIX] web_editor: properly handle media "text tools" options
Since their convertion to "snippet" options with [1], the media options
were not handling previews correctly anymore, but also were recoding
their entire logic for each of the options instead of using generic
methods like selectClass or selectStyle.

One example of a bug was that previewing the 25% width option on an
image, not enabling it and saving the editor forced the image to a fixed
px width (its original one). Changing that image to another would keep
that wrong fixed width.

Note: this reveals that selectClass and selectStyle need more parameters
to handle all of this correctly. Most was added as a specific override
for these features but it could be handled even more generically.

[1]: https://github.com/odoo/odoo/commit/d934b81aaae8d68b5579d1489b1fbe8ea347b4ed

Related to task-2578242
task-2577848

closes odoo/odoo#73734

X-original-commit: f59affcdfe9529645a02680214f3d7d96ebacf6e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-07-14 16:55:32 +00:00
Francois (fge) e95080792a [IMP] web, mail: Command palette
The purpose of this commit is to:
- Improve the design of the command palette
- Add few data-command-category and data-hotkey
- Scrolling through the command palette dropdown with the up/down arrows
should loop
- Moving the mouse over the palette command no longer causes scrolling

Task-2590390
2021-07-13 07:32:09 +00:00
cd403480f9 [IMP] web_editor, mass_mailing, *: add shape clipping option on images
*: tools

The ImageOptimizer option can now set shapes on images to use those
shapes as clip path and background. It uses a flexible path so that the
shape will always fit the image proportionally. We also added an html
file alongside a javascript file to semi-convert the shape from
illustrator into a usable shape for this usecase (the clip path must
have values between one and zero therefore we must do some computation
before the shape is ready to use).

Thanks to Samuel for this specific shape-converter tool and other
technical points about svgs and clip-paths.

Thanks to Mehdi for remaining development post-testing and post-reviews
and for the many fixes.

Thanks to Brieuc for the actual shape SVG files.

Part of https://github.com/odoo/odoo/pull/69179
task-2327045

closes odoo/odoo#69179

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: xO-Tx <mou@odoo.com>
Co-authored-by: Brieuc-brd <brd@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
2021-06-21 16:31:07 +00:00
Brieuc-brdandqsm-odoo ebc56f7605 [IMP] web_editor: add label for animated shapes
This commit adds a little label on the top corner of animated shapes
previews.

Part of #70843
task-2319488

Related: odoo/design-themes#17
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
2021-06-15 12:17:41 +00:00
Brieuc-brd 0da5c12179 [IMP] web_editor: reorder the list of shapes
Reordering the names (data-select-label) in snippets.xml
to have a more logical list.

Part of #70843
task-2319488
2021-06-15 11:53:50 +00:00
Brieuc-brd 50458a208d [IMP] web_editor: clean and improve shapes
1. Change some shapes to apply correctly the color presets:
e.g. the default color of the shape erased the background
color of the preset.
2. Improve some shapes to have a better render by changing
the colors and/or adding animations.
3. Some svgs could give the same result. To have a clean list,
many svgs were combined.
4. Letting the old svg files to assure the compatibility with themes.
5. Improve the preview of some shapes for a better reading.

Part of #70843
task-2319488
2021-06-15 11:53:50 +00:00
xO-Tx 9017745fd1 [IMP] web_editor: add animated shapes
The goal of this commit is to add a new page to the shapes
(Floating shapes) and new animated shapes in the current
categories.
Colors should be, as other shapes, linked to the theme.

Part of #70843
task-2319488
2021-06-15 11:53:50 +00:00
Antoine Guenet 169bec084a [IMP] web_editor: replace media padding select with px input
Currently, adding a padding to media is done with a select, which gives
a limited amount of options based on bootstrap classes.
This opens up the play field for the user by letting them input their
own pixel value.

closes odoo/odoo#72112

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2021-06-14 09:36:18 +00:00
Brieuc-brd a11d043245 [FIX] web_editor: fix position of shapes
This commit will fix a bug related to the position
of the shapes Blocks/01 and Blocks/02.
- Now, they can be connected when using together.
- Avoid a bug of position when the snippet is too tall.

Fix related to the PR #70843

closes odoo/odoo#71809

X-original-commit: b5f135f83e576f6b552392249913dacca45a7650
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-06-07 12:07:22 +00:00