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)
closesodoo/odoo#122751
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Chrysanthe (chgo) <chgo@odoo.com>
*: 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
closesodoo/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>
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
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
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
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
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
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
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
*: 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
*: 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
*: 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
*: 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
*: 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
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>
*: 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
*: 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
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>
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
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
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
closesodoo/odoo#139544
Signed-off-by: Michaël Mattiello (mcm) <mcm@odoo.com>
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
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
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
*: 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
closesodoo/odoo#117562
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
*: 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
closesodoo/odoo#136793
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: 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>
*: 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>
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>
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
closesodoo/odoo#138872
X-original-commit: 69c0293b59468c24c92b8b900cba7dd93bbbd0cf
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
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.
closesodoo/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>
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
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
closesodoo/odoo#126717
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: bvr-odoo <bvr@odoo.com>
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>
Since commit [1], the 'jquery.ba-bbq' library has been removed. Now,
when you drop the Facebook snippet into a page, there is a traceback.
This is because we were still using the 'querystring()' function from
'jquery.ba-bbq' to combine the parameters of the Facebook iframe's URL
with its URL.
[1]: https://github.com/odoo/odoo/commit/507c36883675a45a15485ce5c73aa4557ba23639
task-3543529
closesodoo/odoo#138592
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
By default, images on websites can be dragged and dropped in browsers.
As we have a custom drag & drop system, this commit removes the default
drag & drop behavior during the edition of a website page. In addition,
this commit prevents `OdooEditor` from managing drag and drop on images
that should not be dragged and dropped by the user.
task-3369600
closesodoo/odoo#125151
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
This commit removes all the legacy envs (common_env, env, public_env)
as well as the files used to set up them.
task 3439226
closesodoo/odoo#138348
Related: odoo/enterprise#48781
Signed-off-by: Mathieu Duckerts-Antoine (dam) <dam@odoo.com>
Commit [1] introduced a method to restore the mega menu state (closed)
so it's not saved open when saving the website builder edition.
That method is `_restoreMegaMenus()`.
It was then moved with commit [2], where it was called in `destroy`
where it was actually making the code crash because once you reach
`destroy`, the website content (the iframe) has already been reloaded
(and thus removed / recreated).
It's done through `reloadIframe()`.
So, depending of your network speed and the server response time, if the
page is served before reaching the mega menu restoration, it will crash.
Restoring the mega menu in the (wysiwig) destroy doesn't seems to do
anything as the page is already saved when reaching `destroy`.
Step to reproduce:
- Have a high latency, like 500ms (you can create a profile in chrome
debug tool in network tab)
- Create a mega menu on the website
- Enter edit mode
- Directly save or discard
-> Traceback, the jQuery toggle elements (`.o_mega_menu_toggle`) are not
in the DOM anymore, since the iframe got reloaded. Those elements
thus don't have a reference to `$` anymore, ultimately making this
line crash:
```js
const $toggle = toggle.ownerDocument.defaultView.$(toggle);
```
[1]: https://github.com/odoo/odoo/commit/1345702258adbfbee0d780dc22e552395e6d1df7
[2]: https://github.com/odoo/odoo/commit/d7245d2abf528d093226c80e40975e63d61e8997
opw-3483837
opw-3478642
closesodoo/odoo#138538
X-original-commit: caeb92bfb624c9c30ec9f9e3c2b1dd385e9b089b
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
