Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

emoji-picker: Make sure that emojis as images are rendered properly

Browse Source
This commit is contained in:
JC Brand 2020-02-06 16:27:44 +01:00
parent 976c3d6006
commit d2b6b41128
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sass/_emoji.scss
View File

@ -87,6 +87,11 @@
&.selected a { &.selected a {
background-color: var(--highlight-color-darker); background-color: var(--highlight-color-darker);
} }
img {
margin-top: 3px;
height: var(--font-size-huge);
width: var(--font-size-huge);
}
a { a {
padding: 3px; padding: 3px;
font-size: var(--font-size-huge); font-size: var(--font-size-huge);
@ -127,6 +132,10 @@
a { a {
padding: 0.25em; padding: 0.25em;
} }
img {
height: var(--font-size-huge);
width: var(--font-size-huge);
}
} }
} }
} }

2
src/headless/converse-emoji.js
View File

@ -191,7 +191,7 @@ converse.plugins.add('converse-emoji', {
} else if (unicode_only) { } else if (unicode_only) {
return shortname; return shortname;
} else { } else {
return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}"/>`; return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}">`;
} }
}); });
// Also replace ASCII smileys // Also replace ASCII smileys

8
src/templates/emoji_picker.js
View File

@ -10,7 +10,7 @@ const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
const emoji_category = (o) => { const emoji_category = (o) => {
const category_emoji = xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}}); const category_emoji = unsafeHTML(xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}}));
return html` return html`
<li data-category="${o.category}" <li data-category="${o.category}"
class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}" class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
@ -19,7 +19,7 @@ const emoji_category = (o) => {
<a class="pick-category" <a class="pick-category"
@click=${o.onCategoryPicked} @click=${o.onCategoryPicked}
href="#emoji-picker-${o.category}" href="#emoji-picker-${o.category}"
data-category="${o.category}">${unsafeHTML(category_emoji)} </a> data-category="${o.category}">${category_emoji} </a>
</li> </li>
`; `;
} }
@ -34,8 +34,6 @@ const emoji_picker_header = (o) => html`
const emoji_item = (o) => { const emoji_item = (o) => {
let emoji; let emoji;
if (o._converse.use_system_emojis) { if (o._converse.use_system_emojis) {
emoji = o.transform(o.emoji.sn);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whitelist': {'img': []}})); emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whitelist': {'img': []}}));
} }
return html` return html`
@ -66,8 +64,6 @@ const skintone_emoji = (o) => {
const shortname = ':'+o.skintone+':'; const shortname = ':'+o.skintone+':';
let emoji; let emoji;
if (o._converse.use_system_emojis) { if (o._converse.use_system_emojis) {
emoji = o.transform(shortname);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whitelist': {'img': []}})); emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whitelist': {'img': []}}));
} }
return html` return html`