Commit b17e7cd5 authored by JC Brand's avatar JC Brand

Fix rendering of SVG avatars

parent 0a7dff44
......@@ -1093,8 +1093,8 @@ converse.plugins.add('converse-chatview', {
},
toHTML () {
const vcard = this.model?.vcard,
vcard_json = vcard ? vcard.toJSON() : {};
const vcard = this.model?.vcard;
const vcard_json = vcard ? vcard.toJSON() : {};
return tpl_user_details_modal(Object.assign(
this.model.toJSON(),
vcard_json, {
......
......@@ -2,5 +2,5 @@ import { html } from "lit-html";
export default (o) => html`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="${o.classes}" width="${o.width}" height="${o.height}">
<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" xlink:href="${o.image}"/>
<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="data:${o.image_type};base64,${o.image}"/>
</svg>`;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="{{{o.classes}}}" width="{{{o.width}}}" height="{{{o.height}}}">
<image width="{{{o.width}}}" height="{{{o.height}}}" preserveAspectRatio="xMidYMid meet" xlink:href="{{{o.image}}}"/>
<image width="{{{o.width}}}" height="{{{o.height}}}" preserveAspectRatio="xMidYMid meet" href="{{{o.image}}}"/>
</svg>
......@@ -18,7 +18,7 @@ export default (o) => {
<div class="chatbox-title ${ o.status ? '' : "chatbox-title--no-desc"}">
<div class="chatbox-title--row">
${ (!o._converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
${ (o.type !== o._converse.HEADLINES_TYPE) ? avatar(Object.assign({}, o, avatar_data)) : '' }
${ (o.type !== o._converse.HEADLINES_TYPE) ? html`<span class="mr-2">${avatar(Object.assign({}, o, avatar_data))}</span>` : '' }
<div class="chatbox-title__text" title="${o.jid}">
${ o.url ? html`<a href="${o.url}" target="_blank" rel="noopener" class="user">${o.display_name}</a>` : o.display_name}
</div>
......
......@@ -5,14 +5,14 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
const whitelist_opts = {
'whiteList': {
'svg': ['xmlns', 'xmlns:xlink', 'class', 'width', 'height'],
'image': ['width', 'height', 'preserveAspectRatio', 'xlink:href']
'svg': ['xmlns', 'class', 'width', 'height'],
'image': ['width', 'height', 'preserveAspectRatio', 'href']
}
};
const tpl_svg = (o) => xss.filterXSS(`<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" xlink:href="${o.image}"/>`, whitelist_opts);
const tpl_svg = (o) => xss.filterXSS(`<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${o.image}"/>`, whitelist_opts);
const tpl_avatar = (o) => html`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
<svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
${ unsafeSVG(tpl_svg(o)) }
</svg>
`;
......
......@@ -38,8 +38,8 @@ const fingerprints = (o) => {
<ul class="list-group fingerprints">
<li class="list-group-item active">${i18n_fingerprints}</li>
${ devices.length ?
devices.map(device => device_fingerprint(Object.assign({device}, o))) :
html`<li class="list-group-item"> ${i18n_no_devices} </li>` }
devices.map(device => device_fingerprint(Object.assign({device}, o))) :
html`<li class="list-group-item"> ${i18n_no_devices} </li>` }
</ul>
`;
}
......@@ -65,7 +65,9 @@ export default (o) => {
const i18n_url = __('URL');
const avatar_data = {
'alt_text': i18n_profile,
'extra_classes': 'mb-3'
'extra_classes': 'mb-3',
'height': '120',
'width': '120'
}
return html`
......@@ -76,7 +78,7 @@ export default (o) => {
${modal_header_close_button}
</div>
<div class="modal-body">
${ o.image ? avatar(Object.assign(avatar_data, o)) : '' }
${ o.image ? html`<div class="mb-4">${avatar(Object.assign(o, avatar_data))}</div>` : '' }
${ o.fullname ? html`<p><label>${i18n_full_name}:</label> ${o.fullname}</p>` : '' }
<p><label>${i18n_address}:</label> <a href="xmpp:${o.jid}">${o.jid}</a></p>
${ o.nickname ? html`<p><label>${i18n_nickname}:</label> ${o.nickname}</p>` : '' }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment