*: web_editor
When installing an app from the web_editor, it's needed to actually
reload the webclient, or some apps might not work properly as they
won't have the right assets loaded.
See merge commit for more information.
task-2687506
By starting the get_switchable_related_views request when the
WysiwygAdapter is started, and awaiting it only when we need to know,
we can improve the initial loading time of the editor.
See merge commit for more information.
task-2687506
When clicking on save while having a popup open, in some conditions,
a traceback can appear due to a race condtion.
This is caused by an event listener which updates the visibility status
of said popup in the editor panel. When saving the popup is closed,
and the cleanForSave starts, but while the popup is closing an event
is triggered which recreates editors (_onSnippetOptionVisibilityUpdate).
This commit aims at mitigating the appearance of this race condition
by listening to the .hide event instead of the .hidden, which means
the event is fired right away instead of 400ms later.
See merge commit for more information.
task-2687506
This commit adds the autofocus on inputs on form inputs.
It also adds inputs validation on the Edit Menu dialog, and
autocomplete.
The validation is done with a useControlled input hook, taking an
initial value and a validation function (isEmpty, ...). It returns a
state holding two value: the actual value of the input and the boolean
hasError (used to display or not an is-error css class), as well as the
validation function, wrapped to update the hasError state value.
The existing jquery autocomplete widget is reused, with the a mapping
object (a fake widget that will use the Component's rpc service instead
of the legacy Widget's one).
See merge commit for more information.
task-2687506
Before this commit, the welcome message was removed at the level of the
client action, independently from the wysiwyg initialisation.
As the welcome message is directly inserted into the iframe's
contentDocument, it could lead to a race condition with the editor's
observer: if the wysiwyg was already started when the client
action was removing the message, that mutation was recorded in the
history (therefore, when switching to edit mode and clicking on discard
would show the "Are you sure to discard ?" toaster).
Now, the welcome message is removed before starting the wysiwyg using a
removeWelcomeMessage callback.
See merge commit for more information.
task-2687506
This commit mocks the website service for all the QUnit tests.
As the website module now defines a patch on the WebClient and NavBar
components, adding the website service, this service needs to be mocked
for all the tests. This is done by patching the QUnit.testStart hook.
Also, after the addition of the new media dialog, this component is
mocked at the field html unit test.
See merge commit for more information.
task-2687506
The cancel dialog is now using the new Dialog API and disables buttons
when the process is ongoing.
This is needed because prior to this commit, the iframe would reload,
but it would still be possible to click on the buttons.
So one could cancel then click on save and a traceback would show up.
See merge commit for more information.
task-2687506
This commit adapts the Knowledge "/file" wysiwyg command to work with
the new media dialog, introduced earlier in this merge.
See merge commit for more information.
task-2687506
As there are now two different documents at the SnippetsMenu level, in
the context of the website app:
- the iframe's one, where the snippets are,
- the global one, where the SnippetsMenu is,
Focusing a contenteditable snippet would not blur an option's input and
the other way around, leading to wrong behaviours.
One of them was the creation of a link via the link tools:
- Drop a s_text_image snippet
- Click on the first paragraph
- Create a link via the link tools
(The paragraph is still selected while entering the url input)
- Click on the newly created link
- Click on the "remove link" popover's button
-> Traceback, as the selection was not correctly set
To avoid that, and restore the one-document-behaviour, we remove the
selection of the global document when clicking on the iframe's document,
and we remove the iframe's document selection when clicking on the
SnippetsMenu.
See merge commit for more information.
task-2687506
Before this commit, switching websites with custom domains was not
properly done: the client action should redirect to the custom domain if
there is one, instead of only redirecting the iframe.
The redirection was not correct for the "go to website" buttons either:
in that case, the url was incorrectly generated for the redirection (the
custom domain was passed in the path parameter of the client action).
See merge commit for more information.
task-2687506
This commit adds an attribute to the iframe element in website_preview
so that the tour system knows when the iframe is ready. This is
necessary as tour could click on the iframe before the widgets where
properly started and therefore clicks would be ignored.
See merge commit for more information.
task-2687506
*: website, website_blog, website_crm, website_event, website_forum,
website_hr_recruitment, website_mass_mailing, website_sale,
website_sale_loyalty, website_slides
This commit adds the current website displayed view xmlid outside of the
iframe, on its container, so that the tours registered with
registerThemeHomepageTour can continue to prepend their triggers with
the view xml id.
Introduce registerEditionTour: this function will allow tour maker to
more easily register a tour that needs to start in the iframe's backend
and go in edit mode.
See merge commit for more information.
task-2687506
Co-authored-by: Benjamin Vray <bvr@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
This commit adds a "body" string prop to the website dialogs, that are
not necessarily defined with a template now.
See merge commit for more information.
task-2687506
*: web, web_editor, web_unsplash, website_blog, website_event,
website_forum, website_hr_recruitment, website_links,
website_livechat, website_sale, website_slides, website_twitter
This commit fixes two issues related to the loading the wysiwyg and
editor assets.
The media dialog components are now defined in a new assets_media_dialog
bundle, to make them available both in the frontend (needed to post
comments on the forum for example), and in the backend (used in the
context of the wysiwyg edition or in the seo dialog). Ideally, The media
dialog component would lazy load its own bundle, but right now, it is
not possible when used in a ComponentWrapper.
The wysiwyg assets are now completely loaded in the frontend, after
creating the website root, when the frontend is displayed in an iframe.
It would be better if the frontend loads only what it needs of the
wysiwyg assets (some editor classes and the drop zones css), an
improvement would be to create an assets_wysiwyg_frontend or
assets_wysiwyg_minimal bundle.
The website edition components are moved to the assets_editor bundle.
For now, this bundle is included in the backend and the edition menus
are hidden from the users that are not website publishers. Ideally, the
client action would lazy load the assets_editor, only if the user is a
website publisher.
Many optimizations regarding assets will be done post-merge.
See merge commit for more information.
task-2687506
*: website_sale_autocomplete, website_sale_loyalty
Adapt tests to the new customization options which are now accessible in
edit mode with the other options. But also adapt the tests that run in
the backend where the page is now moved in an iframe in edit mode.
See merge commit for more information.
task-2710582
*: website_blog, website_hr_recruitment, website_sale, website_slides
This commit changes the redirections from the controllers, that were
always redirecting to the frontend before.
Now, we want to open the website in its backend client action most of
the time (for example, when clicking on the "go to website" buttons on
the form views).
For that, a new get_client_action_url is introduced on the website
model.
See merge commit for more information.
task-2687506
After the core Dialog API was refactored in [1], the web_editor and
website dialogs had to be reworked.
These dialogs are using a base WebsiteDialog component, that allows for
a default footer and adds the o_website_dialog content class.
[1]: https://github.com/odoo/odoo/commit/7c4f200b8edf0bc695c623c7afc62288f838db36
See merge commit for more information.
task-2687506
Before that commit, opening the client action was not possible directly
after installing the website module (the client action javscript class
was not yet added to the actions registry).
An action_id param is added to the reload action, so that it can open
the website configurator after reloading the webclient.
See merge commit for more information.
task-2687506
The goal of this commit is to add options to manage website pages as in
frontend page manager using list view.
- The click on list view item will redirect iframe to the targeted page.
- The Page Properties dialogs (DuplicatePageDialog, DeletePageDialog)
are used to clone/remove pages.
- The pages listView is loaded using the current website domain.
See merge commit for more information.
task-2687506
The goal of this commit is to move the "Track Visitor" option from
CustomizeMenu to technical view.
See merge commit for more information.
task-2687506
The goal of this commit is to add the 'Page Properties' dialog using
the 'website.page' form view.
The PagePropertiesDialogWrapper was updated to work on pages listView
(to clone/remove pages).
A boolean field 'is_in_menu' was added to control if page is in menu on
page properties dialog. This should be refactored later as a wizard.
See merge commit for more information.
task-2687506
The use of AceEditor's CSS on "assets_backend" affects the editor widget
on fields.
The goal of this commit is to fix this behaviour by excluding form
fields.
See merge commit for more information.
task-2687506
The goal of this commit is to adapt the website HTML/CSS/JS editor using
a 'ComponentAdapter' to website backend.
Since we reload the iframe only after editing resources, the
'_updateEditor' method was added to update UI (toggle 'resetButton'
visibility,...) and get the same behaviour (on save/reset) as before
using iframe.
See merge commit for more information.
task-2687506
This commit adds a Translator component, that replaces the
TranslatePageMenu.
It has not been completely adapted to owl: instead, it only extends the
Editor component (that instantiates the Wysiwyg widget) and passes
callback props that are using the legacy code from the
TranslatePageMenu.
See merge commit for more information.
task-2687506
Before this commit, when using 'iframe ...' as a selector for a trigger
in a tour, the first iframe found was used to query and find the
trigger. In the context of this PR, the iframe fallback was used to find
the triggers in the website tours.
This commit adds a o_ignore_in_tour class, used to filter out those
elements in tours.
See merge commit for more information.
task-2687506
Before, the configurator was using the frontend assets. When converting
it to a backend client action, it lost some styles. Some rules are added
to the configurator scss file to keep the structure that is had before.
See merge commit for more information.
task-2687506
Before this commit, the configurator was its own frontend application.
With the website edition UI moved to the backend, it makes also sense to
move the configurator to the backend, as a client action, so that it is
easy to trigger it after installing a website (or the website module),
and returning to the website_preview client action after having
completed it.
This commit adds a new color_palettes.scss file, added in the
assets_backend, that will print the values of the color palettes (so
that some js can handle it). For now, it is needed for the configurator
and the editor. It will probably need to be reviewed later to not put
everything in backend assets.
See merge commit for more information.
task-2687506
The media dialog was refactored using owl.
It can be displayed via the dialogs service.
The (Image/Document/Icon/Video)Selector components are controlled by the
state of their parent, the MediaDialog: this.selectedMedia.
Some things differ from the original implementation: the dialog still
takes (optionally) a media as a parameter, but it does not directly
modify it anymore.
It will pass the selected media as a parameter to a callback, save, that
it gets as a prop. That save prop should be responsible to make the
appropriate modification to the original media, given the new selected
media.
The code opens up for an easy multiSelect of other tabs than the images
(multiIcons, multiDocuments), but that use case is not currently tackled
and maybe it would be better to simplify the code.
See merge commit for more information.
task-2687506
Use a BlockIframe component when the iframe is being reloaded,
use the new loading spinner in the web_editor.
Scroll the snippet into view when reloading the editor.
See merge commit for more information.
task-2687506
SmoothScrollOnDrag and jquery-ui, the libraries used to handle the drag
and drop of the snippets, are using the HTMLElement
getBoundingClientRect method on the draggable/droppable elements to get
their position, listen to mouseover events and trigger scroll while
dragging.
With the WebsiteEditorClientAction's iframe, the getBoundingClientRect
method of elements inside the iframe was not taking into account a
possible offset of the iframe. For example, in the "mobile preview"
edition mode, the iframe was reduced in size and centered in the screen.
This commit adds this offset to these libraries:
- in SmoothScrollOnDrag, when the drag is started, to correctly trigger
the scroll inside the iframe.
- the insertion zones' getBoundingClientRect (used for the jquery-ui
droppable) is patched.
- the SnippetEditor.cover method is adapted to correctly display the
handles over the snippets.
See merge commit for more information.
task-2687506
On website, the edition is done in an iframe while the SnippetsMenu
resides outside of said iframe. This means that the SnippetsMenu no
longer has frontend styles. Therefore, colors aren't accurate.
This commit aims at patching web_editor widgets, such as color_palette,
so that the color displayed is always accurate. To do so, it computes
the color inside the iframe and adds style attributes to color_palette
preview elements.
See merge commit for more information.
task-2687506
The redirect helper js script can now redirect directly to the backend
in edit mode if it has the ?enable_editor.
See merge commit for more information.
task-2687506
*: website_blog, website_event, website_forum, website_links,
website_livechat, website_slides, survey, web_editor
This commit removes the website navbar root widget, as the edition is
now handled in the backend through the client action and custom menus.
It removes associated widgets and their css.
See merge commit for more information.
task-2687506
*: mass_mailing, web, web_editor, website_blog, website_event,
website_event_meet, website_livechat, website_sale, website_twitter,
base
This commit does 3 things:
- Adapt existing code so that the editor can be run outside of its
editing element. Prior to this commit, it was expected that the
editor would be attached to the element it was currently editing.
This needs to change however as the editable is now inside an
iframe for the website edition. mass_mailing already had a similar
approach but the editor was started within the iframe.
With these changes, the editor is alongside the iframe, editing
the content that's inside it. This allows multiple features
such as reloading the iframe while keeping the editor visible and
resizing the iframe for a mobile preview.
- Adds logic to the wysiwyg_adapter so that it can undertake
the duty of the previous widget sytem. The wysiwyg existed not only
in the legacy widget system, but most importantly in the frontend.
One of the duties of this adapter is to send events inside the
iframe when it is necessary to reach the frontend public widget
(i.e. widgets_start_request)
- Removes existing SCSS that is no longer used.
See merge commit for more information.
task-2687506
This commit takes previously existing code and moves it to the new
location where it will be currently used by the new website editor.
Some SCSS rules were now necessary in both the frontend and the backend
(i.e SCSS for o_we_shapes). Optimizations about assets will follow this
merge.
Some code were moved to new components (i.e reloadBundle moved from
snippets.options to wysiwyg_adapter)
And some code was taken away from widgets that will be removed
(i.e edit.js).
See merge commit for more information.
task-2687506
This commit adds 2 components essential to website edition.
- WysiwygAdapterComponent: Allows the legacy @web_editor/wysiwyg widget
to work in an OWL context. It will be further expanded in the next
commit to fully replace the previous edit.js which was the initial
widget that started the edition prior to this commit / branch.
- WebsiteEditorComponent: This component is in between WebsitePreview
and the adapter. It allows some tricks described below.
The reason this is split in two component is because, for now, when
the page needs reloading, the editor component will clone the content
of the widget, destroy the Wysiwyg, and restart it. This ensure that
every event is properly bound and gives the illusion that the wysiwyg is
never destroyed.
See merge commit for more information.
task-2687506
After this commit, the customize_show views are automatically added in
the editor panel as page options in the "customize" tab.
Most of the customize_show views have been replaced by snippets options
but for some it was better to keep an auto population system so as not
to have to create too many bridge modules when it's not worth it
(e.g. My Portal page).
See merge commit for more information.
task-2710582
Arthur Detroux