pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: consider <span> icons in Social Media snippet

Browse Source 
In the Social Media snippet options, only icons with a `<i>` tag are
considered when updating the social media classes (when adding a new
social network by copying the first one and when replacing the icon by
another one matching the URL). However, there are cases where the icon
is a `<span>` element (with a `fa` class) and not a `<i>`.

For example:
- Replace a social network icon by a real image.
- Re-replace this image by an icon.
=> the icon element tag is `<span>` and not `<i>`.

In this case, after setting its style correctly (e.g. adding the round
shape) to make it look like the other icons, we notice that it does not
behave like the other ones:
- It is not aligned with the other icons, because the CSS rule aligning
them only targets `<i>`.
- Its icon is not replaced by a matching one when changing the URL with
a "relevant" one (e.g. google, facebook).

This commit considers `<span>` icons in the Social Media options, in
addition to `<i>` icons, in order for them to all behave the same way.

opw-3538230

closes odoo/odoo#144076

X-original-commit: a8b5c3045bea0227304306e19ed9d50cf497f518
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-11-30 11:44:56 +00:00
parent 4ff2e3252e
commit f0e3682b80
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_social_media/000.scss
+1 -1
View File
@@ -8,7 +8,7 @@
margin: 0 .4rem 0 0;
}
a {
i.fa {
i.fa, span.fa {
display: flex;
justify-content: center;
align-items: center;
addons/website/static/src/snippets/s_social_media/options.js
+4 -3
View File
@@ -4,6 +4,7 @@ import fonts from '@web_editor/js/wysiwyg/fonts';
import weUtils from '@web_editor/js/common/utils';
import options from '@web_editor/js/editor/snippets.options';
import { _t } from "@web/core/l10n/translation";
import { ICON_SELECTOR } from "@web_editor/js/editor/odoo-editor/src/utils/utils";
let dbSocialValues;
let dbSocialValuesProm;
@@ -129,7 +130,7 @@ options.registry.SocialMedia = options.Class.extend({
anchorEl = this.$target[0].querySelector(':scope > a').cloneNode(true);
this._removeSocialMediaClasses(anchorEl);
}
const iEl = anchorEl.querySelector("i");
const iEl = anchorEl.querySelector(ICON_SELECTOR);
if (iEl) {
const faIcon = isDbField ? `fa-${entry.media}` : 'fa-pencil';
iEl.classList.add(faIcon);
@@ -156,7 +157,7 @@ options.registry.SocialMedia = options.Class.extend({
// Propose an icon only for valid URLs (no mailto).
const socialMedia = this._findRelevantSocialMedia(entry.display_name);
if (socialMedia) {
const iEl = anchorEl.querySelector('i');
const iEl = anchorEl.querySelector(ICON_SELECTOR);
this._removeSocialMediaClasses(anchorEl);
anchorEl.classList.add(`s_social_media_${socialMedia}`);
if (iEl) {
@@ -347,7 +348,7 @@ options.registry.SocialMedia = options.Class.extend({
_removeSocialMediaClasses(anchorEl) {
let regx = new RegExp('\\b' + 's_social_media_' + '[^1-9][^ ]*[ ]?\\b');
anchorEl.className = anchorEl.className.replace(regx, '');
const iEl = anchorEl.querySelector('i');
const iEl = anchorEl.querySelector(ICON_SELECTOR);
if (iEl) {
regx = new RegExp('\\b' + 'fa-' + '[^1-9][^ ]*[ ]?\\b');
// Remove every fa classes except fa-x sizes.