2021-11-19 09:44:44 +01:00
|
|
|
import 'shared/avatar/avatar.js';
|
2021-01-22 15:45:44 +01:00
|
|
|
import { __ } from 'i18n';
|
2021-11-19 09:44:44 +01:00
|
|
|
import { _converse, api } from "@converse/headless/core";
|
|
|
|
import { getPrettyStatus } from '../utils.js';
|
2021-04-14 22:56:59 +02:00
|
|
|
import { html } from "lit";
|
2020-01-23 10:18:41 +01:00
|
|
|
|
|
|
|
|
2021-11-14 09:09:58 +01:00
|
|
|
function tpl_signout (o) {
|
2020-08-16 23:33:17 +02:00
|
|
|
const i18n_logout = __('Log out');
|
2021-11-14 09:09:58 +01:00
|
|
|
return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${o.logout}>
|
|
|
|
<converse-icon color="var(--subdued-color)" class="fa fa-sign-out-alt" size="1em"></converse-icon>
|
|
|
|
</a>`
|
|
|
|
}
|
|
|
|
|
|
|
|
function tpl_user_settings_button (o) {
|
2020-08-16 23:33:17 +02:00
|
|
|
const i18n_details = __('Show details about this chat client');
|
2021-11-14 09:09:58 +01:00
|
|
|
return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}>
|
|
|
|
<converse-icon color="var(--subdued-color)" class="fa fa-cog" size="1em"></converse-icon>
|
|
|
|
</a>`;
|
|
|
|
}
|
|
|
|
|
2021-11-19 09:44:44 +01:00
|
|
|
export default (el) => {
|
|
|
|
const chat_status = el.model.get('status') || 'offline';
|
|
|
|
const fullname = el.model.vcard?.get('fullname') || _converse.bare_jid;
|
|
|
|
const status_message = el.model.get('status_message') || __("I am %1$s", getPrettyStatus(chat_status));
|
2021-11-14 09:09:58 +01:00
|
|
|
const i18n_change_status = __('Click to change your chat status');
|
2020-04-17 13:14:23 +02:00
|
|
|
const show_settings_button = api.settings.get('show_client_info') || api.settings.get('allow_adhoc_commands');
|
2021-11-14 09:09:58 +01:00
|
|
|
let classes, color;
|
2021-11-19 09:44:44 +01:00
|
|
|
if (chat_status === 'online') {
|
2021-11-14 09:09:58 +01:00
|
|
|
[classes, color] = ['fa fa-circle chat-status', 'chat-status-online'];
|
2021-11-19 09:44:44 +01:00
|
|
|
} else if (chat_status === 'dnd') {
|
2021-11-14 09:09:58 +01:00
|
|
|
[classes, color] = ['fa fa-minus-circle chat-status', 'chat-status-busy'];
|
2021-11-19 09:44:44 +01:00
|
|
|
} else if (chat_status === 'away') {
|
2021-11-14 09:09:58 +01:00
|
|
|
[classes, color] = ['fa fa-circle chat-status', 'chat-status-away'];
|
|
|
|
} else {
|
|
|
|
[classes, color] = ['fa fa-circle chat-status', 'subdued-color'];
|
|
|
|
}
|
2020-04-17 13:14:23 +02:00
|
|
|
return html`
|
2021-11-14 09:09:58 +01:00
|
|
|
<div class="userinfo controlbox-padded">
|
|
|
|
<div class="controlbox-section profile d-flex">
|
2021-11-19 09:44:44 +01:00
|
|
|
<a class="show-profile" href="#" @click=${el.showProfileModal}>
|
2021-11-19 11:45:30 +01:00
|
|
|
<converse-avatar class="avatar align-self-center"
|
|
|
|
.data=${el.model.vcard?.attributes}
|
|
|
|
nonce=${el.model.vcard?.get('vcard_updated')}
|
|
|
|
height="40" width="40"></converse-avatar>
|
2021-11-14 09:09:58 +01:00
|
|
|
</a>
|
2021-11-19 09:44:44 +01:00
|
|
|
<span class="username w-100 align-self-center">${fullname}</span>
|
|
|
|
${show_settings_button ? tpl_user_settings_button(el) : ''}
|
|
|
|
${api.settings.get('allow_logout') ? tpl_signout(el) : ''}
|
2021-11-14 09:09:58 +01:00
|
|
|
</div>
|
|
|
|
<div class="d-flex xmpp-status">
|
2021-11-19 09:44:44 +01:00
|
|
|
<a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${el.showStatusChangeModal}>
|
|
|
|
<span class="${chat_status} w-100 align-self-center" data-value="${chat_status}">
|
|
|
|
<converse-icon color="var(--${color})" size="1em" class="${classes}"></converse-icon> ${status_message}</span>
|
2021-11-14 09:09:58 +01:00
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
};
|