Commit Graph
275 Commits
Author SHA1 Message Date
Robin Lejeune (role) 7eda184589 [FIX] web_editor, website: allow links to unreachable pages
Since commit [1] removed `legacyRejectPromiseHandler()`, trying to edit
a link leading to an HTTP error triggers an "Uncaught Promise" error.
This commit makes sure such links do not cause a traceback: the link
popover is just less detailed (no title, favicon).

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

task-3584686

closes odoo/odoo#141225

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-11-06 18:11:35 +00:00
Benjamin Vray 988a215339 [FIX] web_editor: fix anchor link selector broken
Steps to reproduce the bug:

- In website edit mode, drag and drop an 'Image-Text' snippet onto the
page.
- Click on the button in the second column of the snippet.
- Type "/" in the URL input of the link options in the customize panel.
- Open the 'Page Anchor' selector and select the '#top' anchor.
- Bug: The anchor is not added to the link in the URL input.

The bug was introduced by this commit [1]. Indeed, the events in the
'Start' of LinkTools were no longer attached to the main element but
directly to the event target. This means that in this particular case
where the 'we-button' elements are created after the 'Start', the click
event had no effect because no event was properly attached to it.

This commit also includes test steps to prevent this bug from
reoccurring in the future.

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

task-3580414

closes odoo/odoo#141034

X-original-commit: 72eb761545c51c9dc7c6490c0ce0e38650dfa985
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
2023-11-06 12:32:01 +00:00
Louis (loco) f13a8afdbc [FIX] website: re-render the visibility selector on field label change
Steps to reproduce the bug:
- Add a form on the website.
- Add two fields on the form ("A" and "B").
- Change the conditional visibility of "B" and put it to "Visible only
if".
- Change the label of "B" and set it to "A".
- Try to change the dependent field.

-> "A" is still on the list of the eligible dependent fields. It should
not be the case as setting this field as a dependent field would create
a circular dependency.

To solve the problem, the file visibility selector is rerendered after
modifying a field label. Because of the `_findCircular()` check at the
rerendering, the problematic field will not be displayed in the list of
of the eligible dependent fields.

task-3291044

closes odoo/odoo#140928

X-original-commit: 788218dff61e65f2213c31ebc660183ef3e73087
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
Signed-off-by: Colin Louis (loco) <loco@odoo.com>
2023-11-06 11:16:42 +00:00
Louis (loco) 92e3cf48b2 [FIX] website: prevent circular dependency of renamed fields
Steps to reproduce the bug:
- Drop a "Form" snippet on the website.
- Change the "Label" of the first field (and put it to "test" for
example).
- Select the last field and change its visibility so that it depends on
the first field.
- Change the "Label" of the selected field and put it to the same than
the first one ("test").
- Save.

-> Traceback "Maximum call stack exceeded" appears.

At the end of the procedure, the last field visibility depends on itself
and a circular visibility dependency is created. To solve the problem,
this commit checks that the renamed field does not bring a circular
dependency while updating the dependencies. If it is the case, the
problematic dependency is deleted.
To resolve this bug, the `visitedFields` set has been introduced. Its
goal is to register the already visited fields to not enter an infinite
check loop. Let's take an example to illustrate this: Imagine there is a
form of type A->B->C->D. In this form, the field "A" depends on "B" that
depends on "C" that depends on "D". Imagine you rename "D" by "B". You
now have A->B->C->B. The system will check that the renamed field does
not create a circular dependency. To do so, it will apply
`_recursiveFindCircular` with "A" as the `targetFieldEl` and "B" as the
`dependentFieldEl`. Because there is a circular dependency between "C"
and "B", the system would enter in an infinite loop. Note that we do not
notify the system if such indirect circular dependency has been found as
it will be detected as a direct circular dependency  while the system
will apply `_recursiveFindCircular` with `C` as the `targetFieldEl`.

task-3291044

X-original-commit: 5f0b62fc30867e03e69a824d5e426bf3f74c8ff5
Part-of: odoo/odoo#140928
2023-11-06 11:16:42 +00:00
Louis (loco) 34e4049b80 [FIX] website: prevent circular dependency of duplicated fields
Steps to reproduce the bug:
- Drop a "Form" snippet on the website.
- Add three fields and rename them by "a", "b" and "b".
- Change the conditional visibility of the first "b" and make it depend
on "a".
- Change the conditional visibility of "a" and make it depend on "b".
- Save.

-> Traceback "Maximum call stack exceeded" appears.

A field with a conditional visibility is visible if at at least one
field with the dependency name is visible. The problem is that in our
case, it exists a circular dependency between "a" and one of the "b"
leading to an infinite loop during this check. Before this commit all
the fields of the form were checked and all the labels of the fields
that do not create a circular dependency were proposed in the file
visibility selector. The problem is that in our case, one of the "b"
field does not create a circular dependency while the other does. To
solve the problem, the `_recursiveFindCircular()` function has been
adapted in order to not propose a label that would create a circular
dependency in the file visibility selector.

task-3291044

