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

View File

@ -11,7 +11,7 @@ export default class CommandButtonWidget extends AbstractButtonWidget {
if (this.settings.command) { if (this.settings.command) {
this.$widget.on("click", () => { this.$widget.on("click", () => {
this.$widget.tooltip("hide"); this.tooltip.hide();
this.triggerCommand(this._command); this.triggerCommand(this._command);
}); });

View File

@ -27,7 +27,7 @@ const TPL = `
} }
</style> </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> aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded"></button>
<div class="dropdown-menu dropdown-menu-right"> <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 = this.$widget.find('.import-files-button');
this.$importNoteButton.on("click", () => this.triggerCommand("showImportDialog", {noteId: this.noteId})); 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.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
this.$openNoteCustomButton = this.$widget.find(".open-note-custom-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-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0;"></button>
</div> </div>
<div class="modal-body"> <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-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
<div class="modal-content" style="height: auto;"> <div class="modal-content" style="height: auto;">
<div class="modal-header"> <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> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}"></button>
</div> </div>
<div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);"> <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-dialog modal-xl" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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" <button class="revisions-erase-all-revisions-button btn btn-sm"
title="${t("revisions.delete_all_revisions")}" title="${t("revisions.delete_all_revisions")}"
@ -52,7 +52,9 @@ const TPL = `
</div> </div>
<div class="modal-body" style="display: flex; height: 80vh;"> <div class="modal-body" style="display: flex; height: 80vh;">
<div class="dropdown"> <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 class="revision-list dropdown-menu" style="position: static; height: 100%; overflow: auto;"></div>
</div> </div>
@ -274,7 +276,7 @@ export default class RevisionsDialog extends BasicWidget {
} }
this.$content.html($table); this.$content.html($table);
} else if ([ "canvas", "mindMap" ].includes(revisionItem.type)) { } else if (["canvas", "mindMap"].includes(revisionItem.type)) {
const encodedTitle = encodeURIComponent(revisionItem.title); const encodedTitle = encodeURIComponent(revisionItem.title);
this.$content.html($("<img>") 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 { .bs-tooltip-left .tooltip-arrow::before {
left: -1px; left: -1px;
border-width: 0.4rem 0 0.4rem 0.4rem; 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-auto[data-popper-placement^='bottom'] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before { .bs-tooltip-bottom .tooltip-arrow::before {
bottom: -1px; bottom: -1px;
border-width: 0 0.4rem 0.4rem; 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, .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 { .bs-tooltip-top .tooltip-arrow::before {
top: -1px; top: -1px;
border-width: 0.4rem 0.4rem 0; 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-auto[data-popper-placement^='left'] .tooltip-arrow::after,
.bs-tooltip-left .tooltip-arrow::after { .bs-tooltip-left .tooltip-arrow::after {
left: -1px; left: -1px;
border-width: 0.4rem 0 0.4rem 0.4rem; 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-auto[data-popper-placement^='bottom'] .tooltip-arrow::after,
.bs-tooltip-bottom .tooltip-arrow::after { .bs-tooltip-bottom .tooltip-arrow::after {
bottom: -1px; bottom: -1px;
border-width: 0 0.4rem 0.4rem; 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, .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 { .bs-tooltip-top .tooltip-arrow::after {
top: -1px; top: -1px;
border-width: 0.4rem 0.4rem 0; 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 { .note-tooltip.tooltip .arrow {