From 620cf1957499e461a9d6aa40282923c2a3c6ea9a Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Tue, 22 Aug 2023 13:41:22 +0200 Subject: [PATCH] [FIX] website, web_editor: allow to re-edit social media icons This commit allows you to change the icons of custom links of the social media block after the first save. Thanks to [this other commit], there is now a class that permits to inform the editor that a media is editable even if it is a non-editable parent. This commit permits to use the new class to fix the issue. Steps to reproduce the bug: - Drop a social media block on a page - Add a custom social media - Save - Edit - Try to change the icon of the custom social media with a double-click => The icon cannot be changed. Note that [another commit] had already been made and fixed the problem halfway (the icon change didn't work on double-click). This commit reverts it and fixes the problem correctly with the new system. [this other commit]: https://github.com/odoo/odoo/commit/6ead397f33512c918f51feb2b32fb3e15ffedf34 [another commit]: https://github.com/odoo/odoo/commit/bb291b35e46e42ca098aa3e04ac0b473f72be423 Fixes https://github.com/odoo/odoo/issues/104048 task-3073171 X-original-commit: b844351b9814ff2167d2183ab3216e2d1ec1d216 Part-of: odoo/odoo#134281 --- .../static/src/js/editor/snippets.options.js | 4 +- .../wysiwyg_adapter/wysiwyg_adapter.js | 3 + .../src/snippets/s_social_media/options.js | 2 +- .../tests/tours/snippet_social_media.js | 30 ++++- .../views/snippets/s_mega_menu_odoo_menu.xml | 14 +-- .../website/views/snippets/s_social_media.xml | 14 +-- addons/website/views/website_templates.xml | 114 +++++++++--------- 7 files changed, 107 insertions(+), 74 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 7a5857a0abf..cbb135ba455 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -5467,7 +5467,9 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({ * @see this.selectClass for parameters */ async replaceMedia() { - this.options.wysiwyg.openMediaDialog({ node: this.$target[0] }); + // TODO for now, this simulates a double click on the media, + // to be refactored when the new editor is merged + this.$target.dblclick(); }, /** * Makes the image a clickable link by wrapping it in an . diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js index 1d5815962c7..9ec17a1caba 100644 --- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js +++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js @@ -485,6 +485,9 @@ export class WysiwygAdapterComponent extends Wysiwyg { // snippets in user databases. let $extraEditableZones = $editableSavableZones.find('.s_company_team .o_not_editable *') .filter((i, el) => isMediaElement(el) || el.tagName === 'IMG'); + // Same as above for social media icons. + $extraEditableZones = $extraEditableZones.add($editableSavableZones + .find('.s_social_media a > i')); // To make sure the selection remains bounded to the active tab, // each tab is made non editable while keeping its nested diff --git a/addons/website/static/src/snippets/s_social_media/options.js b/addons/website/static/src/snippets/s_social_media/options.js index 0dcefe298ff..99e4b137b24 100644 --- a/addons/website/static/src/snippets/s_social_media/options.js +++ b/addons/website/static/src/snippets/s_social_media/options.js @@ -118,7 +118,7 @@ options.registry.SocialMedia = options.Class.extend({ anchorEl = document.createElement('a'); anchorEl.setAttribute('target', '_blank'); const iEl = document.createElement('i'); - iEl.classList.add('fa', 'rounded-circle', 'shadow-sm'); + iEl.classList.add('fa', 'rounded-circle', 'shadow-sm', 'o_editable_media'); anchorEl.appendChild(iEl); } else { // Copy existing style if there is already another link. diff --git a/addons/website/static/tests/tours/snippet_social_media.js b/addons/website/static/tests/tours/snippet_social_media.js index eda5c436f40..55ba9dd152a 100644 --- a/addons/website/static/tests/tours/snippet_social_media.js +++ b/addons/website/static/tests/tours/snippet_social_media.js @@ -150,5 +150,33 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', { trigger: 'we-list table input:eq(3)', run: 'text_blur https://instagram.com/odoo.official/', }, - ...wTourUtils.clickOnSave() + ...wTourUtils.clickOnSave(), + ...wTourUtils.clickOnEditAndWaitEditMode(), + wTourUtils.clickOnSnippet({ + id: 's_social_media', + name: 'Social Media', + }), + { + content: "Check if we can still change custom icons", + trigger: 'iframe .s_social_media a[href="https://whatever.it/1EdSw9X"] i.fa-pencil', + run: 'dblclick', + }, + { + content: "Select a new icon", + trigger: '.o_select_media_dialog .fa-heart', + }, + { + content: "Check if the result is correct after setting the icon", + trigger: "iframe .s_social_media" + + ":has(a:eq(0)[href='/website/social/twitter'])" + + ":has(a:eq(1)[href='/website/social/linkedin'])" + + ":has(a:eq(2)[href='/website/social/youtube'])" + + ":has(a:eq(3)[href='/website/social/instagram'])" + + ":has(a:eq(4)[href='/website/social/github'])" + + ":has(a:eq(5)[href='/website/social/tiktok'])" + + ":has(a:eq(6)[href='/website/social/facebook'])" + + ":has(a:eq(7)[href='https://whatever.it/1EdSw9X']:has(i.fa-heart))" + + ":has(a:eq(8)[href='https://instagr.am/odoo.official/']:has(i.fa-instagram))", + isCheck: true, + }, ]); diff --git a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml index da192570c3c..5373cb4ab61 100644 --- a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml +++ b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml @@ -63,25 +63,25 @@
Follow us
 - + - + - + - + - + - + - +
diff --git a/addons/website/views/snippets/s_social_media.xml b/addons/website/views/snippets/s_social_media.xml index 5e5ec23bac8..44d087c1c3f 100644 --- a/addons/website/views/snippets/s_social_media.xml +++ b/addons/website/views/snippets/s_social_media.xml @@ -5,25 +5,25 @@

Social Media

- + - + - + - + - + - + - +
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 3b3b216c75a..21854d93df5 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -445,16 +445,16 @@
Follow us
- + - + - + - +
@@ -567,16 +567,16 @@
Follow us
- + - + - + - +
@@ -693,16 +693,16 @@
Follow us
- + - + - + - +
@@ -888,25 +888,25 @@
Follow us - + - + - + - + - + - + - +
@@ -988,13 +988,13 @@
Follow us
- + - + - +
@@ -1182,25 +1182,25 @@
Follow us
- + - + - + - + - + - + - +
@@ -1274,28 +1274,28 @@
Follow us - + - + - + - + - + - + - + - +
@@ -1502,16 +1502,16 @@
Follow us
- + - + - + - +
@@ -1547,16 +1547,16 @@
Follow us
- + - + - + - +
@@ -1575,13 +1575,13 @@
Follow us
- + - + - +

250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States

@@ -1688,13 +1688,13 @@
Follow us
- + - + - +
@@ -1730,13 +1730,13 @@

Follow us

- + - + - +
@@ -1860,13 +1860,13 @@
Follow Us
- + - + - +