Commit Graph
8233 Commits
Author SHA1 Message Date
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
qsm-odoo fb63a6abbb [REM] website: remove forgotten compatibility code for sign-in option
Commit [1] was not adapted properly for its master version.

[1]: https://github.com/odoo/odoo/commit/68ed032b8ac29431550846a60189f4f32223d68a

Related to task-3474743

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Robin Lejeune (role) a017f6b7e9 [IMP] website: define one-sided or full borders on header templates
When we set a border on a header, its 4 sides are affected. For most
templates, it doesn't make sense to have borders on the top, left and
right sides.
This commit applies a border-bottom-only style by default to headers,
and adds two classes `.o_full_border` and `.o_border_right_only` to
override the default behavior. As their names imply, they respectively
apply borders on the 4 sides or on the right side only.

task-3474743

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Robin Lejeune (role) e7dcfc1929 [IMP] website: allow varied default behaviors for header templates
Currently, the template headers all have the same default behavior, you
cannot define different default behaviors for header A and header B
(e.g. have header A appear over the content and header B fixed).
This commit allows to specify other behaviors than the default ones for
each header template. It should be noted that, as it currently stands,
most options trigger a reload of the page, which prevents simpler
solutions like using `data-trigger` attributes to tie some options to
the header selection.

Specifically, this commit:

- defines a header visibility for each header with `data-trigger`. This
is actually the only option of the 3 concerned by this commit that could
be handled that way, for the aforementioned reasons. Only the visibility
of the `header_rounded_box` template is actually modified, but to allow
switching back and forth between the different templates and still have
the intended Odoo experience, a trigger is specified for each header
choice (the other ones having the default visibility).

- applies the "pills" link style for the `header_rounded_box` template
and introduces a `customizeWebsiteVariables` public method to do so.
This method, called through the `data-customize-website-variables`
attribute, allows to specify additional variables that should be
modified by selecting the option. It is as of now only used in that
specific case, but could be used with a number of other options which
are defined in a similar way, such as the scroll effect, alignment,
font, logo height...

- uses the default link style to apply it to each template by default
through the use of `data-default-variables`. This is needed (1) to make
sure that the `header_stretch` template can never have another style
than the default one, as the option is hidden when it is selected, and
(2) to go back to the default behavior when switching between headers.
Both `data-customize-website-variables` and `data-default-variables` use
the same syntax: a list of `variable: value` separated by a comma.
e.g. `header-links-style: pills, header-scroll-effect: fixed`

- removes the "Round corners" option field and border-radius for headers
sales_one, sales_two, sales_three and sales_four, because the option
does not play well with their layouts.

task-3474743

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Robin Lejeune (role) 143d475c3a [IMP] website: partially hide content in headers on scroll
Following the redesign of website template headers, this commit
introduces a new class `.o_header_hide_on_scroll` to hide some part of
the header when scrolling.

task-3474743

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Robin Lejeune (role) 5cf32b489f [IMP] website: adapt website headers options and behavior
Following the redesign of website template headers, this commit applies
a few fixes and modifications to the behavior:

- It separates some elements' options into their own option sections:
  brand logo, language picker, searchbar.

- It disables interactive elements in the header (search modal, language
  dropdown, logout button) while in edit mode.

- It solves the following bugs introduced by the headers redesign:

  - Displaying the language selector with an inline style and flags
    only is working.

  - Social links are now unmovable and unremovable (other than by
    clicking on the "Show/hide social links" expressly made for it), as
    their place in the templates is fixed, as allowing the snippet to be
    moved caused several tracebacks, and as removing it through the
    options and trying to show it again caused a server error.

  - The CTA button is made unremovable (other than clicking on the
    "show/hide button" expressly made for it) for the same reasons.

  - It was possible to write in spaces where it shouldn't have been
    (search icon, mobile menu closing icon): they are made not editable.

task-3474743

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd a3917a24be [IMP] website: floating dropdown of search bar
Prior to this commit, the dropdown of the search bar which was displayed
in a navbar had a static position when the viewport was below lg.
This dropdown pushed the navigation down instead of being in front of
it, creating a layout issue in the offcanvas menu.

To fix this, this commit forces the `dropdown_menu` of the search bar to
be in absolute position.

task-3060986

