Commit Graph
1823 Commits
Author SHA1 Message Date
qsm-odoo d36d2ac5af [FIX] web_editor: fix broken design of non-full widget editor select
closes odoo/odoo#41889

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-13 17:18:13 +00:00
qsm-odoo 2dad879fad [FIX] web_editor: auto-trim values read on user value widgets 2019-12-13 17:18:13 +00:00
qsm-odoo 2feb17cc0a [FIX] web_editor, website: missing wait of async parts in left panel
- updateUI is async, most of the time it is really important to wait for
  its async parts.

- method options are now async and should wait for async parts and user
  choices before resolving their returned deferred.
2019-12-13 17:18:13 +00:00
qsm-odoo fab7cd3a79 [REF] web_editor: review left-panel datetimepicker
While it was working perfectly in normal flows, some elements would not
have worked correctly if the datetimepicker was used another way. This
was revealed while working on another task.

This commit also fixes some issues:

- The datepicker was not working in languages where the date format is
  different that the english one (the date was displayed correctly but
  interpreted as if it was using the english formatting).

- Because of summernote, the datepicker sometimes loses the focus and
  get it back directly... but this is enough for it to close. Now, we
  open the datepicker on focus, not on click, so that summernote only
  make it close then reopen right away (not possible to notice).
2019-12-13 17:18:13 +00:00
qsm-odoo c415f08f89 [FIX] web_editor: prevent overlay-disable when clicking on a datepicker
When clicking inside a datetimepicker but not on a control element,
the datetimepicker was left opened while the left panel options
disappeared.
2019-12-13 17:18:13 +00:00
Kishan Gajjar 81b0149a1b [FIX] web_editor: fix few CropImageDialog issues
whenever we crop any image we set few data attributes to the cropped
image but if we change a cropped image from media dialog (ImageWidget)
we should remove crop related attributes from that newly added image
so that newly added image can be cropped with correct data.
since https://github.com/odoo/odoo/commit/a473453b3166a381130d9bd6ec4851b9e1ecab26
we are setting 'crop:originalSrc' data to the cropped image but not
removing from media dialog.

this commit also avoids unnecessary creation of an attachment.

closes odoo/odoo#41779

X-original-commit: 4a15b44243b3edbc7b2350806fea1a58f5734332
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-12 09:46:57 +00:00
Romain Derie 1559750620 [FIX] web_editor, website: better handling of invisible title entry
Using `Title` as invisible entry had the benefit of being translatable
but has the issue to be displayed on mouse over which we don't want.
Using `string` will fix it and will still be translatable.

closes odoo/odoo#41646

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
2019-12-10 15:15:17 +00:00
qsm-odoo 90c672cd22 [FIX] web_editor: prevent widgets with no method to auto-update $target 2019-12-09 12:48:07 +00:00
qsm-odoo 2521578033 [REF] website, *: automatically refresh widgets on option change
* website, website_mass_mailing

Now, when any option method is called (editor left panel), the widgets
related to the targeted DOM is automatically updated. This is possible
to disable for a specific widget with `data-no-widget-refresh="true"`.

This commit also makes the `_refreshPublicWidget` method better handle
its async component: it is now "fully async" so the caller should wait
for its resolution before executing some other related code.
2019-12-09 12:48:02 +00:00
qsm-odoo 255be177e9 [IMP] web_editor, *: make option methods async
* website

Now, the option methods can be async. All the option methods are still
executed sequentially thanks to a Mutex at the snippet menu level.
2019-12-09 12:43:26 +00:00
b0941d19a0 [FIX] web,*: fix all tests and test utils to use native events
In this commit:
- transformed test_utils helpers to always trigger native events
- introduced new test_utils_create helper: prepareTarget
- updated qunit asserts to support Owl Components
- updated all misused helpers that would crash with the updated test_utils

Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Pierre Rousseau <pro@odoo.com>
2019-12-09 11:09:10 +00:00
Kevin Baptiste 6cbe824871 [REV] web: reverts update to fontawesome 5.11.2
This reverts commit ff1c35513a.

closes odoo/odoo#41480

X-original-commit: 116057b26e71db4692280463669f3e80d813ddcc
Related: odoo/enterprise#7110
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>
2019-12-09 10:33:36 +00:00
Romain Derie 1915fe3598 [IMP] web_editor, *: add new zone in left panel to handle invisible DOM
* website, website_mass_mailing

