Chapril/xmpp.chapril.org-conversejs
Chapril
/
xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Replace more font icons with svg icons 

Updates #1004
This commit is contained in:
JC Brand 2021-11-14 09:09:58 +01:00
parent 571cb3bac1
commit 1ee75b78b7
16 changed files with 111 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -2,6 +2,7 @@
## 9.0.0 (Unreleased)
- Add initial support for XEP-0421 occupant Ids.
- Use more specific types for form fields based on XEP-0122
- Fix trimming of chats in overlayed view mode
- OMEMO bugfix: Always create device session based on real JID.

2
demo/embedded.html
View File

@ -44,7 +44,7 @@
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="brand-heading fade-in" style="margin-bottom: 0">
<h1 class="brand-heading fade-in" style="margin: 1.5em 0 0 0">
<svg class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"

1
package-lock.json generated
View File

@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
"name": "converse.js",
"version": "8.0.1",
"license": "MPL-2.0",
"dependencies": {

2
src/plugins/bookmark-views/utils.js
View File

@ -18,7 +18,7 @@ export function getHeadingButtons (view, buttons) {
};
const names = buttons.map(t => t.name);
const idx = names.indexOf('details');
const data_promise = checkBookmarksSupport().then(s => (s ? data : ''));
const data_promise = checkBookmarksSupport().then(s => (s ? data : null));
return idx > -1 ? [...buttons.slice(0, idx), data_promise, ...buttons.slice(idx)] : [data_promise, ...buttons];
}
return buttons;

4
src/plugins/chatview/utils.js
View File