Part-of: odoo/odoo#119650
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
Brieuc-brd d8ea618732 [IMP] website: relative dropdown in offcanvas menu
Prior to this commit, dropdown menus floated in offcanvas menus. This
can create an UX issue on mobile when you want to click/tap on a
link that is behind the open dropdown menu.

To fix that, this commit removes the floating style and lets the
dropdown menu extend below the parent button.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd e5380a8e40 [IMP] website, *: add extra elements feature
*: website_sale, website_sale_wishlist

This commit allows the user to show and hide the menu items they want
using the web editor.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd 55d416cd32 [IMP] website, *: remove some header templates
*: website_sale, website_sale_wishlist

This commit removes the following templates:
- template_header_image
- template_header_hamburger_full
- template_header_magazine

New templates were added by previous commits. Those old 3 do not have
an equivalent anymore and are simply removed.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd f87cee6d58 [IMP] website, *: adapt sidebar header
*: website_sale, website_sale_wishlist

This commit improves the layout of the sidebar header.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd c7ff507f5e [IMP] website, *: add sales_four header
*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd 986a76da4a [IMP] website, *: replace contact by sales_three header
*: website_sale, website_sale_wishlist

The new header is quite different from the old one, the xml_id of
the header will thus change. That new "sales_three" header will however
be the closest one to the "contact". A related upgrade script will be
made to treat this as a simple xml_id renaming.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd 73e465e9c7 [IMP] website, *: replace slogan by sales_two header
*: website_sale, website_sale_wishlist

The new header is quite different from the old one, the xml_id of
the header will thus change. That new "sales_two" header will however be
the closest one to the "slogan". A related upgrade script will be made
to treat this as a simple xml_id renaming.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd f0c8e84b01 [IMP] website, *: add sales_one header
*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd 036777ee61 [IMP] website, *: replace centered_logo by search header
*: website_sale, website_sale_wishlist

The new header is quite different from the old one, the xml_id of
the header will thus change. That new "search" header will however be
the closest one to the "centered_logo". A related upgrade script will be
made to threat this as a simple xml_id renaming.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd b5fd08d32a [IMP] website, *: adapt vertical header
*: website_sale, website_sale_wishlist

This commit improves the layout of the vertical header.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd e8e47eaafc [IMP] website, *: add stretch header
*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd e3e9c492e0 [IMP] website, *: review boxed header
*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd 2dc3b28e57 [IMP] website, *: adapt hamburger header
*: website_sale, website_sale_wishlist

This commit improves the layout of the hamburger header.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd df64fed894 [IMP] website, *: adapt default header
*: website_sale, website_sale_wishlist

This commit improves the layout of the default header.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brdandRobin Lejeune ac5866a059 [IMP] website: review/add extra toggleable elements for headers
This commit fixes the structures of some existing elements (language
selector, etc) and introduces new ones which will be possible to toggle
in each new header templates in following commits.

Note: the fixes may need to be backported in the future somehow.
Note 2: after this commit, some of those elements can appear broken.
This is because they are meant to be used in the new headers templates
in following commits.

task-3060986

Part-of: odoo/odoo#119650
Co-authored-by: Robin Lejeune (role) <role@odoo.com>
2023-10-25 11:37:12 +00:00
Brieuc-brd bc13176de8 [IMP] website, *: replace mobile menu feature by new mobile layout
*: website_sale, website_sale_wishlist

This commit adds a new header template displayed on mobile screens.
It also introduces the Mobile Alignment feature, allowing the user to
adapt the Navbar alignment to mobile screens. It will replace the
previous "off-canvas" feature also available on desktop. This commit
removes that old feature but the new mobile menu will only be enabled
in each template in next commits.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Brieuc-brd fc5683e561 [IMP] portal, website, *: prepare sub-components for header adaptation
*: website_livechat, website_sale, website_sale_wishlist

This commit adapts some templates and tests JS to prepare for the new
headers in the next commits.

task-3060986

Part-of: odoo/odoo#119650
2023-10-25 11:37:12 +00:00
Romain Derie 6ffd3d3026 [FIX] website: don't add gmap iframe in right panel DOM in test mode
Previous commit(s) did improve the preview of snippets when dragged and
dropped but also the `t-snippet-call` capability of some snippets.

Part of that improvement was to add snippet `onBuilt` JS output in the
snippet XML definition directly.

