fix note revisions layout

This commit is contained in:
Jin 2024-09-03 11:28:50 +02:00
parent f3b7261748
commit 44bd008829
7 changed files with 21 additions and 22 deletions

View File

@ -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();
}

View File

@ -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);
});

View File

@ -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");

View File

@ -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">

View File

@ -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);">

View File

@ -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>")

View File

@ -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 {