Update to boostrap5

- Remove unused form classes - Add `form-label` class - Set custom bootstrap prefix (to `converse-`) - Re-style the minimized chats toggle - Remove old CSS and use Boostrap markup. - Re-style the controlbox toggle - Use bootstrap grid classes for chat boxes and controlbox toggle. - Remove unused css from core - Use bootstrap for dropdown/modal/popover instead of bootstrap.native - Namespace bootstrap files - Fix closing of confirm alert
conversejs · Aug 1, 2024 · 80555d8 · 80555d8
1 parent e4b9c7e
commit 80555d8
Show file tree

Hide file tree

Showing 120 changed files with 565 additions and 700 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -23,11 +23,13 @@
 - Fix: unhandled exception on new message arriving when user has not permitted playing audio in the browser
 - Fix: incorrect unread messages counter badge on the application icon after switching to new XMPP user
 - Fix: unhandled exception in disconnect function when controlbox is not shown by UI
+- Fix: "Click to mention..." title was misplaced in MUC occupant list.
 - Add an occupants filter to the MUC sidebar
 - Change contacts filter to rename the anachronistic `Online` state to `Available`.
 - Enable [reuse_scram_keys](https://conversejs.org/docs/html/configuration.html#reuse-scram-keys) by default.
 - New loadEmojis hook, to customize emojis at runtime.
-- Fix: "Click to mention..." title was misplaced in MUC occupant list.
+- New `loadEmojis` hook, to customize emojis at runtime.
+- Upgrade to Bootstrap 5
 
 ### Breaking changes:
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,12 +76,12 @@
     "@babel/core": "^7.18.5",
     "@babel/preset-env": "^7.18.2",
     "@converse/headless": "file:src/headless",
+    "@types/bootstrap": "^5.2.10",
     "@types/webappsec-credential-management": "^0.6.8",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
     "autoprefixer": "^10.4.5",
     "babel-loader": "^9.1.0",
-    "bootstrap.native-loader": "2.0.0",
     "circular-dependency-plugin": "^5.2.2",
     "clean-css-cli": "^5.6.2",
     "copy-webpack-plugin": "^12.0.2",
@@ -117,8 +117,7 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "bootstrap": "^4.6.0",
-    "bootstrap.native": "^2.0.27",
+    "bootstrap": "^5.3.3",
     "client-compress": "^2.2.2",
     "dayjs": "^1.11.8",
     "dompurify": "^3.0.8",

diff --git a/src/index.js b/src/index.js
@@ -3,15 +3,14 @@
  * @copyright 2021, The Converse developers
  * @license Mozilla Public License (MPLv2)
  */
+import 'shared/styles/index.scss';
 
 import "./i18n/index.js";
 import "shared/registry.js";
 import { CustomElement } from 'shared/components/element';
 import { VIEW_PLUGINS } from './shared/constants.js';
 import { _converse, converse } from "@converse/headless";
 
-import 'shared/styles/index.scss';
-
 /* START: Removable plugins
  * ------------------------
  * Any of the following plugin imports may be removed if the plugin is not needed

diff --git a/src/plugins/adhoc-views/templates/ad-hoc-command-form.js b/src/plugins/adhoc-views/templates/ad-hoc-command-form.js
@@ -65,7 +65,7 @@ export default (el, command) => {
 
                 ${command.type === 'form' && command.title ? html`<h6>${command.title}</h6>` : ''}
 
-                <fieldset class="form-group">
+                <fieldset>
                     <input type="hidden" name="command_node" value="${command.node}" />
                     <input type="hidden" name="command_jid" value="${command.jid}" />
                     ${command.instructions ? html`<p class="form-instructions">${command.instructions}</p>` : ''}

diff --git a/src/plugins/adhoc-views/templates/ad-hoc.js b/src/plugins/adhoc-views/templates/ad-hoc.js
@@ -24,8 +24,8 @@ export default (el) => {
         ${el.note ? html`<p class="form-help">${el.note}</p>` : ''}
 
         <form class="converse-form" @submit=${el.fetchCommands}>
-            <fieldset class="form-group">
-                <label>
+            <fieldset>
+                <label class="form-label">
                     ${i18n_choose_service}
                     <p class="form-help">${i18n_choose_service_instructions}</p>
                     <converse-autocomplete
@@ -37,13 +37,13 @@ export default (el) => {
                     </converse-autocomplete>
                 </label>
             </fieldset>
-            <fieldset class="form-group">
+            <fieldset>
                 ${el.fetching
                     ? tplSpinner()
                     : html`<input type="submit" class="btn btn-primary" value="${i18n_fetch_commands}" />`}
             </fieldset>
             ${el.view === 'list-commands'
-                ? html` <fieldset class="form-group">
+                ? html` <fieldset>
                       <ul class="list-group">
                           <li class="list-group-item active">
                               ${el.commands.length ? i18n_commands_found : i18n_no_commands_found}:

diff --git a/src/plugins/bookmark-views/components/templates/form.js b/src/plugins/bookmark-views/components/templates/form.js
@@ -16,19 +16,19 @@ export default (el) => {
     return html`
         <form class="converse-form chatroom-form" @submit=${(ev) => el.onBookmarkFormSubmitted(ev)}>
             <legend>${i18n_heading}</legend>
-            <fieldset class="form-group">
-                <label for="converse_muc_bookmark_name">${i18n_name}</label>
+            <fieldset>
+                <label class="form-label" for="converse_muc_bookmark_name">${i18n_name}</label>
                 <input class="form-control" type="text" value="${name}" name="name" required="required" id="converse_muc_bookmark_name"/>
             </fieldset>
-            <fieldset class="form-group">
-                <label for="converse_muc_bookmark_nick">${i18n_nick}</label>
+            <fieldset>
+                <label class="form-label" for="converse_muc_bookmark_nick">${i18n_nick}</label>
                 <input class="form-control" type="text" name="nick" value="${nick || ''}" id="converse_muc_bookmark_nick"/>
             </fieldset>
             <fieldset class="form-group form-check">
                 <input class="form-check-input" id="converse_muc_bookmark_autojoin" type="checkbox" ?checked=${el.bookmark?.get('autojoin')} name="autojoin"/>
                 <label class="form-check-label" for="converse_muc_bookmark_autojoin">${i18n_autojoin}</label>
             </fieldset>
-            <fieldset class="form-group">
+            <fieldset>
                 <input class="btn btn-primary" type="submit" value="${i18n_submit}">
                     ${el.bookmark ? html`<input class="btn btn-secondary button-remove" type="button" value="${i18n_remove}" @click=${(ev) => el.removeBookmark(ev)}>` : '' }
             </fieldset>

diff --git a/src/plugins/chatboxviews/styles/chats.scss b/src/plugins/chatboxviews/styles/chats.scss
@@ -5,9 +5,9 @@
             position: fixed;
             bottom: 0;
             right: 0;
+            left: 1em;
         }
         &.converse-overlayed {
-            height: 3em;
             > .row {
                 flex-direction: row-reverse;
             }

diff --git a/src/plugins/chatboxviews/templates/chats.js b/src/plugins/chatboxviews/templates/chats.js
@@ -15,7 +15,7 @@ export default () => {
     const connection = api.connection.get();
     const logged_out = !connection?.connected || !connection?.authenticated || connection?.disconnecting;
     return html`
-        ${!logged_out && view_mode === 'overlayed' ? html`<converse-minimized-chats></converse-minimized-chats>` : ''}
+        ${!logged_out && view_mode === 'overlayed' ? html`<converse-minimized-chats class="col-auto"></converse-minimized-chats>` : ''}
         ${repeat(
             chatboxes.filter(shouldShowChat),
             (m) => m.get('jid'),
@@ -24,25 +24,25 @@ export default () => {
                     return html`
                         ${view_mode === 'overlayed'
                             ? html`<converse-controlbox-toggle
-                                  class="${!m.get('closed') ? 'hidden' : ''}"
+                                  class="${!m.get('closed') ? 'hidden' : 'col-auto'}"
                               ></converse-controlbox-toggle>`
                             : ''}
                         <converse-controlbox
                             id="controlbox"
-                            class="chatbox ${view_mode === 'overlayed' && m.get('closed') ? 'hidden' : ''} ${logged_out
+                            class="col-auto chatbox ${view_mode === 'overlayed' && m.get('closed') ? 'hidden' : ''} ${logged_out
                                 ? 'logged-out'
                                 : ''}"
                             style="${m.get('width') ? `width: ${m.get('width')}` : ''}"
                         ></converse-controlbox>
                     `;
                 } else if (m.get('type') === CHATROOMS_TYPE) {
-                    return html` <converse-muc jid="${m.get('jid')}" class="chatbox chatroom"></converse-muc> `;
+                    return html` <converse-muc jid="${m.get('jid')}" class="col-auto chatbox chatroom"></converse-muc> `;
                 } else if (m.get('type') === HEADLINES_TYPE) {
                     return html`
-                        <converse-headlines jid="${m.get('jid')}" class="chatbox headlines"></converse-headlines>
+                        <converse-headlines jid="${m.get('jid')}" class="col-auto chatbox headlines"></converse-headlines>
                     `;
                 } else {
-                    return html` <converse-chat jid="${m.get('jid')}" class="chatbox"></converse-chat> `;
+                    return html` <converse-chat jid="${m.get('jid')}" class="col-auto chatbox"></converse-chat> `;
                 }
             }
         )}

diff --git a/src/plugins/chatview/bottom-panel.js b/src/plugins/chatview/bottom-panel.js
@@ -82,7 +82,7 @@ export default class ChatBottomPanel extends CustomElement {
                 'query': value
             });
             const emoji_dropdown = /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'));
-            emoji_dropdown?.showMenu();
+            emoji_dropdown?.dropdown.show();
         }
     }
 }

diff --git a/src/plugins/chatview/message-form.js b/src/plugins/chatview/message-form.js
@@ -213,7 +213,7 @@ export default class MessageForm extends CustomElement {
         }
         u.addClass('disabled', textarea);
         textarea.setAttribute('disabled', 'disabled');
-        /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'))?.hideMenu();
+        /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'))?.dropdown.hide();
 
         const is_command = await parseMessageForCommands(this.model, message_text);
         const message = is_command ? null : await this.model.sendMessage({'body': message_text, spoiler_hint});