For google and facebook snippets, it means firing a request to those
websites when entering edit mode.
It's not that bad (considering the trade-off of the preview and
t-snippet-call), but will need to be re-discussed later post freeze to
find a better way to not fire those requests ideally when the snippet
is called in the right panel (but would need the preview to still work).

For the meantime, this request seems to be making a test fail
(`test_01_menu_hierarchies`) due to the gmap API call being returned
after the test has been marked as successful.

Before investigating further, this commit just prevent the iframe to
show up when in test mode so we can merge this work which is needed for
tomorrow freeze.

closes odoo/odoo#138748

Related: odoo/design-themes#726
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2023-10-25 09:56:40 +00:00
qsm-odooandBenoit Socias b993399f8a [IMP] web_editor, website: display better previews over dropzones
Before this commit, some snippets did not have any or complete preview
when dragging them over a dropzone.

This commit covers `s_website_form`, `s_countdown`, `s_map` and
`o_facebook_page`.
Some elements with class `s_preview` are added to the template. These
elements are removed when the snippet is dropped.

Also, the class o_colored_level was added to snippets so that the
previews matches the snippet dropped.

For "New page templates", an `s_keep_preview` class can be added on a
parent element of an `s_preview` to prevent its removal when creating
the page - thereby making the snippet ready as if is had been dropped
into the page.

Note: `s_chart` and the "dynamic snippet" and its variants are not
covered in this commit.

task-3555325 (was task-2431469)

Part-of: odoo/odoo#138748
Co-authored-by: Benoit Socias <bso@odoo.com>
2023-10-25 09:56:40 +00:00
Benoit Socias ea5a7077ab [REF] website: remove useless removals in New page snippet templates
In [1] when the "New page from template" feature was added,
`background-image: none` was removed from many blocks to avoid having to
handle it when adding an image.
That situation actually never arised, making those removals useless.

This commit removes those attribute removals.
The only impact this has it that it fixes the `s_call_to_action` styles
in `theme_notes` by restoring their images. The `<attribute remove=...>`
actually did separately remove `background-image` and `none`, corrupting
the exiting style.

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

task-3555325

Part-of: odoo/odoo#138748
2023-10-25 09:56:40 +00:00
Benoit Socias 81578d730a [REF] website: avoid async Promise executor to wait for page CSS
In [1] when the "New page from template" feature was introduced, when
obtaining the CSS of the target website a Promise was returned which was
resolved in an asynchronous executor after obtaining a server response.

This commit relies on resolving a Deferred promise instead.

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

task-3555325

Part-of: odoo/odoo#138748
2023-10-25 09:56:40 +00:00
Benoit Socias 21d4714654 [IMP] website: not prevent never occurring multiple dialog opening
In [1] a mechanism was introduced to prevent the "New page" dialog from
being opened several times.
That problem occurred at a point during development when the loading of
the templates was delaying the display of the dialog, giving time to the
used to trigger again the action that opened the dialog. Now that the
dialog is actually opening right away to give access to the "Blank Page"
pseudo template, the situation cannot occur anymore.

To simplify the code, this commit removes that mechanism which is now
useless.

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

task-3555325

Part-of: odoo/odoo#138748
2023-10-25 09:56:40 +00:00
Benoit Socias 8642b0c409 [IMP] website: make table of content fully previewed during drag
Before this commit, the "Table of Content" snippet only got its
navigation part rendered once the block was dropped.
In [1] when the "New page from template" feature was introduced, a
default pre-rendered content was introduced so that the "Table of
Content" snippet was properly rendered in the template previews where it
was used.

This commit moves this pre-rendered content from [1] into the base
definition of the snippet itself.
There is no collision problem regarding the default ids that are
included because the dynamic content is re-generated when the block is
dropped and whenever the headers texts are changed.

[1]: https://github.com/odoo/odoo/commit/e0796020ee0c3188e1e9d9fa077de73a2211c6f7#diff-bee4662b672e30dbfb9778f8747fee45698d9b8d16282d8f80066d8a30137928R35-R50

task-3555325

Part-of: odoo/odoo#138748
2023-10-25 09:56:40 +00:00
Pierre Pulinckx (pipu) 1d6f2da14a [REF] *: add chartjs assets bundle
In the goal of simplify assets loading, in this commit we create a new
assets bundle for chartJS and its luxon adapter.
With this, we can now use loadBundle instead of load these two libraries
with loadJS.