X-original-commit: f010b128be29e884c89dd58f1c575a163e229d5b
Part-of: odoo/odoo#140928
2023-11-06 11:16:42 +00:00
Robin Lejeune (role) 143bdfa13d [FIX] web_editor, website: fix columns mobile orders
This follows [commit 1], which introduced a way to separately reorder
columns on mobile and desktop.
This commit replaces the custom mobile order classes with the Bootstrap
`.order-x` classes.
It also ensures those orders are not used for mass mailing in case the
editor composes their email on a small window. The reorder would indeed
not have any effect for the end users in such a case.

[commit 1]: https://github.com/odoo/odoo/commit/710d000f1872fd99b41d52ec3d6923756bba7cba

task-3576046

closes odoo/odoo#140362

Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
2023-11-03 16:43:29 +00:00
Nicolas Bayet cbed990924 [FIX] website: prevent unbreakable rollback in autoHideMenu
Whenever calling `_adapt` in `autoHideMenu`, whenever the odooEditor
is active, some mutations could trigger the unbreakable rollback of
the odoo editor. We should not check for unbreakable in `_adapt` as
the unbreakable mechanism is not meant to be used in that context.

task-3439226

closes odoo/odoo#139209

Related: odoo/enterprise#49220
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
2023-11-02 21:02:44 +00:00
Rodolpho Lima 8e75dfca3b [FIX] website: set URL when picking from drop-down menu
Steps:
- In website, click on a link to edit it
- Type "/" in the LinkTools URL input field
- Pick a URL among the suggested ones

The chosen URL was supposed to be applied to the link, but it is not.
The same applies for the LinkDialog (create a link with the "/link"
command).

Reason:
It might be a little confusing, but the `_onURLInput` method actually
means "update UI according to the URL" (more specifically, display/hide
the "Open In New Window" and "Autoconvert To Relative Link" buttons).
The `__onURLInput` (two underscores) method, on the other hand, is the
actual handler for input events in the URL field. In this case, picking
a URL from a drop-down menu needs the same treatment as inputting text,
that is, the `state.url` property must be set to the new value.

task-3552700

closes odoo/odoo#140061

Signed-off-by: Antoine Guenet (age) <age@odoo.com>
2023-10-27 17:29:54 +00:00
Adrien Dieudonné e6c747b43b [REF] *: keyboard: replace deprecated charCode, keyCode and which properties
These properties are deprecated.

We should consider to use `KeyboardEvent.key` or `KeyboardEvent.code` for new code.
Note that we prefer to use the `key` property as multiple physical keys
can send the same value (e.g. Enter can also be sent by the numeric pad).
We should only use `code` when we explicitly want to target a single physical
key on the keyboard.

By doing this, we can now remove the dependency of `jQuery.ui.keyCode`
that was used as mapping of key code descriptions to their numeric values.

References:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode (deprecated)
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode (deprecated)
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which (deprecated)

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

https://api.jqueryui.com/1.12/jQuery.ui.keyCode/

Some links that helps:
https://w3c.github.io/uievents/tools/key-event-viewer.html
https://www.toptal.com/developers/keycode/table

closes odoo/odoo#139809

Related: odoo/enterprise#49591
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
2023-10-26 08:46:00 +00:00
Pierre Paridans 963842381e [IMP] web,*: replace ClipboardJS with Web API and homebrew polyfill
*: auth_totp_portal, mrp_subcontracting, project, survey, web_editor,
   website, website_links, website_sale_loyalty, website_slides, test_lint,
   spreadsheet

Implements missing `clipboard.write()` and `ClipboardItem` ; targets
only Firefox (which partially implements Clipboard API, features hidden
behind a preference flag).

Supported browsers: Chromium 76+, Safari 13.1+, Firefox 63+, Safari iOS
13.4+.

This allows to replace ClipboardJS by the native Clipboard Web API.

Reference:
https://caniuse.com/?search=clipboard
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
https://w3c.github.io/clipboard-apis/

task-3439226

closes odoo/odoo#134881

Related: odoo/enterprise#47154
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
2023-10-26 07:22:54 +00:00
flvr-odoo 7d25e7bf92 [IMP] website: add signature to form
This commits add a signature to the website_form.

The purpose of this modification is to allow the controllers to be
able to verify that the form was originally generated from the view.

This prevent the end user to submit arbitrary values to the website_form
controller.

In this commit, email_cc and email_bcc are treated as the same fied as
it holds the same function

This does not offer protection against submission replay. Previous versions
of the form are not invalidated by editing the view.

If one need to completely reset that protection and invalidate the
previously generated website_form, the only solution is currently to
change the database secret.

closes odoo/odoo#139701

Signed-off-by: Vranckx Florian (flvr) <flvr@odoo.com>
2023-10-25 19:37:36 +00:00
xO-TxandChrysanthe f64c9f27f1 [IMP] web, web_editor, website: add text highlight effects
The goal of this commit is to replace the "Toggle underline" option
from the website's text editor by a new "Highlight effects" option which
should allow applying some highlights on the selected text and setting
their color & thickness. Also, the text editor "Toggle strikethrough"
option will be moved to the list of highlight effects in the new option.

