This commit replaces the `we-select-pager` for a full-height version
allowing better sorting and visibility of the shapes and background
shapes.
The new UI now has a navbar inside the pager which allows to scroll to
anchors inside the menu. To do so a new attribute `data-scroll-to` is
added on the button element allowing to scroll to the class contained
in the attribute with the new function `_onClickScrollPage`. Thanks to
ard the Selection widget now activates the corresponding menu section
of the new pager whenever the data-scroll matches a section that has
passed the middle of the container.
The menu being full width, the angle with the class `.o_pager_nav_angle`
triggers the `_onClickCloseMenu` to close the menu.
To avoid duplication, the label for the devices now uses the same Js
logic as the Animated label for the shapes. This frees the :before and
:after which allows to use the alpha-background extended class on the
we-button for both types of shapes. The devices label information now
shows an aspect ratio rather than full dimensions.
For the new pager to appear full-height and the content being scrollable
inside the proper section of the menu, two new containers are added
one for the pager's navigation (`o_pager_nav`) and one for the shapes
pages (`o_pager_container`). This allows to have the parent div in fixed
positioning and keeping a scrollable section on the `o_pager_container`
under its inner navigation.
The previous shapes are back to their original ratio of 800x600
since switching them in square makes them less recognizable.
Finally, in the `we-toggler` when no elements are selected or when it is
empty, we now display `None` instead of `/`.
task-3266751
closesodoo/odoo#118253
Related: odoo/design-themes#653
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#119697
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
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
*: 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.
closesodoo/odoo#118530
X-original-commit: a501d226d8674ed0c9b183c69a9e754c79682237
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
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
closesodoo/odoo#110673
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
*: 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/d0c2d8e9a1436a8eaf263797c790329f81d7615bclosesodoo/odoo#99850
Related: odoo/design-themes#597
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
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
* 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
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>
Mathieu (mano)