task-3562357

closes odoo/odoo#139544

Signed-off-by: Michaël Mattiello (mcm) <mcm@odoo.com>
2023-10-24 15:23:30 +00:00
Aaron Bohy 87c6dde49d [REF] web,*: SearchDropdownItem becomes CheckboxItem
Before this commit, there was a special kind of dropdown item
defined in the search/ folder, named SearchDropdownItem, which was
basically a DropdownItem but with role "menuitemcheckbox" instead
of "menuitem". It allowed to displayed a check icon in front of
values to indicate that they are selected. It is used especially
in the search menu, to indicated which filters/groupbys/favorites
are active.

This specific item is used in other context that search (e.g. pivot).
A similar usecase has also been introduced in website, in the
ResourceEditor (the wowl version of the AceEditor).

This commit thus moves the component to web/core/dropdown and
renames it into CheckboxItem.

Part-of: odoo/odoo#139154
2023-10-24 12:38:30 +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
Aaron Bohy b545e68ccb [FIX] website: WysiwygAdapter: fix props definition
The `beforeEditorActive` props is a function, not a boolean. So
before this commit, there was a crash in debug mode when the
WysiwygAdapter was instantiated.

Part-of: odoo/odoo#139154
2023-10-24 12:38:29 +00:00
Xavier Morel 9ebbfdac73 [FIX] *: incorrect translations markings
Fixes a large number of cases where strings are translated then
formatted, instead of letting `_()` do the formatting internally,
which allows it to recover from incorrect translations (missing,
broken, or extra placeholders).

Also

- removes translation markers entirely when there's nothing to
  translate e.g. `_("%s - %s")` is not useful
