This branch introduces a large-scale reorganization of the
component tree generated by the web client. The short version is
that now, the control panel is a child of the view controller and
no longer a sibling. Graphically (and simplified), we go from
this:
webClient
/ | \
... ... actionManager
/ \
controlPanel viewController
/ \
to this:
webClient
/ | \
... ... actionManager
|
viewController
/ | \
ControlPanelController
/ \
CPRenderer CPModel
The motivation is that this work moves the code where it should be.
Before this commit, it was kind of weird to have code in the
controllers to render buttons outside of their root node (in
renderButtons). Also, the action manager had to take care of
coordinating search view states between view transitions.
So, this work simplifies the code. It also makes it easier to
extend. We see day after day that Odoo needs to take care of more
complex UI needs, and in many cases, these needs were quite
difficult to implement (we prefer spaghettis in our plates, not in
our code). The changes in this branch should open the way to
implement these features.
For example,
- it will now be easy to add the possibility of views (for example,
the search view or a new ControlPanel view) to add custom buttons
(of type action or object) in the control panel.
- Another need will be to serialize/ restore the state of the
search view across action boundaries (needed by the dashboard).
- Another example is the possibility for views to customize easily
the presence/absence of sub menus (filters/groupbys/favorites/
time range/...)
- Another need is an easier way for views/client action to customize
their control panel.
This commit also contains a large rewrite of the search view (so it
is more inline with our architecture and easier to maintain).
Part of task 1893568
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Martin Geubelle <mge@odoo.com>
After 11.0, in a code editor (ace editor) on the frontend we could not
resize the editor or see line numbers.
This happen since:
- in 64d47c0bc5 ace editor (used when editing code) was updated.
- in ajaxorg/ace@5bf78e09 the line number bar was set aria-hidden
- in 9de1bc0ee aria-hidden element were forcibly hidden
Thus the column of line number (and used for resizeing) in the code
editor was unwillingly hidden.
Since we don't want to make change in library, we fix this in our
custom CSS for the code editor.
opw-1912824
closes#29399
Embedding a video can't work because it embeds an iframe, which is not supported
by most email clients for security reasons.
(What happens when Gmail shows embedded videos in displayed emails, is that you
send a link in the email body, and it is at rendering that Gmail adds the iframe
into the page.)
In true bugfix fashion, we hide the button.
When the "res_model" is "mail.compose.message", we generate a widget with the
noVideo option.
Essentially a foward-port of v11 commit: 264f89f63f
opw 1905497
closesodoo/odoo#28912
* web_editor
When an user saves its website, all the animations are destroyed so that
a clean DOM is saved. This is particularly important for snippets like
the latest post one that would crash the page if not cleaned before
saving.
Two cases were found where animations were not cleaned before saving and
this is what this commit fixes:
- When an user used the undo/redo system, all animations were lost as
the DOM is recreated.
- When an user duplicated a snippet, animations were not restarted on
the cloned element.
closesodoo/odoo#29159
* web_editor
Before this commit, the web_editor app defined gray utilities: bg-* and
text-* classes for gray colors (on top of theme colors). Those are now
defined for all bootstrap (note that this was already the case as the
web_editor file was put in the backend and in the frontend). The
difference is that now the gray utilities are defined just after
the standard bootstrap. This allows to complete and fix
https://github.com/odoo/odoo/pull/29253/files as text-muted in gray
card bodies were not using the correct color without this (see code
comments for details).
closesodoo/odoo#29290
* web_unsplash, website_sale
- Visual improvements and cleaning in each tab: video, documents,
pictogram, images.
- Only one search input for both the local library and unsplash.
- Replace the idea of multiple pages by adding a 'Load More' button.
task-1896705
When using the media dialog, when uploading an image, the image list
refreshes itself properly. This was not the case for documents as it
was... refreshing the image list too instead of the document list. Also,
when uploading a document, it is supposed to be added in the page
directly and the media dialog is supposed to close. This feature was
broken for the same reason: the iframe system of both tabs which were
using the same name.
Bug introduced with https://github.com/odoo/odoo/commit/abde8bddf8ec45cf12aab59e95c330321158cfba
(even though is was technically wrong for the same reason before).
Closes https://github.com/odoo/odoo/pull/28722
On firefox if we do for example:
ALT+GR + [ALT+GRable ´ key]
Firefox may send keys "AltGr" and "Dead" instead of just "AltGr".
This was possibly causing caret to go a position too low when writing
speedily with diacritical marks.
opw-1903865
closes#28739
This rev. introduces robust helpers to use in the JS tests suite to
interact with DOM and components, and starts using them (almost)
everywhere.
All the helpers are exposed though testUtils.js.
There are 2 kinds of helpers:
1. Assertions
-------------
* assert.containsNone, containsN, containsOnce check that the DOM
(or a specific part of the DOM) contains a `selector`. It
generates a correct error message automatically.
ex: assert.strictEqual(form.$('.o_form_editable'), 1, "msg");
-> assert.containsOnce(form, '.o_form_editable');
* assert.isVisible, isNotVisible check that the DOM has an element
visible or not. They also check that the element is actually in
the DOM (before most tests didn't verify this).
* assert.hasClass, doesNotHaveClass, hasAttrVAlue, check specific
properties of a DOM element, and also validate that it is
applied on a single existing DOM element (before most tests
didn't verify this).
ex: assert.notOk(form.$('button').hasClass('btn-primary'));
-> assert.doesNotHaveClass(form.$('button'), 'btn-primary');
2. Utilities
------------
The goal of the utilities is to centralize the definition of many
standard components and interactions, ensuring that when we
refactor the JS framework, we do not need to change all the tests.
Existing mock utilities (addMockEnvironment, intercept, path,
patchDate, unpatch and fieldsViewGet) are moved to
'testUtils.mock.*'.
Existing DOM utilities are moved to 'testUtils.dom.*'.
New dom utilities are created for opendDatePicker, click,
clickFirst and clickLast. Helper `click` verifies that there is
exactly 1 element visible in the DOM you click on, `clickFirst`
and `clickLast` verify that there are more than one element on the
DOM.
ex: form.$('button').click();
-> testUtils.dom.click(form.$('button'));
New Form utilities: (testUtils.form.*)
clickEdit, clickSave, clickCreate, clickDiscard, all clicks on
the control panel buttons of the form.
`reload` reloads the form data.
New modal, graph, kanban and pivot utils (testUtils.pivot.*,
testUtils.kanban.*, etc.).
New fields utils: (testUtils.fields.*)
* editInput, editSelect: allow to change the value of a field,
using a selector to identify it. They validate that the input
exists and trigger the change event automatically.
* editAndTrigger: allow to modify a field and trigger specific
events after the value change
* many2one (testUtils.fields.many2one.*)
clickOpenDropdown, clickHighlightedItem, clickItem,
searchAndClickItem: use a field name instead of a selector and
do all the complex mechanism to open, filter and highlight
many2one fields.
Joint work with aab, dam, ged, mge, svs and vsc.
* web_editor
- Restore the preservation of Odoo text-muted color (the rule became
!important with BS4 and had thus to become !important in the
preservation mixin).
- Preserve base design in the "new content" menu (which now uses
text-muted). Indeed, in some themes, the "new content" links were not
even visible anymore.
closesodoo/odoo#28666
Firefox when asked to block format (formatting over a block with
blockquote, h1, ...) has a special case for blockquote (it is documented
in https://developer.mozilla.org/docs/Web/API/Document/execCommand at
formatBlock command) and will wrap any element instead of replacing
existing block formatting.
Thus the code not expecting it was not able to remove a blockquote in
firefox once introduced.
opw-1903735
closes#28587
When we for example do ctrl+a in firefox, the selection is over the
container and not the content.
This is an issue when we apply a format, since the container could be
removed.
eg:
we have selection over `<pre>hello</pre>`, on firefox the selected
node is `pre`, on chromium it is `TextNode "hello"`.
if we remove the style, `pre` is deleted so firefox selection is
broken, whilst chrome has no issue since "hello" still exist.
There was also an issue when the selection was over the blockquote,
there was no error but the style could not be removed.
opw-1903738
opw-1903735
closes#28369
In mail template a link with reference such as:
${object.user_id.signup_url}
are often used.
These are template directives that are replaced when the mail is saved,
so when editing in the editor and they are prefixed by "http://" this
breaks the link which is not wanted.
Now link beginning with `${` are not prefixed anymore to prevent
shooting oneself in the foot.
opw-1906695
closes#28522
Embedding a video can't work because it embeds an iframe, which is not supported
by most email clients for security reasons.
(What happens when Gmail shows embedded videos in displayed emails, is that you
send a link in the email body, and it is at rendering that Gmail adds the iframe
into the page.)
So the bugfix solution is to hide the button.
Since there is an option "res_model" that allows us to know when we are in that
case, we remove the video option.
opw 1905497
closesodoo/odoo#28911
* web, web_editor
The logic which chose if the user text color was supposed to be used as
bootstrap "dark" text color or bootstrap "light" text color
(https://github.com/odoo/odoo/commit/8b2dbd1441d6713d9072db03e8d3cb6c2246410f)
was fine when using the default theme with default bootstrap but was not
working as intended in some themes.
This commit also introduces a more accurate and complex method to
determine the correct contrasted color in most cases.
closesodoo/odoo#28468
When the user previews a background color, the background image of the
snippet is removed and re-added if the user chooses not to pick the
color. The background-image was not correctly added for carousel items.
- Handle the case where one select-class is a subset of another
select-class of the same group e.g.
<... data-select-class="hello"/>
<... data-select-class="hello world"/>
- Handle empty values <... data-select-class=""/>
Note: both cases worked but were not displaying the active checkbox
correctly in the editor UI.
With https://github.com/odoo/odoo/commit/55131b8f5becdd3d4776f4c3e7e4288a0b185706,
we automatically add the known editor context (containing lang,
website_id, etc) when using the `this._rpc` method. Some RPCs needed
however to explicitely not send a value from this automatic context...
but this was not correctly implemented. This can now be achieved by
using the `noContextKeys` key in the `this._rpc`'s *options* parameter.
closesodoo/odoo#28322
Unsplash API requirements does not directly allow to store their images on
our server (We should use hotlinking unless the image is edited (cropped etc)).
Still, they have the `Image Beacon Alternative` to allow to store their images
on our server if we really need it with our use case.
With the Beacon Alternative, we should ping Unsplash server to notify an image
view.
To do so, we need to be able to recognize Unsplash imagesin the DOM, this is
why we are now using /unsplash/ in the URL.
The Unsplash image name should be the image ID as it will be the identifier
needed to ping their server.
This commit also adds credit to Unsplash in the media dialog next to the
unsplash input search.
It also add the `w-100` on the media dialog card as we lost that UI behavior
from BS3 to BS4.
opw-35060
closesodoo/odoo#27377
For example, if primary = alpha, the primary button option is removed
in the link dialog. When editing a primary button, this lead to broken
behaviors. Hiding the button does the trick.
Christophe Simonis