We only have one invisible snippet (newsletter popup) which is handled
by adding a yellow alert in the DOM in edit mode to be able to click
somewhere to open the snippet options.

As we will add some new invisible snippet (generic popup, cookies bar,
and probably more) this needed to be improved.

Now, any snippet having the `o_snippet_invisible` class will have an
entry in the left panel in a dedicated zone to edit itself. This also
allows to get rid of the yellow alert, making sure that "what you see
is what you get" in the editor zone.

task-2150966

closes odoo/odoo#41420

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-08 18:03:30 +00:00
fja-odoo 92fdbec889 [IMP] website, web_editor: add new chart snippet
Introducing a new snippet called Chart.
This snippet uses the lib https://www.chartjs.org/

6 types of graph are possible:
Bar vertical
Bar horizontal
Line
Pie
Doughnut
Radar

task-2092267

closes odoo/odoo#40051

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-06 17:59:59 +00:00
Romain Derie 699890d3f0 [IMP] web_editor, website: add new 'Countdown' snippet
This commit introduces a new snippet: Countdown.

The countdown snippet is composed of 4 circle countdown, one for every time
unit: seconds, minutes, hours and days.

When countdown ends, the user can chose between 3 possible actions:
1. Nothing
2. Show message: show a message once the countdown ends.
   The message will be displayed bellow the countdown (stopped on 0) or will
   replace the countdown depending on the option selected.
   The message can be edited through the website builder.
3. Redirect: redirect the user to the chosen URL. If the user is on the page at
   the exact moment the countdown reach 0, the user will be redirected
   automatically. If the user lands on the page after the countdown has reached
   0, there will be no redirection and the link will be shown bellow the
   countdown (stopped on 0) or will replace the countdown depending on the
   option selected.

The countdown layout can be customized in multiple ways:
1. By choosing to hide some time units. For instance, seconds can be hidden or
   only days shown.
2. By changing its size between small/medium/large.
3. By changing its basic design (circle, boxes, clean).
4. By changing its advanced design (shape, background, progress bar..)

task-2093081

closes odoo/odoo#39773

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-06 15:14:39 +00:00
qsm-odoo 75ebe51131 [FIX] web_editor: fix traceback on left panel input click
I removed a handler without removing the event binding by mistake...

closes odoo/odoo#41481

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-06 13:45:43 +00:00
Ravi Singh 5e7230b6bb [FIX] web_editor: remove useless 'o_small' style for colors
task-2151416

closes odoo/odoo#41473

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-06 13:18:05 +00:00
qsm-odoo 864cb9132d [REF] web_editor: do not select left panel input content automatically
Part of https://github.com/odoo/odoo/pull/41402

closes odoo/odoo#41402

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-06 10:05:55 +00:00
qsm-odoo 83fae16bb9 [REF] web_editor: review user value widgets scss
Part of https://github.com/odoo/odoo/pull/41402
2019-12-06 10:05:55 +00:00
qsm-odoo a41717bebf [IMP] web_editor: add left panel input on a new line by default
Before this commit, inputs were always a title followed by the <input/>
on the same line.

Now it follows the same logic as we-row elements: title on a line,
<input/> on a new line, except if the 'o_we_inline' class is used.

Part of https://github.com/odoo/odoo/pull/41402
2019-12-06 09:45:30 +00:00
qsm-odoo e4d4aab042 [IMP] web_editor: validate input entry with ENTER in editor left panel
Especially useful with a no-preview input.

Part of https://github.com/odoo/odoo/pull/41402
2019-12-06 09:45:30 +00:00
Samuel Degueldre 65262c5e3e [IMP] web_editor: allow options to target subelements of a snippet
Add the ability for a snippet option's method to target multiple
subelements of the option's $target using the data-apply-to attribute
with a jQuery selector. This is achieved by calling the method on a
proxy of the object where accesses to the $target are redirected to a
different object.

While it may seem preferable to just set the $target before calling the
method and restoring it after the call, as this would be much simpler
code, it is not possible as this breaks down under asynchronous
conditions, hence the need to operate on a proxy such that all
concurrent asynchronous operations have their own independent $target
available for their entire time of execution.