For this purpose, the JS code used for text animations will be updated
to be more generic and handle text highlights too. Moreover, The "Text
Highlight" options will be applied by adding a SVG to the targeted text
element (allowing to adjust their `stroke` and `stroke-width`).

To simplify adapting highlights when the text content is updated,
we follow this generic structure:
```
<span class="o_text_highlight">
    <span class="o_text_highlight_item">
        line1-textNode1 [line1-textNode2,...]
        <svg.../>
    </span>
    [<br/>]
    <span class="o_text_highlight_item">
        line2-textNode1 [line2-textNode2,...]
        <svg.../>
    </span>
    ...
</span>
```

Rendered line breaks in text nodes are detected using range client
rectangles (see: `text_processing.js` > `splitNodeLines()`), and the
highlights are updated on window resize...

We also need to adjust highlight SVGs to fit an updated text in "edit
mode" (mainly using editor's commands), a `MutationObserver` is used
for this purpose (we only redraw the SVG for each text unit).

A simple SVG path generator was implemented in this commit (see:
`text_processing.js` > `drawPath()`) to build highlights. It applies a
list of SVG path commands according to text dimensions in a specific
mode (E.g. on "pattern" mode, we repeat the same elementary path to fit
targeted text node...).

Remarks:

- The `--text-highlight-width` and `--text-highlight-color` properties
are used to control the highlight effect's thickness and color.

- We build the highlight option preview in the same way as text content.
To achieve this, a hack was used (we open the `<we-select/>` first since
we need the right `getBoundingClientRect()` dimensions to correctly draw
highlight SVGs).

task-3285817 (rd-website)
task-3269759 (rd-design)

closes odoo/odoo#122751

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Chrysanthe (chgo) <chgo@odoo.com>
2023-10-25 11:37:14 +00:00
Serge Bayet (seba)andqsm-odoo dc81acfb2d [IMP] website, *: allow to add a language from theme tab + options
*: web_editor, portal

This adds a button to add language in theme tab. When clicked, opens
the "add a language" wizard.
If the website has only one language, the options to enable language
in header & footer are hidden.
When an user add a language, the default behavior is Header: dropdown
& Footer: inline.
Also provides two more rendering options : Language Code and Flag +
Language Code.

task-3457554

closes odoo/odoo#119650

Related: odoo/design-themes#651
Related: odoo/upgrade#5214
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
2023-10-25 11:37:12 +00:00
Brieuc-brd c6c2cdd676 [IMP] website: rename #top_menu_container
Prior to this commit the id used for the main navigation wasn't
descriptive enough.

This commit fixes this issue.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Aaron Bohy 3f3175d4ca [REF] website,web,web_editor: convert AceEditor to owl
This commit refactors the website AceEditor to owl. The wrapper
around the lib was defined in web_editor, and extended in website,
where it was used (single usecase). This commit thus introduces an
owl Component to replace it, directly in website, and specialized
to the website usecase.

This thus allows to remove the legacy implementation.

This also removes the last usecase of Widget and select2 library
in the backend bundle, which will allow to trim it down.

Part of task~3439226

Part-of: odoo/odoo#139154
2023-10-24 12:38:29 +00:00
Robin Lejeune (role) 710d000f18 [IMP] web_editor, website, *: allow columns on mobile snippets
*: mass_mailing

This commit introduces options for the flex column layout and the
horizontal resizing to be used on mobile and be independent from
the desktop layout.

This makes it possible to:
- Have different number of columns on mobile and on desktop.
- Use different column widths and offsets for mobile and desktop.
- Reorder columns independently.

The behavior expected from the columns is:
- In the editor panel, Cols indicate the number of columns per row on
both mobile and desktop. The option is conditional of your environment:
you edit the number for the screen size of your current resolution.
- When columns have different sizes (either because it is the default
behavior of the snippet, or because the user resized some), the counter
should read "Custom". Same when the user changed some offsets.
- If manual modifications were made on width and offset, they are reset
on the current display if the number of elements is updated. This was
decided because an old, specific layout with custom offsets / width
doesn't work well with a different number of elements. (This is also the
default behavior before this PR with desktop-only modifications.)

The expected behavior when reordering is:
- On mobile, it should only affect the mobile layout.
- On desktop, it should affect both layouts.

In order to have a coherent feature on both mobile and desktop as well
as correct some non-ideal but non-blocking behaviors, the commit also
changes the following behaviors:
- When setting a columns count lower than the current number of items in
the `.row` container, extra items are now wrapped on the next flex-rows
(still within the container) instead of being deleted.
- When going from e.g. 3 to 5 columns (and as many items), the change
happens all at once instead of each item being visibly added one by one
on the next row, then brought back to the first row.
- The columns count automatically updates when resizing an item, instead
of updating only after you click somewhere else on the snippet.

This commit also adds a test to validate the new behavior.

task-3097045

