diff options
| author | xO-Tx <mou@odoo.com> | 2020-09-04 09:14:29 +0000 |
|---|---|---|
| committer | xO-Tx <mou@odoo.com> | 2020-10-12 14:47:49 +0000 |
| commit | 8a15618f7b909fecd08ffe01ed8cd0ae3c2cc156 (patch) | |
| tree | d1060688e03a64966a4e818aab28cd423dd9db26 /addons/web_editor/static/src/js | |
| parent | f91422115c09be484f2868347566b6392ed0effd (diff) | |
[FIX] web_editor: fix background-sizing preview
with background-sizing option, user drags background image to adjust its
position using an overlay with the same content from snippet (cloned element).
Some CSS child selector rules will not be applied since the clone element has
a different container from the snippet content.
The CSS "background-attachment" property should be the same in
both parallax snippet & its copy, this will keep the preview more "wysiwyg"
instead of getting different result when bg position saved.
This can be improved by copying all style from snippet content and
override it with overlay related style (copying all css into overlay will
not work since it will change the style of its content too)
task-2327025
closes odoo/odoo#59769
X-original-commit: aaa3e63985789ea07464a5957eb18481e70a383f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Diffstat (limited to 'addons/web_editor/static/src/js')
| -rw-r--r-- | addons/web_editor/static/src/js/editor/snippets.options.js | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index dc959f91125..91139dfa25d 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -4201,6 +4201,12 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({ // Create empty clone of $target with same display size, make it draggable and give it a tooltip. this.$bgDragger = this.$target.clone().empty(); + // Some CSS child selector rules will not be applied since the clone has a different container from $target. + // The background-attachment property should be the same in both $target & $bgDragger, this will keep the + // preview more "wysiwyg" instead of getting different result when bg position saved (e.g. parallax snippet) + // TODO: improve this to copy all style from $target and override it with overlay related style (copying all + // css into $bgDragger will not work since it will change overlay content style too). + this.$bgDragger.css('background-attachment', this.$target.css('background-attachment')); this.$bgDragger.on('mousedown', this._onDragBackgroundStart.bind(this)); this.$bgDragger.tooltip({ title: 'Click and drag the background to adjust its position!', |