Merge pull request #381 from TriliumNext/bootstrap

Upgrade bootstrap from v4 to v5
TriliumNext · Sep 12, 2024 · 8bfa446 · 8bfa446
2 parents 71de1a0 + 648feb8
commit 8bfa446
Show file tree

Hide file tree

Showing 78 changed files with 4,889 additions and 4,059 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "autocomplete.js": "^0.38.1",
     "axios": "^1.7.7",
     "better-sqlite3": "^11.1.2",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "boxicons": "2.1.4",
     "chokidar": "3.6.0",
     "cls-hooked": "4.2.2",

diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js
@@ -105,28 +105,23 @@ function initNoteAutocomplete($el, options) {
 
     $el.addClass("note-autocomplete-input");
 
-    const $clearTextButton = $("<a>")
-            .addClass("input-group-text input-clearer-button bx bxs-tag-x")
-            .prop("title", "Clear text field");
+    const $clearTextButton = $("<button>")
+        .addClass("input-group-text input-clearer-button bx bxs-tag-x")
+        .prop("title", "Clear text field");
 
-    const $showRecentNotesButton = $("<a>")
-            .addClass("input-group-text show-recent-notes-button bx bx-time")
-            .prop("title", "Show recent notes");
+    const $showRecentNotesButton = $("<button>")
+        .addClass("input-group-text show-recent-notes-button bx bx-time")
+        .prop("title", "Show recent notes");
 
-    const $goToSelectedNoteButton = $("<a>")
+    const $goToSelectedNoteButton = $("<button>")
         .addClass("input-group-text go-to-selected-note-button bx bx-arrow-to-right");
 
-    const $sideButtons = $("<div>")
-        .addClass("input-group-append")
-        .append($clearTextButton)
-        .append($showRecentNotesButton);
+    $el.after($clearTextButton).after($showRecentNotesButton);
 
     if (!options.hideGoToSelectedNoteButton) {
-        $sideButtons.append($goToSelectedNoteButton);
+        $el.after($goToSelectedNoteButton);
     }
 
-    $el.after($sideButtons);
-
     $clearTextButton.on('click', () => clearText($el));
 
     $showRecentNotesButton.on('click', e => {
@@ -180,13 +175,13 @@ function initNoteAutocomplete($el, options) {
         }
 
         if (suggestion.action === 'create-note') {
-            const {success, noteType, templateNoteId} = await noteCreateService.chooseNoteType();
+            const { success, noteType, templateNoteId } = await noteCreateService.chooseNoteType();
 
             if (!success) {
                 return;
             }
 
-            const {note} = await noteCreateService.createNote(suggestion.parentNoteId, {
+            const { note } = await noteCreateService.createNote(suggestion.parentNoteId, {
                 title: suggestion.noteTitle,
                 activate: false,
                 type: noteType,

diff --git a/src/public/app/services/toast.js b/src/public/app/services/toast.js
@@ -2,15 +2,18 @@ import ws from "./ws.js";
 import utils from "./utils.js";
 
 function toast(options) {
-    const $toast = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-    <div class="toast-header">
-        <strong class="mr-auto"><span class="bx bx-${options.icon}"></span> <span class="toast-title"></span></strong>
-        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="toast-body"></div>
-</div>`);
+    const $toast = $(
+        `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <strong class="me-auto">
+                    <span class="bx bx-${options.icon}"></span>
+                    <span class="toast-title"></span>
+                </strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body"></div>
+        </div>`
+    );
 
     $toast.find('.toast-title').text(options.title);
     $toast.find('.toast-body').text(options.message);

diff --git a/src/public/app/services/utils.js b/src/public/app/services/utils.js
@@ -201,7 +201,7 @@ function getMimeTypeClass(mime) {
 
 function closeActiveDialog() {
     if (glob.activeDialog) {
-        glob.activeDialog.modal('hide');
+        bootstrap.Modal.getOrCreateInstance(glob.activeDialog).hide();
         glob.activeDialog = null;
     }
 }
@@ -245,8 +245,7 @@ async function openDialog($dialog, closeActDialog = true) {
     }
 
     saveFocusedElement();
-
-    $dialog.modal();
+    bootstrap.Modal.getOrCreateInstance($dialog).show();
 
     $dialog.on('hidden.bs.modal', () => {
         $(".aa-input").autocomplete("close");

diff --git a/src/public/app/widgets/attribute_widgets/attribute_detail.js b/src/public/app/widgets/attribute_widgets/attribute_detail.js
@@ -97,7 +97,7 @@ const TPL = `
         <tr class="attr-row-promoted"
             title="${t('attribute_detail.promoted_title')}">
             <th>${t('attribute_detail.promoted')}</th>
-            <td><input type="checkbox" class="attr-input-promoted form-control form-control-sm" /></td>
+            <td><input type="checkbox" class="attr-input-promoted form-check" /></td>
         </tr>
         <tr class="attr-row-promoted-alias">
             <th title="${t('attribute_detail.promoted_alias_title')}">${t('attribute_detail.promoted_alias')}</th>
@@ -134,9 +134,7 @@ const TPL = `
             <td>
                 <div class="input-group">
                     <input type="number" class="form-control attr-input-number-precision" style="text-align: right">
-                    <div class="input-group-append">
-                        <span class="input-group-text">${t('attribute_detail.digits')}</span>
-                    </div>
+                    <span class="input-group-text">${t('attribute_detail.digits')}</span>
                 </div>
             </td>
         </tr>
@@ -150,7 +148,7 @@ const TPL = `
         </tr>
         <tr title="${t('attribute_detail.inheritable_title')}">
             <th>${t('attribute_detail.inheritable')}</th>
-            <td><input type="checkbox" class="attr-input-inheritable form-control form-control-sm" /></td>
+            <td><input type="checkbox" class="attr-input-inheritable form-check" /></td>
         </tr>
     </table>
 
@@ -349,7 +347,7 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
         this.$rowTargetNote = this.$widget.find('.attr-row-target-note');
         this.$inputTargetNote = this.$widget.find('.attr-input-target-note');
 
-        noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, {allowCreatingNotes: true})
+        noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, { allowCreatingNotes: true })
             .on('autocomplete:noteselected', (event, suggestion, dataset) => {
                 if (!suggestion.notePath) {
                     return false;
@@ -403,7 +401,7 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
         });
     }
 
-    async showAttributeDetail({allAttributes, attribute, isOwned, x, y, focus}) {
+    async showAttributeDetail({ allAttributes, attribute, isOwned, x, y, focus }) {
         if (!attribute) {
             this.hide();
 
@@ -545,7 +543,7 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             }
         }
 
-        return {left, right};
+        return { left, right };
     }
 
     async saveAndClose() {
@@ -589,19 +587,19 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
     }
 
     async updateRelatedNotes() {
-        let {results, count} = await server.post('search-related', this.attribute);
+        let { results, count } = await server.post('search-related', this.attribute);
 
         for (const res of results) {
             res.noteId = res.notePathArray[res.notePathArray.length - 1];
         }
 
-        results = results.filter(({noteId}) => noteId !== this.noteId);
+        results = results.filter(({ noteId }) => noteId !== this.noteId);
 
         if (results.length === 0) {
             this.$relatedNotesContainer.hide();
         } else {
             this.$relatedNotesContainer.show();
-            this.$relatedNotesTitle.text(t("attribute_detail.other_notes_with_name", {attributeType: this.attribute.type, attributeName: this.attribute.name}));
+            this.$relatedNotesTitle.text(t("attribute_detail.other_notes_with_name", { attributeType: this.attribute.type, attributeName: this.attribute.name }));
 
             this.$relatedNotesList.empty();
 
@@ -611,15 +609,15 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
 
             for (const note of displayedNotes) {
                 const notePath = note.getBestNotePathString(hoistedNoteId);
-                const $noteLink = await linkService.createLink(notePath, {showNotePath: true});
+                const $noteLink = await linkService.createLink(notePath, { showNotePath: true });
 
                 this.$relatedNotesList.append(
                     $("<li>").append($noteLink)
                 );
             }
 
             if (results.length > DISPLAYED_NOTES) {
-                this.$relatedNotesMoreNotes.show().text(t("attribute_detail.and_more", {count: count - DISPLAYED_NOTES}));
+                this.$relatedNotesMoreNotes.show().text(t("attribute_detail.and_more", { count: count - DISPLAYED_NOTES }));
             } else {
                 this.$relatedNotesMoreNotes.hide();
             }

diff --git a/src/public/app/widgets/bulk_actions/execute_script.js b/src/public/app/widgets/bulk_actions/execute_script.js
@@ -15,7 +15,7 @@ const TPL = `
     <td class="button-column">
         <div style="display: flex">
             <div class="dropdown help-dropdown">
-              <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+              <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
               <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('execute_script.help_text')}
                 

diff --git a/src/public/app/widgets/bulk_actions/label/add_label.js b/src/public/app/widgets/bulk_actions/label/add_label.js
@@ -21,7 +21,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("add_label.help_text")}</p>
                 
@@ -30,7 +30,7 @@ const TPL = `
                     <li>${t("add_label.help_text_item2")}</li>
                 </ul>
                 
-                <p>${t("add_label.help_text_note")}</p>
+                ${t("add_label.help_text_note")}
             </div> 
         </div>
     

diff --git a/src/public/app/widgets/bulk_actions/label/update_label_value.js b/src/public/app/widgets/bulk_actions/label/update_label_value.js
@@ -21,11 +21,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("update_label_value.help_text")}</p>
                 
-                <p>${t("update_label_value.help_text_note")}</p>
+                ${t("update_label_value.help_text_note")}
             </div> 
         </div>
     

diff --git a/src/public/app/widgets/bulk_actions/note/delete_note.js b/src/public/app/widgets/bulk_actions/note/delete_note.js
@@ -10,13 +10,13 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("delete_note.delete_matched_notes_description")}</p>
                  
                 <p>${t("delete_note.undelete_notes_instruction")}</p>
                 
-                <p>${t("delete_note.erase_notes_instruction")}</p>
+                ${t("delete_note.erase_notes_instruction")}
             </div>
         </div>
         

diff --git a/src/public/app/widgets/bulk_actions/note/delete_revisions.js b/src/public/app/widgets/bulk_actions/note/delete_revisions.js
@@ -9,7 +9,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('delete_revisions.all_past_note_revisions')}
             </div>

diff --git a/src/public/app/widgets/bulk_actions/note/move_note.js b/src/public/app/widgets/bulk_actions/note/move_note.js
@@ -18,11 +18,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('move_note.on_all_matched_notes')}:</p>
                 
-                <ul>
+                <ul style="margin-bottom: 0;">
                     <li>${t('move_note.move_note_new_parent')}</li>
                     <li>${t('move_note.clone_note_new_parent')}</li>
                     <li>${t('move_note.nothing_will_happen')}</li>

diff --git a/src/public/app/widgets/bulk_actions/note/rename_note.js b/src/public/app/widgets/bulk_actions/note/rename_note.js
@@ -16,7 +16,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('rename_note.evaluated_as_js_string')}</p>
                 

diff --git a/src/public/app/widgets/bulk_actions/relation/add_relation.js b/src/public/app/widgets/bulk_actions/relation/add_relation.js
@@ -25,9 +25,9 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>${t('add_relation.create_relation_on_all_matched_notes')}</p>
+                ${t('add_relation.create_relation_on_all_matched_notes')}
             </div> 
         </div>
     

diff --git a/src/public/app/widgets/bulk_actions/relation/update_relation_target.js b/src/public/app/widgets/bulk_actions/relation/update_relation_target.js
@@ -25,11 +25,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('update_relation_target.on_all_matched_notes')}:</p>
                 
-                <ul>
+                <ul style="margin-bottom: 0;">
                     <li>${t('update_relation_target.create_given_relation')}</li>
                     <li>${t('update_relation_target.change_target_note')}</li>
                 </ul>

diff --git a/src/public/app/widgets/buttons/abstract_button.js b/src/public/app/widgets/buttons/abstract_button.js
@@ -1,7 +1,7 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `<button class="button-widget bx"
-      data-toggle="tooltip"
+      data-bs-toggle="tooltip"
       title=""></button>`;
 
 export default class AbstractButtonWidget extends NoteContextAwareWidget {
@@ -22,10 +22,13 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.tooltip = new bootstrap.Tooltip(this.$widget, {
+            html: true, title: () => this.getTitle(), trigger: 'hover'
+        })
 
         if (this.settings.onContextMenu) {
             this.$widget.on("contextmenu", e => {
-                this.$widget.tooltip("hide");
+                this.tooltip.hide();
 
                 this.settings.onContextMenu(e);
 
@@ -35,12 +38,6 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
 
         this.$widget.attr("data-placement", this.settings.titlePlacement);
 
-        this.$widget.tooltip({
-            html: true,
-            title: () => this.getTitle(),
-            trigger: "hover"
-        });
-
         super.doRender();
     }