closes odoo/odoo#117562

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-10-20 19:12:43 +00:00
Arthur Detroux (ard) 7594d71ca8 [IMP] *: remove jQueryUI draggable and droppable
*: mass_mailing, test_website, web, web_editor, website, website_event,
   website_sale

This commit removes jQueryUI draggable and droppable component to
instead use our own implementation of the feature. This replaces the
last use of the lib: the web_editor drag and drop. This takes advantage
of the code that was already written for other features of the backend.

task-3079246

closes odoo/odoo#136793

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-10-19 22:01:48 +00:00
Guillaume (gdi)andqsm-odoo c32e7b27fe [IMP] website, *: prevent abuse of h1 and use font size classes
*: website_event, website_forum, website_livechat, website_mass_mailing,
   website_slides

This commit permits to reduce the risk to have a wrong h1 tag or
multiple h1 tags on the same page. This commit replaces some h1 tags
with a h2 in snippets. In addition, this commit removes some font sizes
written in the style attribute and replaces them with a font size class
now that they are possible to use and edit as an user.

task-1958098

Part-of: odoo/odoo#129791
Co-authored-by: qsm-odoo <qsm@odoo.com>
2023-10-19 19:08:11 +00:00
Guillaume (gdi)andqsm-odoo 194f73a9bb [IMP] website, *: prevent hardcoded font sizes
*: web_editor, mass_mailing

This commit changes the way the font size selector works. Before this
commit, the font size selector applied a hardcoded font size using the
style attribute of the selected element. The purpose of this commit is
to change this to apply a class on the selected element, making it
responsive and customizable.

In all Odoo applications, the font size selector will now apply a class
on the current selection. An exception is made for mass mailing where
the class would not make much sense as not related to the custom heading
sizes (probably needs to be refactored in the future to use the standard
font-size classes) and fonts cannot be responsive in mails anyway (so
there would be a difference between preview and sent mail).

Those classes are:
- `display-N-fs` with N in [1 => 4]. The sizes are stored in the
`$display-font-sizes` map.
- `hN-fs` with N in [1 => 6]. The sizes are stored in the
`$hN-font-size` variables.
- `small` for the small font size. The size is stored in the
`$small-font-size` variable.

The font size selector shows the value of the class (which is dynamic)
that will be applied.

In the website application, the value of each class is configurable
thanks to a previous commit. The user can choose the size of each font
size class in the website settings.

Note that many alternatives were considered for this feature, this is
the chosen compromise. For the record, here is a very short summary of
the alternatives:

- Doing nothing: voted as the worse idea. Users see a font-size selector
  they will use it one way or another. The font-size won't be
  responsive, breaking their mobile website. And there are real use
  cases you could not do: a big "promotion" paragraph on your product
  page? Not possible: you either break your mobile page (using the font
  size option) or possibly hurt your SEO (using the font-style option
  and turning your paragraph into an h1).

- Removing the font-size selector: we did not want the loss of the
  feature as there are correct usecases to use it (as mentioned above).

- Using the Bootstrap hN and display-N classes instead of making new
  ones. Closed to be the chosen idea but discarded because those classes
  comes with colors (that the user can configure) and it would feel
  weird to have the color change when changing the font-size. Also, in
  the end, we also did not want the line-height, margins, etc of those
  classes (only the font-size).

- Instead of X new classes, have only one: o-fs, which would be applied
  alongside a bootstrap hN or display-N class, when chosen by the user,
  to cancel the unwanted style of those. It works but it forces us to
  always have an added `<span>` to apply the font-size, which we don't
  want in the future (mainly because of display-N classes, see next
  commit). It is actually very needed to be able to use proper
  line-height when reducing the font.

- Using a combination of an inline `em` font-size + a class to clamp it
  on mobile. Was probably the best next idea but rejected for several
  reasons. The main one probably being the inconsistency when changing
  the whole size of a title/paragraph (not part of it) and later
  changing the related theme size later. E.g. have an `<h1>` followed by
  a `<p>`. The h1 is 40px, the paragraph is 20px. Force the title to
  20px, because you want it smaller, same size as the paragraph. Real
  use case but also users could simply use the font-size controls by
  mistake. We would thus apply 0.5em to do that. Later, change the theme
  font-size of h1 to 36px (small change). The 0.5em one is now 18px,
  smaller than the following paragraph. Preventing that would require
  more checks which would "break" other things / possibilities.

- Probably others that were forgotten.

In the end, there was no good or bad answer. "Anything works", as long
as the feature "I want this text smaller/bigger" is there. The
surrounding features are always compromise (some users would expect some
behavior, some users would expect others). This commit focused on
solving the unresponsiveness of those custom font-sizes, which was a
problem for many users.

task-1958098

Part-of: odoo/odoo#129791
Co-authored-by: qsm-odoo <qsm@odoo.com>
2023-10-19 19:08:11 +00:00
Pierre Paridans 6b3284a023 [FIX] website: conditional_visibility_1 tour breaks when option hidden
In the conditional_visibility_1 tour, when setting up the UTM Medium,
the "Email" value is searched for.

But if more records (like with the design-themes testing enabled) push
this value out of the autocomplete initial proposition, the value cannot
be selected.

