Move button to hide MUC participants to burger menu

docs/source/configuration.rst

@@ -2228,7 +2228,6 @@ visible_toolbar_buttons
         call: false,
         spoiler: false,
         emoji: true,
-        toggle_occupants: true
     }
 
 Allows you to show or hide buttons on the chatboxes' toolbars.
@@ -2248,8 +2247,6 @@ Allows you to show or hide buttons on the chatboxes' toolbars.
     Enables rendering of emoji and provides a toolbar button for choosing them.
 * *spoiler*:
     Shows a button for showing`XEP-0382 <https://xmpp.org/extensions/xep-0382.html>`_ spoiler messages.
-* *toggle_occupants*:
-    Shows a button for toggling (i.e. showing/hiding) the list of occupants in a chatroom.
 
 .. _`websocket-url`:
 

karma.conf.js

@@ -101,7 +101,6 @@ module.exports = function(config) {
       { pattern: "src/plugins/muc-views/tests/rai.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/retractions.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/styling.js", type: 'module' },
-      { pattern: "src/plugins/muc-views/tests/toolbar.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/unfurls.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/xss.js", type: 'module' },
       { pattern: "src/plugins/notifications/tests/notification.js", type: 'module' },

src/plugins/muc-views/heading.js

@@ -83,6 +83,15 @@ export default class MUCHeading extends CustomElement {
         this.model.toggleSubjectHiddenState();
     }
 
+    /**
+     * @param {Event} ev
+     */
+    toggleOccupants (ev) {
+        ev?.preventDefault?.();
+        ev?.stopPropagation?.();
+        this.model.save({'hidden_occupants': !this.model.get('hidden_occupants')});
+    }
+
     /**
      * @param {Event} ev
      */
@@ -162,13 +171,22 @@ export default class MUCHeading extends CustomElement {
                 'i18n_title': subject_hidden
                     ? __('Show the topic message in the heading')
                     : __('Hide the topic in the heading'),
-                'handler': ev => this.toggleTopic(ev),
+                'handler': /** @param {Event} ev */(ev) => this.toggleTopic(ev),
                 'a_class': 'hide-topic',
                 'icon_class': 'fa-minus-square',
                 'name': 'toggle-topic'
             });
         }
 
