Improve chat status modal markup

src/headless/types/plugins/status/profile.d.ts

@@ -163,6 +163,7 @@ export default class Profile extends Profile_base {
     /**
      * Constructs a presence stanza
      * @param {import('./types').presence_attrs} [attrs={}]
+     * @returns {Promise<Stanza>}
      */
     constructPresence(attrs?: import("./types").presence_attrs): Promise<any>;
 }

src/plugins/profile/templates/chat-status-modal.js

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from 'lit';
 import { __ } from 'i18n';
 
 /**
@@ -14,41 +14,89 @@ export default (el) => {
     const status = el.model.get('show') || el.model.get('presence');
     const status_message = el.model.get('status_message');
 
-    return html`
-    <form class="converse-form set-xmpp-status" id="set-xmpp-status" @submit=${ev => el.onFormSubmitted(ev)}>
-        <div>
-            <div class="custom-control custom-radio">
-                <input ?checked="${status === 'online'}"
-                    type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
-                <label class="custom-control-label" for="radio-online">
-                    <converse-icon size="1em" class="fa fa-circle chat-status chat-status--online"></converse-icon>${label_online}</label>
+    return html` <form
+        class="converse-form set-xmpp-status"
+        id="set-xmpp-status"
+        @submit=${(ev) => el.onFormSubmitted(ev)}
+    >
+        <div class="mb-3">
+            <div class="form-check">
+                <input
+                    ?checked="${status === 'online'}"
+                    type="radio"
+                    id="radio-online"
+                    value="online"
+                    name="chat_status"
+                    class="form-check-input"
+                />
+                <label class="form-check-label" for="radio-online">
+                    <converse-icon size="1em" class="fa fa-circle chat-status chat-status--online"></converse-icon
+                    >${label_online}
+                </label>
             </div>
-            <div class="custom-control custom-radio">
-                <input ?checked="${status === 'busy'}"
-                    type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
-                <label class="custom-control-label" for="radio-busy">
-                    <converse-icon size="1em" class="fa fa-minus-circle  chat-status chat-status--busy"></converse-icon>${label_busy}</label>
+            <div class="form-check">
+                <input
+                    ?checked="${status === 'busy'}"
+                    type="radio"
+                    id="radio-busy"
+                    value="dnd"
+                    name="chat_status"
+                    class="form-check-input"
+                />
+                <label class="form-check-label" for="radio-busy">
+                    <converse-icon size="1em" class="fa fa-minus-circle chat-status chat-status--busy"></converse-icon
+                    >${label_busy}
+                </label>
             </div>
-            <div class="custom-control custom-radio">
-                <input ?checked="${status === 'away'}"
-                    type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
-                <label class="custom-control-label" for="radio-away">
-                    <converse-icon size="1em" class="fa fa-circle chat-status chat-status--away"></converse-icon>${label_away}</label>
+            <div class="form-check">
+                <input
+                    ?checked="${status === 'away'}"
+                    type="radio"
+                    id="radio-away"
+                    value="away"
+                    name="chat_status"
+                    class="form-check-input"
+                />
+                <label class="form-check-label" for="radio-away">
+                    <converse-icon size="1em" class="fa fa-circle chat-status chat-status--away"></converse-icon
+                    >${label_away}
+                </label>
             </div>
-            <div class="custom-control custom-radio">
-                <input ?checked="${status === 'xa'}"
-                    type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
-                <label class="custom-control-label" for="radio-xa">
-                    <converse-icon size="1em" class="far fa-circle chat-status chat-status--xa"></converse-icon>${label_xa}</label>
+            <div class="form-check">
+                <input
+                    ?checked="${status === 'xa'}"
+                    type="radio"
+                    id="radio-xa"
+                    value="xa"
+                    name="chat_status"
+                    class="form-check-input"
+                />
+                <label class="form-check-label" for="radio-xa">
+                    <converse-icon size="1em" class="far fa-circle chat-status chat-status--xa"></converse-icon
+                    >${label_xa}
+                </label>
             </div>
         </div>
-        <div>
-            <div class="btn-group w-100">
-                <input name="status_message" type="text" class="form-control" autofocus
-                    value="${status_message || ''}" placeholder="${placeholder_status_message}"/>
-                <converse-icon size="1em" class="fa fa-times clear-input ${status_message ? '' : 'hidden'}" @click=${ev => el.clearStatusMessage(ev)}></converse-icon>
+        <div class="mb-3">
+            <div class="input-group">
+                <input
+                    name="status_message"
+                    type="text"
+                    class="form-control"
+                    autofocus
+                    value="${status_message || ''}"
+                    placeholder="${placeholder_status_message}"
+                />
+                <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    @click=${(ev) => el.clearStatusMessage(ev)}
+                    title="${__('Clear status message')}"
+                >
+                    <converse-icon size="1em" class="fa fa-times"></converse-icon>
+                </button>
             </div>
         </div>
         <button type="submit" class="btn btn-primary">${label_save}</button>
     </form>`;
-}
+};

src/plugins/rosterview/tests/presence.js

@@ -43,7 +43,7 @@ describe("A sent presence stanza", function () {
 
         await u.waitUntil(() => sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).length === 2);
         sent_presence = sent_stanzas.filter(s => Strophe.serialize(s).match('presence')).pop();
-        expect(Strophe.serialize(sent_presence))
+        expect(sent_presence)
             .toEqualStanza(stx`
                 <presence xmlns="jabber:client">
                     <show>dnd</show>

src/types/plugins/profile/modals/chat-status.d.ts

@@ -1,8 +1,14 @@
 export default class ChatStatusModal extends BaseModal {
     renderModal(): import("lit-html").TemplateResult<1>;
     getModalTitle(): any;
-    clearStatusMessage(ev: any): void;
-    onFormSubmitted(ev: any): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    clearStatusMessage(ev: MouseEvent): void;
+    /**
+     * @param {SubmitEvent} ev
+     */
+    onFormSubmitted(ev: SubmitEvent): void;
 }
 import BaseModal from 'plugins/modal/modal.js';
 //# sourceMappingURL=chat-status.d.ts.map

src/types/plugins/profile/modals/profile.d.ts

@@ -7,7 +7,9 @@ export default class ProfileModal extends BaseModal {
         _submitting: {
             state: boolean;
         };
-        model: any;
+        model: {
+            type: typeof Model;
+        };
     };
     renderModal(): import("lit-html").TemplateResult<1>;
     getModalTitle(): any;
@@ -22,4 +24,5 @@ export default class ProfileModal extends BaseModal {
     _submitting: boolean;
 }
 import BaseModal from "plugins/modal/modal.js";
+import { Model } from '@converse/skeletor';
 //# sourceMappingURL=profile.d.ts.map