muc: Show navback before avatar

src/plugins/muc-views/heading.js

@@ -1,11 +1,11 @@
+import { _converse, api, converse } from "@converse/headless";
 import './modals/config.js';
 import './modals/muc-details.js';
 import './modals/nickname.js';
-import tplMUCHead from './templates/muc-head.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from "@converse/headless";
 import { destroyMUC, showModeratorToolsModal } from './utils.js';
+import tplMUCHead from './templates/muc-head.js';
 
 import './styles/muc-head.scss';
 

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

@@ -1,7 +1,7 @@
-import { html } from "lit";
+import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
 import { __ } from 'i18n';
-import { _converse, api } from "@converse/headless";
+import { _converse, api } from '@converse/headless';
 import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 import 'shared/components/dropdown.js';
 import 'shared/texture/components/texture.js';
@@ -13,38 +13,45 @@ export default (el) => {
     const heading_buttons_promise = el.getHeadingButtons(subject_hidden);
     const i18n_hide_topic = __('Hide the groupchat topic');
     const subject = o.subject ? o.subject.text : '';
-    const show_subject = (subject && !subject_hidden);
+    const show_subject = subject && !subject_hidden;
     return html`
-        <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
-
-            <a data-room-jid="${el.model.get('jid')}"
-               title="${__('Show more information on this groupchat')}"
-               @click=${(ev) => el.showRoomDetailsModal(ev)}>
-
-                <converse-avatar
-                    .model=${el.model}
-                    class="avatar align-self-center"
-                    name="${el.model.getDisplayName()}"
-                    nonce=${el.model.vcard?.get('vcard_updated')}
-                    height="40" width="40"></converse-avatar>
-            </a>
-
+        <div class="chatbox-title ${show_subject ? '' : 'chatbox-title--no-desc'}">
             <div class="chatbox-title--row">
-                ${ (!_converse.api.settings.get("singleton")) ?
-                        html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
-                <div class="chatbox-title__text"
-                     role="heading" aria-level="2"
-                     title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">
-                    ${ el.model.getDisplayName() }
+                ${!_converse.api.settings.get('singleton')
+                    ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>`
+                    : ''}
+                <a
+                    data-room-jid="${el.model.get('jid')}"
+                    title="${__('Show more information on this groupchat')}"
+                    @click=${(ev) => el.showRoomDetailsModal(ev)}
+                >
+                    <converse-avatar
+                        .model=${el.model}
+                        class="avatar align-self-center"
+                        name="${el.model.getDisplayName()}"
+                        nonce=${el.model.vcard?.get('vcard_updated')}
+                        height="40"
+                        width="40"
+                    ></converse-avatar>
+                </a>
+                <div
+                    class="chatbox-title__text"
+                    role="heading"
+                    aria-level="2"
+                    title="${api.settings.get('locked_muc_domain') !== 'hidden' ? o.jid : ''}"
+                >
+                    ${el.model.getDisplayName()}
                 </div>
             </div>
             <div class="chatbox-title__buttons btn-toolbar g-0">
-                ${ until(getStandaloneButtons(heading_buttons_promise), '') }
-                ${ until(getDropdownButtons(heading_buttons_promise), '') }
+                ${until(getStandaloneButtons(heading_buttons_promise), '')}
+                ${until(getDropdownButtons(heading_buttons_promise), '')}
             </div>
         </div>
-        ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">
-            <converse-texture text=${subject} render_styling embed_audio></converse-texture>
-          </p>` : '' }
+        ${show_subject
+            ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">
+                  <converse-texture text=${subject} render_styling embed_audio></converse-texture>
+              </p>`
+            : ''}
     `;
-}
+};