@ -11,12 +11,12 @@ export function clearHistory (jid) {
export async function getHeadingDropdownItem (promise_or_data) {
const data = await promise_or_data;
return html`
return data ? html`
<a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
<converse-icon size="1em" color="var(--text-color-lighten-15-percent)" class="fa ${data.icon_class}"></converse-icon>
${data.i18n_text}
</a>
`;
` : '';
}
export async function getHeadingStandaloneButton (promise_or_data) {

3
src/plugins/controlbox/styles/_controlbox.scss
View File

@ -263,10 +263,9 @@
.controlbox-heading__btn {
cursor: pointer;
padding: 0 0 0 1em;
font-size: 1em;
padding: 0;
margin: var(--controlbox-heading-top-margin) 0 var(--inline-action-margin) 0;
min-width: 25px;
text-align: center;
&.fa-vcard {
margin-top: 1em;

1
src/plugins/muc-views/heading.js
View File

@ -173,6 +173,7 @@ export default class MUCHeading extends ElementView {
'name': 'signout'
});
}
const chatview = _converse.chatboxviews.get(this.getAttribute('jid'));
if (chatview) {
return _converse.api.hook('getHeadingButtons', chatview, buttons);

4
src/plugins/muc-views/templates/muc-sidebar.js
View File

@ -28,7 +28,9 @@ export default (o) => {
return html`
<div class="occupants-header">
<i class="hide-occupants fa fa-times" @click=${o.closeSidebar}></i>
<i class="hide-occupants" @click=${o.closeSidebar}>
<converse-icon color="var(--text-color)" class="fa fa-times" size="1em"></converse-icon>
</i>
<div class="occupants-header--title">
<span class="occupants-heading">${i18n_participants}</span>
</div>

65
src/plugins/profile/templates/profile.js
View File

@ -3,31 +3,48 @@ import { api } from "@converse/headless/core";
import { html } from "lit";
export default (o) => {
function tpl_signout (o) {
const i18n_logout = __('Log out');
const i18n_change_status = __('Click to change your chat status');
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) {
const i18n_details = __('Show details about this chat client');
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>`;
}
export default (o) => {
const i18n_change_status = __('Click to change your chat status');
const show_settings_button = api.settings.get('show_client_info') || api.settings.get('allow_adhoc_commands');
let classes, color;
if (o.chat_status === 'online') {
[classes, color] = ['fa fa-circle chat-status', 'chat-status-online'];
} else if (o.chat_status === 'dnd') {
[classes, color] = ['fa fa-minus-circle chat-status', 'chat-status-busy'];
} else if (o.chat_status === 'away') {
[classes, color] = ['fa fa-circle chat-status', 'chat-status-away'];
} else {
[classes, color] = ['fa fa-circle chat-status', 'subdued-color'];
}
return html`
<div class="userinfo controlbox-padded">
<div class="controlbox-section profile d-flex">
<a class="show-profile" href="#" @click=${o.showProfileModal}>
<canvas class="avatar align-self-center" height="40" width="40"></canvas>
</a>
<span class="username w-100 align-self-center">${o.fullname}</span>
${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>` : ''}
${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>` : ''}
</div>
<div class="d-flex xmpp-status">
<a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${o.showStatusChangeModal}>
<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>
`};
<div class="userinfo controlbox-padded">
<div class="controlbox-section profile d-flex">
<a class="show-profile" href="#" @click=${o.showProfileModal}>
<canvas class="avatar align-self-center" height="40" width="40"></canvas>
</a>
<span class="username w-100 align-self-center">${o.fullname}</span>
${show_settings_button ? tpl_user_settings_button(o) : ''}
${api.settings.get('allow_logout') ? tpl_signout(o) : ''}
</div>
<div class="d-flex xmpp-status">
<a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${o.showStatusChangeModal}>
<span class="${o.chat_status} w-100 align-self-center" data-value="${o.chat_status}">
<converse-icon color="var(--${color})" size="1em" class="${classes}"></converse-icon> ${o.status_message}</span>
</a>
</div>
</div>`
};

2
src/plugins/push/tests/push.js
View File

@ -106,7 +106,7 @@ describe("XEP-0357 Push Notifications", function () {
it("can be disabled",
mock.initConverse(
[], {
['chatBoxesFetched'], {
'push_app_servers': [{
'jid': 'push-5@client.example',
'node': 'yxs32uqsflafdk3iuqo',

17
src/shared/chat/templates/toolbar.js Normal file
View File

@ -0,0 +1,17 @@
import { __ } from 'i18n';
import { html } from 'lit';
import { until } from 'lit/directives/until.js';
function tpl_send_button () {
const i18n_send_message = __('Send the message');
return html`<button type="submit" class="btn send-button" title="${ i18n_send_message }">
<converse-icon color="var(--toolbar-btn-text-color)" class="fa fa-paper-plane" size="1em"></converse-icon>
</button>`
}
export default (el) => {
return html`
<span class="toolbar-buttons">${until(el.getButtons(), '')}</span>
${ el.show_send_button ? tpl_send_button() : '' }
`;
}

7
src/shared/chat/toolbar.js
View File

@ -1,5 +1,6 @@
import './emoji-picker.js';
import 'shared/chat/message-limit.js';
import tpl_toolbar from './templates/toolbar.js';
import { CustomElement } from 'shared/components/element.js';
import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core';
@ -33,11 +34,7 @@ export class ChatToolbar extends CustomElement {
}
render () {
const i18n_send_message = __('Send the message');
return html`
<span class="toolbar-buttons">${until(this.getButtons(), '')}</span>
${ this.show_send_button ? html`<button type="submit" class="btn send-button fa fa-paper-plane" title="${ i18n_send_message }"></button>` : '' }
`;
return tpl_toolbar(this);
}
firstUpdated () {

2
src/shared/components/icons.js
View File

@ -32,7 +32,7 @@ class ConverseIcon extends CustomElement {
}
getSource () {
return `#icon-${this.class_name.split(" ")[1].replace("fa-", "")}`;
return `#icon-${this.class_name.trim().split(" ")[1].replace("fa-", "")}`;
}
getStyles () {

65
src/shared/components/styles/dropdown.scss
View File

@ -5,36 +5,43 @@
.conversejs {
@import "bootstrap/scss/dropdown";
converse-dropdown {
&.dropup {
&.dropup--left {
.dropdown-menu {
right: 100%;
left: auto;
}
}
}
&.dropup {
&.dropup--left {
.dropdown-menu {
right: 100%;
left: auto;
}
}
}
.btn--standalone {
padding: 0 0.2em;
margin: 0;
}
.dropdown-menu {
margin-top: -0.2em !important;
}
.btn--standalone {
padding: 0 0.2em;
margin: 0;
}
.dropdown-item {
padding: 0.5rem 1rem;
.fa {
width: 1.25em;
margin-right: 0.75rem;
}
&:active, &.selected {
color: white !important;
background-color: var(--list-item-open-color);
.fa {
color: white !important;
}
}
}
.dropdown-menu {
margin-top: -0.2em !important;
}
.dropdown-item {
line-height: 1em;
color: var(--text-color);
padding: 0.5rem 1rem;
converse-icon {
margin-top: -0.1em;
width: 1.25em;
margin-right: 0;
}
&:active, &.selected {
color: white !important;
background-color: var(--list-item-open-color);
.fa {
color: white !important;
}
}
&:hover {
color: var(--text-color);
}
}
}
}

2
src/shared/styles/_variables.scss
View File

@ -63,6 +63,8 @@ $mobile_portrait_length: 480px !default;
--chat-toolbar-btn-color: var(--green);
--chat-toolbar-btn-disabled-color: gray;
--toolbar-btn-text-color: white;
--chat-content-background-color: white;
--chat-info-color: var(--chatroom-head-bg-color);

2
src/shared/tests/mock.js
View File

@ -36,7 +36,7 @@ function initConverse (promise_names=[], settings=null, func) {
async function waitUntilDiscoConfirmed (_converse, entity_jid, identities, features=[], items=[], type='info') {
const sel = `iq[to="${entity_jid}"] query[xmlns="http://jabber.org/protocol/disco#${type}"]`;
const iq = await u.waitUntil(() => _converse.connection.IQ_stanzas.filter(iq => sizzle(sel, iq).length).pop(), 300);
const iq = await u.waitUntil(() => _converse.connection.IQ_stanzas.filter(iq => sizzle(sel, iq).length).pop());
const stanza = $iq({
'type': 'result',
'from': entity_jid,