[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
This commit is contained in:
Guillaume (gdi)
2023-09-06 11:50:58 +00:00
parent 5f976e0ef4
commit 620cf19574
7 changed files with 107 additions and 74 deletions
@@ -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 <a>.
@@ -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
@@ -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.
@@ -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,
},
]);
@@ -63,25 +63,25 @@
<div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-facebook m-1"/>
<i class="fa fa-2x fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-twitter m-1"/>
<i class="fa fa-2x fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-linkedin m-1"/>
<i class="fa fa-2x fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-github m-1"/>
<i class="fa fa-2x fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-youtube m-1"/>
<i class="fa fa-2x fa-youtube m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-instagram m-1"/>
<i class="fa fa-2x fa-instagram m-1 o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank">
<i class="fa fa-2x fa-tiktok m-1"/>
<i class="fa fa-2x fa-tiktok m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -5,25 +5,25 @@
<div class="s_social_media text-start o_not_editable" contenteditable="false">
<h4 class="s_social_media_title d-none" contenteditable="true">Social Media</h4>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook rounded shadow-sm"/>
<i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter rounded shadow-sm"/>
<i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin rounded shadow-sm"/>
<i class="fa fa-linkedin rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
<i class="fa fa-youtube rounded shadow-sm"/>
<i class="fa fa-youtube rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram rounded shadow-sm"/>
<i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-github rounded shadow-sm"/>
<i class="fa fa-github rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank">
<i class="fa fa-tiktok rounded shadow-sm"/>
<i class="fa fa-tiktok rounded shadow-sm o_editable_media"/>
</a>
</div>
</template>
+57 -57
View File
@@ -445,16 +445,16 @@
<div class="s_social_media text-start no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook m-1"/>
<i class="fa fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin m-1"/>
<i class="fa fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -567,16 +567,16 @@
<div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h6 class="s_social_media_title d-none" contenteditable="true">Follow us</h6>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook m-1"/>
<i class="fa fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin m-1"/>
<i class="fa fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -693,16 +693,16 @@
<div class="s_social_media mt-3 o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook rounded-circle shadow-sm"/>
<i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter rounded-circle shadow-sm"/>
<i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin rounded-circle shadow-sm"/>
<i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram rounded-circle shadow-sm"/>
<i class="fa fa-instagram rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
<!-- Separator -->
@@ -888,25 +888,25 @@
<div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<small class="s_social_media_title text-muted d-none" contenteditable="true"><b>Follow us</b></small>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook m-1"/>
<i class="fa fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin m-1"/>
<i class="fa fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-github m-1"/>
<i class="fa fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
<i class="fa fa-youtube m-1"/>
<i class="fa fa-youtube m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank">
<i class="fa fa-tiktok m-1"/>
<i class="fa fa-tiktok m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -988,13 +988,13 @@
<div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h6 class="s_social_media_title d-none" contenteditable="true">Follow us</h6>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook m-1"/>
<i class="fa fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -1182,25 +1182,25 @@
<div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook rounded-circle shadow-sm"/>
<i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter rounded-circle shadow-sm"/>
<i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin rounded-circle shadow-sm"/>
<i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-github rounded-circle shadow-sm"/>
<i class="fa fa-github rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
<i class="fa fa-youtube rounded-circle shadow-sm"/>
<i class="fa fa-youtube rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram rounded-circle shadow-sm"/>
<i class="fa fa-instagram rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank">
<i class="fa fa-tiktok rounded-circle shadow-sm"/>
<i class="fa fa-tiktok rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
</div>
@@ -1274,28 +1274,28 @@
<div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<small class="s_social_media_title d-none" contenteditable="true"><b>Follow us</b></small>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook m-1"/>
<i class="fa fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin m-1"/>
<i class="fa fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-github m-1"/>
<i class="fa fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
<i class="fa fa-youtube m-1"/>
<i class="fa fa-youtube m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank">
<i class="fa fa-tiktok m-1"/>
<i class="fa fa-tiktok m-1 o_editable_media"/>
</a>
<a href="mailto:info@yourcompany.example.com" class="ms-3" target="_blank">
<i class="fa fa-1x fa-envelope"/>
<i class="fa fa-1x fa-envelope o_editable_media"/>
</a>
</div>
</div>
@@ -1502,16 +1502,16 @@
<div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook rounded-circle shadow-sm"/>
<i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter rounded-circle shadow-sm"/>
<i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin rounded-circle shadow-sm"/>
<i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/" class="text-800">
<i class="fa fa-home rounded-circle shadow-sm"/>
<i class="fa fa-home rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
</div>
@@ -1547,16 +1547,16 @@
<div class="s_social_media text-start no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-2x fa-github m-1"/>
<i class="fa fa-2x fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-2x fa-twitter m-1"/>
<i class="fa fa-2x fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-2x fa-instagram m-1"/>
<i class="fa fa-2x fa-instagram m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-2x fa-linkedin m-1"/>
<i class="fa fa-2x fa-linkedin m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -1575,13 +1575,13 @@
<div class="s_social_media text-center mb-4 o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-facebook rounded-circle rounded shadow-sm"/>
<i class="fa fa-facebook rounded-circle rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter rounded-circle rounded shadow-sm"/>
<i class="fa fa-twitter rounded-circle rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin rounded-circle rounded shadow-sm"/>
<i class="fa fa-linkedin rounded-circle rounded shadow-sm o_editable_media"/>
</a>
</div>
<p class="text-center mb-1">250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
@@ -1688,13 +1688,13 @@
<div class="s_social_media text-end no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<i class="fa fa-2x fa-github m-1"/>
<i class="fa fa-2x fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-2x fa-twitter m-1"/>
<i class="fa fa-2x fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-2x fa-instagram m-1"/>
<i class="fa fa-2x fa-instagram m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -1730,13 +1730,13 @@
<div class="s_social_media text-end no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<p class="s_social_media_title d-block mb-2" contenteditable="true">Follow us</p>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-twitter m-1"/>
<i class="fa fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<i class="fa fa-linkedin m-1"/>
<i class="fa fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-instagram m-1"/>
<i class="fa fa-instagram m-1 o_editable_media"/>
</a>
</div>
</div>
@@ -1860,13 +1860,13 @@
<div class="s_social_media text-end o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow Us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<i class="fa fa-1x fa-facebook rounded-circle shadow-sm"/>
<i class="fa fa-1x fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<i class="fa fa-1x fa-twitter rounded-circle shadow-sm"/>
<i class="fa fa-1x fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<i class="fa fa-1x fa-instagram rounded-circle shadow-sm"/>
<i class="fa fa-1x fa-instagram rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
</div>