- fixes a few messes which lead to only partial translatability
  (DRY is generally a bad idea when translations are involved, even
  more so when you don't make the variable part translatable)
- fixes a few nearby issues noticed at the same time
- replaces a few `"%s"` by `%r`, which should automatically quote
  strings relatively appropriately
- fixes translated strings which use `\` to escape a newline (in order
  to fill-paragraph): `\` escapes only the newline, if the
  continuation string is indented this results in a bunch of spaces
  ending in the string to translate, which is pretty garbage for the
  translator, using implicit concatenation works much better

Note: some of the updates revert f-string parameters to %, because
babel (2.9) apparently has trouble with f-strings and blows up trying
to extract them.

Not in scope:

Helping translators fix translatable strings e.g. any translation
string with more than one placeholder probably should use keyword
placeholders

- Provides more context / data to the translator to make sense of the
  sentence.
- Allows reordering the translated terms, which can be necessary
  depending on the sentence and language.

closes odoo/odoo#139314

Related: odoo/enterprise#49311
Signed-off-by: Xavier Morel (xmo) <xmo@odoo.com>
2023-10-23 16:45:09 +00:00
Benoit Socias 55e64beb47 [FIX] website, *: not fail on visitors views without event rights
*: website_crm, website_event, website_event_track

Before this commit, when accessing the visitor views without having any
event rights, an error was triggered.

This commit restricts the display of the `event_registration_count`
field on the `website_visitor_view_form` restricted to the
`event.group_event_user` group so that its invisible condition does not
fail. Similarly it restricts a visibility condition on
`event_track_wishlisted_count` to the `event.group_event_manager` group.
To avoid encountering the same issue with further extensions of
`_compute_email_phone` on the `website.visitor` model, we make its
fields `compute_sudo=True`, and revert the specific `sudo` that had
been added in [1].

Steps to reproduce:
- install `website_event`
- set Demo user to have no Events right, but be an "Editor and Designer"
for Website
- register to an event as an anonymous user
- access the Visitors page as Demo user

=> An error was produced.

Steps to reproduce (2):
- install `website_event_track`
- set Demo user to have no Events right, but be an "Editor and Designer"
- access the Visitors page as Demo user

=> An error was produced.

[1]: https://github.com/odoo/odoo/commit/5ba09c2cb2bb180cfb1363c352f35bd8cf3b132b

opw-3537849

closes odoo/odoo#139271

X-original-commit: 4cb18fab5e8d14dd9a2dfb5cb3e65b43fab02846
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
2023-10-20 22:10:39 +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
Robin Lejeune (role) d210af8348 [REF] web_editor, website: add utility functions isMobileView()
This commit implements two generic utility functions with similar
behavior that check whether the view is mobile or desktop:
- For web_editor: depending on the view of the targeted element
- For website: depending on the context

task-3097045

Part-of: odoo/odoo#117562
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) 05dbe28bed [IMP] website: add tooltips in settings tab for heading 1
This commit adds tooltips in the settings tab of the website in order
to inform the user that some options impact the Heading 1.

task-1958098

closes odoo/odoo#129791

Related: odoo/enterprise#44986
Related: odoo/design-themes#682
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-10-19 19:08:11 +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
Guillaume (gdi)andqsm-odoo 8b56123ebd [IMP] website: add display-N settings in theme tab
This commit adds a set of new options in the theme tab to allow the user
to customize the style of the display-N classes. He can now choose the
font family, the font size, the line height and the margins top/bottom
for the display-N classes (1 to 4). Note that we will not use display-5
and display-6. A further commit will allow the user to use those classes
in their content via the editor UI.

task-1958098

Part-of: odoo/odoo#129791
Co-authored-by: qsm-odoo <qsm@odoo.com>
2023-10-19 19:08:11 +00:00
Renilkumar Kajavadra 4c1cab9e41 [FIX] website: singleton error while creating an order in website
When the user has contacts with different websites and tries to create an order,
a traceback will appear.

Steps to produce the error:
- Install 'website_sale' and 'contacts'
- Create 2 websites: 'Website A' and 'Website B'
- Go to Contacts > New > In Sales & Purchase, select 'Website A'
- Create another contact with 'Website B'
- Go to Website > eCommerce > Orders > New > try to enter Customer

Error: A traceback appears:
'Expected singleton: website(6, 16)'

https://github.com/odoo/odoo/blob/1cb866347eed8c43d1da225f441cc3b3ce9c5a01/addons/website/models/res_partner.py#L42
Here, instead of partner, self is used.
So when the user tries to create an order,
it will lead to above traceback.

sentry-4545021252

closes odoo/odoo#138929

X-original-commit: b053805d96c5fd8a9579e49b4f842f488c4adf60
Signed-off-by: Adrien Widart (awt) <awt@odoo.com>
Signed-off-by: Renilkumar Kajavadra (reka) <reka@odoo.com>
2023-10-19 05:36:56 +00:00
Arthur Detroux (ard) abe7f88a8b [FIX] website: trim SEO Keywords in SEO Dialog
In 15.0, the SEO dialog did not allow trailing/leading spaces.
However, in Odoo 16.0 one can add leading and trailing spaces in their
SEO keywords.
This is becausethe commit which converted the SEO dialog to OWL [1] did
not trim new keywords, which could lead to keywords with trailing space.

It means that those keyword won't be marked as checked in the SEO
Dialog.

This commit removes trailing spaces when opening the SEO Dialog, in case
of an existing DB having such a case, and also when adding new keywords.

To note that trailing spaces will still be inside the page until the SEO
dialog saves the SEO data again.

Note that there might be (or might have been at some point) some cases
of migration which seems to lead to those spaces being added when the
user land in Odoo 16.

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

opw-3460300

closes odoo/odoo#138872

X-original-commit: 69c0293b59468c24c92b8b900cba7dd93bbbd0cf
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
2023-10-17 08:53:20 +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
Guillaume (gdi) 99f37d47af [IMP] website: prevent text generation issues with foreign languages
This commit permits to check if the text theme is translated before
asking IAP for a text generation. We need the text to already be in the
target language to be able to generate the text in the target language.

task-3248852

closes odoo/odoo#136937

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-10-17 00:35:05 +00:00
Brieuc-brd 538fdab99b [IMP] *: fine-tune app icons
The aim of this commit is to improve the impact and rendering of app
icons in bright and dark mode. It also reduces the size of svg files.

To achieve that, this commit updates the colors to flat colors. This
change will make the icons stand out and improve their readability.

task-3072562

X-original-commit: 667a19162b74fb6554a2389ba9c6e69de4ff5113
Part-of: odoo/odoo#138279
2023-10-16 09:21:17 +00:00