mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
Upgrade bootstrap from v4 to v5, fix global menu
This commit is contained in:
Jin
parent
d7ab99013c
commit
5d579fee68
22
package-lock.json
generated
22
package-lock.json
generated
@ -18,7 +18,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",
|
||||
@ -3152,6 +3152,17 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@sindresorhus/is": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
|
||||
@ -4902,9 +4913,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
|
||||
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
|
||||
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@ -4917,8 +4928,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"jquery": "1.9.1 - 3",
|
||||
"popper.js": "^1.16.1"
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/boxicons": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -201,7 +201,7 @@ function getMimeTypeClass(mime) {
|
||||
|
||||
function closeActiveDialog() {
|
||||
if (glob.activeDialog) {
|
||||
glob.activeDialog.modal('hide');
|
||||
glob.activeDialog.hide();
|
||||
glob.activeDialog = null;
|
||||
}
|
||||
}
|
||||
@ -245,8 +245,7 @@ async function openDialog($dialog, closeActDialog = true) {
|
||||
}
|
||||
|
||||
saveFocusedElement();
|
||||
|
||||
$dialog.modal();
|
||||
bootstrap.Modal.getInstance($dialog).show();
|
||||
|
||||
$dialog.on('hidden.bs.modal', () => {
|
||||
$(".aa-input").autocomplete("close");
|
||||
|
||||
@ -5,7 +5,7 @@ import UpdateAvailableWidget from "./update_available.js";
|
||||
import options from "../../services/options.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="dropdown global-menu dropright">
|
||||
<div class="dropdown global-menu dropend">
|
||||
<style>
|
||||
.global-menu {
|
||||
width: 53px;
|
||||
@ -102,10 +102,9 @@ const TPL = `
|
||||
}
|
||||
</style>
|
||||
|
||||
<button type="button" data-toggle="dropdown" data-placement="right"
|
||||
aria-haspopup="true" aria-expanded="false"
|
||||
class="icon-action global-menu-button" title="${t('global_menu.menu')}">
|
||||
<svg viewBox="0 0 256 256">
|
||||
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false" class="icon-action global-menu-button">
|
||||
<svg viewBox="0 0 256 256" data-bs-toggle="tooltip" title="${t('global_menu.menu')}">
|
||||
<g>
|
||||
<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
|
||||
<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
|
||||
@ -259,10 +258,9 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$dropdown = this.$widget.find("[data-toggle='dropdown']");
|
||||
const $button = this.$widget.find(".global-menu-button");
|
||||
$button.tooltip({ trigger: "hover" });
|
||||
$button.on("click", () => $button.tooltip("hide"));
|
||||
this.$dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
|
||||
|
||||
this.$tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" });
|
||||
|
||||
this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog"));
|
||||
|
||||
@ -278,8 +276,11 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$dropdown.dropdown('toggle');
|
||||
this.$dropdown.toggle();
|
||||
});
|
||||
this.$widget.on('click', '.dropdown-submenu', e => {
|
||||
e.stopPropagation();
|
||||
})
|
||||
|
||||
this.$widget.find(".global-menu-button-update-available").append(
|
||||
this.updateAvailableWidget.render()
|
||||
@ -292,7 +293,12 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
}
|
||||
|
||||
this.$zoomState = this.$widget.find(".zoom-state");
|
||||
this.$widget.on('show.bs.dropdown', () => this.updateZoomState());
|
||||
this.$widget.on('show.bs.dropdown', () => {
|
||||
this.updateZoomState();
|
||||
this.$tooltip.hide();
|
||||
this.$tooltip.disable();
|
||||
});
|
||||
this.$widget.on('hide.bs.dropdown', () => this.$tooltip.enable());
|
||||
|
||||
this.$widget.find(".zoom-buttons").on("click",
|
||||
// delay to wait for the actual zoom change
|
||||
@ -342,10 +348,10 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
}
|
||||
|
||||
activeContextChangedEvent() {
|
||||
this.$dropdown.dropdown('hide');
|
||||
this.$dropdown.hide();
|
||||
}
|
||||
|
||||
noteSwitchedEvent() {
|
||||
this.$dropdown.dropdown('hide');
|
||||
this.$dropdown.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,15 +4,12 @@ import { t } from "../../services/i18n.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="about-dialog modal fade mx-auto" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">${t("about.title")}</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h5 class="modal-title">${t("about.title")}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0;" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="table table-borderless text-nowrap">
|
||||
@ -55,6 +52,8 @@ const TPL = `
|
||||
export default class AboutDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
bootstrap.Modal.getOrCreateInstance(this.$widget);
|
||||
|
||||
this.$appVersion = this.$widget.find(".app-version");
|
||||
this.$dbVersion = this.$widget.find(".db-version");
|
||||
this.$syncVersion = this.$widget.find(".sync-version");
|
||||
|
||||
@ -3,15 +3,12 @@ import BasicWidget from "../basic_widget.js";
|
||||
import { t } from "../../services/i18n.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="help-dialog modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
|
||||
<div class="help-dialog modal" tabindex="-1">
|
||||
<div class="modal-dialog" style="min-width: 100%; height: 100%; margin: 0;">
|
||||
<div class="modal-content" style="height: auto;">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">${t('help.fullDocumentation')}</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="${t('help.close')}">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h5 class="modal-title">${t('help.fullDocumentation')}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}" />
|
||||
</div>
|
||||
<div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
|
||||
<div class="card-columns help-cards">
|
||||
@ -155,6 +152,7 @@ const TPL = `
|
||||
export default class HelpDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
bootstrap.Modal.getOrCreateInstance(this.$widget);
|
||||
}
|
||||
|
||||
showHelpEvent() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user