+        buttons.push({
+            'i18n_text': this.model.get('hidden_occupants') ? __('Show participants') : __('Hide participants'),
+            'i18n_title': this.model.get('hidden_occupants')
+                ? __('Show the groupchat participants')
+                : __('Hide the groupchat participants'),
+            'handler': /** @param {Event} ev */(ev) => this.toggleOccupants(ev),
+            'icon_class': 'fa-users',
+        });
+
         const conn_status = this.model.session.get('connection_status');
         if (conn_status === converse.ROOMSTATUS.ENTERED) {
             const allowed_commands = this.model.getAllowedCommands();

src/plugins/muc-views/index.js

@@ -55,9 +55,6 @@ converse.plugins.add('converse-muc-views', {
             'muc_search_service': 'api@search.jabber.network',
             'roomconfig_whitelist': [],
             'show_retraction_warning': true,
-            'visible_toolbar_buttons': {
-                'toggle_occupants': true
-            }
         });
 
         const exports = {

src/plugins/muc-views/tests/toolbar.js

@@ -1,18 +0,0 @@
-/*global mock, converse */
-
-const { u } = converse.env;
-
-describe('The visible_toolbar_buttons configuration setting', function () {
-
-    it("can be used to show a participants toggle in a MUC's toolbar",
-        mock.initConverse([], { 'visible_toolbar_buttons': { 'toggle_occupants': true } },
-        async (_converse) => {
-
-            const muc_jid = 'lounge@montague.lit';
-            await mock.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
-            const view = _converse.chatboxviews.get(muc_jid);
-            await u.waitUntil(() => view.querySelector('converse-chat-toolbar .toggle_occupants'));
-            expect(1).toBe(1);
-        })
-    );
-});

src/shared/chat/styles/toolbar.scss

@@ -27,15 +27,11 @@
 
     .chat-toolbar {
         justify-content: space-between;
-
         .toolbar-buttons {
             .message-limit {
                 padding: 0.5em;
                 font-weight: bold;
             }
-            .toggle_occupants {
-                order: 99;
-            }
         }
     }
 

src/shared/chat/toolbar.js

@@ -93,22 +93,6 @@ export class ChatToolbar extends CustomElement {
         const http_upload_promise = api.disco.supports(Strophe.NS.HTTPUPLOAD, domain);
         buttons.push(html`${until(http_upload_promise.then(is_supported => this.getHTTPUploadButton(is_supported)),'')}`);
 
-        if (this.is_groupchat && api.settings.get('visible_toolbar_buttons')?.toggle_occupants) {
-            const i18n_hide_occupants = __('Hide participants');
-            const i18n_show_occupants = __('Show participants');
-            buttons.push(html`
-                <button type="button"
-                        class="btn toggle_occupants"
-                        title="${this.hidden_occupants ? i18n_show_occupants : i18n_hide_occupants}"
-                        @click=${this.toggleOccupants}>
-                    <converse-icon
-                        color="var(--muc-toolbar-btn-color)"
-                        class="fa ${this.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right`}"
-                        size="1em"></converse-icon>
-                </button>`
-            );
-        }
-
         /**
          * *Hook* which allows plugins to add more buttons to a chat's toolbar
          * @event _converse#getToolbarButtons
@@ -202,12 +186,6 @@ export class ChatToolbar extends CustomElement {
         this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
     }
 
-    toggleOccupants (ev) {
-        ev?.preventDefault?.();
-        ev?.stopPropagation?.();
-        this.model.save({'hidden_occupants': !this.model.get('hidden_occupants')});
-    }
-
     toggleCall (ev) {
         ev?.preventDefault?.();
         ev?.stopPropagation?.();

src/types/plugins/modal/modal.d.ts

@@ -7,7 +7,7 @@ declare class BaseModal extends ElementView {
     constructor(options: any);
     model: any;
     initialized: any;
-    modal: any;
+    modal: Modal;
     /**
      * @returns {TemplateResult|string}
      */
@@ -36,4 +36,5 @@ declare class BaseModal extends ElementView {
     show(): Promise<void>;
 }
 import { ElementView } from "@converse/skeletor";
+import { Modal } from "bootstrap";
 //# sourceMappingURL=modal.d.ts.map

src/types/plugins/muc-views/heading.d.ts

@@ -26,6 +26,10 @@ export default class MUCHeading extends CustomElement {
      * @param {Event} ev
      */
     toggleTopic(ev: Event): void;
+    /**
+     * @param {Event} ev
+     */
+    toggleOccupants(ev: Event): void;
     /**
      * @param {Event} ev
      */

src/types/shared/autocomplete/autocomplete.d.ts

@@ -30,7 +30,7 @@ export class AutoComplete extends AutoComplete_base {
     auto_first: boolean;
     data: (a: any, _v: any) => any;
     item: (text: any, input: any) => HTMLLIElement;
-    container: Element;
+    container: Element | HTMLElement;
     input: HTMLInputElement;
     ul: Element;
     status: Element;

src/types/shared/chat/toolbar.d.ts

@@ -43,7 +43,6 @@ export class ChatToolbar extends CustomElement {
      */
     onFileSelection(evt: InputEvent): void;
     toggleComposeSpoilerMessage(ev: any): void;
-    toggleOccupants(ev: any): void;
     toggleCall(ev: any): void;
 }
 import { CustomElement } from "shared/components/element.js";

src/types/shared/components/dropdownbase.d.ts

@@ -2,7 +2,8 @@ export default class DropdownBase extends CustomElement {
     firstUpdated(changed: any): void;
     menu: Element;
     button: HTMLButtonElement;
-    dropdown: any;
+    dropdown: BootstrapDropdown;
 }
 import { CustomElement } from "./element.js";
+import { Dropdown as BootstrapDropdown } from "bootstrap";
 //# sourceMappingURL=dropdownbase.d.ts.map