This commit adapts the directional icons to improve the usability and
maintain consistency with the ui icons library.
task-2818586
Part-of: odoo/odoo#116641
*: website, website_blog, website_event
This commit adds the TikTok social network to the other social networks
stored in DB. Thus, users of the Website application will be able to
reference their TikTok page on their websites. This commit also updates
the different templates and the social media block to integrate this new
social network.
task-3235451
Part-of: odoo/odoo#116837
When a mega menu "Sub Menus" are configured as "On Hover", it becomes
very difficult to edit its content.
This commit changes the behavior of the "On Hover" while the page is
being edited:
- it disables the hide on exit (`mouseleave`)
- it prevents the show on hover if another dropdown is already opened
- it hides the menu when the page is clicked outside of the opened menu
This commit also disables the preview of the "Show Sign In" option
which is not previewed anyway, so that it does not deselect the mega
menu when hovering the options.
task-2825376
closesodoo/odoo#119002
X-original-commit: ccb78f7af2a4413836a969ff8009dc3df6c2df33
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
*: 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>
Steps to reproduce the bug:
- Add an Image Gallery snippet on a the page.
- Stay in edit mode and click on one of the arrows (left or right).
- Bug -> The arrow disappears.
This bug comes from the fact that the "oe_edited_link" class is added
to the anchor of the arrow when clicking on it. Because of the scss
related to this class, the position of the arrow is modified. This bug
is fixed by adding the "o_not_editable" class to the anchor of the
arrow. By doing so, the "oe_edited_link" is not added to the anchor of
an arrow when clicking on it.
task-3147271
closesodoo/odoo#118383
X-original-commit: 92f2a50bbabaa387f557ef8e728796c3b3e6410c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
New text_cover snippet added for the editor. Editors are now able to use
a cover composed of an image and some text on the side.
task-2691555
closesodoo/odoo#105650
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Since [1] when the Dynamic Snippet was first introduced, it also
introduced a concept of "inherited" snippets. Specific snippets would
all `t-call` the same template for their rendering.
A mechanism was introduced to deduce the `data-snippet` from the caller
template, but it stored the obtained value in the `t-called` template
itself. Because of this if several "specific snippets" that used that
template had to be rendered, they would all have the `data-snippet`
value of the first one that got compiled.
We could compile the snippet template into something having a
dynamically obtained `data-snippet` value, but then that would be
equivalent to just using a `t-attf-data-snippet`.
All specific snippets already do set a `snippet_name` in the context
because it needs to be added in the classes.
This commit therefore adds a `t-att-data-snippet` attribute on the
base template, and populates with that same value in `onBuilt` for
stable versions.
During forward ports across stable versions, each new caller must be
patched as well - and all patches must be removed in master.
[1]: https://github.com/odoo/odoo/pull/53175
task-2922635
closesodoo/odoo#115566
X-original-commit: 73d2c9f87bf9a1a792f4318325c2e52fc81db5f2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
According to Wiktionary, French spacing is "the archaic practice (though
still current in French) of inserting a space around colons, semicolons,
question marks, and exclamation marks". This is not standard practice in
English and most languages of the world.
The purpose of this commit is to start purging the code from this typo,
as it may reflect poorly on the software for some people.
closesodoo/odoo#114533
Related: odoo/enterprise#37853
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Removed since user can achieve good enough results using border
and round corner options.
IMPORTANT: the option could be removed from image wall only (and
not from image gallery) using "data-dependencies=slideshow_mode_opt"
(since they use the same code), but it's removed from both "for now".
task-2692129
closesodoo/odoo#81959
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Before this commit, when a popup was created and the user wanted to have
this popup on all the pages of his site, the popup was moved to the
footer. Unfortunately, this caused a lot of problems:
1) We had to disable the effects on the footer when the popup opened, so
that the popup would not block the page when the footer had a slideout
effect (see original commit).
2) The popup shared on all pages was attached to a footer template so
that if after setting the popup, the user changed the footer template,
he lost his popup.
3) Putting the popup in the footer led to an important limitation which
is that it was impossible to have a popup shared on all pages on a page
where the footer is voluntarily hidden (via the page visibility option).
This commit fixes all these problems by adding a shared section
dedicated to the shared popup on all pages.
Related to opw-2971181
X-original-commit: 0f131160097deb0693d7bdb4adc43fd69ea49c09
Part-of: odoo/odoo#107387
Steps to reproduce the bug:
- On the website application, add an image gallery snippet.
- Change the "Speed" parameter.
- Save.
-> Nothing happens: The displayed image is always the first one and
there is no cycle between the images of the snippet.
Since Bootstrap 5, the amount of time to delay between automatically
cycling to the next item is defined by `data-bs-interval`. The bug
comes from the fact that some parts of the code still used the old
parameter name (`data-interval`).
opw-3165570
closesodoo/odoo#113423
X-original-commit: 8368fa1f5e45a14ed8938017b2da90a810dbf0c8
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Changing numeric values using the keyboard arrows did not work on some
fields. This commit solves this problem by adding the necessary
attributes to the numeric (we-)inputs.
task-2601533
Part-of: odoo/odoo#81241
This commit improves the handling of events on the editor's lists. The
fields that make up the list can trigger a preview and it is possible to
switch from one field to another using the keyboard. Note that the
social media we-list must render at each blur of one of its inputs, so
this we-list does not allow to switch from one input to another with the
keyboard.
As the we-list events changed, the social media block tests had to be
slightly modified to take these changes into account.
task-2601533
Part-of: odoo/odoo#81241
Adds basic support to filter possible m2x values based on another
record. This is necessary for the website_appointment snippet
introduced within this bundle (see related ENT PR).
An important need implemented here is to not store a list of valid IDs
in the DOM but fetch them based on data stored by a different widget.
Use case covered:
Model A has a Many2Many relationship with Model B via a `model_b_ids`
field.
A first widget (Wa) on a snippet's options allows to select a record of
Model A. A second widget (Wb) allows to select records of Model B.
```xml
<!--Widget A-->
<we-many2many data-model="model.a" data-m2o-field="name"
data-fakem2m="true".../>
<!--Widget B-->
<we-many2many data-model="model.a" data-m2o-field="model_b_ids"
data-filter-in="true" .../>
```
Before this commit, the second widget would only be able to show
all records of Model B linked to any Model A record and matching a
static domain provided as attribute, which is still supported.
This commit allows, after having selected `record_a` in the first
widget, to only populate the second widget with the records of
Model B that are in `record_a.model_b_ids`.
Implementing this is done by
* Adding `data-filter-in` to Wb's xml attributes (as above)
* Calling `Wb.setFilterInDomainIds()` when another record is selected
in Wa.
Task-2574175
odoo/odoo#90748
See odoo/enterprise#23750
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
The editor offers bootstrap tooltips, but these were not all initialized
and therefore appeared as standard HTML tooltips. This commit fixes that
by initializing all the tooltips so that they all have the same style.
Details:
- The bootstrap tooltips are now available in translate mode.
- With bootstrap 5, only one bootstrap component can be initialized on a
HTML element. This is why the tooltips are now initialized on the
first child when there is another bootstrap component.
- Some tests have been adapted.
task-2777738
closesodoo/odoo#85666
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
* = digest, hw_posbox_homepage, im_livechat, mass_mailing, web_editor,
website, website_slides_forum
Since the migration of Bootstrap 5 [1], some CSS rules was automatically
converted (`border-left` and `border-right`) when it shouldn't be.
These conversions were made because the CSS rules was embedded in
HTML/XML code and the REGEX for the conversion had no protection for
these cases.
This commit restores the old correct value.
Ref:
[1] odoo/odoo@1fcd098af5closesodoo/odoo#110141
X-original-commit: 0cbf7c00ecc307fc725da345415647828e771bb4
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
Before this commit, the popup snippets were configuring the modal option
for bootstrap 4 rather than 5.
The `data-focus` in bootstrap 4 becomes `data-bs-focus` in bootstap 5.
Without `data-bs-focus` option, the Newsletter popup snippet became
uneditable because any click inside popup changed the selection to be
inside the first focusable element within the modal.
The reason of the input being focused is: upon click inside the modal,
the target of the focusin event is the parent of the modal because that
parent is contenteditable="true". Because that target is outside the
modal, `_handleFocusin` correct the selection by focusing the text
input.
task-3102155
closesodoo/odoo#109148
X-original-commit: bc99f3cdb5c2fca59a24dc4970c9ca6e69721838
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
request.geoip is no more a dictionnary cached in the session. It is now
a full blown object with lazy and smart geolocalisation capabilities.
Among other things, the previous dictionnary API is now deprecated. The
changes are:
* `request.geoip['country_name']` -> `request.geoip.country_name`
* `request.geoip['country_code']` -> `request.geoip.country_code`
* `request.geoip['city']` -> `request.geoip.city.name`
* `request.geoip['latitude']` -> `request.geoip.location.latitude`
* `request.geoip['longitude']` -> `request.geoip.location.longitude`
* `request.geoip['region']` -> `(request.geoip.subdivisions[0].iso_code if request.geoip.subdivisions else None)`
* `request.geoip['time_zone']` -> `request.geoip.location.time_zone`
It is safe to access all the attributes. Doing `request.geoip.city.name`
when the geolocalization failed (missing db, invalid address, ...)
evaluates to None. It does not raise an AttributeError.
Task: 2848206
Part-of: odoo/odoo#91337
*: website
When dragging inner contents, dropzones appear in the Carousel snippet,
allowing to drop them directly in the element with the `row` class,
where it should not be the case. This is due to the `content` class
present on these elements and to the drop-in rule for inner contents
that allows them to be dropped in elements having this class.
This commit fixes this issue:
- in stable: as the XML files cannot be modified, the drop-in rule is
patched in JS to exclude the elements having both the `content` and
`row` classes.
- in master: it removes the `content` classes from the rows of the
Carousel snippet. It also removes this class from the drop-in rule,
as only Carousel was concerned by it.
See [1] for the following of this fix in design-themes.
[1]: https://github.com/odoo/design-themes/pull/603
task-3011192
closesodoo/odoo#108646
X-original-commit: 882c483ec1107879cd1c5693ea5cfce08e3220cc
Related: odoo/design-themes#628
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
To reproduce the issue:
- Website > Edit mode > Add "Share" block.
- Cannot edit the link by clicking a social share item ("Edit link"
on link popover doesn't work).
Since 15.x, "Share" snippet items are not meant to be user links but
buttons to share the page on the related social media. It is also
useless to update those links after the update on [1], since they will
be replaced by the right values "on social item click" (the shared URL
may be updated during the page use as on product pages).
The goal of this commit is to fix this behavior and prevent the link
popover from appearing on items (by setting the `o_no_link_popover`
class right after the snippet is dropped into a drop zone).
[1]: https://github.com/odoo/odoo/commit/ddb2c06be4196c86ff6a2fd74874487d75b31c94
opw-3084367
closesodoo/odoo#108724
X-original-commit: f4a602ca4d423056fa3f760fc8a3fc222e2a5e51
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
Steps to reproduce the bug:
- Add a "Table of Content" on the website.
- Try to save a "Block" of the table.
- 14.0: you get an error message.
- 15.0: it keeps loading forever.
- 16.0: you get a white page.
Users should not have the possibility to save part of a snippet. The
goal of this commit is to ensure that the save option applies on a
snippet. If it is the case, the user has the possibility to save it. If
not, the user does not have the opportunity to save it.
opw-3056913
closesodoo/odoo#108002
X-original-commit: 5f28c7d9a04c46d570b13766eaaa90e755008623
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit removes unnecessary spaces from the XML of the table of
content block.
Related to opw-3047375
Related to opw-3035502
task-2948895
closesodoo/odoo#107732
X-original-commit: 7ee4cc7d02158c63e6e2bd5eacc94371040872a8
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
As a fix, this introduces a new option for images in grid mode. When an
image is alone in a column which later becomes a grid item, or when an
image is directly added as a grid item via the dedicated option, the
image used `object-fit: cover` so that when the image is resized as a
grid item, it fits the dimensions of the selected grid area.
This confused some users as the image did not appear the same depending
on the screen size. Indeed, if an image is set to take 5 columns as
width and 3 rows as height, it does not ensure the ratio in pixels to
stay the same depending on the screen size: the grid is always made of
12 columns (so the width of each column depends on the screen width),
while the rows are always 50px tall. We could enforce the ratio of grid
items to stay the same or limit the ratio loss by reducing the 50px
height on smaller breakpoints but that would actually increase another
problem: for colored text grid items, their text would more easily
overflow their fixed area.
In the end, using the grid mode is about compromises, even if it allows
to achieve nice things and to have more freedom. This commit although
adds a new option to mitigate the issue for images: users now have the
possibility to switch the default "cover" mode of grid images to
"contain": in that mode, the whole image will always be visible (and
thus keeps the same ratio) and is just "contained" in the grid area
which is selected as dimension.
opw-3069234
closesodoo/odoo#107172
X-original-commit: faf19ef7f87fc043fb9a814516e01b8eeafd9b61
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website_mass_mailing (tests)
- Web Editor facts:
Since the refactoring of the editor done at [1], the cookies bar popup
is receiving a `contenteditable=true` attribute, making it receive the
chrome default `height` style for such elements.
The problem is that if this cookies bar's modal is hidden, the bar will
be shown as a thin empty white bar.
- Website Builder / Popup Snippet / Cookies bar facts:
A popup element is composed of a `.s_popup` parent containing the actual
`.modal` BS modal. Our internal logic and events are hiding and showing
this inner `.modal` modal element without considering its `.s_popup`
parent. It means that when the `.modal` is hidden, its `.s_popup` parent
is not touched and kept visible.
It might looks like it's not an issue as it would just be an empty
element (its only child is hidden) but it leads to some issues as
explained just above: an ugly white bar is shown.
Note that the cookies bar is nothing more than a `.s_popup` snippet.
- Web Editor facts 2:
During the mentioned refactoring [1], they actually added some code to
hide this bug once you were playing with the edit mode (mainly for when
you clicked on the invisible panel element or before saving).
But this code was actually not fixing the case when you just entered
edit mode.
This commit simply remove that "edit only" web editor logic and add a
new one in charge of simply synchronizing the `.s_popup` snippet
visibility with its `.modal` BS modal in a public widget (which is
obviously also executed in edit mode).
Finally:
- note that if there is no way through regular flow to arrive to the
same result with a normal popup snippet, it is still concerned by this
issue and you can reproduce it by moving it somewhere else in the DOM
and/or simply adding it the `contenteditable=true` attribute.
- we already fixed that issue a few months/years ago, I couldn't find
a commit related to that so I don't know if it was due to the same
root cause
- in case one is wondering why we simply couldn't do that in the already
existing `_onHideModal` of the `PopupWidget`, it is because that
`hide.bs.modal` is not called when entering edit mode, because the
`destroy` is destroying it before hiding the modal. The event is thus
not fired. And we can't move the hide part before the destroy's super
because otherwise, it would go through the normal hidden process which
is creating a "seen" cookie for the popup as if it was closed
manually.
[1]: https://github.com/odoo/odoo/commit/740168ce8d27da3d6a7156d2d79655a898394923
task-2754108
closesodoo/odoo#105553
X-original-commit: 21a5e7000f08fbd1936173937c7d90b152a5414f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
In commit [1], a check was added to see if a media is editable in order
to prevent its edition if it is not the case. However, this also had as
effect to block the edition of some grid images. Indeed, as the columns
in grid mode containing only an image have their `contenteditable`
property set to `false`, the images don't pass the check because their
parent is therefore not editable.
This commit removes the `contenteditable` property from these columns
in order to make their images pass the check and therefore allow their
edition.
Tests are also added, ensuring that these grid images can be correctly
replaced.
[1]: https://github.com/odoo/odoo/commit/ddade4346347266b7f699d05865578dc96e2bf98
opw-3028116
Fixes#103234closesodoo/odoo#104899
X-original-commit: d8c374e3e6b31bf88aa42952aadf3379936f7600
Related: odoo/design-themes#617
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website_sale
Since [1], it was not possible to edit a company team snippet image
anymore as soon as the page was saved once. Indeed that commit added
o_not_editable/contenteditable="false" on the parent column to make sure
no text can be added in that column and contenteditable="true" on the
images so that they are still editable (even though HTML-specs-wise
adding contenteditable="true" on images probably does not mean much as
images are self-closing tags, our editor understand that as the ability
to edit the image anyway). That contenteditable="true" part is however
removed when leaving edit mode... and was not restored upon entering
edit mode again.
This fixes the problems with a specific JS patch, we'll review to see if
better can be done in master.
Funny enough, that bug was actually gone in 15.0... by mistake. A recent
bug fix actually reintroduced that isolated bug at [2] (by reintroducing
the fact that images in a non-editable environment are not possible to
edit). The 3 opened tickets this commit mentions were actually reported
for 15.0 immediately after that, while the 14.0 being broken about this
since the beginning apparently did not bother anyone.
Note: as a forward-ported fix, this also takes the opportunity to clean
a bit what was done at [3]. (calling `_super`, no duplicated code,
adding comments, ...).
[1]: https://github.com/odoo/odoo/commit/656cac1bf21c7c5a56aa569008aac58436c747fb
[2]: https://github.com/odoo/odoo/commit/e113bae04a64a8bd341a80736086ab7c25079dd3
[3]: https://github.com/odoo/odoo/commit/e2f7b8fad76dc816b2f6864340d3740446117cdb
opw-3031217
opw-3032482
opw-3035289
closesodoo/odoo#104521
X-original-commit: 1636ba5ed2f8a284bef0930313a85cc3dc7cf072
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: mass_mailing, website
Commit [1] introduced data-option-name allowing to name snippet options
without data-js so that their automatic snippet-option-XXX class was
not snippet-option-undefined. This was indeed useful to target specific
options in tours.
The attribute is however a complete duplicate of data-js (if you use
one or the other, it does exactly the same thing). Indeed, you can
define a data-js without a linked JS class (as it is already done). And
if you define both expecting the class using data-option-name but the JS
used from data-js that won't be the case, data-option-name is simply
ignored.
This removes data-option-name. This prepares refactorings that will be
done in the future:
- The way to define option in XML will be reviewed (probably client
side definitions, probably OWL templates).
- Adding data-js will probably require a JS class to exist, but all
option definitions of Odoo will declare one to ease extensions and
stable fixes.
Those are theoretical at this point though. This commit main focus is
simplifying the code.
[1]: https://github.com/odoo/odoo/commit/7b0a147cd43e8e890ebe5a882292a69a5c8c90acclosesodoo/odoo#103988
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit restores the possibility to control the height of the
image gallery snippet. This was indeed possible in <= 11.0 for all
snippets but it was removed in 12.0 as controlling the height via inner
paddings seemed enough and better (as responsive). For the image gallery
snippet however, this was a big regression as the height is forced to
70% of the current screen height on drop and the images inside are
displayed depending on that forced height. Trying to control via
paddings was not leading to the wanted effect.
This restores the possibility in 14.0 as 12.0 and 13.0 are now
deprecated. This is following a customer issue where not having the
ability to control the height is actually confusing as the user edits
its website across different screens and the height is forced to 70%
height of the screen used at the time of edition. With an height input
in the panel, the confusion is gone.
Note: this also introduces a `forceStyle` parameter for the
`selectStyle` option to be able to force the inline style a widget
controls. Indeed, without it, the system is "smart" and tries not to
force inline style when it is not needed (if you try to force red on
something that is naturally red (thanks to a CSS rule for example), it
won't be forced). Here, this was leading to an issue when trying to set
the height:
- Current height is 700px
- There is some code that forces a min-height on all carousel items so
that they are the same height. As the gallery image dimensions depend
on the block forced height (this is how the snippet work), the forced
min-height are related to that forced height (something like 680px).
- You focus the height input and type 800px
- The same code forces new min-height on all carousel item (something
like 780px).
- You un-focus the height input, the system tries to re-set 800px (which
is already set)... it ends up removing it as it thinks that setting
that height is not needed as the snippet is now "naturally" 800px tall
thanks to the carousel items' min-heights.
opw-2838774
closesodoo/odoo#104068
X-original-commit: d4d0da320d42093e720c7d440cf6611249c0295a
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Both dynamic snippets and visible on mobile use the `d-none` class:
- dynamic snippets activate it by default and only remove it when the
content is ready to be displayed
- visible on mobile makes the section `d-none` when it must be hidden on
mobile and the class is contradicted by another class which is only
taken into account non-mobile
This commit introduces a dedicated class to temporarily hide the dynamic
snippets.
task-2930503
closesodoo/odoo#103637
X-original-commit: 7b3be2f183f53bfcb5f365a2c26127da0702dc15
Related: odoo/upgrade#3980
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website_blog, website_crm_partner_assign, website_customer,
website_event, website_event_exhibitor, website_event_meet,
website_event_track, website_forum, website_hr_recruitment,
website_membership, website_sale, website_sale_loyalty,
website_sale_slides, website_slides, website_slides_forum
With commit [1], the "customize_show" options were moved in edit mode.
They were wrongly displayed for non-designer users. Trying to use those
would throw a warning at the user.
[1]: https://github.com/odoo/odoo/commit/17a8a37e9bfc5b787d9666597d43e63f0064919fclosesodoo/odoo#103142
X-original-commit: f2ca62a4a9ccb6713a39c100fc87c112619eac41
Related: odoo/enterprise#32768
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Some snippets have a "hard coded" background color which doesn't change
when we want to put a preset color (theme). We have to delete the back-
ground first before being able to choose a preset color.
This commit fixes this behaviour by putting a preset color by default
on the concerned snippets (instead of a fixed color). These snippets
are searchbar and text highlight.
task-2824393
closesodoo/odoo#103123
X-original-commit: 4a1442679bb1058d08428e08bec3433e968fb64b
Related: odoo/design-themes#604
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The Masonry and Big Boxes snippets don't have a background option
because their blocks are supposed to take the whole space, so a
background is not really necessary. But since the addition of the grid
mode, these blocks can be placed more freely and a background may
therefore be necessary.
This commit adds the background option to these snippets.
task-3014939
closesodoo/odoo#103109
X-original-commit: 019f6824caafdf2cdc79babcbe45af3db0df1550
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Since [1], the Masonry snippet is in grid mode only and its templates
have been modified to allow this mode. However, some of them don't look
good and have to be improved.
This is what this commit does:
- some text blocks were too small so their height has been increased
- the Masonry second default image has been replaced by another one
that looks better.
[1]: https://github.com/odoo/odoo/commit/85b352af319edec84407f2046cf795b4e5503460
task-3013055
closesodoo/odoo#102984
X-original-commit: ad8926eafd34c2743e1a5247f6171fd183e6e506
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
In [1], the resizing and the drag and drop of a grid item both put
it in front of all the other items and in front of the background grid
(thanks to the `z-index` property).
This commit changes that behavior: now, the grid item stays at the same
z-index if we are resizing it or if we are dragging it over the grid
from which it is coming. In the case of a drag over an other grid, it
is placed in front of all its grid items. In all these cases, the grid
item is placed behind the background grid.
[1]: https://github.com/odoo/odoo/pull/93144
task-2973198
closesodoo/odoo#102525
X-original-commit: 67d1b078329600efce414974307d74e9fa9ba9fe
Related: odoo/design-themes#601
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit modifies the Masonry snippet, along with all its templates,
in order to always be in grid mode.
A change worth noting is that the images are now real images and not a
background and text can be added over them with the "Add Elements"
option. This change happened mainly for the look of the mobile view but
also because it is more logical since the snippet is supposed to
contain "images" and "text".
The themes extending Masonry have also been adapted in [1].
[1]: https://github.com/odoo/design-themes/pull/592
task-2973198
X-original-commit: 85b352af319edec84407f2046cf795b4e5503460
Part-of: odoo/odoo#102525
Currently, the toggle to grid mode is not the same process for all
snippets: some have both the option 'Layout Grid/Cols' and the ability
to toggle on drag but other don't have the option, making it
complicated/impossible to leave the grid mode. Also, the snippets for
which the grid mode has been blocked don't have their move handle
anymore, which prevents them to use the normal drag and drop (it was
hidden because dragging them would toggle the grid mode).
This commit uniformizes the grid mode for all snippets and adds the
move handle back to the ones that cannot use this mode. It also
improves the grid mode of the 'Items' and 'Carousel' snippets.
More precisely:
- All the snippets that are allowed to have the grid mode now have both
the option "Layout Grid/Cols" and the ability to toggle on drag.
- The snippets who cannot toggle the grid mode have the move handle
back but it doesn't toggle on drag and they don't have the option. They
use the "normal" drag and drop.
- The drag and drop has been improved to allow normal columns to go
inside the grids. Indeed, since the drag was previously blocked, this
case could not occur but now that it is possible, it had to be taken
into account.
- The grid mode of the Items snippet has been improved by removing the
"hardcoded" height that was breaking the grid.
- The vertical dropzones of Carousel appearing when dragging inner
content have been removed because they appeared in grid mode and were
breaking it. It is also more logical because now that this snippet has
a column option, vertical dropzones should only appear when dragging a
column.
task-2973198
X-original-commit: 84d684d8bdf43d3db11defd8174dee44775085c2
Part-of: odoo/odoo#102525
*: website
In grid mode, the images take the whole space in their column so they
always have the same size as them. However, if text was added in the
column (before or after toggle), it always looked like it was
overflowing and the overlay would not cover it even after resizing.
Also, since these images have the value of the `object-fit` property
set to `cover`, the images are cut if they are too big for the column.
This is problematic if the image has a shape because the shape is cut
too, ruining the visual effect.
This commit solves these issues by distinguishing the images that are
alone in their column from those that are not. An image is considered
alone if it is a direct child of the column and if there is no text in
it (the line breaks and empty lines are excluded). Now, only this kind
of images, if they have no shape, take the whole space in the column
and have `object-fit` set to `cover`; the other ones behave like the
columns in normal mode.
This distinction also allows to block the edition of the columns
containing only an image. Indeed, adding text or dropping inner content
in them had the same overflowing effect.
task-2973198
X-original-commit: e9c7e020daf88022d6e02de0a5620074e8417b5a
Part-of: odoo/odoo#102525
The grid mode allows some snippets to move and resize their columns in
a grid. However, some of them were blocked because they don't look good
in this mode. This is the case of the Big Boxes snippet: because it
contains two blocks full of padding and since toggling the grid mode
removes this padding, it ended looking weird.
This commit allows the previously blocked Big Boxes snippet to toggle
the grid mode. More generally, this commit allows snippets having only
columns containing a background color to look good in grid mode by
keeping a more logical padding for them.
task-2973198
X-original-commit: a051922f8359178f4abe578ce9555d34cbb02613
Part-of: odoo/odoo#102525
Before this commit the Device visibility option was on its own row
inside the options panel.
This commit moves the buttons of the Device visibility option before
the dropdown inside the main row of the Visibility option.
task-2900730
closesodoo/odoo#102154
X-original-commit: 82000acfb6f8c7884994135413dcddac5441f8b4
Signed-off-by: Quentin Smetz (qsm) <qsm@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>
*: website_blog, website_event
Commit [1] introduced new templates. This commit's goal is to build on
that template system to provide more flexibility for designers.
It adds new data-attributes to set on the first node of a template.
- data-row-per-slide: Allows for the template to tell a dynamic snippet
carousel how many rows of cards it should display.
- data-arrow-position: Allows for the template to tell a dynamic snippet
carousel where the arrows should be positioned.
(for now just bottom, or side)
- data-extra-classes: give the template the possibility to add extra
classes to the dynamic snippet instead of just the card.
This commit also removes options to select the amount of elements
displayed on each row. This is now only changeable through templates, or
by directly editing the snippet's DOM through debug tools. This was done
to reduce the amount of options visible, so that the user just chooses
a template and it is ready to go.
[1]: https://github.com/odoo/odoo/commit/49bd79b0bdca76415780bdfa199195371c2692e5
task-2677203
Part-of: odoo/odoo#80128
Since [1] it is possible to request that some blocks are not displayed
on mobile devices.
This commit adds a similar option to prevent blocks from being displayed
on desktops (i.e. on non-mobile devices).
[1]: https://github.com/odoo/odoo/commit/9463f0f889f9dd8da6077895c125da4998a933c0
task-2900730
closesodoo/odoo#101483
X-original-commit: 3103e0553011b5c1f4078972d7a88fa3fd4068b2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Antoine (anso) <anso@odoo.com>
Commit [1] changed the way QWeb templates are loaded for public widgets,
removing the xmlDependencies attribute.
Most of the public widgets' templates were therefore defined in
assets_wysiwyg. This is wrong however, as those assets are only loaded
in specific situations.
This commit removes the templates definitions from the assets_wysiwyg
into specific records defined alongside the snippet templates.
Steps to reproduce:
- Drop the "Image Wall" snippet
- Save
- Visit as a public user (logged out)
- Click on an image from the image wall
- TB
[1]: https://github.com/odoo/odoo/commit/f05adbc8b59c67cbec4847687a1ee07e620c2a7a
task-2984724
closesodoo/odoo#100766
X-original-commit: 39dcd15833afc3860b9c4012a9a4c9da76844a07
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
Some (most?) people keep trying to double click on it to edit it.
The wording was not helping as "Replace this" doesn't really tell the
user how to do it. He actually has to click on the "Edit" button on the
right panel.
Personal experience, the first times I tried that code snippet, I didn't
find that button and it took me a few times before understanding how it
works.
The new wording and the shortcut button to edit it should be more clear.
Another idea was to allow dblclick to enter edit mode, but this seems
overkill and the 2 improvements here should be enough to make it easy to
figure.
Also added a comment about the `
` and one-liner, it is far from
obvious when reading the code..
task-2978786
closesodoo/odoo#99922
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: web_editor, website_blog
This commit improves the mobile preview of websites. A mobile phone
image has been added around the iframe during the mobile preview. This
image was already used for the themes mobile preview, this is why the
css code has been unified to be used in these 2 mobile previews.
Parallel to this commit, we have modified the websites displayed in the
iframe of the preview of the themes so that the scrollbar of these is
visible (before it was hidden behind the image of the phone) but with a
smaller width in mobile mode.
This commit also improves the button to switch to mobile preview by
coloring it green when mobile preview is active.
task-2890050
closesodoo/odoo#98061
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Brieuc-brd