When using drag&drop for adding elements to a product's page through
the website edit mode, users sometimes find the feature confusing to
use. Two examples of said confusion can be seen here:
- https://dashboard.userbrain.net/shared/qwl65bqlk6jg?t=404
- https://dashboard.userbrain.net/shared/k796mnj95pow?t=258
The suggestion for improvement was to reduce height and opacity for
the top and bottom droppable zones (available on all products), and
make any element not explicitly dropped in those zones go to the
zone below the product, available only on the product's own page.
This behaviour is extended to be more generic and is applied when
a dropzone has the class oe_structure_not_nearest, which excludes
it from the nearest search, unless the element is dropped explicitly
in a zone that has the class oe_structure_not_nearest.
task-2581641
closesodoo/odoo#73580
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.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>
Sorry but not sorry, I have to fix this file's "codestyle" (unread
variable, missing or extra ";" characters, etc) post-editor merge...
hard to work inside of it in the current state.
closesodoo/odoo#73629
X-original-commit: dbf245891099b506f21a66ea8e7a9146f6c9e28b
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
Before this commit, if the user chose the "red" color suggestion, "red"
did not appear as a custom color (but the color suggestion was marked
as selected). This made sense in the previous colorpalette widgets but
not anymore as the suggestions do not always appear in all colorpickers
anymore.
Now those colors are always considered custom when used in the page and
at worst appear as "common" and "custom" at the same time (the "common"
one being the one which can appear as selected in that case).
Part of https://github.com/odoo/odoo/pull/67545
task-2476601
closesodoo/odoo#67545
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
In order to save space and gain clarity, the colorpicker elements are
now displayed in two separate tabs: "theme" and "custom".
It is still possible to display the combinations tab instead of the
theme one (for the background color option for example).
Part of https://github.com/odoo/odoo/pull/67545
task-2476601
Unbreakable elements were being considered as unremovable in some deleteBackward cases.
With these changes it is now possible to remove a unbreakble element if it is empty.
task-2580158
(cherry picked from commit 18abf537f07bd9c504dc19c3fa8eda5b1f4d4e9e)
closesodoo/odoo#73592
Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
Color and background-color styles on `<font>` tags were being wrongly overridden when applying another color or background color to the element.
Task-2580158
(cherry picked from commit a532d096faf55550ac6d01795aaa2b6843ebc988)
- Exclude '.o_we_pager_header' from click behaviour so clicking on the
shape dropdown does not close it if an user misclicks next to a pager
button.
- Add borders on navigation buttons in shapes option to improve
visibility.
- Cut the last visible option in the shapes list, this way the user
will understand that he can scroll.
Part of https://github.com/odoo/odoo/pull/69857
task-2431484
X-original-commit: 0d8e4368775bf7fd1aca1376e57c5847b283bded
Co-authored-by: qsm-odoo <qsm@odoo.com>
*: web_editor
The goal of this commit is make the whole we-collapse elements
clickable for theme color palettes.
Part of https://github.com/odoo/odoo/pull/68061
task-2431484
*: web_editor
The goal of this commit is to add the "MultipleItems" option
to be able to add new elements in snippets with a list of items.
In this commit, the option is used for "Media List" & "Tabs".
Part of https://github.com/odoo/odoo/pull/68061
task-2431484
The goal of this commit is to add BS tooltips for editor
sidebar elements using "data-tooltip" attribute to select targets.
The code used to show tooltips on sidebar tab buttons is removed
in this commit since it has no effect after [1].
[1]: c71cf6c618b48da36fbc5063140703312248bc09
Part of https://github.com/odoo/odoo/pull/68061
task-2431484
The code of the Odoo editor was on another repository
and that created unnecessary overhead. This commit move
the code inside Odoo and slightly change the folder
structure.
Related PR:
saas-14.3: #73345
saas-14.4: #73348closesodoo/odoo#73272
Master: #73272
Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
When starting a drag and drop of a snippet, a loading effect on the
editor panel was performed for the whole duration of the drag. Worse:
even if the drop was done immediately, the loading effect still occurred
for 400ms as it was only marked as finished after the scroll to the
dropped snippet.
The loading effect addition was in fact a side-effect of first disabling
all editor overlays at the start of the drag... but that action was in
fact entirely unnecessary because this is not possible to have any
overlay enabled when the snippet panel is opened (because opening it
already disables all editor overlays and enabling an overlay forces the
editor to switch out of the blocks panel).
closesodoo/odoo#73437
X-original-commit: adad8a33071fbbff16d78741904ec33b3595e00b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Forward-port of a commit that was wrongly forward-ported with [1], half
of the diff was lost because it landed in master before the merge of
another commit which removes what was being reintroduced here...
[1]: https://github.com/odoo/odoo/commit/e7f497b027d5931b1cf57febcab5deda573b45bbclosesodoo/odoo#73287
X-original-commit: 68d7d42cce012269342e18373a30970e2c582ba3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
When selecting a "basic" color from the color picker, it was displayed
as a custom color.
It was due to the fact that the basic colors were not correctly computed
to build the existing colors: the array of the rows was used instead of
the array of the colors.
Part of https://github.com/odoo/odoo/pull/72978
task-2476601
closesodoo/odoo#73139
X-original-commit: 23b182ab1bce9a00cb75d12b0d0c504d1fe19e2f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The commit fixes the display of custom colors in the color picker.
It improves previous fix from #72294, which was not returning all
editables from the editor, thus only the custom colors of the target
were displayed.
For that the request_editable event is reintroduced at the SnippetsMenu
level.
Part of https://github.com/odoo/odoo/pull/72978
task-2476601
X-original-commit: 68d7d42cce012269342e18373a30970e2c582ba3
The commit fixes an issue with the editor toolbars dropdowns, that would
not close already opened widgets. For example, when the widget color
picker for snippets background was open, opening the one from the editor
toolbar for the font would only close it for the first click, but not
for the ones after.
The issue was coming from Bootstrap, which stops the propagation of
click events for dropdowns. As a result, the click event on these
'.dropdown-toggle' elements was not processed by the listener at the
SnippetsMenu level, in charge of closing the widgets that were already
open in this context. It was the case only for the first click that was
instancing a Dropdown, but not for the ones after.
https://github.com/odoo/odoo/blame/cd9c071c9357cef14635ef094a9f14fc5431956c/addons/web/static/lib/bootstrap/js/dropdown.js#L308-L314
A solution would be to update bootstrap:
https://github.com/twbs/bootstrap/blame/688bce4fa695cc360a0d084e34f029b0c192b223/js/src/dropdown.js#L232-L237
The fix can be to listen to mouseup events on such '.dropdown-toggle'
elements while waiting for a bootstrap update.
Part of https://github.com/odoo/odoo/pull/72539
task-2476601
closesodoo/odoo#73032
X-original-commit: 048a329fc514b2c98cf7e6af7279f90fce53eb09
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
When the color palette for the text was open, opening the background
color options was not closing it.
The click event was stopped at the snippet option level for all events,
where it should only be the case if the click was done inside the
colorpicker.
Part of https://github.com/odoo/odoo/pull/72539
task-2476601
X-original-commit: 888f1bd44d0aa431d3d89ee3c913c6eb64c3d54d
After the new editor was merged, custom event 'request_editable'
triggered by the ColorPaletteWidget to retrieve custom colors from the
editable was not processed.
Now, we pass the editable in the options when we init the
ColorPaletteWidget.
task-2476601
closesodoo/odoo#72959
X-original-commit: 3d98268cf93087516743e3f0a2f3af950d4feb6a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
html field allows to insert html structures that can be treated as elements of
odoo web client. This patch updates setLocalState method (part of the web
client) to check if an element is inside html field, so such elements will be
ignored
---
opw-2520403
closesodoo/odoo#72877
X-original-commit: d2733da4863bd03b0cf853355596a44e901405d2
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Ivan Yelizariev // IEL <yelizariev@users.noreply.github.com>
Before this commit, the wysiwyg loader had only one method to both load and create it.
After this commit, it has two separate methods to do it. This is practical if one wants to load
in some other context, like studio
closesodoo/odoo#72454
Related: odoo/enterprise#19139
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
For now, the toolbar was hidden from the snippets menu only if:
- it was an image
- it had no editable parent or was outside the wrapwrap
- for model fields that were not html nor views
We also want to hide it for every selected element that is not editable,
as the options will have no effect on such element.
When an element is not editable, it is useless to display the toolbar.
For example, for the website form fields, or the newsletter
subscription, the toolbar was displayed even if it had no effect on the
snippet.
To hide it, we test on the last element at the wysiwyg level.
Part of https://github.com/odoo/odoo/pull/72180
task-2566338
The media modal from the description field of an exhibitor was missing
its video tab. This is because it was disabled as a rule for field_html.
This adds the possibility to restore it via node option, and sets that
option on the exhibitor description field.
closesodoo/odoo#72335
Task: 2551345
X-original-commit: 7ec752651332980fe8288bbcad5e8378bf5ab816
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
*: 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>
On fieldHtml editor, icons are not positioned at the center of the
we-button element since the 'display: block' style does not allow that.
The goal of this commit is to center the icons by adjusting the
'line-height' property.
Part of https://github.com/odoo/odoo/pull/69179
task-2327045
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
Before, only the url input was focused when initializing the link
tools.
Now, we also scroll to the bottom of the options so that the user
directly has access to them.
Part of https://github.com/odoo/odoo/pull/71909
task-2542318
closesodoo/odoo#72122
X-original-commit: 748418d95059ad7ed5638aa4e4aca76da30fa6b3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Computing the image quality in preview when the slider was moving was
problematic for large images on chrome and FF. The preview for this
option has been removed.
Part of https://github.com/odoo/odoo/pull/71909
task-2542318
X-original-commit: da79bb6b3216ee71fe283c394d4c8acb5f76cdab
A new parameter displayHandles was introduced on SnippetOptions to
display or not the handles on a snippet. If a snippet had no option
needing the handles overlay, the overlay (and handles) from its closest
parent with such option was.
Two use cases were not tackled correctly and should display overlay,
even with no option with displayHandles:
- root containers (which have no editable parent)
- inline snippets (movable snippets)
Part of https://github.com/odoo/odoo/pull/71909
task-2542318
X-original-commit: 4b7dd2dbd378a9dc465e3e3fd8e32806df66919a
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>
The method read_combined() has been deprecated in favor of explicit
calls to read() and get_combined_arch().
There are places where we call _get_combined_arch() instead, in order to
avoid parsing the XML that has just been serialized. This saves useless
serialization-deserialization.
Task: 2541577
Meta task: 2463632
Co-authored-by: Fabien Pinckaers <fp@odoo.com>
Co-authored-by: Raphael Collet <rco@odoo.com>
HTML fields used to have a toggle button for a "code view" (which came
from the Summernote library), in debug mode. This allowed the advanced
user to edit content with jinja conditions. This was lost with the new
editor but reintroduced for Mass Mailing. As it turns out it was needed
elsewhere so this makes the code view available as a node option, and
already activates it for mail templates.
To activate the code view in an html field:
```xml
<field type="html" options="'codeview': True"/>
```
Task: 2561300
closes#71860closesodoo/odoo#71891
X-original-commit: 0f9684677676b563a0ff2712e42cea24a2ef27bb
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
On safari in saas-14.2, opening the full mail editor cause an error:
Traceback: Error: The string did not match the expected pattern.
matches@[native code]
getMatchedCSSRules
This is happening because this cause an error in safari:
document.body.matches(".custom-range::-webkit-slider-thumb");
and we get selector with :: that we should ignore because in d50c3b07f1
we use a global regex with `test` and multiple call of the regex on the
same string iterates over the string, for example:
var x = /a/g;
[x.test('a'), x.test('a'), x.test('a')]
gives [true, false, true]
opw-2489730
opw-2489515
opw-2502066
opw-2504051
opw-2518635
opw-2532695
closesodoo/odoo#71834
X-original-commit: ad0160de12d362baf56181478ee509ad223147fe
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
We check if the mimetype is supported when uploading an image.
task-2523574
closesodoo/odoo#71839
X-original-commit: 3765ac1f1f1644c919456246f1a3791c47c45a83
Signed-off-by: Quentin Smetz (qsm) <qsm@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>
A shape is made of different colors which are mapped to user color
combination colors (e.g. if a shape use the #3AADAA color, it is by
default mapped to color combination background color n°4). We allow
to add other arbitrary mappings for each shape should a theme want it,
thanks to another created class. This is especially useful for header
and footer connections in default generated pages where the combination
of classes "o_web_editor_Airy_12 o_footer_extra_shape_mapping" will
use a color mapping using the footer color if the theme configured the
Airy 12 shape to do so.
This commit also modifies the generation of pages made by the website
configurator to automatically add the header and footer respective
classes on first and last shape if one is found (if one is found but
should not have a specific color mapping, this is not a problem as the
class has only an effect if the theme declares it).
Part of https://github.com/odoo/odoo/pull/68336
task-2491890
X-original-commit: 232224ff8c54c5027ec20dd9ddd5c0afc121a092
A shape is made of different colors which are mapped to user color
combination colors (e.g. if a shape use the #3AADAA color, it is by
default mapped to color combination background color n°4). We allow
to change that arbitrary mapping for each shape should a theme want it
(for example so that its built default page can use that shape with
a different color without having to hardcode it).
Part of https://github.com/odoo/odoo/pull/68336
task-2491890
X-original-commit: 2be9718e686e97e30a043a687be725c9a986ea7a
Nicolas Bayet