* web_editor, website_blog, website_crm_partner_assign, website_links,
website_livechat, website_mail_channel, website_mass_mailing,
website_slides
Calling a model's method thanks to an RPC will now always send the
web_editor context automatically, making sure the method gets the
website_id all the time, removing the need to guess the current website
(now the get_current_website method uses the context website_id if any).
Note: other routes already have the website_id via request.env.context
if they correctly set website=True (this commit also adds website=True
for scss files customization routes).
This gives the user an overview of the possible actions,
including those he currently does not have installed.
It allows him to quickly install the missing applications
without having to go on the backend.
The commit also improves the existing actions:
- correct handling of the actions deferred
- add some translated terms
PR: #27110
task-1885419
Moved from the themes repository.
Now, users can use a snippet which showcases the latest blog posts as
soon as they install the blog app.
Note: in the future we may want to develop a snippet which can showcase
any model records (products, projects, ...).
task-1874216
Several applications have an index.html file that is used to fill the html
description of the module. However those descriptions are generally not
up to date: they contain outdated screenshots, feature descriptions are
not maintained, ...
Instead we just rely on the discover button that redirects on the application
website. It has more chance being up to date. Moreover updating a website
is easier than updating the index.html of a module.
This commit is related to task ID 47179 and 1861544. Related PR are #22689
and #25556. First one is about classic applications while second one is about
website applications.
Co-Authored-By: Nimesh Jethva <nje@odoo.com>
The 'form-horizontal' class have been removed; the '.form-group'
elements must now use the 'row' class for an horizontal layout.
The 'control-label' class was renamed to 'col-form-label'.
The 'help-block' class was renamed to 'form-text'.
The 'has-error' and 'has-success' classes have been removed and
replaced by a new system using the :valid and :invalid pseudo-classes,
when a parent has the 'was-validated' class. While this system is great,
it is not straightforward to use it in Odoo. Fortunately, BS4 provides
the 'is-valid' and 'is-invalid' classes as fallback. This commit
replaces the 'has-error' and 'has-success' classes by 'o_has_error' and
'o_has_success' classes (for JS compatibility) and use the 'is-*'
fallback classes. (The 'has-warning' class has no equivalent but was
unused in Odoo anyway).
Odoo used to declare two main colors: primary and optional (which are
purple and turquoise in enterprise). Those were respectively assigned
to the 'primary' bootstrap variable and the 'btn-primary' bootstrap
variable.
BS4, however, does not allow to have a different primary color for
buttons. Instead, the 'primary' color is used for all 'primary' related
components and utility classes, same as for all other colors. So, if we
want to keep our enterprise buttons green, our 'optional' colors had to
become our 'primary' color. The old odoo primary is then renamed to the
'odoo' color.
The palette of grays is now larger by default and is numbered from 100 to
900 alongside the $black and $white variables. The equivalence for older
variables and the way we used them is:
$gray-darker -> gray 900 (unused before)
$gray-dark -> gray 900
$gray -> gray 700
$gray-light -> gray 600
$gray-lighter-darker -> gray 400 (the old variable was created by us)
$gray-lighter-dark -> gray 300 (the old variable was created by us)
$gray-lighter -> gray 200
Fortunately, the 'lighter' variations we created fit well in the default
BS4 system ! Unfortunately, our $gray-lighter which carried the same
function as $gray-200 (see above) is very close to the new default
$gray-100 and quite distant from the new $gray-200. This will be handled
in the next commit.
Odoo made the bad choice of using the 'btn-sm' class for every button
instead of configuring the padding for default 'btn' to be smaller.
In BS4, the style of btn-sm is actually more complex, lowering the
font-size too. Also, btn-xs was removed so we would not have the
possibility to display smaller button than our default ones.
This commit removes btn-sm wherever it was used. Unfortunately, this
might remove it at some places where it made sense but this can be
restored in a second time.
The system completely changed. I also had to adapt classes to new
screen breakpoints.
hidden/hide -> d-none
show -> d-block
hidden-xs -> d-none d-md-(block/inline/...)
hidden-sm -> d-md-none d-lg-(block/inline/...)
hidden-md -> d-lg-none d-xl-(block/inline/...)
hidden-lg -> d-xl-none
visible-xs-* -> d-* d-md-none
visible-sm-* -> d-none d-md-* d-lg-none
visible-md-* -> d-none d-lg-* d-xl-none
visible-lg-* -> d-none d-xl-*
hidden-print -> d-print-none
visible-print-* -> d-none d-print-*
...
and all possible combination of those had to be handled too.
media queries that target a specific screen size handled by bootstrap
have now a more convenient way to be defined:
```
@media (min-width: $screen-sm-min) { ... }
->
@include media-breakpoint-up(sm) { ... }
```
```
@media (max-width: $screen-sm-max) { ... }
->
@include media-breakpoint-down(sm) { ... }
```
```
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
->
@include media-breakpoint-only(sm) { ... }
```
```
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
->
@include media-breakpoint-between(sm, md) { ... }
```
Also, bootstrap has changed the values for its default screen sizes:
------------------
| BS3 | BS4 |
------------------
0 | XS | XS | -> Portrait Mobile
576 | / | SM | -> Landscape Mobile
768 | SM | MD | -> Portrait Tablet
992 | MD | LG | -> Landscape Tablet / Small Desktop
1200 | LG | XL | -> Desktop
------------------
While it is possible to configure BS variables to behave as BS3, we took
the decision to keep the BS4 variables untouched. BS4 system seems
indeed better and having the purest bootstrap possible is better for
Odoo to be used as a framework.
BS4 do not provide vendor prefixes scss mixins anymore as it is meant
to be used with the 'autoprefixer' library. As we only support the last
version of every major browsers in Odoo, we took the decision to not
use the library as it was also complex to integrate in Odoo. We decided
to do the library's work by hand if it ever become necessary.
- JS Modals were not correctly built anymore, their .modal-body element
was duplicated and many without-effect JS lines were introduced (as a
side effect, the form view design was broken when inside modals)
- Tests were changed to make bugs go unnoticed. For example, the media
dialog functionnality was entirely broken because the .modal-dialog
element was not receiving the correct class anymore.
- The JS translation function is _t, not _
- Do not use the <title/> tag as a regular DOM element, it is meant to
be unique, in the <head/> section
- CSS rules were added to the utils.scss file, which is meant to contain
functions and mixins, otherwise, the rule is duplicated in every asset
- Some icons were still broken, as missed by https://github.com/odoo/odoo/commit/f90cf060a3cfeb37a67bec83264c0aaab8892b56
- Tests were changed to use [role="dialog"]/footer/header in their
selectors without any reason, this commit restores some of that to
avoid rebase conflicts with the BS4 work.
- ...
Note: other elements should still be discussed, like the direct use of
the 'o_form_label' class in views definition... but those do not cause
direct problems.
Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable.
This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader.
* [IMP] Labels must have a for attribute. Improve accessibility.
* [IMP] Better error message when trying to read a missing cached value
* [FIX] Add some aria-label and title attributes for screen readers.
* [FIX] Template name is not included in the error message in case of SyntaxError in QWeb
* [FIX] Improve the Tour failed at step error message to be more explicit.
* [IMP] Add aria-labels
* [FIX] Add missing aria-label on failing test
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views and many2many tags
* [IMP] Add some checks on views for accessibility.
* [IMP] Add `alt` attribute on `img` tags.
* [IMP] Add aria-label and title on non-described icons
* [IMP] Add button role to widgets with btn class
* [IMP] Translate aria and formatted attributes.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [IMP] Add aria attributes on progress bars
* [IMP] Improve accessibility of basic widgets
* [IMP] Change main layout to more semantic tags
* [IMP] Add menuitem role when missing
* [IMP] Remove wrong role='presentation'
* [IMP] Improve accessibility of tab panels
* [IMP] Add aria-invalid on invalid fields
* [IMP] Add aria-sort on ordered columns
* [IMP] Add role on alerts
* [IMP] Use dialog role, header, main and footer tags for modals
* [IMP] Add labels on o_status
* [IMP] Improve accessibility of kanban view with feeds and articles
* [IMP] Add alerts in case of new messages
* [IMP] Add widget, navigation or img role to aria-labelled items
Convert content so that the assets compile on app installation. The
style is still broken after this as the variables/mixins/... are not
defined in the right order (as it did not matter in LESS but does in
SCSS).
This commit basically changes:
- Variables: @var_hello -> $var-hello
- Mixins: .mixin_world() {} -> @mixin mixin-world {}
- Classes used as mixin: .my_class() -> @extend .my_class
- Here there were no other solution than to convert the use of
a mixin call by the use of an extend as a first approximation
- LESS functions -> SCSS functions (e.g. fade -> rgba)
- Move first variable definition before the variable is used
- Still need to make sure last variable definition is at the
right place
- Remove useless snippet background suggestions (only one button to
open the media dialog directly)
- Show meaningful-only tabs in the media dialog (no document as
background, ...)
- When editing a background shows the background suggestions first and
show the background suggestions last for standard images. Technically,
this is done by filtering on the name/fname of the attachments and
adding magic name parts to the fname on image upload (e.g. when
uploading an image from the media dialog when customizing a bg, the
uploaded image will automatically be marked as a background). Note:
there were discussions to implement this feature with a tag system for
ir.attachment/s but the implementation's cost was too great in regards
to the feature.
- When editing an existing link or creating one from selected text, do
not show the "Link Label" field in the dialog; it was confusing. Only
show that field when adding a link at the cursor location with no
selected text.
Before this commit and since the huge JS refactoring, when you were editing
a blog post it wouldn't save your modifications if you touched the title or
subtitle of the blog.
This was due to title & subtitle getting considered as the cover itself
when saving (_saveElement) because they are inside the cover (in a HTML point
of view).
So if you had modified both the cover, the title and the subtiltle, it was:
1. Saving the cover
2. Saving the cover again
3. Saving the cover again
Now, _saveElement is called as it should, for the same case, it is:
1. Saving the cover
2. Saving the title
3. Saving the subtitle
website.page = old ir.ui.view with page=True
website.redirect is a new mechanism to replace in the futur the ir.attachment
mechanism of redirect.
From now, we don't have a specific /page controller to serve 'page'.
We use a new model website.page which is rendered if none route matches the url
and that the field 'url' on website.page matches the request.httprequest.path.
The order to serve a path is:
- Routes defines in controllers (/shop, /blog, ...)
- ir.attachment with name matching the path
- website.page with url matching the path
- website.redirect with url_from matching the path
- 404
To improve:
- allow regexp in website.redirect model
- allow to edit the view_arch from the page.management via redirect backend
(needed when traceback in the page, or when modifying a js/css/less/...)
* mass_mailing, payment, point_of_sale, portal, survey, web, web_tour,
website_blog, website_crm_partner_assign, website_event,
website_event_questions, website_form, website_forum, website_gengo,
website_hr_recruitment, website_links, website_mail,
website_mail_channel, website_mass_mailing, website_quote,
website_sale, website_sale_options, website_slides, website_twitter
This commit reviews the whole "JS side" of the web_editor and website
apps. This is a first step to be able to improve them with new and
better functionnalities; this commit is not supposed to change any
visual behavior.
The main goal was to achieve a structure similar to the backend one.
Now, the frontend side also has a root widget (like the WebClient)
and all other widgets are attached to it one way or another. This allows
the benefits of using the 'trigger_up' functionnality for example.
As RPC are now mainly done with the `this._rpc` functionnality (being
possible thanks to the parent hierarchy), the frontend will also be
possible to test thanks to QUnit in a future update (besides the "text"
editor side which still requires a refactoring to be able to do that).
---
Here are some of the changes:
(-) conventions and documentation
The code has been updated to follow JS conventions and a lot of code has
been commented (around +2000 lines of comment). This also means that
lots of functions have been renamed to use camelCase or simply to make
their name understandable.
See https://github.com/odoo/odoo/wiki/Javascript-coding-guidelines.
(-) deprecated: web_editor.base
The "web_editor.base" module has been split and does not force the
modules which require it to wait for DOM ready anymore. This was indeed
slowing loading times, but also prevented to use some modules in some
contexts (see the LESS editor use in web_studio which is the subject of
another task).
Now the "editor context" can be got thanks to the "web_editor.context"
JS module with its "get" function.
The "web_editor.base" module should probably not be used anymore (see
its code and recent updates).
(-) new: web.dom_ready
If a JS module should wait for the DOM to be ready to be executed, a
new JS module has been created: "web.dom_ready". This should always
be used in a module which only want to instantiate stuff. Do not
extend (or worst, include) classes after DOM ready.
(-) website.website
The "website.website" module has been split. "website.website" does not
return anything useful anymore, it just initialize some miscellaneous
stuff, without waiting for the DOM to be ready. You might want to check
"website.utils", "website.content.compatibility" or `WebsiteRoot`. Also
`website.form` has been deleted (use `this._rpc`), so has been
`website.error`. `website.prompt` will be removed in a future update to
be replaced by `Dialog.prompt`.
(-) widgets are great
Many classes which were not widgets are now widgets. This allows them to
use the 'events', the 'xmlDependencies' and the 'this._rpc' features for
example. Here are some of the main ones:
- Snippet options: these were classes with a `$el` for the menu element
and `$target` for the customized element. This is still the case
but following standard `Widget` structure (one exception: using
`this.$(...)` searches in the `$target` as before this update).
- Snippet animations: instead of class instances with a `$target`
element which can be `start` and `stop`, these are now standard
widgets which can be `start` and `destroy`. `this.$target` is
an alias to `this.$el` for ease of compatibility.
- Snippet editors: instead of class instances in charge of an editor
overlay, these are now widgets. Each "child" snippet editor is
properly attached as a "child", which allows editors to communicate
and to be properly destroyed.
(-) root widgets and website navbar
The frontend is different of the backend. In the backend, the page has
an empty <body/> element and all the components are instantiated from
parent to children (i.e. the `WebClient` is instantiated and is in
charge of instantiating the `ControlPanel`, etc). The frontend cannot
work like that on page loadings as they are way more frequent than in
the backend and we do not want them to flicker. A frontend page is
loaded as a <body/> element which already contains the website navbar
and its menus and the whole content page. JS code has to be "attached"
to these existing elements. This is possible thanks to the `RootWidget`
instances and the specialized `WebsiteRoot`, `IframeRoot` and
`WebsiteNavbar` (see code for details).
(-) lazy loading
No more (or at least a lot less) XML/JS has to be loaded on page
loading, thanks to the use of the `Widget.xmlDependencies` feature.
XML which have to be lazy loaded is loaded only on related Widget
instantiation if necessary, which allows to execute a lot of JS code
before the DOM is ready and to start many widgets on DOM ready (not
later). A visual benefit of this is clicking on the 'edit' button as
soon as it is possible: before this commit, this was sometimes not
doing anything as event handlers were not binded yet.
Still a possible exception: loading the session and locales. This may
be asynchronous stuff which is still required before widget
instantiations but this will be the subject of another task.
(-) deprecated code and code location
More than reviewing code and organizing it, many apparent dead code was
removed. More importantly, mislocated code was put in the right app.
This is the case for snippet animations which is a concept for website
apps but was defined in the web_editor app, or some translation concepts
which were part of website but should have been part of web_editor.
---
There are probably more things to say about this commit but I will let
the comments speak for those.
There was two main problems with the feature
- The author name was not properly fetched so the feature which was
supposed to add the author of the blog post in the tweet never
worked -> this commit simply deletes it
- The code was considering the url length in the size of the tweet,
so if the url was 135 characters long, it considered that only 5
characters have to be taken in the selected text... which is wrong
as twitter URL are all shortened to 23 characters by twitter
opw-741530
The RPC system was not completely satisfactory, we decided to prepare
the future and do it properly. This commit introduces the new rpc
system, which replace the previous new one. We now simply have a
method, this._rpc, which takes a dictionary of parameters. The idea is
that depending on the parameters, it is able to add correct default
value when necessary.
For situations where we don't have the this._rpc method, we can use the
rpc.query method, which takes the same arguments, but directly calls
ajax.rpc instead of triggering up some events.
Change color #a24689 to #875A7B
Commit https://github.com/odoo/enterprise/commit/8ac1c19fac7615fecd51e670f798d13158a4e53c
changed the odoo interface violet by changing the main LESS variable
but forgot there was many direct occurences in XML/HTML/... (for
example for the mobile browser color).
Even if it's community the odoo interface violet is used at many places
(module description, XML demo data, ...).
There was no bug but now the behaviors are more consistent :
- Demo data now declare a black invisible filter instead of nothing.
This allows user to see the effect of filter intensity option
(otherwise it had no visible effect since there was no filter color).
- If the filter intensity is set to "None" (invisible filter) and that
a filter color option is highlighted or chosen, a "Low" filter
intensity is automatically highlighted or chosen so that the user see
the filter color he is chosing (instead of having to choose the filter
intensity first).
- Hide the "Size" option on the blog list page since it has not visible
effect there.
- Some code "performance" improvements in option selection.
! Note forward port: this is a partial backport, ignore when conflict
For some strange reason, the cover_full class was added when the cover
image was changed, without checking if the cover_narrow class was
already there. The cover was then a hybrid cover_narrow cover_full.
The problem was reinforced by the graphene theme which does some
animation on cover_full covers.
* web_editor, website_blog
Since recent refactoring, web editor dialogs automatically trigger
an event when closed (saved or cancel). The problem is that there
still was manual trigger of those events or variants ("save" instead
of "saved").
To prevent multi-saving and be consistent, all save events are now
automatically triggered on save/close (no more manual) and the event
name is "save".
Adapt the default content of blog post to be a valid website snippet.
Previous content was not entirely possible to remove (there still was
a remaining .container) and was not easily customizable (user had to
remove it if he wants something great).
Note: maybe we should adapt the snippets so that they are callable with
custom content or do something like what has been done for default
content for job positions (see commit 00cfb0889b).
* crm, project, website, website_event, website_blog, website_forum,
website_sale
Eg: the tour 'shop_buy_product' is extended by the website_sale_options
addons to add a step to close a modal.
The current solution was requiring the module that defines the tour
to extend, then add/remove steps in the "step" key of the tour
definition.
Some of the problems with this method were:
* The "register" method calls the "update" method to immediately
search for tip to place once registered (as register may be called
after the DOM is ready). So extensions of tours were happening after
the tours were started (and the tours were not restarted).
* The addition/removal of steps was happening after they were filtered
according to the "edition" key.
To allow extension, the system is changed as follow:
* The "register" method now only saves the steps and options without
modifying them and does not call the "update" method.
* Once the DOM was ready, the tour service started listening to DOM
mutations and called the "update" tour method. Now, this "update" call
is replaced by a "_register_all" call, on DOM ready and at the end of
the current call stack (which makes sure all modules are loaded). This
"_register_all" method marks the registered tours as ready after having
filtered the steps according to the "edition" key and initialized the
current step to trigger.
* Also, tours can now define a "wait_for" option which allow them to
be marked as ready for run and update after the given deferred. Those
tours can now also be extended without having to wait for the deferred.
PhamtomJS must wait for the "ready" key to be true to run the tour.
* Isolate website_blog style
* Simplify/Correct the cover option JS
* Allow to modify the cover from the blog list page
* Change cover layout (use a more conventionnal odoo design with a
div which is full width, which contains a container(-fluid) then its
content) -> easier to customize.
* Refactore code to be understandable
* Change behavior of opacity filter: before this commit the cover
filter was not intuitive and did not work on IE or Edge, it mixed
the color of the bg-image and the bg-color in a complex way and the
opacity was just controlling if the image was visible clearly or not
(which led in general to ugly style if the opacity was used). Now, the
color in applied *on top* of the image so that its color changes the
hue of the underlying image. The opacity value controls only the
opacity value of the color to mix.
[MIGRATION] Note: as the opacity behavior has changed, the exact same
behavior is not reproductible at all. But for the change to make a bit
of sense in old databases, this should be applied for the field
"cover_properties" of blog posts (with changes in layout):
if cover_properties.background-color != "oe_none":
cover_properties.opacity = 0.6
else:
cover_properties.opacity = 1.0 - cover_properties.opacity
Christophe Simonis