mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
fix all launcher bar components
This commit is contained in:
Jin
parent
5d579fee68
commit
f3b7261748
@ -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">×</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);
|
||||
|
||||
@ -123,7 +123,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
|
||||
|
||||
if (note) {
|
||||
appContext.tabManager.getActiveContext().setNote(note.noteId);
|
||||
this.hideDropdown();
|
||||
}
|
||||
else {
|
||||
toastService.showError(t("calendar.cannot_find_day_note"));
|
||||
|
||||
@ -258,9 +258,9 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
|
||||
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.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"));
|
||||
|
||||
@ -276,7 +276,7 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$dropdown.toggle();
|
||||
this.dropdown.toggle();
|
||||
});
|
||||
this.$widget.on('click', '.dropdown-submenu', e => {
|
||||
e.stopPropagation();
|
||||
@ -295,10 +295,10 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
this.$zoomState = this.$widget.find(".zoom-state");
|
||||
this.$widget.on('show.bs.dropdown', () => {
|
||||
this.updateZoomState();
|
||||
this.$tooltip.hide();
|
||||
this.$tooltip.disable();
|
||||
this.tooltip.hide();
|
||||
this.tooltip.disable();
|
||||
});
|
||||
this.$widget.on('hide.bs.dropdown', () => this.$tooltip.enable());
|
||||
this.$widget.on('hide.bs.dropdown', () => this.tooltip.enable());
|
||||
|
||||
this.$widget.find(".zoom-buttons").on("click",
|
||||
// delay to wait for the actual zoom change
|
||||
@ -348,10 +348,10 @@ export default class GlobalMenuWidget extends BasicWidget {
|
||||
}
|
||||
|
||||
activeContextChangedEvent() {
|
||||
this.$dropdown.hide();
|
||||
this.dropdown.hide();
|
||||
}
|
||||
|
||||
noteSwitchedEvent() {
|
||||
this.$dropdown.hide();
|
||||
this.dropdown.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="dropdown right-dropdown-widget dropright">
|
||||
<div class="dropdown right-dropdown-widget dropend">
|
||||
<style>
|
||||
.right-dropdown-widget {
|
||||
height: 53px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button type="button" data-toggle="dropdown" data-placement="right"
|
||||
<button type="button" data-bs-toggle="dropdown" data-placement="right"
|
||||
aria-haspopup="true" aria-expanded="false"
|
||||
class="bx right-dropdown-button launcher-button"></button>
|
||||
|
||||
<div class="tooltip-trigger"></div>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right"></div>
|
||||
</div>
|
||||
`;
|
||||
@ -29,11 +31,14 @@ export default class RightDropdownButtonWidget extends BasicWidget {
|
||||
this.$widget = $(TPL);
|
||||
this.$dropdownMenu = this.$widget.find(".dropdown-menu");
|
||||
|
||||
const $button = this.$widget.find(".right-dropdown-button")
|
||||
this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
|
||||
this.tooltip = new bootstrap.Tooltip(this.$tooltip);
|
||||
|
||||
this.$widget.find(".right-dropdown-button")
|
||||
.addClass(this.iconClass)
|
||||
.attr("title", this.title)
|
||||
.tooltip({ trigger: "hover" })
|
||||
.on("click", () => $button.tooltip("hide"));
|
||||
.on("click", () => this.tooltip.hide())
|
||||
.on('mouseenter', () => this.tooltip.show())
|
||||
.on('mouseleave', () => this.tooltip.hide());
|
||||
|
||||
this.$widget.on('show.bs.dropdown', async () => {
|
||||
await this.dropdownShown();
|
||||
@ -51,10 +56,5 @@ export default class RightDropdownButtonWidget extends BasicWidget {
|
||||
}
|
||||
|
||||
// to be overridden
|
||||
async dropdownShow() {}
|
||||
|
||||
hideDropdown() {
|
||||
this.$widget.dropdown("hide");
|
||||
this.$dropdownMenu.removeClass("show");
|
||||
}
|
||||
async dropdownShow() { }
|
||||
}
|
||||
|
||||
@ -4,12 +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">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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;" />
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0;"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="table table-borderless text-nowrap">
|
||||
|
||||
@ -3,12 +3,12 @@ import BasicWidget from "../basic_widget.js";
|
||||
import { t } from "../../services/i18n.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="help-dialog modal" tabindex="-1">
|
||||
<div class="modal-dialog" style="min-width: 100%; height: 100%; margin: 0;">
|
||||
<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="modal-content" style="height: auto;">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">${t('help.fullDocumentation')}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}" />
|
||||
<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);">
|
||||
<div class="card-columns help-cards">
|
||||
|
||||
@ -13,9 +13,7 @@ const TPL = `<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="
|
||||
<input class="jump-to-note-autocomplete form-control" placeholder="${t('jump_to_note.search_placeholder')}">
|
||||
</div>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="algolia-autocomplete-container jump-to-note-results"></div>
|
||||
@ -38,6 +36,8 @@ export default class JumpToNoteDialog extends BasicWidget {
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
bootstrap.Modal.getOrCreateInstance(this.$widget);
|
||||
|
||||
this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
|
||||
this.$results = this.$widget.find(".jump-to-note-results");
|
||||
this.$showInFullTextButton = this.$widget.find(".show-in-full-text-button");
|
||||
@ -94,7 +94,7 @@ export default class JumpToNoteDialog extends BasicWidget {
|
||||
|
||||
const searchString = this.$autoComplete.val();
|
||||
|
||||
this.triggerCommand('searchNotes', {searchString});
|
||||
this.triggerCommand('searchNotes', { searchString });
|
||||
|
||||
this.$widget.modal('hide');
|
||||
}
|
||||
|
||||
@ -15,14 +15,12 @@ const TPL = `
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">${t('recent_changes.title')}</h5>
|
||||
<h5 class="modal-title flex-grow-1">${t('recent_changes.title')}</h5>
|
||||
|
||||
<button class="erase-deleted-notes-now-button btn btn-sm" style="padding: 0 10px">
|
||||
${t('recent_changes.erase_notes_button')}</button>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="recent-changes-content"></div>
|
||||
@ -34,6 +32,8 @@ const TPL = `
|
||||
export default class RecentChangesDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
bootstrap.Modal.getOrCreateInstance(this.$widget);
|
||||
|
||||
this.$content = this.$widget.find(".recent-changes-content");
|
||||
this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button");
|
||||
this.$eraseDeletedNotesNow.on("click", () => {
|
||||
@ -45,7 +45,7 @@ export default class RecentChangesDialog extends BasicWidget {
|
||||
});
|
||||
}
|
||||
|
||||
async showRecentChangesEvent({ancestorNoteId}) {
|
||||
async showRecentChangesEvent({ ancestorNoteId }) {
|
||||
this.ancestorNoteId = ancestorNoteId;
|
||||
|
||||
await this.refresh();
|
||||
|
||||
@ -48,9 +48,7 @@ const TPL = `
|
||||
|
||||
<button class="help-button" type="button" data-help-page="note-revisions.html" title="${t("revisions.help_title")}">?</button>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="display: flex; height: 80vh;">
|
||||
<div class="dropdown">
|
||||
@ -84,6 +82,8 @@ export default class RevisionsDialog extends BasicWidget {
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
bootstrap.Modal.getOrCreateInstance(this.$widget);
|
||||
|
||||
this.$list = this.$widget.find(".revision-list");
|
||||
this.$listDropdown = this.$widget.find(".revision-list-dropdown");
|
||||
this.$content = this.$widget.find(".revision-content");
|
||||
@ -131,7 +131,7 @@ export default class RevisionsDialog extends BasicWidget {
|
||||
});
|
||||
}
|
||||
|
||||
async showRevisionsEvent({noteId = appContext.tabManager.getActiveContextNoteId()}) {
|
||||
async showRevisionsEvent({ noteId = appContext.tabManager.getActiveContextNoteId() }) {
|
||||
utils.openDialog(this.$widget);
|
||||
|
||||
await this.loadRevisions(noteId);
|
||||
@ -241,7 +241,7 @@ export default class RevisionsDialog extends BasicWidget {
|
||||
if (this.$content.find('span.math-tex').length > 0) {
|
||||
await libraryLoader.requireLibrary(libraryLoader.KATEX);
|
||||
|
||||
renderMathInElement(this.$content[0], {trust: true});
|
||||
renderMathInElement(this.$content[0], { trust: true });
|
||||
}
|
||||
} else if (revisionItem.type === 'code') {
|
||||
this.$content.html($("<pre>").text(fullRevision.content));
|
||||
|
||||
@ -397,45 +397,80 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
|
||||
font-size: var(--main-font-size) !important;
|
||||
}
|
||||
|
||||
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-top .arrow::before { border-top-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-left .arrow::before { border-left-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-right .arrow::before { border-right-color: var(--main-border-color) !important; }
|
||||
|
||||
.bs-tooltip-bottom .arrow::after { border-bottom-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-top .arrow::after { border-top-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-left .arrow::after { border-left-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-right .arrow::after { border-right-color: var(--tooltip-background-color) !important; }
|
||||
|
||||
.tooltip .arrow::after {
|
||||
.tooltip-trigger {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[x-placement^='left'] .arrow::after,
|
||||
.bs-tooltip-left .arrow::after {
|
||||
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-left .tooltip-arrow::before { border-left-color: var(--main-border-color) !important; }
|
||||
.bs-tooltip-right .tooltip-arrow::before { border-right-color: var(--main-border-color) !important; }
|
||||
|
||||
.bs-tooltip-bottom .tooltip-arrow::after { border-bottom-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-top .tooltip-arrow::after { border-top-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-left .tooltip-arrow::after { border-left-color: var(--tooltip-background-color) !important; }
|
||||
.bs-tooltip-right .tooltip-arrow::after { border-right-color: var(--tooltip-background-color) !important; }
|
||||
|
||||
.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before,
|
||||
.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;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[x-placement^='bottom'] .arrow::after,
|
||||
.bs-tooltip-bottom .arrow::after {
|
||||
.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;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[x-placement^='right'] .arrow::after,
|
||||
.bs-tooltip-right .arrow::after {
|
||||
.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before,
|
||||
.bs-tooltip-right .tooltip-arrow::before {
|
||||
right: -1px;
|
||||
border-width: 0.4rem 0.4rem 0.4rem 0;
|
||||
border-right-color: var(--main-border-color) !important;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[x-placement^='top'] .arrow::after,
|
||||
.bs-tooltip-top .arrow::after {
|
||||
.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before,
|
||||
.bs-tooltip-top .tooltip-arrow::before {
|
||||
top: -1px;
|
||||
border-width: 0.4rem 0.4rem 0;
|
||||
border-right-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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::after,
|
||||
.bs-tooltip-right .tooltip-arrow::after {
|
||||
right: -1px;
|
||||
border-width: 0.4rem 0.4rem 0.4rem 0;
|
||||
border-right-color: var(--tooltip-background-color) !important;
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::after,
|
||||
.bs-tooltip-top .tooltip-arrow::after {
|
||||
top: -1px;
|
||||
border-width: 0.4rem 0.4rem 0;
|
||||
border-right-color: var(--tooltip-background-color) !important;
|
||||
}
|
||||
|
||||
.note-tooltip.tooltip .arrow {
|
||||
@ -667,7 +702,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 0.7rem 1rem 0 1rem !important; /* make modal header padding slightly smaller */
|
||||
padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
@ -1092,7 +1127,6 @@ textarea {
|
||||
|
||||
.jump-to-note-dialog .modal-header {
|
||||
align-items: center;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .modal-body {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user