Part of https://github.com/odoo/odoo/pull/41402
2019-12-06 09:45:30 +00:00
qsm-odoo d7f4289166 [FIX] web_editor: prevent setting values of non-activable methods
closes odoo/odoo#41404

X-original-commit: 6af602fa676db19260a828a3cfd0befe3ba1ef4e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-05 10:59:48 +00:00
qsm-odoo b62b686066 [FIX] web_editor: fix some design issues with editor left panel
- Some layout broken when a scrollbar appeared
- The edit icon of background disappeared when the filename was too long

X-original-commit: d3419fed27147c92e673fb367657db8865a0d538
2019-12-05 10:59:47 +00:00
qsm-odoo 8180b46563 [FIX] web, web_editor: improve browser support for JS lazy loading
opw-2125858

closes odoo/odoo#41371

X-original-commit: d19982b7a22b04ab76c787b9adfffd24552eb5c0
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-12-04 16:40:03 +00:00
qsm-odoo 10a467e3e1 [FIX] web_editor: resolve conflict between tests and options mutex
In a normal flux, this happen when an option is hovered and left:

1) Hover event -> the widget goes in 'preview' state and notifies a
                  preview to the option

2) The preview is received by the option and, after an internal mutex
   resolution, the option enables its methods with the widget values.

3) Leave event -> same as (1), except leaving 'preview' state

4) same as (2), except receiving a 'reset'

Everything is fine and correctly managed... except if a JS code triggers
both hover and leave events in the same execution... and this is what
tests are doing. In this case, as (2) executes after an internal mutex
resolution, the points (2) and (3) were inverted, so the widget left the
'preview' state before (2) got the widget values.

Maybe the test system has to be improved, but this commit solves the
problem for this case explicitely.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 16:00:06 +00:00
qsm-odoo 3be9ae5672 [IMP] web_editor, *: automatically update snippet option UI on focus
* website, website_blog, website_sale

Some snippet option already needed to implement this by themself and now
that they use custom widget, this is even more needed. The long-term
goal is that developers should not have to override the onFocus method
or the updateUI method but only the _computeWidgetState method.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 15:49:57 +00:00
qsm-odoo fdac73e99d [IMP] web_editor, *: add new user value colorpicker widget
* web, mass_mailing, website

Introduced a new sub-widget for snippet options: we-colorpicker. This
allows to retrieve a color value (either a normalized css color or a
theme color name) to be used for a snippet option method.

This commit replaces the old 'colorpicker' snippet option whose behavior
is now simply achieved by defining an xml option using a we-colorpicker
widget in combination with the 'selectStyle' standard method.

This commit also adds the possibility to control the border-color of
elements alongside their border-width. Again, just a we-colorpicker
widget in combination with the 'selectStyle' standard method.

Note: this commit reviewed what the colorpalette palette widget
notifies. This is not a cssColor and a 'isClass' flag to say if it is
a css class or not. The colorpalette always returns a color string which
can be the name of a color like 'alpha'. This is up to the caller to
check if the color string is a css color or not with isCSSColor. In the
case it is not, the related code can read the actual color by reading
the related css variable.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 15:49:57 +00:00
qsm-odoo 216cf93b4d [REF] web, web_editor, *: review normalization of colors
* website

Review colorpicker methods to always allow to use normalized colors.
Also factorize some code in the color palette widget.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 15:49:57 +00:00
qsm-odoo b38253f400 [REF] web_editor, *: use widgets for left panel components
Before this commit, the rendering of inner content of the left panel
options was handled through _buildXXXElement methods in the options
widgets. Now they are handled through sub-widgets which also handle
the user events.

Each sub-widget is notified with the string value it should hold
according to the snippet option target and methods. Each sub-widget
notifies a string value following user interactions, which snippet
options can use to adapt their target through their option methods.

The current sub-widgets introduced by this commit are (others will
follow):

1) we-button
2) we-checkbox
3) we-input
4) we-select (typically containing multiple we-button widgets)
5) we-multi (typically containing multiple we-input widget)

Following this commit only 3 standard option methods remain, which can
be used with any meaningful widget:

1) selectClass

-> Same as before + handle the old 'toggleClass' method when used with
   a checkbox-like widget.

2) selectStyle

-> Same as old setStyle, introduced recently (simply renamed)

3) selectDataAttribute

-> Handle both old selectDataAttribute and setDataAttribute, introduced
   recently

