From b993399f8a2283cf8ab571f399cf5f0eaf81bfce Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 13 Dec 2021 13:31:03 +0100 Subject: [PATCH] [IMP] web_editor, website: display better previews over dropzones Before this commit, some snippets did not have any or complete preview when dragging them over a dropzone. This commit covers `s_website_form`, `s_countdown`, `s_map` and `o_facebook_page`. Some elements with class `s_preview` are added to the template. These elements are removed when the snippet is dropped. Also, the class o_colored_level was added to snippets so that the previews matches the snippet dropped. For "New page templates", an `s_keep_preview` class can be added on a parent element of an `s_preview` to prevent its removal when creating the page - thereby making the snippet ready as if is had been dropped into the page. Note: `s_chart` and the "dynamic snippet" and its variants are not covered in this commit. task-3555325 (was task-2431469) Part-of: odoo/odoo#138748 Co-authored-by: Benoit Socias --- .../static/src/js/editor/snippets.editor.js | 18 ++-- .../static/src/snippets/s_countdown/000.js | 5 ++ .../src/snippets/s_facebook_page/options.js | 6 ++ .../views/new_page_template_templates.xml | 87 +------------------ addons/website/views/snippets/s_countdown.xml | 15 +++- .../views/snippets/s_facebook_page.xml | 4 +- addons/website/views/snippets/s_map.xml | 2 +- .../website/views/snippets/s_media_list.xml | 8 +- .../views/snippets/s_three_columns.xml | 2 +- .../website/views/snippets/s_website_form.xml | 77 +++++++++++++++- 10 files changed, 121 insertions(+), 103 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 7b09fe3184e..90143886c7e 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -3460,15 +3460,15 @@ var SnippetsMenu = Widget.extend({ var $target = $toInsert; - if ($target[0].classList.contains("o_snippet_drop_in_only")) { - // If it's a "drop in only" snippet, after dropping - // it, we modify it so that it's no longer a - // draggable snippet but rather simple HTML code, as - // if the element had been created with the editor. - $target[0].classList.remove("o_snippet_drop_in_only"); - delete $target[0].dataset.snippet; - delete $target[0].dataset.name; - } + if ($target[0].classList.contains("o_snippet_drop_in_only")) { + // If it's a "drop in only" snippet, after dropping + // it, we modify it so that it's no longer a + // draggable snippet but rather simple HTML code, as + // if the element had been created with the editor. + $target[0].classList.remove("o_snippet_drop_in_only"); + delete $target[0].dataset.snippet; + delete $target[0].dataset.name; + } this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropCreateSnippet'); await this._scrollToSnippet($target, this.$scrollable); diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js index 056909a2d16..1b5ea9475cb 100644 --- a/addons/website/static/src/snippets/s_countdown/000.js +++ b/addons/website/static/src/snippets/s_countdown/000.js @@ -14,6 +14,11 @@ const CountdownWidget = publicWidget.Widget.extend({ * @override */ start: function () { + // Remove SVG previews (used to simulated canvas) + this.$el[0].querySelectorAll('svg').forEach(el => { + el.parentNode.remove(); + }); + this.$wrapper = this.$('.s_countdown_canvas_wrapper'); this.$wrapper.addClass('d-flex justify-content-center'); this.hereBeforeTimerEnds = false; diff --git a/addons/website/static/src/snippets/s_facebook_page/options.js b/addons/website/static/src/snippets/s_facebook_page/options.js index 6c0ade9f8df..2efc3ea7710 100644 --- a/addons/website/static/src/snippets/s_facebook_page/options.js +++ b/addons/website/static/src/snippets/s_facebook_page/options.js @@ -41,6 +41,12 @@ options.registry.facebookPage = options.Class.extend({ return Promise.all(defs).then(() => this._markFbElement()).then(() => this._refreshPublicWidgets()); }, + /** + * @override + */ + onBuilt() { + this.$target[0].querySelector('.o_facebook_page_preview')?.remove(); + }, //-------------------------------------------------------------------------- // Options diff --git a/addons/website/views/new_page_template_templates.xml b/addons/website/views/new_page_template_templates.xml index e7979a7ca5e..3042abe650a 100644 --- a/addons/website/views/new_page_template_templates.xml +++ b/addons/website/views/new_page_template_templates.xml @@ -1039,7 +1039,7 @@ overridden by modules), because: - + - + diff --git a/addons/website/views/snippets/s_countdown.xml b/addons/website/views/snippets/s_countdown.xml index 760d6599329..2903ce96b88 100644 --- a/addons/website/views/snippets/s_countdown.xml +++ b/addons/website/views/snippets/s_countdown.xml @@ -9,7 +9,20 @@ data-progress-bar-style="surrounded" data-progress-bar-weight="thin" data-text-color="o-color-1" data-layout-background-color="400" data-progress-bar-color="o-color-1">
-
+
+
+ 2Days +
+
+ 16Hours +
+
+ 30Minutes +
+
+ 45Seconds +
+
diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml index 152b5cb9a49..ba6d03a215a 100644 --- a/addons/website/views/snippets/s_facebook_page.xml +++ b/addons/website/views/snippets/s_facebook_page.xml @@ -3,7 +3,9 @@