* portal
When there are too many items in the top menu, the menu is broken into
multiple lines (especially on medium screen resolution). This commit
implements a system like in the enterprise backend: the extra items are
placed in a "+" dropdown menu at the end of the top menu.
Also, review the direction used to open dropdown menus. The default is
now left-to-right (while it was right-to-left before) and JS has been
added to determine the safe direction:
- If last item: to the left instead
- If would overflow the window: to the other direction instead
Now the colorpicker option can be defined with a `data-color-prefix`
parameter which will allow toggling classes different than "bg-*".
(e.g. if the prefix is set to be "hello-", the colorpicker option will
allow to choose between "hello-primary", "hello-danger", ...).
Before this commit, when defining two sets of classes to be chosen
independently on a same element you had to define two options:
```
<div data-selector=".myElement">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Classes set 1</a>
<ul class="dropdown-menu">
<li data-select-class="a"><a href="#">A</a></li>
<li data-select-class="b"><a href="#">B</a></li>
<li data-select-class="c"><a href="#">C</a></li>
</ul>
</li>
</div>
<div data-selector=".myElement">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Classes set 2</a>
<ul class="dropdown-menu">
<li data-select-class="x"><a href="#">X</a></li>
<li data-select-class="y"><a href="#">Y</a></li>
<li data-select-class="z"><a href="#">Z</a></li>
</ul>
</li>
</div>
```
Now, an unique option can be used for this, allowing to not duplicate
the `data-selector` and not creating two JS options:
```
<div data-selector=".myElement">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Classes set 1</a>
<ul class="dropdown-menu">
<li data-select-class="a"><a href="#">A</a></li>
<li data-select-class="b"><a href="#">B</a></li>
<li data-select-class="c"><a href="#">C</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Classes set 2</a>
<ul class="dropdown-menu">
<li data-select-class="x"><a href="#">X</a></li>
<li data-select-class="y"><a href="#">Y</a></li>
<li data-select-class="z"><a href="#">Z</a></li>
</ul>
</li>
</div>
```
Before this commit, defining a snippet option began by choosing an XML
`data-selector` attribute to put on the option's <div/>. This selector
would then be used to find DOM elements on which to attach the option.
A recent refactoring added the `data-exclude` attribute, allowing to
define a selector that a DOM element must not match to receive the
option.
A new kind of need has arrived: allowing an option to be attached on a
DOMElement but making the option's effects be applied on a specific
child of this DOMElement. This can allow to regroup children options on
a main DOMElement.
To that effect, this commit introduces the optional `data-target`
attribute. If defined, its value is used as a selector to find the
option's `$target` inside the element found with previous rules. Note
that the system has been made smart enough to only add the option on
elements which indeed contain such a $target.
E.g. I want an option to appear in the customize menu of my custom
snippet's <section/> but will in fact control the toggling of a class
'super-row' on the `.row` (I don't want the option to be on the `.row`
otherwise it would not be in the main customize menu). All I have to
do is defining a
```
<div data-selector="section" data-target="> .container > .row">
<li data-toggle-class="super-row"><a href="#">Super Row</a></li>
</div>
```
(no JS required)
Note: a similar behavior was already present on the JS side of the
"colorpicker" option.
Depending on the speed of the runbot, errors may appear if one tries to
use a template that is not yet loaded. Templates are being
loaded and we add new template to read, the ready function does not
take into account new additions.
Avoid texts to be translated twice if some modules have the translated
value corresponding to the English source term.
To reproduce: create a translation for static xml (comment 'openerp-web')
with 'Modifier' translated by 'Tadaaa'. In french context, the 'Edit'
button in forms is translated by 'Tadaaa'.
Don't translate template in web_editor if we are in the backend because
the translations of all the modules have already been loaded and applied.
The rte_inline tour was failing on chrome because jquery selector in
chrome does not like a space in the style selector.
On the other hand, other browsers and phantomjs need the space.
This commit change the selector to find the element on chrome and
friends.
Fix over this one: https://github.com/odoo/odoo/commit/cae188514fa8b0a7c785a630ac4aff677b2071fa
The intent was to disable buttons in form views until html fields are fully loaded,
but it was not disabling the buttons for the following reasons:
1. It is looking for buttons in the DOM, although they
are not already attached into the body at this moment.
2. It was disabling the buttons only at widget start(),
so only once after "Empty Cache and Hard Reload".
We propose a better solution than disabling the buttons in the control panel:
when we click on "Save", the html field ensures that it is fully loaded while commiting the changes.
Summernote uses `document.execCommand` to apply most styles when
editing, leveraging the implementation to the browser.
Summernote is configured to use HTML styling (`'styleWithSpan': false`),
and in this case, browsers such as Firefox use HTML attributes for
styling text align, while Chrome still uses CSS for that. In fact,
`document.execCommand` is browser-inconsistent... but so is the
`styleWithSpan` option. Indeed, setting the option to `true` will make
Firefox use CSS property for alignment too... but not Internet Explorer.
So we might consider changing this option's value but this would not
solve the current problem.
Indeed, any CSS `text-align` style in Firefox takes precedence above
the element's `align` attribute, so when users were trying to align text
on stuff that was pre-aligned, they were unable to do so.
We can better explain the situation with this example:
A user tries to left-align in Firefox a `p.text-center` element, and
produces this:
```html
<p class="text-center" align="left"/>
```
(`align` attribute is ignored because of the `text-center` class)
On Chrome, this would be produced with the same steps:
```html
<p class="text-center" style="text-align:left"/>
```
With this patch, we actually make that HTML look like expected by the
user, no matter the browser he's using, by forcing the editor to use
the text-align CSS property. Note that the implementation is quite
ugly but had to take care of compatibility.
See https://github.com/odoo/odoo/pull/20900
(thanks to @Yajo for original PR)
For some reason, Summernote does not trigger a change event in some
cases. It looks like it happens in 'codeview' mode, and when the change
in question is only a backspace key event. Maybe it listen for keypress
and backspace do not trigger keypress event.
In any cases, the situation is that it is not easy to clear an html
field: going in edit mode, then selecting the content and pressing
backspace will not work before this commit.
With this commit, we specifically compare the value in the editor with
the current value to determine if the field is dirty.
Before this commit, it was not possible to save a page
containing a snippet with a SVG tag.
To support SVG elements, we need to use 'Element.getAttribute'
and 'Element.setAttribute' as mentionned in the documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
For more information, see GH-14485
In the case where:
- you are too fast editing a mass mailing, trigger an onchange (e.g. mailing_model) and then save
You can use the edit/save shortcuts to make yourself believe you are Flash Gordon
- your internet is too slow (Down: 4Mb/s, Up: 500kb/s, Latency: 20ms)
Before ths commit, the onchange will return *before* the field (the iframe actually) is loaded.
This onchange contains a signal *in* the body_html of the field to allow communication with the iframe.
If you save before the iframe is loaded, this body_html keyword will be saved.
After this commit we deactivate the save button until the iframe is loaded.
We could have gone for a python user error on the value of the body_html too.
But it would have added a supplementary click and potential reloading
OPW 783616
When editing a fa icon in the editor, the current fa icon was not
properly selected anymore.
Note: the code is still to be improved to handle all cases but this
will be done in master.
In the media dialog, when an image is selected, it has a colored border
to indicate it. Commit https://github.com/odoo/odoo/commit/e011d58bee140411ccfb1ef9115dddc090d573c3
made changes, part of them designed to "Improve the image dialog to be
able to select/unselect". While this commit was indeed doing that, it
was also breaking stuff: when selecting image(s) then performing a
search, the colored border disappeared while the images were in fact
still selected.
Fortunately, this stuff breaking is only due to code modification that
was made for no reason (so reverting part of the commit is enough to
restore the features while keeping the commit's improvements).
before this event, when editing an email template from the chatter
by adding an image through the mediaDialog, the message was always empty
if nothing more than the image was present.
this was because the html field was not marked as dirty,
the event responsible for the marking was not triggered.
After this commit, when sending solely an image from the media dialog,
the email sent does contain the image
opw 779167
closes#20817
* web_editor, website_twitter
- There can now be multiple animation widget on the same element
- Animation are destroyed before saving the editor (allows to not be
forced to do that destruction / code duplication in many cleanForSave)
- .data('snippet-view') is definitely dead
Christophe Simonis