Use SVG icons and tweak message padding
This commit is contained in:
parent
125f45c447
commit
bef2cbb462
|
@ -1,6 +1,5 @@
|
||||||
import BootstrapModal from "plugins/modal/base.js";
|
import BootstrapModal from "plugins/modal/base.js";
|
||||||
import tpl_muc_details from "./templates/muc-details.js";
|
import tpl_muc_details from "./templates/muc-details.js";
|
||||||
import { __ } from 'i18n';
|
|
||||||
|
|
||||||
|
|
||||||
export default BootstrapModal.extend({
|
export default BootstrapModal.extend({
|
||||||
|
@ -15,13 +14,6 @@ export default BootstrapModal.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
toHTML () {
|
toHTML () {
|
||||||
return tpl_muc_details(Object.assign(
|
return tpl_muc_details(this.model);
|
||||||
this.model.toJSON(), {
|
|
||||||
'config': this.model.config.toJSON(),
|
|
||||||
'display_name': __('Groupchat info for %1$s', this.model.getDisplayName()),
|
|
||||||
'features': this.model.features.toJSON(),
|
|
||||||
'num_occupants': this.model.occupants.length,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -13,7 +13,13 @@ const subject = (o) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default (o) => {
|
export default (model) => {
|
||||||
|
const o = model.toJSON();
|
||||||
|
const config = model.config.toJSON();
|
||||||
|
const display_name = __('Groupchat info for %1$s', model.getDisplayName());
|
||||||
|
const features = model.features.toJSON();
|
||||||
|
const num_occupants = model.occupants.filter(o => o.get('show') !== 'offline').length;
|
||||||
|
|
||||||
const i18n_address = __('Groupchat XMPP address');
|
const i18n_address = __('Groupchat XMPP address');
|
||||||
const i18n_archiving = __('Message archiving');
|
const i18n_archiving = __('Message archiving');
|
||||||
const i18n_archiving_help = __('Messages are archived on the server');
|
const i18n_archiving_help = __('Messages are archived on the server');
|
||||||
|
@ -48,7 +54,7 @@ export default (o) => {
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="muc-details-modal-label">${o.display_name}</h5>
|
<h5 class="modal-title" id="muc-details-modal-label">${display_name}</h5>
|
||||||
${modal_header_close_button}
|
${modal_header_close_button}
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
@ -56,25 +62,25 @@ export default (o) => {
|
||||||
<div class="room-info">
|
<div class="room-info">
|
||||||
<p class="room-info"><strong>${i18n_name}</strong>: ${o.name}</p>
|
<p class="room-info"><strong>${i18n_name}</strong>: ${o.name}</p>
|
||||||
<p class="room-info"><strong>${i18n_address}</strong>: ${o.jid}</p>
|
<p class="room-info"><strong>${i18n_address}</strong>: ${o.jid}</p>
|
||||||
<p class="room-info"><strong>${i18n_desc}</strong>: ${o.config.description}</p>
|
<p class="room-info"><strong>${i18n_desc}</strong>: ${config.description}</p>
|
||||||
${ (o.subject) ? subject(o) : '' }
|
${ (o.subject) ? subject(o) : '' }
|
||||||
<p class="room-info"><strong>${i18n_online_users}</strong>: ${o.num_occupants}</p>
|
<p class="room-info"><strong>${i18n_online_users}</strong>: ${num_occupants}</p>
|
||||||
<p class="room-info"><strong>${i18n_features}</strong>:
|
<p class="room-info"><strong>${i18n_features}</strong>:
|
||||||
<div class="chatroom-features">
|
<div class="chatroom-features">
|
||||||
<ul class="features-list">
|
<ul class="features-list">
|
||||||
${ o.features.passwordprotected ? html`<li class="feature" ><span class="fa fa-lock"></span>${i18n_password_protected} - <em>${i18n_password_help}</em></li>` : '' }
|
${ features.passwordprotected ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-lock"></converse-icon size="1em">${i18n_password_protected} - <em>${i18n_password_help}</em></li>` : '' }
|
||||||
${ o.features.unsecured ? html`<li class="feature" ><span class="fa fa-unlock"></span>${i18n_no_password_required} - <em>${i18n_no_pass_help}</em></li>` : '' }
|
${ features.unsecured ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-unlock"></converse-icon size="1em">${i18n_no_password_required} - <em>${i18n_no_pass_help}</em></li>` : '' }
|
||||||
${ o.features.hidden ? html`<li class="feature" ><span class="fa fa-eye-slash"></span>${i18n_hidden} - <em>${i18n_hidden_help}</em></li>` : '' }
|
${ features.hidden ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-eye-slash"></converse-icon size="1em">${i18n_hidden} - <em>${i18n_hidden_help}</em></li>` : '' }
|
||||||
${ o.features.public_room ? html`<li class="feature" ><span class="fa fa-eye"></span>${i18n_public} - <em>${o.__('This groupchat is publicly searchable') }</em></li>` : '' }
|
${ features.public_room ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-eye"></converse-icon size="1em">${i18n_public} - <em>${o.__('This groupchat is publicly searchable') }</em></li>` : '' }
|
||||||
${ o.features.membersonly ? html`<li class="feature" ><span class="fa fa-address-book"></span>${i18n_members_only} - <em>${i18n_members_help}</em></li>` : '' }
|
${ features.membersonly ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-address-book"></converse-icon size="1em">${i18n_members_only} - <em>${i18n_members_help}</em></li>` : '' }
|
||||||
${ o.features.open ? html`<li class="feature" ><span class="fa fa-globe"></span>${i18n_open} - <em>${i18n_open_help}</em></li>` : '' }
|
${ features.open ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-globe"></converse-icon size="1em">${i18n_open} - <em>${i18n_open_help}</em></li>` : '' }
|
||||||
${ o.features.persistent ? html`<li class="feature" ><span class="fa fa-save"></span>${i18n_persistent} - <em>${i18n_persistent_help}</em></li>` : '' }
|
${ features.persistent ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-save"></converse-icon size="1em">${i18n_persistent} - <em>${i18n_persistent_help}</em></li>` : '' }
|
||||||
${ o.features.temporary ? html`<li class="feature" ><span class="fa fa-snowflake-o"></span>${i18n_temporary} - <em>${i18n_temporary_help}</em></li>` : '' }
|
${ features.temporary ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-snowflake-o"></converse-icon size="1em">${i18n_temporary} - <em>${i18n_temporary_help}</em></li>` : '' }
|
||||||
${ o.features.nonanonymous ? html`<li class="feature" ><span class="fa fa-id-card"></span>${i18n_not_anonymous} - <em>${i18n_not_anonymous_help}</em></li>` : '' }
|
${ features.nonanonymous ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-id-card"></converse-icon size="1em">${i18n_not_anonymous} - <em>${i18n_not_anonymous_help}</em></li>` : '' }
|
||||||
${ o.features.semianonymous ? html`<li class="feature" ><span class="fa fa-user-secret"></span>${i18n_semi_anon} - <em>${i18n_semi_anon_help}</em></li>` : '' }
|
${ features.semianonymous ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-user-secret"></converse-icon size="1em">${i18n_semi_anon} - <em>${i18n_semi_anon_help}</em></li>` : '' }
|
||||||
${ o.features.moderated ? html`<li class="feature" ><span class="fa fa-gavel"></span>${i18n_moderated} - <em>${i18n_moderated_help}</em></li>` : '' }
|
${ features.moderated ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-gavel"></converse-icon size="1em">${i18n_moderated} - <em>${i18n_moderated_help}</em></li>` : '' }
|
||||||
${ o.features.unmoderated ? html`<li class="feature" ><span class="fa fa-info-circle"></span>${i18n_not_moderated} - <em>${i18n_not_moderated_help}</em></li>` : '' }
|
${ features.unmoderated ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-info-circle"></converse-icon size="1em">${i18n_not_moderated} - <em>${i18n_not_moderated_help}</em></li>` : '' }
|
||||||
${ o.features.mam_enabled ? html`<li class="feature" ><span class="fa fa-database"></span>${i18n_archiving} - <em>${i18n_archiving_help}</em></li>` : '' }
|
${ features.mam_enabled ? html`<li class="feature" ><converse-icon size="1em" class="fa fa-database"></converse-icon size="1em">${i18n_archiving} - <em>${i18n_archiving_help}</em></li>` : '' }
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -8,7 +8,12 @@ const remove_button = (o) => {
|
||||||
const i18n_remove_contact = __('Remove as contact');
|
const i18n_remove_contact = __('Remove as contact');
|
||||||
return html`
|
return html`
|
||||||
<button type="button" @click="${o.removeContact}" class="btn btn-danger remove-contact">
|
<button type="button" @click="${o.removeContact}" class="btn btn-danger remove-contact">
|
||||||
<i class="far fa-trash-alt"></i>${i18n_remove_contact}
|
<converse-icon
|
||||||
|
class="fas fa-trash-alt"
|
||||||
|
color="var(--text-color-lighten-15-percent)"
|
||||||
|
size="1em"
|
||||||
|
></converse-icon>
|
||||||
|
${i18n_remove_contact}
|
||||||
</button>
|
</button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import BootstrapModal from "plugins/modal/base.js";
|
import BootstrapModal from "plugins/modal/base.js";
|
||||||
import head from "lodash-es/head";
|
import head from "lodash-es/head";
|
||||||
import log from "@converse/headless/log";
|
import log from "@converse/headless/log";
|
||||||
import tpl_list_chatrooms_modal from "../templates/muc-list.js";
|
import tpl_muc_list from "../templates/muc-list.js";
|
||||||
import tpl_muc_description from "../templates/muc-description.js";
|
import tpl_muc_description from "../templates/muc-description.js";
|
||||||
import tpl_spinner from "templates/spinner.js";
|
import tpl_spinner from "templates/spinner.js";
|
||||||
import { __ } from 'i18n';
|
import { __ } from 'i18n';
|
||||||
|
@ -87,7 +87,7 @@ export default BootstrapModal.extend({
|
||||||
|
|
||||||
toHTML () {
|
toHTML () {
|
||||||
const muc_domain = this.model.get('muc_domain') || api.settings.get('muc_domain');
|
const muc_domain = this.model.get('muc_domain') || api.settings.get('muc_domain');
|
||||||
return tpl_list_chatrooms_modal(
|
return tpl_muc_list(
|
||||||
Object.assign(this.model.toJSON(), {
|
Object.assign(this.model.toJSON(), {
|
||||||
'show_form': !api.settings.get('locked_muc_domain'),
|
'show_form': !api.settings.get('locked_muc_domain'),
|
||||||
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org'),
|
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org'),
|
||||||
|
|
|
@ -17,32 +17,32 @@ export default (o) => html`
|
||||||
<input ?checked=${o.status === 'online'}
|
<input ?checked=${o.status === 'online'}
|
||||||
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
|
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
|
||||||
<label class="custom-control-label" for="radio-online">
|
<label class="custom-control-label" for="radio-online">
|
||||||
<span class="fa fa-circle chat-status chat-status--online"></span>${o.label_online}</label>
|
<converse-icon size="1em" class="fa fa-circle chat-status chat-status--online"></converse-icon>${o.label_online}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-control custom-radio">
|
<div class="custom-control custom-radio">
|
||||||
<input ?checked=${o.status === 'busy'}
|
<input ?checked=${o.status === 'busy'}
|
||||||
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
|
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
|
||||||
<label class="custom-control-label" for="radio-busy">
|
<label class="custom-control-label" for="radio-busy">
|
||||||
<span class="fa fa-minus-circle chat-status chat-status--busy"></span>${o.label_busy}</label>
|
<converse-icon size="1em" class="fa fa-minus-circle chat-status chat-status--busy"></converse-icon>${o.label_busy}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-control custom-radio">
|
<div class="custom-control custom-radio">
|
||||||
<input ?checked=${o.status === 'away'}
|
<input ?checked=${o.status === 'away'}
|
||||||
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
|
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
|
||||||
<label class="custom-control-label" for="radio-away">
|
<label class="custom-control-label" for="radio-away">
|
||||||
<span class="fa fa-circle chat-status chat-status--away"></span>${o.label_away}</label>
|
<converse-icon size="1em" class="fa fa-circle chat-status chat-status--away"></converse-icon>${o.label_away}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-control custom-radio">
|
<div class="custom-control custom-radio">
|
||||||
<input ?checked=${o.status === 'xa'}
|
<input ?checked=${o.status === 'xa'}
|
||||||
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
|
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
|
||||||
<label class="custom-control-label" for="radio-xa">
|
<label class="custom-control-label" for="radio-xa">
|
||||||
<span class="far fa-circle chat-status chat-status--xa"></span>${o.label_xa}</label>
|
<converse-icon size="1em" class="far fa-circle chat-status chat-status--xa"></converse-icon>${o.label_xa}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="btn-group w-100">
|
<div class="btn-group w-100">
|
||||||
<input name="status_message" type="text" class="form-control"
|
<input name="status_message" type="text" class="form-control"
|
||||||
value="${o.status_message || ''}" placeholder="${o.placeholder_status_message}"/>
|
value="${o.status_message || ''}" placeholder="${o.placeholder_status_message}"/>
|
||||||
<span class="clear-input fa fa-times ${o.status_message ? '' : 'hidden'}"></span>
|
<converse-icon size="1em" class="fa fa-times clear-input ${o.status_message ? '' : 'hidden'}"></converse-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">${o.label_save}</button>
|
<button type="submit" class="btn btn-primary">${o.label_save}</button>
|
||||||
|
|
|
@ -3,6 +3,7 @@ import tpl_roster_filter from "./templates/roster_filter.js";
|
||||||
import { CustomElement } from 'shared/components/element.js';
|
import { CustomElement } from 'shared/components/element.js';
|
||||||
import { Model } from '@converse/skeletor/src/model.js';
|
import { Model } from '@converse/skeletor/src/model.js';
|
||||||
import { _converse, api } from "@converse/headless/core";
|
import { _converse, api } from "@converse/headless/core";
|
||||||
|
import { ancestor } from 'utils/html.js';
|
||||||
import { initStorage } from '@converse/headless/utils/storage.js';
|
import { initStorage } from '@converse/headless/utils/storage.js';
|
||||||
|
|
||||||
export const RosterFilter = Model.extend({
|
export const RosterFilter = Model.extend({
|
||||||
|
@ -62,7 +63,7 @@ export class RosterFilterView extends CustomElement {
|
||||||
|
|
||||||
changeTypeFilter (ev) {
|
changeTypeFilter (ev) {
|
||||||
ev && ev.preventDefault();
|
ev && ev.preventDefault();
|
||||||
const type = ev.target.dataset.type;
|
const type = ancestor(ev.target, 'converse-icon')?.dataset.type || 'contacts';
|
||||||
if (type === 'state') {
|
if (type === 'state') {
|
||||||
this.model.save({
|
this.model.save({
|
||||||
'filter_type': type,
|
'filter_type': type,
|
||||||
|
|
|
@ -30,10 +30,8 @@
|
||||||
padding: 0.2em;
|
padding: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
converse-icon {
|
||||||
padding: 0.3em;
|
padding: 0.25em;
|
||||||
min-width: 25px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.roster-filter {
|
.roster-filter {
|
||||||
|
@ -56,6 +54,16 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
|
.roster-group-contacts {
|
||||||
|
.list-item {
|
||||||
|
&:hover {
|
||||||
|
.list-item-action {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
converse-roster-contact {
|
converse-roster-contact {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -63,6 +71,16 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.list-item-action {
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.list-item-action {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-toggle {
|
.group-toggle {
|
||||||
|
|
|
@ -21,18 +21,18 @@ export default (o) => {
|
||||||
@submit=${o.submitFilter}>
|
@submit=${o.submitFilter}>
|
||||||
<div class="form-inline flex-nowrap">
|
<div class="form-inline flex-nowrap">
|
||||||
<div class="filter-by d-flex flex-nowrap">
|
<div class="filter-by d-flex flex-nowrap">
|
||||||
<span @click=${o.changeTypeFilter} class="clickable fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
|
<converse-icon size="1em" @click=${o.changeTypeFilter} class="fa fa-user clickable ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></converse-icon>
|
||||||
<span @click=${o.changeTypeFilter} class="clickable fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
|
<converse-icon size="1em" @click=${o.changeTypeFilter} class="fa fa-users clickable ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></converse-icon>
|
||||||
<span @click=${o.changeTypeFilter} class="clickable fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
|
<converse-icon size="1em" @click=${o.changeTypeFilter} class="fa fa-circle clickable ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></converse-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<input .value="${o.filter_text || ''}"
|
<input .value="${o.filter_text || ''}"
|
||||||
@keydown=${o.liveFilter}
|
@keydown=${o.liveFilter}
|
||||||
class="roster-filter form-control ${ (o.filter_type === 'state') ? 'hidden' : '' }"
|
class="roster-filter form-control ${ (o.filter_type === 'state') ? 'hidden' : '' }"
|
||||||
placeholder="${i18n_placeholder}"/>
|
placeholder="${i18n_placeholder}"/>
|
||||||
<span class="clear-input fa fa-times ${ (!o.filter_text || o.filter_type === 'state') ? 'hidden' : '' }"
|
<converse-icon size="1em" class="fa fa-times clear-input ${ (!o.filter_text || o.filter_type === 'state') ? 'hidden' : '' }"
|
||||||
@click=${o.clearFilter}>
|
@click=${o.clearFilter}>
|
||||||
</span>
|
</converse-icon>
|
||||||
</div>
|
</div>
|
||||||
<select class="form-control state-type ${ (o.filter_type !== 'state') ? 'hidden' : '' }"
|
<select class="form-control state-type ${ (o.filter_type !== 'state') ? 'hidden' : '' }"
|
||||||
@change=${o.changeChatStateFilter}>
|
@change=${o.changeChatStateFilter}>
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
import { __ } from 'i18n';
|
import { __ } from 'i18n';
|
||||||
import { api } from "@converse/headless/core";
|
import { api } from "@converse/headless/core.js";
|
||||||
import { html } from "lit";
|
import { html } from "lit";
|
||||||
import { STATUSES } from '../constants.js';
|
import { STATUSES } from '../constants.js';
|
||||||
|
|
||||||
|
const tpl_remove_link = (el, item) => {
|
||||||
|
const display_name = item.getDisplayName();
|
||||||
|
const i18n_remove = __('Click to remove %1$s as a contact', display_name);
|
||||||
|
return html`
|
||||||
|
<a class="list-item-action remove-xmpp-contact" @click=${el.removeContact} title="${i18n_remove}" href="#">
|
||||||
|
<converse-icon class="fa fa-trash-alt" size="1.5em"></converse-icon>
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
export default (el, item) => {
|
export default (el, item) => {
|
||||||
const show = item.presence.get('show') || 'offline';
|
const show = item.presence.get('show') || 'offline';
|
||||||
|
@ -16,11 +25,10 @@ export default (el, item) => {
|
||||||
} else {
|
} else {
|
||||||
[classes, color] = ['fa fa-circle', 'subdued-color'];
|
[classes, color] = ['fa fa-circle', 'subdued-color'];
|
||||||
}
|
}
|
||||||
const display_name = item.getDisplayName();
|
|
||||||
const desc_status = STATUSES[show];
|
const desc_status = STATUSES[show];
|
||||||
const num_unread = item.get('num_unread') || 0;
|
const num_unread = item.get('num_unread') || 0;
|
||||||
|
const display_name = item.getDisplayName();
|
||||||
const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', display_name, el.model.get('jid'));
|
const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', display_name, el.model.get('jid'));
|
||||||
const i18n_remove = __('Click to remove %1$s as a contact', display_name);
|
|
||||||
return html`
|
return html`
|
||||||
<a class="list-item-link cbox-list-item open-chat ${ num_unread ? 'unread-msgs' : '' }" title="${i18n_chat}" href="#" @click=${el.openChat}>
|
<a class="list-item-link cbox-list-item open-chat ${ num_unread ? 'unread-msgs' : '' }" title="${i18n_chat}" href="#" @click=${el.openChat}>
|
||||||
<span>
|
<span>
|
||||||
|
@ -38,5 +46,5 @@ export default (el, item) => {
|
||||||
${ num_unread ? html`<span class="msgs-indicator">${ num_unread }</span>` : '' }
|
${ num_unread ? html`<span class="msgs-indicator">${ num_unread }</span>` : '' }
|
||||||
<span class="contact-name contact-name--${el.show} ${ num_unread ? 'unread-msgs' : ''}">${display_name}</span>
|
<span class="contact-name contact-name--${el.show} ${ num_unread ? 'unread-msgs' : ''}">${display_name}</span>
|
||||||
</a>
|
</a>
|
||||||
${ api.settings.get('allow_contact_removal') ? html`<a class="list-item-action remove-xmpp-contact far fa-trash-alt" @click=${el.removeContact} title="${i18n_remove}" href="#"></a>` : '' }`;
|
${ api.settings.get('allow_contact_removal') ? tpl_remove_link(el, item) : '' }`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import './message-history';
|
import './message-history';
|
||||||
|
import tpl_spinner from "templates/spinner.js";
|
||||||
import { CustomElement } from 'shared/components/element.js';
|
import { CustomElement } from 'shared/components/element.js';
|
||||||
import { api } from '@converse/headless/core';
|
import { api } from '@converse/headless/core';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
|
@ -56,7 +57,7 @@ export default class ChatContent extends CustomElement {
|
||||||
.model=${this.model}
|
.model=${this.model}
|
||||||
.messages=${[...this.model.messages.models]}>
|
.messages=${[...this.model.messages.models]}>
|
||||||
</converse-message-history>
|
</converse-message-history>
|
||||||
${ this.model.ui?.get('chat-content-spinner-top') ? html`<span class="spinner fa fa-spinner centered"></span>` : '' }
|
${ this.model.ui?.get('chat-content-spinner-top') ? tpl_spinner() : '' }
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -57,7 +57,6 @@ class MessageActions extends CustomElement {
|
||||||
<button class="chat-msg__action ${o.button_class}" @click=${o.handler}>
|
<button class="chat-msg__action ${o.button_class}" @click=${o.handler}>
|
||||||
<converse-icon
|
<converse-icon
|
||||||
class="${o.icon_class}"
|
class="${o.icon_class}"
|
||||||
path-prefix="${api.settings.get('assets_path')}"
|
|
||||||
color="var(--text-color-lighten-15-percent)"
|
color="var(--text-color-lighten-15-percent)"
|
||||||
size="1em"
|
size="1em"
|
||||||
></converse-icon>
|
></converse-icon>
|
||||||
|
|
|
@ -60,7 +60,7 @@ export class ChatToolbar extends CustomElement {
|
||||||
const i18n_start_call = __('Start a call');
|
const i18n_start_call = __('Start a call');
|
||||||
buttons.push(html`
|
buttons.push(html`
|
||||||
<button class="toggle-call" @click=${this.toggleCall} title="${i18n_start_call}">
|
<button class="toggle-call" @click=${this.toggleCall} title="${i18n_start_call}">
|
||||||
<converse-icon color="var(${color})" class="fa fa-phone" path-prefix="/dist" size="1em"></converse-icon>
|
<converse-icon color="var(${color})" class="fa fa-phone" size="1em"></converse-icon>
|
||||||
</button>`
|
</button>`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -90,7 +90,7 @@ export class ChatToolbar extends CustomElement {
|
||||||
<converse-icon
|
<converse-icon
|
||||||
color="var(--muc-toolbar-btn-color)"
|
color="var(--muc-toolbar-btn-color)"
|
||||||
class="fa ${this.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right`}"
|
class="fa ${this.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right`}"
|
||||||
path-prefix="${api.settings.get('assets_path')}" size="1em"></converse-icon>
|
size="1em"></converse-icon>
|
||||||
</button>`
|
</button>`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -118,7 +118,6 @@ export class ChatToolbar extends CustomElement {
|
||||||
<converse-icon
|
<converse-icon
|
||||||
color="var(${color})"
|
color="var(${color})"
|
||||||
class="fa fa-paperclip"
|
class="fa fa-paperclip"
|
||||||
path-prefix="${api.settings.get('assets_path')}"
|
|
||||||
size="1em"></converse-icon>
|
size="1em"></converse-icon>
|
||||||
</button>
|
</button>
|
||||||
<input type="file" @change=${this.onFileSelection} class="fileupload" multiple="" style="display:none"/>`;
|
<input type="file" @change=${this.onFileSelection} class="fileupload" multiple="" style="display:none"/>`;
|
||||||
|
@ -147,7 +146,6 @@ export class ChatToolbar extends CustomElement {
|
||||||
<converse-icon
|
<converse-icon
|
||||||
color="var(${color})"
|
color="var(${color})"
|
||||||
class="fa ${this.composing_spoiler ? 'fa-eye-slash' : 'fa-eye'}"
|
class="fa ${this.composing_spoiler ? 'fa-eye-slash' : 'fa-eye'}"
|
||||||
path-prefix="${api.settings.get('assets_path')}"
|
|
||||||
size="1em"></converse-icon>
|
size="1em"></converse-icon>
|
||||||
</button>`;
|
</button>`;
|
||||||
|
|
||||||
|
|
|
@ -5,12 +5,19 @@ converse-icon {
|
||||||
svg {
|
svg {
|
||||||
fill: var(--subdued-color);
|
fill: var(--subdued-color);
|
||||||
}
|
}
|
||||||
}
|
&.clickable {
|
||||||
|
&:hover {
|
||||||
a, .clickable {
|
svg {
|
||||||
converse-icon {
|
fill: var(--icon-hover-color);
|
||||||
svg {
|
}
|
||||||
&:hover {
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a, .clickable {
|
||||||
|
converse-icon {
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
fill: var(--icon-hover-color);
|
fill: var(--icon-hover-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { __ } from '../i18n';
|
import { __ } from '../i18n';
|
||||||
import { api } from "@converse/headless/core";
|
|
||||||
import { directive, html } from "lit";
|
import { directive, html } from "lit";
|
||||||
|
|
||||||
|
|
||||||
|
@ -8,7 +7,6 @@ const tpl_retract = (o) => html`
|
||||||
<button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
|
<button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
|
||||||
<converse-icon
|
<converse-icon
|
||||||
class="fas fa-trash-alt"
|
class="fas fa-trash-alt"
|
||||||
path-prefix="${api.settings.get("assets_path")}"
|
|
||||||
color="var(--text-color-lighten-15-percent)"
|
color="var(--text-color-lighten-15-percent)"
|
||||||
size="1em"
|
size="1em"
|
||||||
></converse-icon>
|
></converse-icon>
|
||||||
|
|
|
@ -264,6 +264,9 @@
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: var(--link-color) !important;
|
color: var(--link-color) !important;
|
||||||
|
svg {
|
||||||
|
fill: var(--link-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle {
|
.circle {
|
||||||
|
@ -365,17 +368,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner__container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.spinner {
|
|
||||||
animation: spin 2s infinite, linear;
|
|
||||||
width: 1em;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.left {
|
.left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,7 @@
|
||||||
@import "themes/dracula";
|
@import "themes/dracula";
|
||||||
|
|
||||||
@import "core";
|
@import "core";
|
||||||
|
@import "spinner";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
@import "badges";
|
@import "badges";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
|
|
|
@ -108,11 +108,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
padding: 0 1rem;
|
padding: 0.25em 1rem;
|
||||||
|
|
||||||
&.chat-msg--with-avatar {
|
|
||||||
padding-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.onload {
|
&.onload {
|
||||||
animation: colorchange-chatmessage 1s;
|
animation: colorchange-chatmessage 1s;
|
||||||
|
@ -144,7 +140,7 @@
|
||||||
}
|
}
|
||||||
&:before {
|
&:before {
|
||||||
padding-right: 0.25em;
|
padding-right: 0.25em;
|
||||||
whitespace: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -170,7 +166,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-msg__message {
|
.chat-msg__message {
|
||||||
line-height: 1.5em;
|
line-height: 1.65em;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
19
src/shared/styles/spinner.scss
Normal file
19
src/shared/styles/spinner.scss
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
.conversejs {
|
||||||
|
|
||||||
|
.spinner__container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
animation: spin 2s infinite, linear;
|
||||||
|
width: 1em;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,18 +17,23 @@
|
||||||
}
|
}
|
||||||
.chat-status--online {
|
.chat-status--online {
|
||||||
color: var(--chat-status-online);
|
color: var(--chat-status-online);
|
||||||
|
svg {
|
||||||
|
fill: var(--chat-status-online);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chat-status--busy {
|
.chat-status--busy {
|
||||||
color: var(--chat-status-busy);
|
color: var(--chat-status-busy);
|
||||||
|
svg {
|
||||||
|
fill: var(--chat-status-busy);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chat-status--away {
|
.chat-status--away {
|
||||||
color: var(--chat-status-away);
|
color: var(--chat-status-away);
|
||||||
|
svg {
|
||||||
|
fill: var(--chat-status-away);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chat-status--offline {
|
.chat-status--offline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.far.fa-circle,
|
|
||||||
.fa-times-circle {
|
|
||||||
color: var(--subdued-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,8 +2,8 @@ import { html } from "lit";
|
||||||
|
|
||||||
export default (o={}) => {
|
export default (o={}) => {
|
||||||
if (o.classes?.includes('hor_centered')) {
|
if (o.classes?.includes('hor_centered')) {
|
||||||
return html`<div class="spinner__container"><span class="spinner fa fa-spinner centered ${o.classes || ''}"/></div>`
|
return html`<div class="spinner__container"><converse-icon size="1em" class="fa fa-spinner spinner centered ${o.classes || ''}"></converse-icon></div>`
|
||||||
} else {
|
} else {
|
||||||
return html`<span class="spinner fa fa-spinner centered ${o.classes || ''}"/>`
|
return html`<converse-icon size="1em" class="fa fa-spinner spinner centered ${o.classes || ''}"></converse-icon>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -200,13 +200,13 @@ u.hideElement = function (el) {
|
||||||
return el;
|
return el;
|
||||||
};
|
};
|
||||||
|
|
||||||
u.ancestor = function (el, selector) {
|
export function ancestor (el, selector) {
|
||||||
let parent = el;
|
let parent = el;
|
||||||
while (parent !== null && !sizzle.matchesSelector(parent, selector)) {
|
while (parent !== null && !sizzle.matchesSelector(parent, selector)) {
|
||||||
parent = parent.parentElement;
|
parent = parent.parentElement;
|
||||||
}
|
}
|
||||||
return parent;
|
return parent;
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the element's siblings until one matches the selector.
|
* Return the element's siblings until one matches the selector.
|
||||||
|
@ -513,6 +513,6 @@ u.xForm2TemplateResult = function (field, stanza, options) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.assign(u, { getOOBURLMarkup });
|
Object.assign(u, { getOOBURLMarkup, ancestor });
|
||||||
|
|
||||||
export default u;
|
export default u;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user