Move MUC modals to the muc-views plugin

src/modals/modals.scss

@@ -1,19 +0,0 @@
-.conversejs {
-
-    .modal-content {
-        background-color: var(--modal-background-color);
-    }
-
-    .modal-body {
-        .row {
-            margin-left: 0;
-            margin-right: 0;
-        }
-    }
-
-    .occupant-details {
-        li {
-            margin-bottom: 1em;
-        }
-    }
-}

src/modals/muc-commands.js

@@ -1,87 +0,0 @@
-import BootstrapModal from "plugins/modal/base.js";
-import { __ } from 'i18n';
-import { api, converse } from "@converse/headless/core";
-import log from "@converse/headless/log";
-import tpl_muc_commands_modal from "../templates/muc_commands-modal.js";
-
-const { Strophe, $iq, sizzle } = converse.env;
-const u = converse.env.utils;
-
-
-export default BootstrapModal.extend({
-    id: "muc-commands-modal",
-
-    initialize () {
-        this.commands = [];
-        BootstrapModal.prototype.initialize.apply(this, arguments);
-        this.listenTo(this.model, 'change', this.render);
-        this.getCommands();
-    },
-
-    toHTML () {
-        return tpl_muc_commands_modal(Object.assign(
-            this.model.toJSON(), {
-                'commands': this.commands,
-                'display_name': __('Ad-hoc commands for %1$s', this.model.getDisplayName()),
-                'toggleCommandForm': ev => this.toggleCommandForm(ev)
-            })
-        );
-    },
-
-    async getCommands () {
-        this.commands = await api.adhoc.getCommands(Strophe.getDomainFromJid(this.model.get('jid')));
-        this.render();
-    },
-
-    async toggleCommandForm (ev) {
-        ev.preventDefault();
-        const node = ev.target.getAttribute('data-command-node');
-        this.commands.filter(c => (c.node !== node)).forEach(c => (c.show_form = false));
-        const cmd = this.commands.filter(c => c.node === node)[0];
-        cmd.show_form = !cmd.show_form;
-        cmd.show_form && await this.fetchCommandForm(cmd);
-        this.render();
-    },
-
-    async fetchCommandForm (command) {
-        const node = command.node;
-        const jid = command.jid;
-        const stanza = $iq({
-            'type': 'set',
-            'to': jid
-        }).c('command', {
-            'xmlns': Strophe.NS.ADHOC,
-            'node': node,
-            'action': 'execute'
-        });
-        command.fields;
-        try {
-            const iq = await api.sendIQ(stanza);
-            command.fields = sizzle('field', iq).map(f => u.xForm2TemplateResult(f, iq))
-        } catch (e) {
-            if (e === null) {
-                log.error(`Error: timeout while trying to execute command for ${jid}`);
-            } else {
-                log.error(`Error while trying to execute command for ${jid}`);
-                log.error(e);
-            }
-            command.fields = [];
-        }
-
-        /*
-        <iq xmlns="jabber:client" id="72c21b57-5e9f-4b63-9e53-c6e69ed3337e:sendIQ" type="result" from="conference.chat.example.org" to="arzu.horsten@chat.example.org/converse.js-138545405">
-            <command xmlns="http://jabber.org/protocol/commands" node="http://prosody.im/protocol/hats#add" sessionid="141a571b-37e2-4891-824f-72ca4b64806f" status="executing">
-                <x xmlns="jabber:x:data" type="form">
-                    <title>Add a hat</title>
-                    <instructions>Assign a hat to a room member</instructions>
-                    <field label="User JID" type="jid-single" var="user"><required/></field>
-                    <field label="Room JID" type="jid-single" var="room"><required/></field>
-                    <field label="Hat title" type="text-single" var="title"/>
-                    <field label="Hat URI" type="text-single" var="uri"><required/></field>
-                </x>
-                <actions execute="complete"><next/><complete/></actions>
-            </command>
-        </iq>
-        */
-    }
-});

src/plugins/modal/styles/_modal.scss