The parameters these methods received are now:
- previewMode: same as before
- widgetValue: the string value the widget currently holds
- params: additional parameters (mainly dataset of the related xml)
    + params.possibleValues (all the possible values for the method,
      meaninful for a select or a checkbox)
    + params.defaultValue (the value that the widget would give if it
      even holds no value)

When defining a method in XML, the given value is the default value.
e.g. data-select-style="34px" data-css-property="margin-top"
-> if set on any widget, allows to retrieve a value from the user to
   customize the margin-top, the default value being 34px.
   -> if used with a we-input, allow to retrieve any value and an empty
      value will be equal to 34px
   -> if used on a checkbox, allow to toggle between no value and 34px.
   -> ...

Hopefully, detailed documentation about all of this will follow. Code
documentation should already be helpful.

Last note: the _updateUI method (replacing the old _setActive) is now
async (so does all the functions calling it). In particular, the _select
method is now async.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 15:49:57 +00:00
qsm-odoo 75ab52af9c [REF] web_editor, *: make options in charge of their rendering
* website, website_sale

Also make the "isTopOption" method a property.

This is done in preparation of better code for coupling sub-widgets used
to retrieve user value (button, input, colorpicker, ...) to actual
change in the edited DOM through snippet options methods.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 14:07:07 +00:00
qsm-odoo 0dd1f4595b [IMP] web_editor: add new way to edit data-* on a target
Now, the editor UI can suggest options the same way as select-class but
for editing a data attribute.

Note: the public widgets are now refreshed on data attribute changes
through the select-data-attribute and set-data-attribute methods.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
2019-12-01 14:07:07 +00:00
qsm-odoo 0b5f1fbead [FIX] web_editor: restore fa icons used in editor following lib update
Commit https://github.com/odoo/odoo/commit/ff1c35513aecef5fbc30f7c2f3834450e719714e
broke some editor icons.

closes odoo/odoo#41097

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-11-29 10:47:02 +00:00
David Monjoie 53323c7ce9 [FIX] web_editor: apply missing fix from saas-12.3 revert
closes odoo/odoo#41021

X-original-commit: 21c23050f100bab2c5377c37a6de40c4acf28ca8
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2019-11-28 08:05:00 +00:00
Kevin Baptiste ff1c35513a [IMP] web: update to fontawesome 4.7.0 to 5.11.2
FontAwesome 5 introduced new names for some icons as described on
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes

This commit replaces the old names to the new ones.

closes odoo/odoo#35826

Taskid: 2050241
Related: odoo/enterprise#5180
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>
2019-11-28 10:05:12 +00:00
qsm-odoo fbdc541f9c [FIX] web_editor: read both color and bg-color to find custom ones
This was broken during the recent colorpicker refactoring.

closes odoo/odoo#40925

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-11-27 09:36:27 +00:00
Nicolas Lempereur a9a2fba683 [FIX] web_editor: remove forced source mode
In e29c08969 source mode was reintroduced. Since complex template seemed
broken when it was edited, the feature of forcing source mode when there
is a `% if ` or `% set` template directive of 12.3 was reintroduced.

Since the direct breaking of the template was mostly solved with the
added line:

`options.prettifyHtml = false;`

the force source mode is not so much necessary and there was report that
it was not very clear.

In this commit it is removed, and if necessary could be reintroduced
later with clearer implementation.

opw-2123730
fix #40410
closes #40421

closes odoo/odoo#40458

X-original-commit: be30a3ba431cf24a5fcfdfedd0f9d9f73163c717
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
2019-11-18 19:28:21 +00:00
Andrea Grazioso (agr-odoo) 760ae910d4 [FIX] web_editor: restore debug assets in iframe
Open Mass Mailing in debug mode, create a new mass mailing,
choose a template for the body, check with the inspector the iframe.

The head of the iframe does not have the debug assets. This is because
the global variable relative to the debug mode gets temporary
overwritten before solving the promise.

For Gorash this has been done for:

* Performance as all the editor assets must be inserted into the iframe
assets
* As an indication to bugfixers that the fix must not be done in this
bundle as it is the exact same content as outside of the iframe and the
exact same content as previous Odoo versions.

Removing the override given that:

* If someone enable debug=assets he/she is aware of the performance hit
* A ticket has been opened because the iframe is hard to debug
without debug assets.

