`.modal.o_inactive_modal` (in modal.scss) had a z-index that was
superior to that of a fullscreen editor. As a result we could end up
with the editor being partially hidden by a modal.
task-2741872
closesodoo/odoo#85315
X-original-commit: 6ef3c1cf59ac66f00462468079500c449f189fae
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Whenever the user clicked on the fullscreen in mass_maliing, then
trying to show the media modal was not possible as the div that
contains it was hidden.
Task-2731907
closesodoo/odoo#85314
X-original-commit: 4026bc2075b7109dd18471aabf11ff3f76d6c57d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Since the introduction of the strikethrough button, the text toolbar
overflowed website's sidebar. This reduces their size so they don't
overflow.
task-2758967
closesodoo/odoo#84190
X-original-commit: 896c64cdf74e5c602a92a28f95f79e20c08ffd87
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet <age@odoo.com>
The undo-redo buttons on top of the snippets menu of mass_mailing had no
icon when website was not installed. This was because there was css
forcing the font family to something other than fontawesome. This
ensures we don't do that for elements with the "fa" class.
task-2746002
closesodoo/odoo#84126
X-original-commit: b3a91899cd7e6772a241badfc0bd9699bb6e0e74
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Steps to reproduce:
- Install Website
- Go to Settings -> Website
- Replace favicon with a 'big' image
- Go to Website and edit any page
- Click on Home
Issue:
Favicon preview in popover is too big.
Solution:
Set a max height/width for favicon preview (16x16).
opw-2744522
closesodoo/odoo#84101
X-original-commit: bb90ff7f320f815310ca8e76d19bccadf4204cc2
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Nasreddin Boulif (bon) <bon@odoo.com>
Allow wysiwyg field html to blend better in odoo view,
Remove the default resizer and make the field html's size
automatically fit its content
task-2637488
# Conflicts:
# addons/project/static/src/js/project_form.js
Part-of: odoo/odoo#83792
When a user clicks on 'could be used in' in the page properties after
chaing the URL, a list is displayed in a popup. This popup was
not properly rendered:
- the content could not be scrolled through, it was thus truncated
- the popup appeared behind the technical modal that kicks in on small
screens
Now the popup is better positioned, a scrollbar is available to access
its content when it is too long and on small screens it is displayed on
top of the technical modal, making it visible on small screens.
task-2092269
closesodoo/odoo#83693
X-original-commit: e2f1f4967a2dd4d730895e924f0c7ca02e23a17b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Jitendra Prajapati <jpr@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
When the user-select is none in firefox, it is impossible to select the
text even if the content is editable.
Task-2716365
closesodoo/odoo#83255
X-original-commit: 88a5269b2130bc82c48bc587a042c24062bc4e96
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This adds two new widgets to the powerbox, which allow the user to
quickly insert 3 or 5 stars, then click on them to color them gold.
task-2575449
Part-of: odoo/odoo#81920
*: web_editor, point_of_sale, pos_restaurant
The grab cursor is currently not working on all browsers (at least
Chrome Linux). The fallback rule does not even work, meaning that if
you type:
```
cursor: move;
cursor: grab;
```
Those browsers does not even use "move" as they see "grab" as valid but
use the "default" cursor.
This commit replaces our "grab" uses with a local cursor ensuring it
works.
Related to task-2431469
closesodoo/odoo#82093
X-original-commit: 23ebcca902781f2fa0f2381997be4f3d375385b5
Related: odoo/enterprise#23193
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Prior to this commit, the color presets generated by the color palette
would always be visible by the user which could lead to confusion.
Most users would click on the presets and edit them instead of editing
the color palette.
This commit groups the presets into a collapsed section under the color
palette to incentivize the user to click on the color bubbles instead.
task-2687469
closesodoo/odoo#79921
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Prior to this commit, when the user was hovering on colors in the
web editor, the cursor would stay with its default appearance.
Some users weren't able to tell if this was an interactive
element or not.
With this commit, we change the cursor to the pointer cursor when a user
is hovering the element so that they have a visual element indicating
that it's interactive.
task-2687469
closesodoo/odoo#80933
X-original-commit: 40fec954a369c94576b5ed88eade5d3ff120ca4a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when the user made an error in the HTML/SCSS editor
(most of the time due to user pasting HTML code while our code excepts
*XML*), the user was stuck most of the time because the error indicator
did not always appear. And even if it did, it disappeared on scroll and
the user had to guess where to click to show the error message.
Now, the UI for the error is way clearer, with the error message opening
itself directly and pointing at the line where the error occurs. The
UI of that error message is now more robust (even though suffering
because of the ace editor which likes to re-render itself at unknown
times). The error message is also still not super clear (default error
message given by the browser) although some parsing is now done on it to
try and display it better.
task-2698641
closesodoo/odoo#80499
X-original-commit: 0d2dbb663653659c8afbf3a515444a6db633fbf9
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when a tour tooltip was located in the snippet
list, it could cause an overflow that would partly hide the tip and
would bug out when being hovered.
With this commit, the list is made full height, simplifying the look
and giving enough space for the tip to not overflow.
task-2670809
X-original-commit: d8c25d400af61bdfb4afd9d7921c3e93745f2407
Part-of: odoo/odoo#80466
Prior to this commit, if three colors were selected for a gradient and
the user would click on the third color, if that color had a value of
100%, in some conditions the picker would resize infinitely.
Also prior to this commit, the color picker slider was not supported
well under safari.
This commit fixes the SCSS rules in order to fix those behaviours.
task-2670809
X-original-commit: 5a91d8b00c35cb597b0ee5f5ec8605e4589f81c9
Part-of: odoo/odoo#80466
This commit fixes and improves the suggested width that we compute for
images optimizations.
Before, images displayed outside .container elements were resized to
their container size. As a result logos were resized to 2.5rem (40px).
Now, it handles these scenarios :
- The image is in the navbar, it is a logo
- The image is in a container/container-small
- The image is in a container-fluid
- The image is outside a container
Values are read from the css instead of being hardcoded.
Note: another issue remains with our resizing method. Drawing on a
canvas is not performant enough when there are large differences between
the width and the resize width. A solution could be to use
createImageBitmap for the resize, but it is not supported by enough
browsers.
In the meantime, imageSmoothing was enabled on the context.
Note 2: this also fixes rounding issues when computing the optimized
width which may break the UI update as comparing the integer and
floating value returned false.
task-2506205
closesodoo/odoo#79983
X-original-commit: 8355c10676e1dbb668702337863218bdda7c23dc
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
Before this commit, selecting a link was not working all the time.
This commit allow to properly select a link all the time.
Task-2667983
X-original-commit: 8c90772470046d0b932443ac7b2c2a868c443a85
Part-of: odoo/odoo#79641
Before this commit, the link popover was only available in the website
builder. Now it is available anywhere the wysiwyg is used.
Task-2678412
closesodoo/odoo#79542
X-original-commit: 161c5fc8e742294e8d85c889b4bf8d3d8cd484f5
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Prior to this commit, every dropdown menu entries in the web editor
had a border-radius on them. It didn't look consistent and clean.
This commit fixes those menu entries by either removing or applying a
correct border-radius.
closesodoo/odoo#78492
X-original-commit: 0239ab7efcaf3895ffb14a56a0686cf5a80bb529
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, the CSS of the overlay option buttons of the
timeline snippet was broken.
task-2648348
closesodoo/odoo#78491
X-original-commit: 13770d650def3107378fe4010aac48dc85a5256a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit fixes visual issues (pixel gap between shapes and bugs in
colors) in some background shapes.
task-2547435
closesodoo/odoo#78013
X-original-commit: 861dba13657f1ca41c40304abd212c521a6615de
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: mass_mailing, website, website_sale
Before this commit, it was impossible to add `fa-fw` directly on a
`we-button` as it would make the icon half invisible, since the whole
`we-button` would have the font-awesome `.fa-fw` css rule applied on it;
width: ~1.28em.
Then, one would need to insert a `<i/>` tag inside the `we-button` for
it to work.
This commit improves that behavior by handling automatically such cases,
and will preserve the purpose of the `fa-fw` class which is to have a
fixed width for those icons.
Note that the util class introduced in [1] (o_we_button_icon renamed
here in o_we_icon_button) is still useful to handle the case of svg
images, they are not allowed to shrink, the same way the fa buttons are.
[1]: https://github.com/odoo/odoo/commit/e4233643b93b521454cc146c6a2ae876781fb9ba
Related to task-2172311
closesodoo/odoo#77980
X-original-commit: e8ab9d76b802e80bb386812e4c8566825cbc2c92
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
*: web_editor, website_sale_wishlist
The goal of this commit is to fix the issues with the header templates
and their related options. Such as:
- Alignment of inline language selector
- Alignment of CTA / Template content
- Add missing CTA in some templates
- Bugs with off-canvas hamburger menu
Unfortunately, it will require more work to make everything perfect.
task-2636546
closesodoo/odoo#77862
X-original-commit: 2a000e33c5a44ddf0a777b43d8266cc413d8e4e2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit adds a sass function that, given one or two colors, returns
an odoo palette in sass-map format.
The palette will be generated using the safest values possible, setting
'o-color-4' always to '#FFF' and shifting predefined colors' HUE to
match the primary color passed to the function.
Overrides (eg. 'menu': 4) are supported trough the '$-overrides-map'
method.
The commit will also allows to customize the "has-enough-contrast"
function threshold. Indeed, prior to this commit, the threshold value
was locked to '500' in order to spot contrast issues against the tiniest
elements (eg. small text).
Using a more forgiving '300' value, for example, allows to verify
readability of a solid button against a bg.
task-2656337
X-original-commit: 61f014a955ed9b9d33e7289c2a8a273a4179b088
Part-of: odoo/odoo#77857
This commit removes all the 'extend' initially introduced to avoid code
repetition and ensure visual consistency across Bootstrap and Owl dropdowns.
Despite achieving the desired results, using 'extend' in this context
was seriously impacting the bundle generation time, probably due to an
underestimated amount of Apps' legacy-code applied on these elements.
In order to achieve the same results, the chosen strategy is to add
Bootstrap default classes directly into Owl dropdowns.
Also, it moves code related to bootstrap dropdown in 'webclient.scss',
leaving 'core/dropdown/dropdown.scss' for Owl code only.
Due to the discrepancies between Bootstrap and Owl html
structure, the '.dropdown-item' class could not have been added
directly to Owl's '.o_dropdown_item' itself, without refactoring
the Dropdown component structure.
// ==== Bootstrap 4.6 default Structure ================================
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<a class="dropdown-item" href="#">Another action</a>
</div>
// ==== OWL default Structure before this commit =======================
<ul class="o_dropdown_menu">
<li class="o_dropdown_item">
<span>Action</span>
</li>
<li class="o_dropdown_item">
<a href="#">Another action</a>
</li>
</ul>
// ==== OWL Structure after this commit ================================
<div class="o-dropdown--menu dropdown-menu">
<span class="dropdown-item">Action</span>
<a class="dropdown-item" href="#">Another action</a>
</div>
// ==== web.assets_backend.css Bundle Generation Comparison ============
With all modules installed (enterprise edition over runbot):
Before this commit, bundle took ~2.5s and ~4s to generate and weighted ~322kB (~2.5MB uncompressed)
After this commit, it takes between ~1.2s and ~1.6s and weights ~257kB (~1.6MB uncompressed)
closesodoo/odoo#77649
X-original-commit: 84715436d87bb05b421bc9ccaacda67d07571690
Related: odoo/enterprise#21370
Signed-off-by: Géry Debongnie (ged) <ged@openerp.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
Co-authored-by: François Georis <fge@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Add a plugin for the Odoo editor that includes:
- make dynamic variables (eg. `<t t-out="variable"/>`) not editable
(for preventing the user to shoot himself in the foot)
- group and hide related logical branching (ie. t-if, t-elif and t-else)
in order to see only one at once
- a floating select input to switch visibility of a particular logical
branching
- style t-tags to make them stand out
Task-27033
X-original-commit: odoo/odoo@300da82eb4
Part-of: odoo/odoo#77377
*: website, website_payment, website_sale
Instead of having a "o_we_large_input" class, now to have large widget, we can
use the generic "o_we_large" class (a future update is needing that for a non-
input widget).
task-2431285
X-original-commit: a8446e5d0f0b10f99f8174c012a6a53e2134b77a
Part-of: odoo/odoo#77255
Don't set 'repeat-y' to false explicitely as it is the default value.
X-original-commit: 26612818d71f072eaf291df6d4ee839301f36dc7
Part-of: odoo/odoo#77119
* website, website_form_project
In master, there was an error when adding a form to a website and
selecting "Create a Task" with no active projects. This issue was solved
in PR #73269, by allowing tasks without a project associated. This
introduces a new problem: if a user wants to create a project (e.g. if
there is no active project), they will have to save their changes, close
the editor, navigate to Project, and only then will they be able to do
it. This issue could happen for other modules, so the solution has to be
generic.
In this commit, we add the possibility to add a button to the form
editor, next to a we-select item, which will redirect the user to a
specified action after prompting them to save their work. This button
can be added by specifying an action window in the corresponding
registry.
We also add the action window to the website form project editor, so
that the user can be redirected towards the Project app if they want
to create a project to select in their form.
task-2580436
closesodoo/odoo#76772
X-original-commit: e4233643b93b521454cc146c6a2ae876781fb9ba
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Before this commit opening the color palette only checked for the
available space below the button to open the popup above instead.
Because of this the popup sometimes opened higher than the top of the
screen making it unusable.
After this commit an additional check is done on the space available
above the button. If there is not enough room above then just opens
below, which makes the area scrollable if there was insufficient space,
thus keeping the palette usable.
task-2599771
closesodoo/odoo#76611
X-original-commit: 3ac197de28f7b4403a55342f387189fc9a1d74e0
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
After this commit, it is possible to animate text in website pages.
task-2545252
closesodoo/odoo#76610
X-original-commit: 187acb938f70a2130d25fa76079221339c742f1e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit button colors were only obtained from one of the
predefined styles.
After this commit button colors can be specified by using the new
"Custom" style.
task-2612755
closesodoo/odoo#76461
X-original-commit: a010c91b5ee119cf54ed1a68a6ea06b2bc5f3978
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso-odoo@users.noreply.github.com>
By activating the profiler debugger, the two qweb options is added. The
qweb templates that need to be rendered are compiled into a new function
to add instructions for saving data.
`Add qweb directive context`
It's a sub-option of "Record sql" or "Record traces", add some context on
thread at current call stack level. This context stored by collector
beside stack and is used by Speedscope to add a level to the stack with
this qweb directive information.
```
directive=t-call='website.layout', xpath=/t/t
t_call_content
directive=t-foreach='5' t-as="'a', xpath=/t/t/div/div
directive=t-esc='website.search([])', xpath=/t/t/div/div/t
execute
```
`Record qweb`
Add profiling data used by ProfilingQwebView widget. In the `ir.profile`
form view, the widget display the duration and number of sql of every qweb
directives with the xml of templates. Every xml is recorded to be
consulted even if the user change the xml templates.
```xml
<t t-call="website.layout">
<div>
<div t-foreach="5" t-as="a">
<t t-esc="website.search([])"/> <!-- will display 5 separate requests -->
</div>
</div>
</t>
```
closesodoo/odoo#74712
Signed-off-by: Xavier Dollé (xdo) <xdo@odoo.com>
This commit allows to use the editor collaboratively for any html
field in peer to peer using webRTC.
task-2497931
closesodoo/odoo#75768
Signed-off-by: Antony Lesuisse (al) <al@openerp.com>
Commit [1] introduced a "hack" to transform `'NULL'` values into `null`
values in some maps as normally-defined `null` values are automatically
removed (replaced by a fallback). This hack did not need to be general
and in web_editor but can rather be confined to website only for the
user palette maps (especially since the fix made by the parent of this
commit here).
[1]: https://github.com/odoo/odoo/commit/a48a30f954afcb6ff3a59c4f32b05fd0c2cfcd2bclosesodoo/odoo#76033
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
When [1] was introduced, we prevented to define a 'null' value for a
parameter P in a palette and forced a fallback to a default value X
defined in a "base" palette (value X which could be null). That allowed
to ensure that all final palette values were consistent as always
fallbacking to a "safe" value. However, since then, we introduced [2]
which makes it so a parameter P in the "base" palette is defined to X
(not null) while null is a valid value for P. We could keep the old
system and define that paramater P to a 'null' value in the "base"
palette and add the default X value in all palettes explicitely... but
with this commit we are choosing to be less tolerant (but in fact more
tolerant to custo) and rely on the fact palettes are well defined with
valid values (e.g. not defining a value to null while only X or Y are
allowed for example). Indeed, an exception for the "null" value did not
make much sense: if only X or Y are allowed as value for a parameter P,
setting a random Z value was not prevented, only null was.
[1]: https://github.com/odoo/odoo/commit/05d17089c4a604cb49f1a263b68f39aeffecccda
[2]: https://github.com/odoo/odoo/commit/a48a30f954afcb6ff3a59c4f32b05fd0c2cfcd2b
Part-of: odoo/odoo#76033
*: web, website
This commit redesigns the editor toolbar improving its visual appearance
and introducing substantial changes wherever it is rendered.
== "Into-sidebar" design
The grid layout has been refined, improving its components allocation.
For the sake of visual simplification, "list-type" buttons have been
unwrapped from their original dropdown. For the same reason the button
to create a new table has been removed (users will have to use the
command-bar to create a new table).
Table's options have been moved to a section "ad-hoc", visible only when
a table is selected.
== Floating design (backend only)
The toolbar is now white to match the command-bar design.
In order to simplify frontend inheritance, the floating toolbar now uses
grid layout.
== Colorpicker
The generic code necessary for each design has been moved from
'wysiwyg_snippets.scss' to 'wysiwyg.scss'.
The style is now controlled by css variables allowing to customize
critical design properties without the need of SCSS overrides.
By default the design is white(-ish) to match the floating toolbar,
while in 'wysiwyg_snippets.scss' the variables are customized to get the
typical sidebar's dark feel.
Note: despite the task main objective was just to improve/fix the
design, this aimed to simplify design inheritance and reduce the css
too. While inheritance has been improved reducing the amount of
overrides, the attempt to reduce the css partially failed (in the final
lines count must be considered that a new sidebar section has been
created).
The reason is that we currently suffer from a deep and complicated
inheritance structure for this component. The xml template uses default
bootstrap classes that are styled differently depending if loaded in a
community or enterprise environment. This approach leads to overrides
that must cover all the scenarios while further customization must be
taken in account too 'cause the toolbar can be rendered into the sidebar
with a totally different design.
A possible solution would be to detach from bootstrap directly in the
lib using custom classes names, and then @extend these classes
differently according to the current environment but probably not a good
idea as we want the toolbar to use bootstrap for in-website editors (so
they can match the theme correctly) but this has to be reviewed as well
anyway. To be checked.
Part of https://github.com/odoo/odoo/pull/73565
task-2496339
closesodoo/odoo#73565
Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
The "floating" and the "into-sidebar" toolbar designs are visually very
different but share the same XML template.
Prior to this commit we relied on SCSS overrides to achieve the two
designs, meaning that any new rule added in wysiwyg.scss was supposed to
be followed by an override in wysiwyg_snippets.scss.
This approach led to glitches and undesired behaviors, especially
considering that all customizations we apply are already overrides of
the standalone OdooEditor lib (that, by the way, applies its own
overrides on top of bootstrap too...).
This commit will add the 'oe-floating' class by default, and will
remove it when the toolbar is rendered inside the sidebar.
This approach allows to target the floating design when needed only, and
consequentially will leave the '.oe-toolbar' selector for the code
shared between the two designs.
Part of https://github.com/odoo/odoo/pull/73565
task-2496339
Part-of: odoo/odoo#73565
Since [1], this commit the controls for the background image positioning
were not accepting events anymore and were below margin handles.
After this commit the controls for the background image positioning can
be used again.
[1]: https://github.com/odoo/odoo/commit/a37f27d08fe2113a81668959d23282e9ae741115
task-2627710
closesodoo/odoo#75576
X-original-commit: e266669361cde6f799683fa6b082777d0f416c57
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: web
After this commit pre-configured gradients can be used as snippet
backgrounds, snippet filters or as text effects / highlight effects.
The background colors (and now gradients) are now possible to add
*alongside* a color combination class (editing one does not remove the
other). Background colors and gradients are mutually exclusive.
Part of https://github.com/odoo/odoo/pull/73611
task-2599770
closesodoo/odoo#73611
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
All background-color classes (bg-XXX) were defined before the color
combination classes. Except for the Odoo colors ones (bg-o-color-X)
which were defined after. That inconsistency was not a real problem
before as those two type of classes could not be combined but this will
change in the future.
Part of https://github.com/odoo/odoo/pull/73611
task-2599770
Mass mailing form view currently has a scrollbar for the contents of the
editor, one for the form view itself, and one for the sidebar. In
consequence we can sometimes end up with three scrollbars side by side,
which is ugly and confusing.
This ensures the height of the iframe is always that of its contents so
there is no need for a scrollbar.
When inserting a new snippet we want to autoscroll to that snippet. That
is a complicated situation because the element we want to scroll is not
in the same document as the element we want to scroll _to_.
To address that situation, a new option is added to `scrollTo` so we can
pass it the element to scroll. It can then check if we are in the
aforementioned situation, in which case it can correct the scrolling and
apply it to the right element.
We use that option in mass_mailing to prevent the bug.
Task-2545445
closes#71511
Antoine Guenet