diff options
| author | Samuel Degueldre <sad@odoo.com> | 2019-10-24 13:15:55 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2019-11-18 09:56:40 +0000 |
| commit | dfd98f49e7f2ab5c94dcae3af2d14750d301fa0a (patch) | |
| tree | 80515984c7819fd3d80503ff54cf37a034c27c8a /addons/website/views | |
| parent | 01debf53f676e415241e4b2db0087e30eb1f0e8e (diff) | |
[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
Diffstat (limited to 'addons/website/views')
| -rw-r--r-- | addons/website/views/snippets.xml | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 16b218b6366..103dd62cc4a 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -1226,11 +1226,20 @@ data-selector="section, .parallax, .carousel-item" data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item"/> - <!-- Background Image --> - <div data-js="background_position" + <!-- Background Image Size/Position --> + <div data-js="BackgroundPosition" data-selector="section, .parallax, .carousel-item" data-exclude=".o_gallery .carousel-item"> - <we-button data-background-position="true" data-no-preview="true">Background Image Sizing</we-button> + <we-row> + <we-select data-no-preview="true"> + <we-button data-background-type="cover">Cover</we-button> + <we-button data-background-type="repeat-pattern">Repeat pattern</we-button> + </we-select> + <we-button class="fa fa-fw fa-arrows" title="Background Position" + data-background-position-overlay="true" data-no-preview="true"/> + </we-row> + <we-input string="Background width" data-set-style="background-size" data-default-value="auto"/> + <we-input string="Background height" data-set-style="background-size" data-default-value="auto"/> </div> <!-- Parallax --> |