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
closesodoo/odoo#96788
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
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
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  
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.
closesodoo/odoo#97361
X-original-commit: e5d45643598671077ade7e41f0dbfe2b502665b8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
*: 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
closesodoo/odoo#97137
X-original-commit: 3ac59a7f841b528a32c14a2111e7a1a7e11c830a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
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.
closesodoo/odoo#96679
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
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
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
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
closesodoo/odoo#93751
X-original-commit: 9dc76ce4b0a646563a29a431e28cf96218a66991
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#91314
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
*: 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
closesodoo/odoo#90224closesodoo/odoo#90832
X-original-commit: 8e6ca51ed3ebf121acfc7cb1ab992984d0764c90
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
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
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
closesodoo/odoo#79068
Related: odoo/design-themes#525
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
`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>
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
closesodoo/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>
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
closesodoo/odoo#81222
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#80208
X-original-commit: 7c17d78fbdbb64b1aa5b55f78d3202a64a85ed2f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#79612
X-original-commit: 772156078418544907f9073e242e4491ddae1e5d
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Nasreddin Boulif (bon) <bon@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>
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
closesodoo/odoo#77857
X-original-commit: 02aba326710523bf210644e9038198059db1672c
Related: odoo/design-themes#514
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
*: 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
"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
*: 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
closesodoo/odoo#73611
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
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
closesodoo/odoo#74592
X-original-commit: fc3706a0736c2c76dfd1a261a1455146b1699ce7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#73734
X-original-commit: f59affcdfe9529645a02680214f3d7d96ebacf6e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
*: 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
closesodoo/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>
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>
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
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
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.
closesodoo/odoo#72112
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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 #70843closesodoo/odoo#71809
X-original-commit: b5f135f83e576f6b552392249913dacca45a7650
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The shape is a particular one which connects at the top and bottom with
two sub-shapes. Those two parts used the same color which made it
impossible for an user to control them individually. This is now the
case.
This allows for a theme override in themes which used them at the top
of their homepage to have the first part with the same color as the
header, and the second part with the same color as the next snippet.
Part of https://github.com/odoo/odoo/pull/68336
task-2491890
closesodoo/odoo#71768
X-original-commit: e00bdd7bfd36a1205055a829807f5b8ab2d83221
Related: odoo/design-themes#14
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
As replace and delete are already in the right panel, this is kind of a
duplicate. Related to f3ccc91d42
Also, add border around selected image so the used knows what image is selected
task-2502679
Closes#69340
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Wherever there is a sidebar, this moves all icon and image options to
their own section of it. This also enables previews.
The "spin" option was deemed unnecessary and therefore removed.
TODO: restore the link option for icons. It wasn't working properly
before this and was removed until it is fixed so as not to do any
unnecessary coding for a broken option.
closesodoo/odoo#70952
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Conversion of all modules to the new manifest assets declaration.
Part of task: 2352566
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Simon Genin <ges@odoo.com>
This commit handles 2 things:
- Moves snippets used to call the summernte library inside several new
dedicated files.
- Removes a raw script declaration to move it to a dedicated file.
Also the calls to the lib files have been changed from a qweb loop to an
explicit list of script tags.
This has been done to improve consistency in asset bundles declarations
by reducing them to the simplest possible templates.
Part of task: 2352566
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Simon Genin <ges@odoo.com>
Benjamin Vray