converse.js
Version:
Browser based XMPP chat client
58 lines (56 loc) • 2.59 kB
JavaScript
import { html } from 'lit';
import { until } from 'lit/directives/until.js';
import { __ } from 'i18n';
import { _converse, api } from '@converse/headless';
import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
import 'shared/components/dropdown.js';
import 'shared/texture/components/texture.js';
/** @param {import('../heading').default} el} */
export default (el) => {
const o = el.model.toJSON();
const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
const heading_buttons_promise = el.getHeadingButtons(subject_hidden);
const i18n_hide_topic = __('Hide the groupchat topic');
const subject = o.subject ? o.subject.text : '';
const show_subject = subject && !subject_hidden;
return html`
<div class="chatbox-title ${show_subject ? '' : 'chatbox-title--no-desc'}">
<div class="chatbox-title--row">
${!_converse.api.settings.get('singleton')
? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>`
: ''}
<a
data-room-jid="${el.model.get('jid')}"
title="${__('Show more information on this groupchat')}"
@click=${(ev) => el.showRoomDetailsModal(ev)}
>
<converse-avatar
.model=${el.model}
class="avatar align-self-center"
name="${el.model.getDisplayName()}"
nonce=${el.model.vcard?.get('vcard_updated')}
height="40"
width="40"
></converse-avatar>
</a>
<div
class="chatbox-title__text"
role="heading"
aria-level="2"
title="${api.settings.get('locked_muc_domain') !== 'hidden' ? o.jid : ''}"
>
${el.model.getDisplayName()}
</div>
</div>
<div class="chatbox-title__buttons btn-toolbar g-0">
${until(getStandaloneButtons(heading_buttons_promise), '')}
${until(getDropdownButtons(heading_buttons_promise), '')}
</div>
</div>
${show_subject
? html`<p class="chat-head__desc" title="${i18n_hide_topic}">
<converse-texture text=${subject} render_styling embed_audio></converse-texture>
</p>`
: ''}
`;
};