This commit adds webgl image filter to the existing image options,
including a custom filter that lets the user access color-correction
options (saturation, brightness, contrast, sepia, ...) as well as
blending modes for color filters.
Part of https://github.com/odoo/odoo/pull/53114
task-2279190
closesodoo/odoo#53114
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: web_editor, website_blog
Unfortunately, this feature revealed a new batch of flaws in the
editor widgets system so some hacks were made to make it work. We will
always have the time to improve the pure technical side later.
This commit also separates the notion of color filter from the notion
of parallax. A color filter can now be applied independantly, when
there is either a background image or a background video. Applying a
color filter on top of a background video is actually a new feature.
Applying a color filter on top of a background image is actually now
achievable by two different ways: this new color filter layer or by
applying the color transformation on the image itself via the related
option. Depending on the user case, both could make sense at the same
time, but more importantly: having a CSS color filter is useful for
using those for default Odoo content (e.g. like the current contact us
page where we use a cover banner with an image with a black filter on
top of it: doing that without CSS color filter would mean to alter the
image directly which would not be ok when the user changes the image).
Also, sometimes you want the unfiltered image on a page and the exact
same one but filtered on another (for example: forum images).
Note: this commit also "fixes" an issue: the optimization feature for
images when parallax was enabled was not available before.
Part of https://github.com/odoo/odoo/pull/47313
task-46147
This commit adds a new snippet option allowing the user to choose one of
a series of SVG shapes as their background, or to be overlaid over the
background image of a snippet and to customize the colors of those
shapes.
Part of https://github.com/odoo/odoo/pull/53017
task-2210790
closesodoo/odoo#53017
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website_blog
Previously, background colors, images, and videos could all be applied
on the same section, such that the image can be used as a fallback for
the video, and the color as a fallback for the image. However, if you
wanted to change the background color behind the background image, the
background image would be removed. The background image and background
video also shared the same widget to pick the image or video.
This commit adds a background-type toggler, where the user can toggle
the background color, image and video individually. It also makes the
video picker into its own UserValueWidget, such that the user can pick
both an image and video without overriding the other.
Part of https://github.com/odoo/odoo/pull/53017
task-2210790
*: website, mass_mailing
In continuity with the nline crop, in an effort to make the image
workflow as seamless as possible in the website editor, the image
optimization feature has been moved out of the modal which could be
opened through the media-dialog and into the left panel.
This commit adds a quality slider and a width selector, as well as a
preview of the image's weight to the left panel, and removes the
image_optimize dialog.
This commit also introduces the possibility to add a color filter on
images.
Part of https://github.com/odoo/odoo/pull/51517
task-2192755
closesodoo/odoo#51517
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
In the next commit the crop functionality will be made into an inline
widget instead of a modal dialog, as such, the name no longer makes
sense.
Part of https://github.com/odoo/odoo/pull/51517
task-2192755
*: mass_mailing, website_blog, website_forum, website_hr_recruitment
Deprecate alpha, beta, gamma, delta and espilon color names and now use
a new color system: o-color-x, with x from 1 to 5.
This will allow to review the colors of all themes to have nice visuals
for the new color combinations classes, without breaking the current
uses of bg-alpha, alert-delta, etc in current websites of customers
(by keeping the old color and classes for compatibility).
This will also allow to uniformize all themes under the same conventions
to enforce BS color override:
- o-color-1 used as primary (as before, for alpha)
- o-color-2 used as secondary (as before, for beta)
Before, some themes were not following the 2 guidelines. The users
using those themes will simply have the possibility to choose o-color-1
and o-color-2 colors accordingly to restore their website without
breaking the new system features.
Another change is that those colors are defined through color palettes
and not theme color palettes. This will avoid them to generate automatic
bootstrap classes which we don't want (alert, btn) and generate the one
we want by ourself.
Note: for mass mailing, the colors and classes also have been renamed
but the system stays unchanged.
Part of https://github.com/odoo/odoo/pull/45856
task-2197038
View rendering from javascript has recently been made to check
permissions (See commits 64d0dab0a6
through ccc98e0169). Some assets required
by the iframe editor are rendered in JS so that they can be injected
into the iframe, but their permissions had not been updated, causing a
crash when trying to create or edit a mass_mailing campaign.
This commit fixes that by adding groups="base.group_user" to the
required templates.
closesodoo/odoo#51598
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This lib is also used by the Gantt view, so we move it to the
common basis between web_editor and web_gantt, which is web.
Part of task 2205607
closesodoo/odoo#51606
Related: odoo/enterprise#9740
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Stop using the colorpicker dialog in the colorpalette widget.
Integrate the colorpicker widget in the colorpalette widget. Of course,
the colorpicker behaviors are adapted so that no useless rerendering
of the colorpalette is made on each value change.
The 'reset color' button is now a button like the other colors, no need
for a 'color_reset' event anymore. It is removed and replaced with a
'color_picked' event with color being an empty string. The clear button
now also work on hover.
Also, the topbar colorpalette for text and text background colors now
has the exact same behaviour as the background colorpalette: adding
color preview on hover.
The colorpalette now also closes on 'enter' keypress.
Part of https://github.com/odoo/odoo/pull/46088
task-2195313
closesodoo/odoo#46088
Related: odoo/enterprise#8696
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* = mass_mailing, web_editor, website_crm, website_event, website_form,
website_forum, website_hr_recruitment, website_mail_channel,
website_mass_mailing, website_sale, website_slides
When an outdated snippet's option are activated we display a warning
in the left panel that inform the user about the potential
malfunctions.
To do so the snippet's template key is added to the snippet as
data-snippet.
If a snippet is "t-call" inside another snippet, it will need to use
t-snippet-call instead of t-call to have the key on himself.
Those unique keys are used on snippet selection to retrieve the
snippet's version in the left panel and compare it with the currently
selected snippet's version. Versions are describe with data-vcss,
data-vjs and data-vxml. If a snippet's key is not in the left panel we
consider that snippet as outdated.
Added some tests to ensure that t-snippet and t-snippet-call really have
their template key as data-snippet
Adapted the views to the data-snippet changes adding
data-snippet="tmpl_key".
Part of: https://github.com/odoo/odoo/pull/44569
task-2189669
closesodoo/odoo#50254
X-original-commit: 28a6cd49b6e87b75c2e70771e241c41778bf9e87
Related: odoo/enterprise#10236
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
While the edit mode interface is full of useful things, it also adds a
lot of clutter, and alters the page's width and thus, its layout. This
commit adds keyboard shortcut for website editors to use, and allows
them to enter a "fullscreen" mode that hides the editor interface while
remaining in edit mode, allowing the user to have fewer distractions
while editing text content, and a closer rendition of the page's final
layout while editing.
For this, keyboard shortcuts were required, and a few other useful
shortcuts have been added, such as alt-1,2,3 for the navbar, just like
in the backed.
task-2126915
closesodoo/odoo#46953
Related: odoo/enterprise#9295
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Due to the infamous web_editor revert, summernote assets filesa are once
again created and stored in DB, but because they do not contain
'assets_' in their name, they would show up in the media dialog. This
commit fixes that by prefixing the created summernote assets file with
'assets_'
closesodoo/odoo#45298
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* website, mass_mailing, website_event, website_form,
website_mass_mailing, website_sale
Now the user can save snippets to use them on other pages.
task-2120409
closesodoo/odoo#40408
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
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
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
Just after we first added the library in Odoo (in april 2018), the
library was released in its last and deprecated version (4.0.0). At the
same time, the author indeed split its 'cropper' library into 2 parts:
'cropperjs' which is the core of the original library without jquery
and 'jquery-cropper' which is a jquery wrapper of the 'cropperjs'
library. This commit updates our code to use the latest version of those
two libraries.
Note: the commit also removes the lazy loading of the library which is
useless and maybe breaking since it comes with the editor assets which
are themself lazy loaded.
Note 2: we may want to remove the jquery wrapper in another update and
simply use the standard JS library.
Part of https://github.com/odoo/odoo/pull/36880
task-2059480
closesodoo/odoo#36880
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* website_forum, website_profile
- Share some code between website_forum and website_profile by exposing
a function in web_editor to instantiate a wysiwyg instance on a
textarea
- Use no-lazy loaded JS to add a visual loading effect while the
wysiwyg is not yet available.
This is made in preparation of task-2024197
(see https://github.com/odoo/odoo/pull/35749)
Thanks to @stefanorigano
closesodoo/odoo#36581
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* mass_mailing, note, website, website_blog, website_form,
website_mass_mailing, website_sale
This commit, unfortunately, mixes three things:
- Restoring as much as possible the scss organisation to allow styling
the web_editor UI properly.
- Fixing some bugs like a border around the page once the editor is
loaded, no ability to scroll the snippets, etc
- Introducing a whole new UI for snippet options: a left panel instead
of the old dropdown & button overlay.
Note: this commit also do some linting and ES6 convertion even though
some of it has been done in the parent commit.
Note 2: some elements that were removed are still styled in the POS apps
but this is because part of a feature was removed while leaving dead
code behind, this is handled in another PR which is to be merged
(https://github.com/odoo/odoo/pull/36136).
Part of https://github.com/odoo/odoo/pull/36068
task-1942370
closesodoo/odoo#36068
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* mass_mailing, point_of_sale, website
- Lib files were included twice
- Variables files were split but added multiple times in the same assets
bundle
- Useless assets templates were defined or split
- ...
Part of https://github.com/odoo/odoo/pull/36068
Related to task-1942370
Since we reverted the saas-12.2 editor in favor of the 12.0 one,
we faced a dilemna regarding how the editor iframe is handled in
mass_mailing.
The 12.0 version was using a special controller to get the website
assets required for mass_mailing while the saas-12.2 version used
a completely different mechanism that was, obviously, not handled
by the 12.0 version.
We did not want to reintroduce the old controllers who were
considered to be a hack to load the assets in the mass_mailing
iframe. However, we were very cautious about changing the editor
itself to avoid introducing new bugs in the editor core of 13.0.
The approach we chose at the end, is to use the loadAsset mechanism
introduced in saas-12.2 to load the necessary assets and inject them
in the mass_mailing iframe. This did not reintroduce the controllers
nor did it require to change the code of the editor itself. However,
it required moderate changes to the wysiwyg interface.
Part of PR 35677.
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
These modifications crystalize the behavior of the old editor, even
if it makes less sense than the behavior of the saas-12.2 one.
In some cases, the only reasonable adaptation we could do for 13.0
was to delete the tests, as these tests relied on mechanisms of
the newer version of summernote introduced in saas-12.2 which
cannot be easily replicated in the older version from 12.0 that
we are reintroducing in this PR.
It is sad to see these tests go, but we knew this was going to be
something we would lose in reverting back to the older editor.
That being said, since these tests were not present back in 12.0,
we are simply back to the 12.0 state of things, not worse. Don't
weep for them though, they will be back in Odoo 14.
Part of PR 35677.
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
This commit reverts the saas-12.2 editor by putting back the editor
of Odoo 12.
The saas-12.2 editor was an intermediate work between the previous
editor of Odoo 12 and the new one slated for Odoo 13. It was unstable
but it was supposed to be replaced by the new editor of version 13.
However, since the new editor has been postponed to Odoo 14, the
saas-12.2 one would have been staying in Odoo 13, which would have
been a nightmare to maintain. To avoid this outcome, we chose to
put back the 12.0 editor in its place.
This has the particular advantage that Odoo 13 will share the same
bugfixes as Odoo 12 and 11 as they all run under the same core
editor, while the saas-12.2 one would have been an entirely
different beast to maintain.
This is a partial revert of f2969923.
Part of PR 35677.
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
The reason this widget was moved is that the next improvement
([IMP] base: Configure document layout) defines a new field (FieldColor)
which needs to call the colorpicker dialog inside of the base module.
This couldn't be done while the dialog was located in the wysiwyg assets.
* website, mass_mailing, web_editor
This commit adds various improvements in newsletter snippets as follow:
- Improves UI for newsletter popup.
- We only had one popup for all websites. Now, we can have a different
popup for each website.
- The popup was not appearing on mobile/tablet devices. Now, in
mobile/tablet devices, the popup appears automatically after 5secs.
- Added the ability to customize the whole editor popup like any
editable area (background colors, etc).
- User needed to enable popup snippet from the settings. We removed that
setting so now popup snippet will always be available.
- Added new snippet "Newsletter block".
- Display notification after successful subscription the same way for
all newsletter snippets.
Closes https://github.com/odoo/odoo/pull/29353
task-1903256
closesodoo/odoo#29353
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
In order for the map view to work properly:
- I moved scss property to a file only scoped to website module.
- moved the definiton of "partner_latitude" and "partner_longitude" from
base_geolocalise to base/res.partner
closesodoo/odoo#32487
Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>
* = website, website_blog
The goal is to give the user an opportunity to optimize his images before using
them.
For this we introduce a preview/configuration dialog after every image upload,
where appropriate default values are filled for the quality and resolution,
based on where the image is going to be used. Since this is not going to be
perfect all the time, we still allow the user to configure them, and we display
a preview to ease this process.
Indeed it is important for SEO and for usability in general that the images are
as light as possible in size.
Technically the original image is uploaded and saved first, and then it can be
optimized. This way the upload only happens once, and the preview can be
computed from the already saved image.
task-1930726
PR: #31208
Issue: wysiwyg asset slow down the loading of the website, error
inadvertently introduced: https://github.com/odoo/odoo/pull/29775
The assets are now loaded assynchroneously, when the editor is needed,
its assets will be loaded.
closesodoo/odoo#30700
* Creating a new structure by transforming all the plugins in the
library using the odoo inheritance system. Plugins are easier to
implement with the AbstractPlugin to add Odoo behaviors.
* From now on, the methods of the library (in this case Summernote) can
no longer be called by other modules or files. Only the wysiwyg
widgets can access it, to simplify the updating process. The wysiwyg
object serves as an interface.
* Depending on the options the snippets will be loaded or not, the
editor will be in an iframe or not... all of this is transparent from
the outside.
* Regarding iframes, all controllers related to editing have been
removed: the new API no longer needs them. This speeds up loading,
eases testing and removes complexity for the same
features.
PUBLIC FEATURES
There are several public methods on the Wysiwyg class:
* Wysiwyg.prepare (WidgetParent): returns a deferred resolved when the
library (xml, lazy, assets...) is loaded.
* Wysiwyg.getRange (DOM): returns the range (selection in the dom)
* Wysiwyg.setRange (startNode, startOffset, endNode, endOffset): creates
a range (selection in the dom)
* Wysiwyg.setRangeFromNode (DOM, options) that creates a range from an
element (option available to select all, start or end)
A jQuery selector was added: :o_editable, which indicates whether the
current element is editable. That is, if it is contained in a tag with
the attribute 'contentEditable = "true"' or in a tag with the class
o_editable.
Several methods are also present:
* focusIn: makes a focus and places the cursor at the beginning of the
element
* focusInEnd: makes a focus and places the cursor at the end of the
element
* selectContent: makes a focus and selects the content
HTML FIELD
The HTML field can receive different options:
* style-inline: {boolean} transforms a class into an inline style when
saving and vice versa when reading.
* no-attachment: {boolean} prevents the use of attachments (in media
dialog)
* cssEdit: {xml_id} to use a template containing the css to loaded in
an iframe when editing
* cssReadonly: {xml_id} to use a template containing the css to load
into an iframe when viewing in readonly
* snippets: {xml_id} snippets template (can be used with or without
cssEdit)
* wrapper: {template} qweb static template (containing a tag:
id = "wrapper") that will include the content during editing (removed
on save)
MASS MAILING
A widget was created for mass mailing. There are now two fields:
body_html and body_arch.
body_arch contains the code with the class without conversion into
inline style, useful when editing and one with the inline style that is
visible in readonly mode and sent by email.
Advantage: no spreading errors, able to update css/theme, able to do
more changes when converting to inline style so that a maximum of mail
clients have an impeccable rendering.
Co-authored-by: Antoine Guenet <age@odoo.com>
Commit https://github.com/odoo/odoo/commit/52ec536cef2ec84af0b36746f19a8cdf9f23fe2a
made a mistake which made the backend use the website colors. This is
because the web_editor app adds its bootstrap_overridden.scss file in
both backend and frontend assets as the backend needs the editor colors
(alpha, beta, ...). However, the 'primary', 'secondary', etc that the
backend customizes should not be overridden by the web_editor. Therefore
the file contained a hack to determine if it is the backend or not...
hack which did not work anymore with the new system the mentioned
commit implements.
Also some comments were not adapted correctly by the mentioned commit.
closesodoo/odoo#29935
* portal, theme_bootswatch, web, web_editor, website
With less2sass and bs3tobs4 tasks, the assets structure was reviewed to
handle the specificities of both framework and to prepare for our next
odoo tasks. In particular, the assets_helpers and bootstrap overrides
were basically split into 4 parts: utils, primary variables, secondary
variables and bootstrap variables.
(see https://github.com/odoo/odoo/commit/6e4db7d13a926845bf82f5b035afede42d6d5a89)
Using the !default system for the bootstrap variables parts seems now
a good improvement. This is part of what this commit does: adding the
default flag for all bootstrap variables overrides and inverting the
order of the files in the _assets_backend_helpers and
_assets_frontend_helpers templates. This allows to avoid code like this:
portal:
```
$body-bg: white;
```
website:
```
@if $var != null {
$body-bg: $var;
}
```
This code makes the body white with portal or equal to $var with website
if $var has a value. The same behavior in the new file order is achieved
with:
website:
```
$body-bg: $var !default;
```
portal:
```
$body-bg: white !default;
```
This order is now also followed for the _assets_secondary_variables
templates (there are only a few).
This commit also make better assets hierarchy by making website inherit
from portal assets (instead of web) and portal inherit from web_editor
assets (instead of web) (thus relying on strong dependencies instead of
installation order which is not always right for migrated databases).
closesodoo/odoo#29757
What was designed as a new feature appeared as a regression: users were
not able to choose a bootstrap gray as a background color anymore but
instead got the possibiility to choose a hardcoded gray. This commit
restores the use of the custom gray palette that themes can customize
and which automatically uses the correct text color when used as a
background. This also allows to remove ugly inline style from snippet
definitions and allows to solve bugs like the described below one:
---------------------------------------
Also add bg-* classes on snippet cards:
---------------------------------------
Snippet cards are often put (or may be put by the user) in an element
which have a bg-* class on it. This means that the card will still have
a white background (as chosen by BS4 by default) but the text color will
be adapted to that ancestor bg-* classed element.
This commit forces the card background color (as suggested by BS4) with
bg-* classes.
closesodoo/odoo#27637
Rev. 2f7c03d added a second admin user (id 2), the 'human' one, on
top of the 'technical' one (id 1, also known as the superuser).
Basically, all calls to _is_superuser() should have been changed to
_is_admin(). They weren't. As a consequence, some features that
were previously available for the admin weren't anymore (e.g.
tours).
This rev. replaces all calls to _is_superuser() by calls to
_is_admin().
Samuel Degueldre