converse.js
Version:
Browser based XMPP chat client
67 lines (61 loc) • 2.26 kB
JavaScript
import { __ } from 'i18n';
import { api } from '@converse/headless';
import { html } from 'lit';
import { getUnreadMsgsDisplay } from 'shared/chat/utils.js';
import { tplDetailsButton, tplRemoveButton } from './roster_item';
/**
* @param {import('../contactview').default} el
*/
function tplAddContactButton(el) {
const display_name = el.model.getDisplayName();
const i18n_add_contact = __('Click to add %1$s as a contact', display_name);
return html`<a
class="dropdown-item add-contact"
role="button"
@click="${(ev) => el.addContact(ev)}"
title="${i18n_add_contact}"
data-toggle="modal"
>
<converse-icon class="fa fa-user-plus" size="1.5em"></converse-icon>
${__('Save as contact')}
</a>`;
}
/**
* @param {import('../contactview').default} el
*/
export default (el) => {
const num_unread = getUnreadMsgsDisplay(el.model);
const display_name = el.model.getDisplayName();
const jid = el.model.get('jid');
const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', display_name, jid);
const btns = [
tplDetailsButton(el),
tplAddContactButton(el),
...(api.settings.get('allow_contact_removal') ? [tplRemoveButton(el)] : []),
];
return html`
<a
class="list-item-link cbox-list-item open-chat ${num_unread ? 'unread-msgs' : ''}"
title="${i18n_chat}"
href="#"
data-jid=${jid}
@click=${el.openChat}
>
<span>
<converse-avatar
.model=${el.model}
class="avatar"
name="${el.model.getDisplayName()}"
nonce=${el.model.vcard?.get('vcard_updated')}
height="30"
width="30"
></converse-avatar>
</span>
${num_unread ? html`<span class="msgs-indicator badge">${num_unread}</span>` : ''}
<span class="contact-name ${num_unread ? 'unread-msgs' : ''}">${display_name}</span>
</a>
<span class="contact-actions">
<converse-dropdown class="btn-group dropstart list-item-action" .items=${btns}></converse-dropdown>
</span>
`;
};