2021-01-22 15:45:44 +01:00
|
|
|
import { __ } from 'i18n';
|
2020-12-03 13:40:30 +01:00
|
|
|
import { api } from "@converse/headless/core";
|
2021-04-14 22:56:59 +02:00
|
|
|
import { html } from "lit";
|
2020-01-23 10:18:41 +01:00
|
|
|
|
|
|
|
|
2020-04-17 13:14:23 +02:00
|
|
|
export default (o) => {
|
2020-08-16 23:33:17 +02:00
|
|
|
const i18n_logout = __('Log out');
|
|
|
|
const i18n_change_status = __('Click to change your chat status');
|
|
|
|
const i18n_details = __('Show details about this chat client');
|
2020-04-17 13:14:23 +02:00
|
|
|
const show_settings_button = api.settings.get('show_client_info') || api.settings.get('allow_adhoc_commands');
|
|
|
|
return html`
|
2020-01-23 10:18:41 +01:00
|
|
|
<div class="userinfo controlbox-padded">
|
|
|
|
<div class="controlbox-section profile d-flex">
|
2021-01-22 16:07:52 +01:00
|
|
|
<a class="show-profile" href="#" @click=${o.showProfileModal}>
|
2020-01-23 10:18:41 +01:00
|
|
|
<canvas class="avatar align-self-center" height="40" width="40"></canvas>
|
|
|
|
</a>
|
|
|
|
<span class="username w-100 align-self-center">${o.fullname}</span>
|
2020-04-17 13:14:23 +02:00
|
|
|
${show_settings_button ? html`<a class="controlbox-heading__btn show-client-info fa fa-cog align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}></a>` : ''}
|
2021-01-22 16:07:52 +01:00
|
|
|
${api.settings.get('allow_logout') ? html`<a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="${i18n_logout}" @click=${o.logout}></a>` : ''}
|
2020-01-23 10:18:41 +01:00
|
|
|
</div>
|
|
|
|
<div class="d-flex xmpp-status">
|
2021-01-22 16:07:52 +01:00
|
|
|
<a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${o.showStatusChangeModal}>
|
2020-01-23 10:18:41 +01:00
|
|
|
<span class="${o.chat_status} w-100 align-self-center" data-value="${o.chat_status}">
|
|
|
|
<span class="
|
|
|
|
${o.chat_status === 'online' && 'fa fa-circle chat-status chat-status--online'}
|
|
|
|
${o.chat_status === 'dnd' && 'fa fa-minus-circle chat-status chat-status--busy'}
|
|
|
|
${o.chat_status === 'away' && 'fa fa-circle chat-status chat-status--away'}
|
|
|
|
${o.chat_status === 'xa' && 'far fa-circle chat-status chat-status--xa '}
|
|
|
|
${o.chat_status === 'offline' && 'fa fa-circle chat-status chat-status--offline'}"></span> ${o.status_message}</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-04-17 13:14:23 +02:00
|
|
|
`};
|