From 44bd0088291677dbeff3464520f35993ff8c0745 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:28:50 +0200
Subject: [PATCH] fix note revisions layout

---
 src/public/app/widgets/buttons/abstract_button.js | 13 +++++--------
 src/public/app/widgets/buttons/command_button.js  |  2 +-
 src/public/app/widgets/buttons/note_actions.js    |  4 ++--
 src/public/app/widgets/dialogs/about.js           |  2 +-
 src/public/app/widgets/dialogs/help.js            |  2 +-
 src/public/app/widgets/dialogs/revisions.js       |  8 +++++---
 src/public/stylesheets/style.css                  | 12 ++++++------
 7 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/public/app/widgets/buttons/abstract_button.js b/src/public/app/widgets/buttons/abstract_button.js
index 7e705d566..8c8a3dd4b 100644
--- 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();
     }
 
diff --git a/src/public/app/widgets/buttons/command_button.js b/src/public/app/widgets/buttons/command_button.js
index 12e0dd821..2c28bd21b 100644
--- a/src/public/app/widgets/buttons/command_button.js
+++ b/src/public/app/widgets/buttons/command_button.js
@@ -11,7 +11,7 @@ export default class CommandButtonWidget extends AbstractButtonWidget {
 
         if (this.settings.command) {
             this.$widget.on("click", () => {
-                this.$widget.tooltip("hide");
+                this.tooltip.hide();
 
                 this.triggerCommand(this._command);
             });
diff --git a/src/public/app/widgets/buttons/note_actions.js b/src/public/app/widgets/buttons/note_actions.js
index 1c8e53f3f..83321458f 100644
--- a/src/public/app/widgets/buttons/note_actions.js
+++ b/src/public/app/widgets/buttons/note_actions.js
@@ -27,7 +27,7 @@ const TPL = `
     }
     </style>
 
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" 
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" 
         aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded"></button>
 
     <div class="dropdown-menu dropdown-menu-right">
@@ -82,7 +82,7 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         this.$importNoteButton = this.$widget.find('.import-files-button');
         this.$importNoteButton.on("click", () => this.triggerCommand("showImportDialog", {noteId: this.noteId}));
 
-        this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
+        this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-bs-toggle='dropdown']").dropdown('toggle'));
 
         this.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
         this.$openNoteCustomButton = this.$widget.find(".open-note-custom-button");
diff --git a/src/public/app/widgets/dialogs/about.js b/src/public/app/widgets/dialogs/about.js
index 29cfee82b..1cab6460d 100644
--- a/src/public/app/widgets/dialogs/about.js
+++ b/src/public/app/widgets/dialogs/about.js
@@ -8,7 +8,7 @@ const TPL = `
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">${t("about.title")}</h5>
+                <h5 class="modal-title me-auto">${t("about.title")}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0;"></button>
             </div>
             <div class="modal-body">
diff --git a/src/public/app/widgets/dialogs/help.js b/src/public/app/widgets/dialogs/help.js
index c8b12dd0d..b7b4f9dc6 100644
--- a/src/public/app/widgets/dialogs/help.js
+++ b/src/public/app/widgets/dialogs/help.js
@@ -7,7 +7,7 @@ const TPL = `
     <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
         <div class="modal-content" style="height: auto;">
             <div class="modal-header">
-                <h5 class="modal-title">${t('help.fullDocumentation')}</h5>
+                <h5 class="modal-title me-auto">${t('help.fullDocumentation')}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}"></button>
             </div>
             <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
diff --git a/src/public/app/widgets/dialogs/revisions.js b/src/public/app/widgets/dialogs/revisions.js
index cef320d52..37c4f1edc 100644
--- a/src/public/app/widgets/dialogs/revisions.js
+++ b/src/public/app/widgets/dialogs/revisions.js
@@ -40,7 +40,7 @@ const TPL = `
     <div class="modal-dialog modal-xl" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t("revisions.note_revisions")}</h5>
+                <h5 class="modal-title flex-grow-1">${t("revisions.note_revisions")}</h5>
 
                 <button class="revisions-erase-all-revisions-button btn btn-sm"
                         title="${t("revisions.delete_all_revisions")}"
@@ -52,7 +52,9 @@ const TPL = `
             </div>
             <div class="modal-body" style="display: flex; height: 80vh;">
                 <div class="dropdown">
-                    <button class="revision-list-dropdown" type="button" style="display: none;" data-toggle="dropdown"></button>
+                    <button class="revision-list-dropdown" type="button" style="display: none;"
+                            data-bs-toggle="dropdown" data-bs-display="static">
+                    </button>
 
                     <div class="revision-list dropdown-menu" style="position: static; height: 100%; overflow: auto;"></div>
                 </div>
@@ -274,7 +276,7 @@ export default class RevisionsDialog extends BasicWidget {
             }
 
             this.$content.html($table);
-        } else if ([ "canvas", "mindMap" ].includes(revisionItem.type)) {
+        } else if (["canvas", "mindMap"].includes(revisionItem.type)) {
             const encodedTitle = encodeURIComponent(revisionItem.title);
 
             this.$content.html($("<img>")
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index e52bc052e..c953ea04f 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -421,14 +421,14 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 .bs-tooltip-left .tooltip-arrow::before {
     left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-right-color: var(--main-border-color) !important;
+    border-left-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before,
 .bs-tooltip-bottom .tooltip-arrow::before {
     bottom: -1px;
     border-width: 0 0.4rem 0.4rem;
-    border-right-color: var(--main-border-color) !important;
+    border-bottom-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before,
@@ -442,21 +442,21 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 .bs-tooltip-top .tooltip-arrow::before {
     top: -1px;
     border-width: 0.4rem 0.4rem 0;
-    border-right-color: var(--main-border-color) !important;
+    border-top-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::after,
 .bs-tooltip-left .tooltip-arrow::after {
     left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-right-color: var(--tooltip-background-color) !important;
+    border-left-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::after,
 .bs-tooltip-bottom .tooltip-arrow::after {
     bottom: -1px;
     border-width: 0 0.4rem 0.4rem;
-    border-right-color: var(--tooltip-background-color) !important;
+    border-bottom-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::after,
@@ -470,7 +470,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 .bs-tooltip-top .tooltip-arrow::after {
     top: -1px;
     border-width: 0.4rem 0.4rem 0;
-    border-right-color: var(--tooltip-background-color) !important;
+    border-top-color: var(--tooltip-background-color) !important;
 }
 
 .note-tooltip.tooltip .arrow {