opw-2117649

closes odoo/odoo#40417

X-original-commit: 17c6952af3242c22bae2596f64b0addd04b9f9e0
Signed-off-by: Nicolas Martinelli (nim) <nim@odoo.com>
2019-11-18 11:49:11 +00:00
qsm-odoo 00022bd7fc [REF] web_editor: get rid of we-collapse elements
Now, we should either use:
- A we-select (in the end, same as collapse except it does not push the
  elements in the UI)
- A simple div to always display the elements

Part of https://github.com/odoo/odoo/pull/38959
task-2066614

closes odoo/odoo#38959

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-11-18 09:56:40 +00:00
qsm-odoo 5db73c12d3 [IMP] web_editor: increase option sections readability
Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:40 +00:00
Samuel Degueldre dfd98f49e7 [IMP] web_editor: rework background-sizing option
Previously, background size and position for snippets was configured in
a modal, the user could choose a "focus point", which is rather
unintuitive. They could also choose to use the "contain" background
mode, with or without repeat, or a third option, where they could
customize everything, from the background size in both directions to
whether to repeat the background in only one or in both directions.

This commit streamlines the background-sizing options, only the "cover"
and "repeat pattern" options have been kept, as they cover almost every
use case. Their configuration has been moved into the options menu for
consistency with the rest of the editor, and the background's position
is now chosen by clicking on the corresponding menu option, and dragging
the background to the desired place.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088304
2019-11-18 09:56:40 +00:00
qsm-odoo 01debf53f6 [IMP] web_editor: allow to temporary block preview overlay toggling
This will allow to do the following:

1) Show a preview overlay over an element
2) Block preview overlays -> the overlay at step 1 stays no matter what
3) Encourage the user to do something that edits what the preview
   overlay is currently showing.
4) The edition is finished, go back to normal by unblocking preview
   overlays.

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:40 +00:00
qsm-odooandSamuel Degueldre 688e21b6e0 [IMP] website, *: add slide management buttons for carousel snippets
* web_editor

This commit adds a slide counter in carousel snippets option menu, as
well as left and right buttons, this way the user can manage their
slides entirely from the options, instead of having to go to the block
itself to navigate to where they want before going back to the option
menu to add or remove a slide.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088291

Co-authored-by: Samuel Degueldre <sad@odoo.com>
2019-11-18 09:56:40 +00:00
qsm-odoo c879ac723b [FIX] website, *: no theme color suggestions during theme colors edition
* web_editor

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:40 +00:00
qsm-odooandfja-odoo ea994b0cbb [IMP] web_editor, *: review 'colorPalette' editor UI
*: website, mass_mailing

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2087383

Co-authored-by: fja-odoo <fja@odoo.com>
2019-11-18 09:56:40 +00:00
fja-odoo 22c5fc5dd2 [IMP] web_editor, website: generalize colorpicker
Currently we have:
- a colorpicker for background color of snippets
- a colorpicker for foreground and background text (topbar)
- a colorpicker for menu/footer/navbar/etc
These 3 are separate colorpickers with different options.

After this Commit
All 3 will use the same color palette wich allow you to select
theme color, common colors, custom color and transparent filter.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2087383
2019-11-18 09:56:40 +00:00
Samuel Degueldre f615cfda89 [IMP] website, *: rework snippet anchor system
* web_editor

Previously, the user could choose their anchor names using a modal
window, anchor names also have weird rules, this was not a great user
experience.

This commit makes the anchor button generate anchors automatically based
on the first title in a section, or the snippet name if there are none.
If the anchor name is already taken, it is suffixed by a number. After
it has been generated, it is also copied to the clipboard and the user
is shown a toast to tell them the anchor has been generated and copied.
The anchor is displayed in the toast along with an edit button that will
open the same edition modal as previously, but it is now less
restrictive.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088270
2019-11-18 09:56:08 +00:00
qsm-odoo bf5b4b6933 [IMP] website, *: introduce inputs in the left panel UI
* web_editor, website_sale

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:08 +00:00
qsm-odoo c47527b794 [IMP] web_editor: allow options to add UI in the overlay top bar
-> move the move buttons next to the drag button

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:08 +00:00
qsm-odoo c213afab86 [IMP] web_editor, *: review 'background' options' UI
* website

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
2019-11-18 09:56:08 +00:00