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) ## 9.0.0 (Unreleased)
- Add initial support for XEP-0421 occupant Ids.
- Use more specific types for form fields based on XEP-0122 - Use more specific types for form fields based on XEP-0122
- Fix trimming of chats in overlayed view mode - Fix trimming of chats in overlayed view mode
- OMEMO bugfix: Always create device session based on real JID. - 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="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <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" <svg class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="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, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "converse.js",
"version": "8.0.1", "version": "8.0.1",
"license": "MPL-2.0", "license": "MPL-2.0",
"dependencies": { "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 names = buttons.map(t => t.name);
const idx = names.indexOf('details'); 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 idx > -1 ? [...buttons.slice(0, idx), data_promise, ...buttons.slice(idx)] : [data_promise, ...buttons];
} }
return 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) { export async function getHeadingDropdownItem (promise_or_data) {
const data = await 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}"> <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> <converse-icon size="1em" color="var(--text-color-lighten-15-percent)" class="fa ${data.icon_class}"></converse-icon>
${data.i18n_text} ${data.i18n_text}
</a> </a>
`; ` : '';
} }
export async function getHeadingStandaloneButton (promise_or_data) { export async function getHeadingStandaloneButton (promise_or_data) {

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

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

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

@ -173,6 +173,7 @@ export default class MUCHeading extends ElementView {
'name': 'signout' 'name': 'signout'
}); });
} }
const chatview = _converse.chatboxviews.get(this.getAttribute('jid')); const chatview = _converse.chatboxviews.get(this.getAttribute('jid'));
if (chatview) { if (chatview) {
return _converse.api.hook('getHeadingButtons', chatview, buttons); 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` return html`
<div class="occupants-header"> <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"> <div class="occupants-header--title">
<span class="occupants-heading">${i18n_participants}</span> <span class="occupants-heading">${i18n_participants}</span>
</div> </div>

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

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

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

@ -106,7 +106,7 @@ describe("XEP-0357 Push Notifications", function () {
it("can be disabled", it("can be disabled",
mock.initConverse( mock.initConverse(
[], { ['chatBoxesFetched'], {
'push_app_servers': [{ 'push_app_servers': [{
'jid': 'push-5@client.example', 'jid': 'push-5@client.example',
'node': 'yxs32uqsflafdk3iuqo', '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 './emoji-picker.js';
import 'shared/chat/message-limit.js'; import 'shared/chat/message-limit.js';
import tpl_toolbar from './templates/toolbar.js';
import { CustomElement } from 'shared/components/element.js'; import { CustomElement } from 'shared/components/element.js';
import { __ } from 'i18n'; import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core'; import { _converse, api, converse } from '@converse/headless/core';
@ -33,11 +34,7 @@ export class ChatToolbar extends CustomElement {
} }
render () { render () {
const i18n_send_message = __('Send the message'); return tpl_toolbar(this);
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>` : '' }
`;
} }
firstUpdated () { firstUpdated () {

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

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

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

@ -5,36 +5,43 @@
.conversejs { .conversejs {
@import "bootstrap/scss/dropdown"; @import "bootstrap/scss/dropdown";
converse-dropdown { converse-dropdown {
&.dropup { &.dropup {
&.dropup--left { &.dropup--left {
.dropdown-menu { .dropdown-menu {
right: 100%; right: 100%;
left: auto; left: auto;
} }
} }
} }
.btn--standalone { .btn--standalone {
padding: 0 0.2em; padding: 0 0.2em;
margin: 0; margin: 0;
} }
.dropdown-menu {
margin-top: -0.2em !important;
}
.dropdown-item { .dropdown-menu {
padding: 0.5rem 1rem; margin-top: -0.2em !important;
.fa { }
width: 1.25em;
margin-right: 0.75rem; .dropdown-item {
} line-height: 1em;
&:active, &.selected { color: var(--text-color);
color: white !important; padding: 0.5rem 1rem;
background-color: var(--list-item-open-color); converse-icon {
.fa { margin-top: -0.1em;
color: white !important; 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-color: var(--green);
--chat-toolbar-btn-disabled-color: gray; --chat-toolbar-btn-disabled-color: gray;
--toolbar-btn-text-color: white;
--chat-content-background-color: white; --chat-content-background-color: white;
--chat-info-color: var(--chatroom-head-bg-color); --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') { 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 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({ const stanza = $iq({
'type': 'result', 'type': 'result',
'from': entity_jid, 'from': entity_jid,