This commit fixes it by adding a step that search for the "Email" value
to ensure it is in the autocomplete propositions' list.

closes odoo/odoo#138834

Note: detected on the Lastest Chrome builds on the runbot (nightly)
X-original-commit: 8993a187f9918478f106c1913885cf980a6a9698
Signed-off-by: Christophe Monniez (moc) <moc@odoo.com>
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
2023-10-17 05:28:53 +00:00
VAN BOSSUYT Nicolasandbvr-odoo 507b80a125 [IMP] web_editor, website: add button/video/image as building block
This commit introduces 3 new inner snippets: button, image and video.

What sets these snippets apart is that, once dropped onto the page, they
transform into basic HTML code, just like if they were created using the
editor (no data-snippet etc).

task-3248881

closes odoo/odoo#126717

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: bvr-odoo <bvr@odoo.com>
2023-10-15 12:39:20 +00:00
Benoit Sociasandstefanorigano e0796020ee [IMP] website: make it possible to create new pages from templates
This commit modifies the "New Page" dialog so that it displays a list
of page templates to pick from in addition to the possibility to create
a blank page.

task-3381714

Part-of: odoo/odoo#126719
Co-authored-by: stefanorigano (SRI) <sri@odoo.com>
2023-10-14 03:27:03 +00:00
Romeo Fragomeli 5f454f0ccb [IMP] web,web_editor,website_slide: sortable service for frontend usage
This commit removes the module sortable from jQueryUI and adds instead a
sortable service to use the sortable code already used by the backend.

The service can be called using `this.call("sortable", ...)` and the
sortable listeners are added when the `enable` function is called.
This function (`enable()`) returns an object that contains the `cleanup`
function (`cleanup()`).

```javascript
// start / setup
const sortable = this.call(
    "sortable",
    "create",
    {
        ref: { el: document.querySelector(".list") },
        elements: ".items",
        handle: ".drag-icon",
    },
);

// on attach callback / on mounted
const sortableInstance = sortable.enable();

// on destroy / on willUnmount
sortableInstance.cleanup();
```

Also, it adds some new property to the useSortable:
* clone: the placeholder is a clone of the drag element
* placeholderClasses: classes added to the placeholder element
* applyChangeOnDrop: on drop the change is applied to the DOM
* followingElementClasses: classes added to the element following mouse

task-3439226

closes odoo/odoo#137527

Related: odoo/enterprise#48371
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
2023-10-10 01:59:35 +00:00
Brieuc-brd a4377bfa85 [IMP] website: set up new default images
This commit updates the demo images according to the new default
theme redesign.

task-3097005

Part-of: odoo/odoo#120302
2023-10-08 10:45:45 +00:00
Antoine (anso) 808d1f2962 [IMP] website: review snippets primary buttons
Before this commit, snippets were using primary buttons too much. We are
now using more secondary buttons and links.

task-3097005

Part-of: odoo/odoo#120302
2023-10-08 10:45:45 +00:00
Antoine (anso)andqsm-odoo 3cbdf754ff [IMP] website: redesign the s_banner snippet
task-3097005

Part-of: odoo/odoo#120302
Co-authored-by: qsm-odoo <qsm@odoo.com>
2023-10-08 10:45:45 +00:00
Robin Lejeune (role) e38808e1a7 [IMP] website, *: add user profile to website navbar
*: test_website_modules, website_sale

When one starts a trial with the website app, they arrive on a webpage
in edit mode. Many users struggle to understand they need to save before
accessing the Odoo navbar (app switcher, creation of new page, etc.).
Additionally, if they want to navigate through Odoo, not having to
discard could save some time.
It was therefore decided to land on the homepage without editor after
creating a website. The first step of the homepage tour should then be
to click on the edit button.
When creating an empty website (skipping the configurator), the website
loader is shown until the page is ready, to avoid the user leaving the
page before the first step is displayed.

On another related note, if one wants to try out the Odoo website
builder, they might create multiple DB, one per website, which is OK. In
such a case, the link to 'my database' is not visible from the website
app because the user profile was hidden.
The user menu is therefore added to the navbar on the website app.

In order to make sure the header and its dropdowns always stay on top of
the website's elements regardless of their z-index, `.o_website_preview`
is blocked in its own stacking context with `isolation: isolate;`.

task-3381773

closes odoo/odoo#133031

Related: odoo/enterprise#46992
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
2023-10-06 14:33:38 +00:00
Romain Estievenart a4b1c26813 [IMP] web_tour, website: use nested_sortable hooks instead of jQuery
Migrate the website usage of jQuery NestedSortable to the hooks
useNestedSortable

task-3439226

Part-of: odoo/odoo#136375
2023-10-03 19:20:06 +00:00
luvi 5124feae97 [IMP] web, *: improve UX of custom group by menu
*: board, website

This commit simplifies the UX of the 'Custom Group by' menu. Before this
commit, many clicks were needed to apply another filter, from an accordion
menu.

Now, a select element is used instead, allowing a better user experience, by
enabling such group by directly, when an option is selected.

