Improve the MUC occupant modal.

src/plugins/muc-views/modals/occupant.js

@@ -28,6 +28,19 @@ export default class OccupantModal extends BaseModal {
         api.trigger('occupantModalInitialized', { 'model': this.model, 'message': this.message });
     }
 
+    renderModal () {
+        return tplOccupantModal(this);
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    openChat (ev) {
+        ev.preventDefault();
+        api.chats.open(this.model.get('jid'), {}, true);
+        this.close();
+    }
+
     getVcard () {
         const model = this.model ?? this.message;
         if (model.vcard) {
@@ -37,10 +50,6 @@ export default class OccupantModal extends BaseModal {
         return jid ? _converse.state.vcards.get(jid) : null;
     }
 
-    renderModal () {
-        return tplOccupantModal(this);
-    }
-
     getModalTitle () {
         const model = this.model ?? this.message;
         return model?.getDisplayName();

src/plugins/muc-views/modals/styles/occupant.scss

@@ -0,0 +1,5 @@
+converse-muc-occupant-modal {
+    .text-occupant-id {
+        font-size: 0.75rem;
+    }
+}

src/plugins/muc-views/modals/templates/occupant.js

@@ -4,6 +4,8 @@ import { html } from "lit";
 import { until } from 'lit/directives/until.js';
 import { _converse, api } from "@converse/headless";
 
+import '../styles/occupant.scss';
+
 /**
  * @param {import('../occupant').default} el
  */
@@ -25,7 +27,7 @@ export default (el) => {
     const can_see_real_jids = muc.features.get('nonanonymous') || muc.getOwnRole() === 'moderator';
 
     const bare_jid = _converse.session.get('bare_jid');
-    const not_me =  jid != bare_jid;
+    const not_me = jid != bare_jid;
 
     const add_to_contacts = api.settings.get('singleton')
         ? '' // in singleton mode, there is no roster, so adding to contact makes no sense.
@@ -44,48 +46,53 @@ export default (el) => {
                     height="120" width="120"></converse-avatar>
             </div>
             <div class="col">
-                <ul class="occupant-details">
-                    <li>
-                        ${ nick ? html`<div class="row"><strong class="g-0">${__('Nickname')}:</strong></div><div class="row">${nick}</div>` : '' }
+                <ul class="occupant-details list-unstyled">
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('Nickname')}:</strong></div>
+                        <div class="col text-end">${nick}</div>
                     </li>
-                    <li>
-                        ${ jid ? html`<div class="row"><strong class="g-0">${__('XMPP Address')}:</strong></div><div class="row">${jid}</div>` : '' }
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('XMPP Address')}:</strong></div>
+                        <div class="col text-end">
+                          ${jid ? html`<a href="#" @click="${el.openChat}">${jid}</a>` : ''}
+                        </div>
                     </li>
-                    <li>
-                        <div class="row"><strong class="g-0">${__('Affiliation')}:</strong></div>
-                        <div class="row">${affiliation}&nbsp;
-                            ${ may_moderate ? html`
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('Affiliation')}:</strong></div>
+                        <div class="col text-end">${affiliation}&nbsp;
+                            ${may_moderate ? html`
                                 <a href="#"
-                                data-form="affiliation-form"
-                                class="toggle-form right"
-                                color="var(--secondary-color)"
-                                @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
-                                </a>
-                                ${ el.show_affiliation_form ? html`<converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form>` : '' }` : ''
+                                   data-form="affiliation-form"
+                                   class="toggle-form"
+                                   @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
+                                </a>` : ''
                             }
                         </div>
+                        ${el.show_affiliation_form ?
+                            html`<div class="row"><converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form></div>` : ''}
                     </li>
-                    <li>
-                        <div class="row"><strong class="g-0">${__('Role')}:</strong></div>
-                        <div class="row">${role}&nbsp;
-                            ${ may_moderate && role ? html`
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('Role')}:</strong></div>
+                        <div class="col text-end">${role}&nbsp;
+                            ${may_moderate && role ? html`
                                 <a href="#"
                                    data-form="row-form"
-                                   class="toggle-form right"
-                                   color="var(--secondary-color)"
+                                   class="toggle-form"
                                    @click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
-                                </a>
-                                ${ el.show_role_form ? html`<converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form>` : '' }` : ''
+                                </a>` : ''
                             }
                         </div>
+                        ${el.show_role_form ? html`<div class="row"><converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form></div>` : ''}
                     </li>
-                    <li>
-                        ${ hats ? html`<div class="row"><strong class="g-0">${__('Hats')}:</strong></div><div class="row">${hats}</div>` : '' }
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('Hats')}:</strong></div>
+                        <div class="col text-end">${hats}</div>
                     </li>
-                    <li>
-                        ${ occupant_id ? html`<div class="row"><strong class="g-0">${__('Occupant Id')}:</strong></div><div class="row">${occupant_id}</div>` : '' }
+                    <li class="row mb-2">
+                        <div class="col text-start"><strong>${__('Occupant Id')}:</strong></div>
+                        <div class="col text-end text-occupant-id">${occupant_id}</div>
                     </li>
-                    ${ until(add_to_contacts, '') }
+                    ${until(add_to_contacts, '')}
                 </ul>
             </div>
         </div>