In mass_mailing, the paragraph alignment dropdown menu is wrongly
positioned by Popper since the upgrade to Bootstrap 5. Other dropdowns
in the toolbar had the `data-bs-display="static"` attribute but it seems
that paragraph alignment was omitted by mistake.
task-3002168
X-original-commit: 8a372800b9a035893d9f9ecdf7afce17aef3f1b2
Part-of: odoo/odoo#102734
This commit adds the possibility to use a grid to move and resize
columns inside some building blocks.
More precisely, for the majority of the building blocks having columns,
it is now possible to toggle between the current layout (= normal mode)
and the grid layout (= grid mode). The grid mode can be triggered in
two ways:
- by using the "Grid" button in the options (when available),
- by dragging a column using the move handle.
The toggle places the different columns in the grid as close as
possible as how they were placed in normal mode.
The normal mode is toggled back by clicking on the "Cols" button (when
available).
Since the move handle is now used to trigger the grid mode, the columns
in normal mode are now moved using the arrows.
NB: to avoid any confusion with the word 'column' in the explanation
below, the BS column will be called 'grid item' and the grid column
will be 'column'.
When in grid mode, the building block is a grid with 12 columns and a
number of rows which depends on the height of the grid items.
This mode offers the following functionalities:
- Moving a grid item:
When a grid item is dragged, it can be placed anywhere in the grid. If
it is dragged towards the bottom, new rows are added in the grid to
increase its height and to place the grid item lower. These added rows
are removed when it is dragged towards the top.
A grid item can also be placed over an other item (-> they can overlap)
and their order can be changed using the two new buttons to place an
item in front of/behind all the others.
A grid item can be moved from a grid to another, and also from a grid
to a building block in normal mode.
- Resizing a grid item:
A grid item can be resized vertically, horizontally and diagonally with
the help of the grid. When resized towards the bottom, new rows are
added in the grid and they are removed if it is towards the top (like
with the drag and drop).
- Adding elements:
The "Add Elements" option allows the user to add as many images, text
blocks or buttons as wanted in the grid.
Inner contents can still be dragged and dropped inside a grid item.
- Changing the padding of the grid items:
The padding option allows to change the vertical/horizontal padding of
all the grid items at the same time.
- Mobile view:
When in mobile view, the grid items are not in a grid anymore (the
display is back to flex) but they keep their grid properties. They
cannot be resized, nor dragged and dropped but they can be moved using
the arrows. By moving this way, it does not impact the desktop view.
task-2825241
closesodoo/odoo#93144
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The commands to add rows and columns in certain positions were
superfluous as commands to add rows and columns suffice if you pass them
a position argument.
Part-of: odoo/odoo#92200
As a stable fix, to not touch XML templates and break existing
translations, the ⌙ character was automatically replaced by └ which
makes more sense for the usecase and should work properly in all
browsers. The ⌙ character is actually rendered mirrored on Windows 11
Chrome (and others) as the font used for those unicode characters is
left to the browser. We could force a font of our own but it's probably
not worth it.
A better solution with a SVG or CSS solution has to be done in master.
That would unify the look of the symbol across all browsers and
also prevent special characters to be placed in translations.
With this forward-port commit, we'll start first by using └ via a CSS
rule. Three new classes have been created: o_we_sublevel_1,
o_we_sublevel_2 and o_we_sublevel_3. Adding any of them on a widget
automatically adds the └ character. Then choosing 1, 2 or 3 controls
the indentation, which was previously controlled by placing the  
HTML entity directly inside strings.
This commit also takes the opportunity to fix some of those level
indentations (sometimes 2 was used instead of 1 or 1 was used instead of
2, etc) and also review some related labels.
closesodoo/odoo#97361
X-original-commit: e5d45643598671077ade7e41f0dbfe2b502665b8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This nomenclature was taken straight from the old Summernote options
when the new editor was merged in 15.0.
While perfectly correct from a technical point of view, the use of the
word "Auto" in this context is confusing because the user might think
that the system is going to choose an optimal size for them while this
is not what this option does at all. What it does is simply removing any
width style property that might be set on the image, thus letting the
image be sized appropriately by the browser in accordance with active
CSS rules at that position in the page, hence its "Default" width.
closesodoo/odoo#96679
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
- modal 'show' option doesn't exist anymore
-> We need to call .show()
- by default, show is not the default
-> we need to call .show() explicitly.
- generic close button for dismissing content like modals and alerts.
- BS5 modals needs `modal-dialog` class to work
- normally we need also to add `modal-content` class but as the original
XML don't have this nested level of div we don't use it, but instead
we add `pointer-events: auto` for all children `DIV` of `modal-dialog`
-> See DocumentViewer
Task ID: 2766483
Part-of: odoo/odoo#95450
The media dialog was refactored using owl.
It can be displayed via the dialogs service.
The (Image/Document/Icon/Video)Selector components are controlled by the
state of their parent, the MediaDialog: this.selectedMedia.
Some things differ from the original implementation: the dialog still
takes (optionally) a media as a parameter, but it does not directly
modify it anymore.
It will pass the selected media as a parameter to a callback, save, that
it gets as a prop. That save prop should be responsible to make the
appropriate modification to the original media, given the new selected
media.
The code opens up for an easy multiSelect of other tabs than the images
(multiIcons, multiDocuments), but that use case is not currently tackled
and maybe it would be better to simplify the code.
See merge commit for more information.
task-2687506
This is an attempt at fixing a runbot race condition.
It was executed succesfully without any error on Multi build around
200 times on runbot.
Since [1] the reset button could be clicked before the HTML editor was
reloaded.
The `MutationObserver` in `tour_service.js` is debounced. Because of
this the states used to detect tour steps triggers might differ between
executions.
With the Reset button of the HTML editor not being hidden in the
rendered template, it might be detected before it gets hidden during
the `start` of `ace.js`.
This commit makes sure the the editor is both closed then reopened with
the Reset button visible before clicking on it, and also makes sure the
Reset button is not visible by default upon rendering.
[1]: https://github.com/odoo/odoo/commit/d20468c3463927a54c34688769a22b3949c5c465
runbot-3674
closesodoo/odoo#90453
X-original-commit: b35f127c86c1d271a76dae7186a96190e8558c73
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
There are cases that seems to reset the editor content but shouldn't.
This commit:
- provide a dialog to allow the user to save his content before being
lost forever
- reset only if the record content has changed
task-2810115
closesodoo/odoo#89625
X-original-commit: e812e923ffe040e734e4d913eceaae396adf6c3d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Before this commit, the tab labels of the colorpickers were too long
in some languages (e.g. German) making them overflow and making the UI
impossible to use in some cases. Indeed, the bug was different depending
on where the colorpicker was:
- In the text tools, the colorpicker overflew the whole panel, making it
impossible to use
- In the snippet options, the colorpicker buttons were cropped without
ellipsis making them impossible to read
- In the backend, as the toolbar is floating, it was ok but the code was
quite dependent of the other colorpicker-related scss
This commit solves those problems and unifies the way colorpickers look
independently of their position (always full width, the buttons fill the
available space, if the buttons are too long they are cropped with
ellipsis, they have a title on hover and are always aligned on the
left of the tabs area).
opw-2786778
closesodoo/odoo#88844
X-original-commit: a4755218f239e5c00e9c6a23321654a3ab029470
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
On mass_mailing, the button does not have a specifc width.
Defining a width to the button makes the styling more predictible.
Task-2781002
closesodoo/odoo#88679
X-original-commit: 5f5b806559e06aad7f67b66c8da96d15516fcd52
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
When applied, this commit will add correct classes and structure to fix
the style of upload notifications in the web editor. When an user
uploads an image, he gets a progress and validation (or error)
notification. We changed how notifications look at [1], but this
particular notification did not get the correct style.
[1]: https://github.com/odoo/odoo/commit/2629348090d6eabe8f9d3ae70a41f7ff7d45bbb6
task-2791078
closesodoo/odoo#86172
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Strikethrough option was missing in the editor toolbar.
* Added the option in the toolbar.
* Added the keyboard shortcut (CTRL+5)
task-2754007
closesodoo/odoo#84029
X-original-commit: 9808073c22eacf9f2bcc55aa96eaec56f55597cc
Signed-off-by: Antoine Guenet <age@odoo.com>
This restores a (basic) feature that was lost in 15.0 by mistake.
Allow the user to set a link on an image. The user can access this link
tool in the editor panel or via the CTRL+K shortcut. This tool is very
similar to the existing link tool for texts. This tool uses the
suggestion system already existing on the text link tool.
task-2666467
closesodoo/odoo#82512
X-original-commit: bfcd25c5d66765b7436114dba3316ac7331a4d97
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
When selecting text in a list, the toolbar should show that a list is
selected, and which type. It however failed to do that, which is fixed
with this commit.
task-2638422
closesodoo/odoo#77738
X-original-commit: 2a7436d83abe178bd21c0694edc9825f5d70d65f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
Part-of: odoo/odoo#79057
*: 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>
The "Open in new window" checkbox was always initialized as false, even
if the link would open in a new window - both in the link tools and
dialog.
task-2172311
closesodoo/odoo#76880
X-original-commit: 52b034e8844336cc424e3126b843ec084fd7118e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Since cfe079221c, unsplash is not working anymore as that commit did not adapt
the unsplash code to that change.
task-2581567
closesodoo/odoo#76617
X-original-commit: 9a4723628e868836c7bbe8bec31ec9b6ce3f2554
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
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>
*: 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
When adding a media to the library using its external URL, the
confirmation icon (either error, warning, or success) will not be
spaced correctly, and will stick to the button on its right.
In this commit, we add a class to it which adds some padding on the
right.
task-2618494
Part-of: odoo/odoo#75730
Before this fix applied color combinations were shown on the style
option.
After this fix the style option is displayed as any other plain option.
task-2612755
closesodoo/odoo#75665
X-original-commit: 2327248b8f67f5312f5630bf64fe49a31e025a09
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso-odoo@users.noreply.github.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>
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
In odoo/odoo#72675 the new services were made available in the frontend,
and calls to the legacy notification services were redirected to the new
notification service. However, some of the behaviour of the legacy
notification service was not replicated in the new one, like the ability
to pass an HTML element to use inside the notification.
While html content can be passed, it is cloned, meaning that the DOM of
the element cannot be manipulated by the caller, which is what was being
done to show progress during media upload.
Although the upload progress toast looks like a notification, it's
hardly a standard notification and adds a lot of behaviour, because
manipulating DOM directly when it is managed by owl cannot be done
safely, it has been decided to simply make it its own widget separate
from the notification service, which can manipulate its own DOM freely.
task-2607393
closesodoo/odoo#74027
Signed-off-by: Romain Derie <rdeodoo@users.noreply.github.com>
In order to save space and gain clarity, the colorpicker elements are
now displayed in two separate tabs: "theme" and "custom".
It is still possible to display the combinations tab instead of the
theme one (for the background color option for example).
Part of https://github.com/odoo/odoo/pull/67545
task-2476601
Wherever there is a sidebar, this moves all icon and image options to
their own section of it. This also enables previews.
The "spin" option was deemed unnecessary and therefore removed.
TODO: restore the link option for icons. It wasn't working properly
before this and was removed until it is fixed so as not to do any
unnecessary coding for a broken option.
closesodoo/odoo#70952
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Dropdown menus (eg.: font-size) had their contents cropped if space was
lacking underneath the toolbar. With this the user can scroll down to
see the rest of it if needed.
More info: https://github.com/twbs/bootstrap/issues/23378closesodoo/odoo#69644
X-original-commit: d360b751acfc1649673739b185b635732cf5b78f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Before, depending on the screen size, it was not always clear for the
user that he can use the search bar to find library images.
The upload buttons and search bars have been switched in order to make
the search the first choice for the user. Also, make the arrow pointing
at the searchbar more understandable.
task-2446852
closesodoo/odoo#68821
X-original-commit: 4237916d1f103baef5760e8508c9ebd5e91ac163
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website_form
This commit introduces a simple & light popover/tooltip (as in Google Doc) when
editing a link.
It will be used:
1. (web_editor) On every page links.
2. (website) In the website navbar, when clicking on a menu, it will replace the
popup shown to ask the user what he wants to do (edit the menu or go to the link
or do nothing). That popup was a bit invasive and old-fashioned.
Part of https://github.com/odoo/odoo/pull/64756
task-2439860
closesodoo/odoo#64756
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
We only support .gif, .jpe, .jpeg, .jpg, .png, .svg
This commit won't let the code go though if we know the image format is not
suported.
Part of https://github.com/odoo/odoo/pull/65828
task-2345082
Antoine Guenet