Some tests have been adapted to the new selectors and behaviors, and the
applyGroup and toggleAddCustomGroup has been removed, since groups are applied
when selected, and the value can be modified directly with selectGroup.

task-3458519

closes odoo/odoo#132006

Signed-off-by: Mathieu Duckerts-Antoine (dam) <dam@odoo.com>
2023-10-03 19:19:53 +00:00
Rodolpho Lima 69a27360c9 [IMP] web_editor: omit protocol in URL input field
Before this commit, when an existing link was edited with the LinkTools
or LinkDialog, the URL input field omitted the "mailto:" part of the URL
for email links, but displayed the protocol/scheme for http(s) links and
phone numbers (tel: or tel://).

This commit standardizes the behaviour of the referred input field such
that the protocol/scheme for http(s), mailto and tel URLs are omitted,
in order to have a cleaner UI.

task-3516854

Part-of: odoo/odoo#136487
2023-09-29 09:21:52 +00:00
Michael (mcm) 7422eb643c [IMP] *: remove legacy rpc
This commit removes the files ajax.js and rpc.js then adapts all the
places where their exports were used. For most of the changes, it's a
replace of `this._rpc({...})` by a new `useService("rpc|orm")` like
pattern in the widgets.

closes odoo/odoo#136271

Task: 3439226
Related: odoo/enterprise#47775
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
2023-09-27 11:33:01 +00:00
Rodolpho Lima a7d9c07816 [FIX] website: add missing flow to LinkTools tour
Before this commit, some actions related to link creation and edition
were not tested by the LinkTools tour.

This commit adds steps to the mentioned tour in order to avoid
regressions of the issues fixed in the referred task.

task-3284649

closes odoo/odoo#136278

X-original-commit: b2a79ed9960d88d1bdf6465389f4ef720f6bc235
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2023-09-25 11:30:13 +00:00
Alexandre Kühn c191f94b43 [IMP] website: enable livechat button in website preview
The livechat button was disabled in website preview because
its implementation could not properly handle being in an iframe
inside the backend [1].

With the public livechat code being refactored to use discuss code,
this is no longer a problem, so the livechat button can be present
again. This also makes previewing the website more correct: the
livechat button is actual present on the website, so hiding it was
a lie.

By re-enabling the livechat button, this also allow to remove the
test coverage by a tour, which was sometimes failing on runbot due
to tour being small and doing `im_livechat/init` rpc after the end
of the tour.

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

runbot-24631

closes odoo/odoo#135913

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
2023-09-20 18:19:50 +00:00
Romain Derieandstefanorigano (SRI) d0885afa62 [IMP] website: better vertical align and horizontal spacing in systray
---- Horizontal spacing issue ----

The horizontal spacing between systray items in the patched website
systray is too small. It was using the regular margin of the default
Odoo systray which is composed of almost only icons for which a small
spacing is what we need.
But the website patched systray contains a lot of text, where we want a
bigger spacing, exactly how we do for the app menus.

---- New class on systray ----

To target the website systray in scss, a new class was added on it.
There is no clean way in JS to add that class, as the website systray
patch is only altering the method in charge of returning the systray
items. The rest is left up to the base NavBar class component, including
rendering.
That NavBar component does not come with a built in way to add a class.

We could have targeted the DOM directly in the patch through
`this.root.el` and added the class in JS directly but that seems like an
owl anti pattern.

---- Vertical align issue ----

Before this commit, the btn in the systray didn't have the same line
height as other elements: both the "Edit" (in main lang) and "Translate"
(in alternate lang) buttons had a (1-2px) vertical alignment issue.

This was because, despite having the same font style and font size, they
had a different line-height making it glitch 1-2px vertically.

It's a bit less visible for the Edit button as there is a pencil icon
between this text and the text next to it.
For the translate button, it's quite visible directly.

For testing purpose, you can simply remove the icons and the left-right
margins of those systray items so the text are glued to each other and
you clearly see the misindentation.

---- Misc ----

For tracking purpose, there is multiple cases to be tested regarding
those buttons:
- Community vs Enterprise (where those are colored)
- Regular mode vs translate mode

closes odoo/odoo#135956

X-original-commit: 066e4a1ddd9faf7ba866c5428c943b5af8115191
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: "stefanorigano (SRI)" <sri@odoo.com>
2023-09-20 08:36:41 +00:00
Louis (loco) 597b519c4d [FIX] *: enable to use the backslash character in a field label of form
*website

Steps to reproduce the bug:
- Drop the "Form" snippet on the website.
- Add a new field.
- Replace the field label by "test\".
- Save.
=> Traceback of type "Cannot read properties of null (reading
'dataset')" appears.

