Replace more font icons with svg icons

Updates #1004

CHANGES.md

@@ -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.

demo/embedded.html

@@ -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"

package-lock.json

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

src/plugins/bookmark-views/utils.js

@@ -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;

src/plugins/chatview/utils.js

@@ -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) {

src/plugins/controlbox/styles/_controlbox.scss

@@ -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;

src/plugins/muc-views/heading.js

@@ -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);

src/plugins/muc-views/templates/muc-sidebar.js

@@ -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>

src/plugins/profile/templates/profile.js

@@ -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>`
+};

src/plugins/push/tests/push.js

@@ -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',

src/shared/chat/templates/toolbar.js

@@ -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() : '' }
+    `;
+}

src/shared/chat/toolbar.js

@@ -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 () {

src/shared/components/icons.js

@@ -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 () {

src/shared/components/styles/dropdown.scss

@@ -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);
+            }
+        }
     }
 }

src/shared/styles/_variables.scss

@@ -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);

src/shared/tests/mock.js

@@ -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,