@@ -5,6 +5,23 @@
 .conversejs {
     @import "bootstrap/scss/modal";
 
+    .modal-content {
+        background-color: var(--modal-background-color);
+    }
+
+    .modal-body {
+        .row {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    .occupant-details {
+        li {
+            margin-bottom: 1em;
+        }
+    }
+
     #converse-modals {
         .modal {
             .modal-content {

src/plugins/muc-views/heading.js

@@ -1,7 +1,7 @@
 import { ElementView } from '@converse/skeletor/src/element.js';
-import MUCInviteModal from 'modals/muc-invite.js';
+import MUCInviteModal from './modals/muc-invite.js';
 import NicknameModal from './modals/nickname.js';
-import RoomDetailsModal from 'modals/muc-details.js';
+import RoomDetailsModal from './modals/muc-details.js';
 import debounce from 'lodash-es/debounce';
 import tpl_muc_head from './templates/muc-head.js';
 import { Model } from '@converse/skeletor/src/model.js';

src/modals/muc-details.js → src/plugins/muc-views/modals/muc-details.js

@@ -1,12 +1,12 @@
-import BootstrapModal from "plugins/modal/base.js";
+import BaseModal from "plugins/modal/base.js";
 import tpl_muc_details from "./templates/muc-details.js";
 
 
-export default BootstrapModal.extend({
+export default BaseModal.extend({
     id: "muc-details-modal",
 
     initialize () {
-        BootstrapModal.prototype.initialize.apply(this, arguments);
+        BaseModal.prototype.initialize.apply(this, arguments);
         this.listenTo(this.model, 'change', this.render);
         this.listenTo(this.model.features, 'change', this.render);
         this.listenTo(this.model.occupants, 'add', this.render);

src/modals/muc-invite.js → src/plugins/muc-views/modals/muc-invite.js

@@ -1,16 +1,16 @@
 import 'shared/autocomplete/index.js';
-import BootstrapModal from "plugins/modal/base.js";
+import BaseModal from "plugins/modal/base.js";
 import tpl_muc_invite_modal from "./templates/muc-invite.js";
 import { _converse, converse } from "@converse/headless/core";
 
 const u = converse.env.utils;
 
 
-export default BootstrapModal.extend({
+export default BaseModal.extend({
     id: "muc-invite-modal",
 
     initialize () {
-        BootstrapModal.prototype.initialize.apply(this, arguments);
+        BaseModal.prototype.initialize.apply(this, arguments);
         this.listenTo(this.model, 'change', this.render);
         this.initInviteWidget();
     },

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

@@ -1,15 +1,13 @@
-import BootstrapModal from "plugins/modal/base.js";
+import BaseModal from "plugins/modal/base.js";
 import tpl_occupant_modal from "./templates/occupant.js";
 import { _converse, api } from "@converse/headless/core";
 
-import './modals.scss';
 
-
-const OccupantModal = BootstrapModal.extend({
+const OccupantModal = BaseModal.extend({
     id: "muc-occupant",
 
     initialize () {
-        BootstrapModal.prototype.initialize.apply(this, arguments);
+        BaseModal.prototype.initialize.apply(this, arguments);
         if (this.model) {
             this.listenTo(this.model, 'change', this.render);
         }

src/plugins/muc-views/utils.js

@@ -1,11 +1,10 @@
 import ModeratorToolsModal from './modals/moderator-tools.js';
-import OccupantModal from 'modals/occupant.js';
+import OccupantModal from './modals/occupant.js';
 import log from "@converse/headless/log";
 import tpl_spinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { html } from "lit";
-import { parseMessageForCommands } from 'plugins/chatview/utils.js';
 import { setAffiliation } from '@converse/headless/plugins/muc/affiliations/utils.js';
 
 const { Strophe, $iq, sizzle, u } = converse.env;

src/plugins/roomslist/view.js

@@ -1,4 +1,4 @@
-import RoomDetailsModal from 'modals/muc-details.js';
+import RoomDetailsModal from 'plugins/muc-views/modals/muc-details.js';
 import RoomsListModel from './model.js';
 import tpl_roomslist from "./templates/roomslist.js";
 import { ElementView } from '@converse/skeletor/src/element.js';

src/shared/chat/message.js

@@ -4,7 +4,7 @@ import 'shared/components/dropdown.js';
 import 'shared/registry';
 import tpl_file_progress from './templates/file-progress.js';
 import MessageVersionsModal from 'modals/message-versions.js';
-import OccupantModal from 'modals/occupant.js';
+import OccupantModal from 'plugins/muc-views/modals/occupant.js';
 import UserDetailsModal from 'modals/user-details.js';
 import log from '@converse/headless/log';
 import tpl_info_message from './templates/info-message.js';