In the `start()` function of the `s_website_form` public widget, the
field names of the form are extracted thanks to the `serializeArray()`
function. The field elements are then found by doing a `querySelector()`
on the field names. In our case, the field name of the new field
extracted by `serializeArray()` is `test\\` (there are two backslashes
because the field name is a string so the first backslash has to be
escaped by a second backslash). The problem is that this string has to
be escaped one more time in order to be used in a `querySelector()`. As
it is not the case, the result of the `querySelector()` is `null`
leading to a traceback when the code tries to access its dataset. To
solve the problem, the character `\` is encoded before being stored in
the `name`, `data-name` or `data-visibility-dependency` attribute of the
field element. Thanks to the encoding, the `querySelector()` operation
can perform correctly on those attributes.

opw-3470291

closes odoo/odoo#135587

X-original-commit: 03f230a77c0d38b46944d45b4991f48e45b275dd
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-09-15 10:48:31 +00:00
Géry Debongnie e0fdb6a0b4 [IMP] *: rewrite module loader
This commit rewrite the module loader to simplify it and to improve error handling.
before this commit, you could have silent errors or "lucky" imports (import a module based on the fact that his asset will surely be load and if not, the error would be silent anyway).
e.g.: The tours cannot import modules extern to tours' bundle anymore. Or load module before your libs in assets.

TASK ID: 3266021

closes odoo/odoo#128502

Related: odoo/enterprise#44100
Signed-off-by: Bastien Pierre (ipb) <ipb@odoo.com>
2023-09-08 16:47:56 +00:00
Guillaume (gdi) 620cf19574 [FIX] website, web_editor: allow to re-edit social media icons
This commit allows you to change the icons of custom links of the social
media block after the first save. Thanks to [this other commit], there
is now a class that permits to inform the editor that a media is
editable even if it is a non-editable parent. This commit permits to use
the new class to fix the issue.

Steps to reproduce the bug:
- Drop a social media block on a page
- Add a custom social media
- Save
- Edit
- Try to change the icon of the custom social media with a double-click

=> The icon cannot be changed.

Note that [another commit] had already been made and fixed the problem
halfway (the icon change didn't work on double-click). This commit
reverts it and fixes the problem correctly with the new system.

[this other commit]: https://github.com/odoo/odoo/commit/6ead397f33512c918f51feb2b32fb3e15ffedf34
[another commit]: https://github.com/odoo/odoo/commit/bb291b35e46e42ca098aa3e04ac0b473f72be423

Fixes https://github.com/odoo/odoo/issues/104048
task-3073171

X-original-commit: b844351b9814ff2167d2183ab3216e2d1ec1d216
Part-of: odoo/odoo#134281
2023-09-06 11:50:58 +00:00
divy-odoo cea1cab535 [FIX] *: resolve the last tour step warnings
When we haven't provided a custom action, the tour step runs the default
action. In the final step of the tour, when there is no `run` or
`isCheck` provided, It shows warnings of 'ignoring action (auto) of last
step' as it can lead to a race condition.

This commit resolves the warnings: `ignoring action (auto) of last step`

task-3429500

closes odoo/odoo#129239

Related: odoo/enterprise#46683
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2023-09-04 15:02:47 +00:00
Samuel Degueldre 910897fc97 [REF] web, *: remove tempusdominus date(time) picker lib
As tempusdominus relies on jQuery, we have written our own date(time)
picker in owl. This commit converts the remaining uses of the
tempusdominus date(time) picker and replaces them by our own.

closes odoo/odoo#133349

Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
2023-09-04 09:19:08 +00:00
qsm-odoo caca26ed41 [FIX] website: make gray colors test more robust
Since a recent change at [1], a race condition seems to occur in the
gray colors palette test. Indeed, the change removed some delay in the
hackish code that is meant to wait for CSS reload.

Instead of restoring that otherwise-useless delay, this commit actually
fixes an extra_trigger that was incorrectly made in this test when it
was introduced at [2].

In any case, we should develop a more consistent and uniformed way to
wait for a CSS reload during edition test tours. It is currently done
different ways in different tests.

Note: this targets 16.0 to fix the wrong extra_trigger at the source,
even though [1] was only made in later versions.

[1]: https://github.com/odoo/odoo/commit/c6f8f781150902f585e16087f4a3868a855f3bd8#diff-795af7752739f5f510f74e5ee9b5b04d18a851062a1a6b7350cbe406e30a409dL18
[2]: https://github.com/odoo/odoo/commit/ddf2e74b4cf503ba651174bc7f280bf2f31a215e

runbot-24371

closes odoo/odoo#133889

X-original-commit: 6f32c27d52f877bde18628eb06475f56bdd95432
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-09-01 13:21:05 +00:00
qsm-odoo 2cff7e4094 [FIX] website, *: restore cc edition widgets and other qweb rendering
*: web, website_sale_stock

Since [1], the widgets allowing to edit the different colors of a color
combinations are gone, except the first one. This is because the qweb
rendering calls have been modified to use the new `renderToElement` util
which silently ignores root nodes if there are multiple ones in the
rendered template. In the same way, a specific dynamic snippet and a
stock feature were also broken.

After this commit, those three features will be restored. A crash will
now also occurs in case `renderToElement` is called to render a template
with multiple root nodes (that is actually how the two last broken
features were found, breaking during existing tests). For the first
feature, a specific test has been made too.

[1]: https://github.com/odoo/odoo/commit/6303a3eacdca012649a2ffda627b65c17a7217f1

closes odoo/odoo#133068

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2023-08-30 13:10:21 +00:00
Michael (mcm) 1f5e8f0fd4 [IMP] web,*: remove web.session
This commit removes the legacy session and adapts the modules where it
was used.

task 3439226

closes odoo/odoo#133153

Related: odoo/enterprise#46290
Signed-off-by: Jorge Pinna Puissant (jpp) <jpp@odoo.com>
2023-08-29 11:10:47 +00:00
divy-odoo c6f8f78115 [FIX] website_*: replace manual tour with utils
In this PR,
Replace the manual tour steps with existing tour utils.

task-3279232

closes odoo/odoo#129317

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2023-08-25 13:58:34 +02:00
Pierre Pulinckx (pipu) b1ebe3b6f4 [REF] *: Replace core._t imports
In this commit, _t import from import { _t } from
"@web/legacy/js/services/core" and from
 web/static/src/legacy/js/core/translation.js are replaced by
@web/core/l10n/translation.js.

task-3292454

closes odoo/odoo#130865

Related: odoo/enterprise#45270
Signed-off-by: Michaël Mattiello (mcm) <mcm@odoo.com>
2023-08-09 00:13:08 +02:00
Michael (mcm) 00d8aef1c7 [REF] web, *: remove legacy patch
This commit removes legacy patch/unpatch functions and adapts their use
by using the modern patch. There was also a custom patch function used
in tests which has been replaced too.

closes odoo/odoo#130867

Related: odoo/design-themes#685
Related: odoo/enterprise#45271
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
2023-08-07 10:58:48 +02:00
Michael (mcm) 9d6b380a24 [REF] *: adapt patches after new patch function
In the commit [1], the patch has been refactored to support the
native keyword `super`. The current commit just adapts the codebase
to that change.

task 3410198

[1]: 19ea1ac08043e22a811630968e44715cc3bfc495

Part-of: odoo/odoo#125716
2023-08-02 17:29:05 +02:00
Pierre Pulinckx (pipu) 09535ef5e6 [REF] website_*: Change registerTours of tour_utils
As steps are encapsuled in an arrow function from
69a5d8e3ce47238 for steps tour definition to avoid
direct Markup(_t()) interpretation, the same is done
for registerWebsitePreviewTour() of
"odoo/addons/website/static/src/js/tours/tour_utils.js"
in this commit.

This is done in anticipation of the use of
_t() (import from @web/core/l10n/translation) with
registerWebsitePreviewTour().

task-3292454

closes odoo/odoo#130248

Related: odoo/design-themes#678
Signed-off-by: Luca Vitali (luvi) <luvi@odoo.com>
2023-08-02 13:20:23 +02:00
Benoit Socias cd46857b15 [FIX] web_editor, website: use dataset mimetype when modifying images
Since [1] the mimetype used when calling `modify_image` was obtained
from the data URL contained in the `src` attribute instead of the
dataset. This is wrong for background images because they do not have an
`src` attribute.
Thanks to [2] which repaired the value contained in `dataset.mimetype`,
this value can be used as it was before [1].

[1]: https://github.com/odoo/odoo/commit/0449fe85cb0e1d639a4e1aeba26e90906f79254d
[2]: https://github.com/odoo/odoo/commit/40811e72c50faf146ccdf9f26c332db9ebc69fa9

task-3446438

closes odoo/odoo#130322

X-original-commit: e3221fe5d5efa824365210f040e93654e0a30309
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
2023-08-02 05:10:48 +02:00
Bastien PIERRE 65242e31e9 [IMP] *: Remove alias in JS files
Rename all imports with alias old system to the new js module system
Task ID: 3266759

closes odoo/odoo#127414

Related: odoo/design-themes#671
Related: odoo/enterprise#43716
Signed-off-by: Bastien Pierre (ipb) <ipb@odoo.com>
2023-07-27 11:58:34 +02:00
Benjamin Vray c8a40b9025 [FIX] website: add test for popup and scrollbar
Add test to verify scrollbar behavior for page and popups with or
without backdrop. The expected behavior is that the page scrollbar
should not be present when a modal with a backdrop is open, and that the
page scrollbar should be displayed if the popup does not have a
backdrop, such as a cookie bar. However, if a modal without a backdrop
itself has a scrollbar, the page scrollbar should not be displayed to
prevent the two scrollbars from overlapping, which prevents scrolling of
the popup on Chrome (when clicking on the scrollbar instead of using the
mouse wheel).

In addition to that, this commit includes a test to confirm the proper
functionality of snippet animations when a cookie bar is displayed on
the page. Moreover, it also verifies that the snippet animations perform
correctly within a popup.

During the forward port of this commit (Master branch), the test failed
due to missing braces around 'throttleForAnimation' in the '000.js' file
of 's_popup'. These were directly added in this commit.

task-2983901

closes odoo/odoo#128914

X-original-commit: 4dd462f20ccb29923e5a053e0ed4c08545f82ae7
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
2023-07-25 10:35:43 +02:00