gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix all launcher bar components

Browse Source
This commit is contained in:
Jin 2024-09-02 19:37:02 +02:00
parent 5d579fee68
commit f3b7261748
10 changed files with 110 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/public/app/services/toast.js
View File

@ -2,15 +2,18 @@ import ws from "./ws.js";
import utils from "./utils.js"; import utils from "./utils.js";
function toast(options) { function toast(options) {
const $toast = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> const $toast = $(
<div class="toast-header"> `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<strong class="mr-auto"><span class="bx bx-${options.icon}"></span> <span class="toast-title"></span></strong> <div class="toast-header">
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <strong class="me-auto">
<span aria-hidden="true">&times;</span> <span class="bx bx-${options.icon}"></span>
</button> <span class="toast-title"></span>
</div> </strong>
<div class="toast-body"></div> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>`); </div>
<div class="toast-body"></div>
</div>`
);
$toast.find('.toast-title').text(options.title); $toast.find('.toast-title').text(options.title);
$toast.find('.toast-body').text(options.message); $toast.find('.toast-body').text(options.message);

1
src/public/app/widgets/buttons/calendar.js
View File

@ -123,7 +123,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
if (note) { if (note) {
appContext.tabManager.getActiveContext().setNote(note.noteId); appContext.tabManager.getActiveContext().setNote(note.noteId);
this.hideDropdown();
} }
else { else {
toastService.showError(t("calendar.cannot_find_day_note")); toastService.showError(t("calendar.cannot_find_day_note"));

16
src/public/app/widgets/buttons/global_menu.js
View File

@ -258,9 +258,9 @@ export default class GlobalMenuWidget extends BasicWidget {
doRender() { doRender() {
this.$widget = $(TPL); 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")); this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog"));
@ -276,7 +276,7 @@ export default class GlobalMenuWidget extends BasicWidget {
return; return;
} }
this.$dropdown.toggle(); this.dropdown.toggle();
}); });
this.$widget.on('click', '.dropdown-submenu', e => { this.$widget.on('click', '.dropdown-submenu', e => {
e.stopPropagation(); e.stopPropagation();
@ -295,10 +295,10 @@ export default class GlobalMenuWidget extends BasicWidget {
this.$zoomState = this.$widget.find(".zoom-state"); this.$zoomState = this.$widget.find(".zoom-state");
this.$widget.on('show.bs.dropdown', () => { this.$widget.on('show.bs.dropdown', () => {
this.updateZoomState(); this.updateZoomState();
this.$tooltip.hide(); this.tooltip.hide();
this.$tooltip.disable(); 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", this.$widget.find(".zoom-buttons").on("click",
// delay to wait for the actual zoom change // delay to wait for the actual zoom change
@ -348,10 +348,10 @@ export default class GlobalMenuWidget extends BasicWidget {
} }
activeContextChangedEvent() { activeContextChangedEvent() {
this.$dropdown.hide(); this.dropdown.hide();
} }
noteSwitchedEvent() { noteSwitchedEvent() {
this.$dropdown.hide(); this.dropdown.hide();
} }
} }

24
src/public/app/widgets/buttons/right_dropdown_button.js
View File

@ -1,17 +1,19 @@
import BasicWidget from "../basic_widget.js"; import BasicWidget from "../basic_widget.js";
const TPL = ` const TPL = `
<div class="dropdown right-dropdown-widget dropright"> <div class="dropdown right-dropdown-widget dropend">
<style> <style>
.right-dropdown-widget { .right-dropdown-widget {
height: 53px; height: 53px;
} }
</style> </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" aria-haspopup="true" aria-expanded="false"
class="bx right-dropdown-button launcher-button"></button> class="bx right-dropdown-button launcher-button"></button>
<div class="tooltip-trigger"></div>
<div class="dropdown-menu dropdown-menu-right"></div> <div class="dropdown-menu dropdown-menu-right"></div>
</div> </div>
`; `;
@ -29,11 +31,14 @@ export default class RightDropdownButtonWidget extends BasicWidget {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$dropdownMenu = this.$widget.find(".dropdown-menu"); 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) .addClass(this.iconClass)
.attr("title", this.title) .on("click", () => this.tooltip.hide())
.tooltip({ trigger: "hover" }) .on('mouseenter', () => this.tooltip.show())
.on("click", () => $button.tooltip("hide")); .on('mouseleave', () => this.tooltip.hide());
this.$widget.on('show.bs.dropdown', async () => { this.$widget.on('show.bs.dropdown', async () => {
await this.dropdownShown(); await this.dropdownShown();
@ -51,10 +56,5 @@ export default class RightDropdownButtonWidget extends BasicWidget {
} }
// to be overridden // to be overridden
async dropdownShow() {} async dropdownShow() { }
hideDropdown() {
this.$widget.dropdown("hide");
this.$dropdownMenu.removeClass("show");
}
} }

6
src/public/app/widgets/dialogs/about.js
View File

@ -4,12 +4,12 @@ import { t } from "../../services/i18n.js";
import BasicWidget from "../basic_widget.js"; import BasicWidget from "../basic_widget.js";
const TPL = ` const TPL = `
<div class="about-dialog modal fade mx-auto" tabindex="-1"> <div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg"> <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">${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>
<div class="modal-body"> <div class="modal-body">
<table class="table table-borderless text-nowrap"> <table class="table table-borderless text-nowrap">

6
src/public/app/widgets/dialogs/help.js
View File

@ -3,12 +3,12 @@ import BasicWidget from "../basic_widget.js";
import { t } from "../../services/i18n.js"; import { t } from "../../services/i18n.js";
const TPL = ` const TPL = `
<div class="help-dialog modal" tabindex="-1"> <div class="help-dialog modal" tabindex="-1" role="dialog">
<div class="modal-dialog" 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">${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>
<div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);"> <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
<div class="card-columns help-cards"> <div class="card-columns help-cards">

8
src/public/app/widgets/dialogs/jump_to_note.js
View File

@ -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')}"> <input class="jump-to-note-autocomplete form-control" placeholder="${t('jump_to_note.search_placeholder')}">
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="algolia-autocomplete-container jump-to-note-results"></div> <div class="algolia-autocomplete-container jump-to-note-results"></div>
@ -38,6 +36,8 @@ export default class JumpToNoteDialog extends BasicWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete"); this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
this.$results = this.$widget.find(".jump-to-note-results"); this.$results = this.$widget.find(".jump-to-note-results");
this.$showInFullTextButton = this.$widget.find(".show-in-full-text-button"); 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(); const searchString = this.$autoComplete.val();
this.triggerCommand('searchNotes', {searchString}); this.triggerCommand('searchNotes', { searchString });
this.$widget.modal('hide'); this.$widget.modal('hide');
} }

10
src/public/app/widgets/dialogs/recent_changes.js
View File

@ -15,14 +15,12 @@ const TPL = `
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-lg modal-dialog-scrollable" 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('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"> <button class="erase-deleted-notes-now-button btn btn-sm" style="padding: 0 10px">
${t('recent_changes.erase_notes_button')}</button> ${t('recent_changes.erase_notes_button')}</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="recent-changes-content"></div> <div class="recent-changes-content"></div>
@ -34,6 +32,8 @@ const TPL = `
export default class RecentChangesDialog extends BasicWidget { export default class RecentChangesDialog extends BasicWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$content = this.$widget.find(".recent-changes-content"); this.$content = this.$widget.find(".recent-changes-content");
this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button"); this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button");
this.$eraseDeletedNotesNow.on("click", () => { this.$eraseDeletedNotesNow.on("click", () => {
@ -45,7 +45,7 @@ export default class RecentChangesDialog extends BasicWidget {
}); });
} }
async showRecentChangesEvent({ancestorNoteId}) { async showRecentChangesEvent({ ancestorNoteId }) {
this.ancestorNoteId = ancestorNoteId; this.ancestorNoteId = ancestorNoteId;
await this.refresh(); await this.refresh();

10
src/public/app/widgets/dialogs/revisions.js
View File

@ -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 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;"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<span aria-hidden="true">&times;</span>
</button>
</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">
@ -84,6 +82,8 @@ export default class RevisionsDialog extends BasicWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$list = this.$widget.find(".revision-list"); this.$list = this.$widget.find(".revision-list");
this.$listDropdown = this.$widget.find(".revision-list-dropdown"); this.$listDropdown = this.$widget.find(".revision-list-dropdown");
this.$content = this.$widget.find(".revision-content"); 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); utils.openDialog(this.$widget);
await this.loadRevisions(noteId); await this.loadRevisions(noteId);
@ -241,7 +241,7 @@ export default class RevisionsDialog extends BasicWidget {
if (this.$content.find('span.math-tex').length > 0) { if (this.$content.find('span.math-tex').length > 0) {
await libraryLoader.requireLibrary(libraryLoader.KATEX); await libraryLoader.requireLibrary(libraryLoader.KATEX);
renderMathInElement(this.$content[0], {trust: true}); renderMathInElement(this.$content[0], { trust: true });
} }
} else if (revisionItem.type === 'code') { } else if (revisionItem.type === 'code') {
this.$content.html($("<pre>").text(fullRevision.content)); this.$content.html($("<pre>").text(fullRevision.content));

82
src/public/stylesheets/style.css
View File

@ -397,45 +397,80 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
font-size: var(--main-font-size) !important; font-size: var(--main-font-size) !important;
} }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--main-border-color) !important; } .tooltip-trigger {
.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 {
position: absolute; position: absolute;
content: ''; top: 0;
border-color: transparent; left: 0;
border-style: solid; width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
} }
.bs-tooltip-auto[x-placement^='left'] .arrow::after, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--main-border-color) !important; }
.bs-tooltip-left .arrow::after { .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; 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;
} }
.bs-tooltip-auto[x-placement^='bottom'] .arrow::after, .bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before,
.bs-tooltip-bottom .arrow::after { .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;
} }
.bs-tooltip-auto[x-placement^='right'] .arrow::after, .bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before,
.bs-tooltip-right .arrow::after { .bs-tooltip-right .tooltip-arrow::before {
right: -1px; right: -1px;
border-width: 0.4rem 0.4rem 0.4rem 0; 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-auto[data-popper-placement^='top'] .tooltip-arrow::before,
.bs-tooltip-top .arrow::after { .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;
}
.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 { .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 { .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 { #toast-container {
@ -1092,7 +1127,6 @@ textarea {
.jump-to-note-dialog .modal-header { .jump-to-note-dialog .modal-header {
align-items: center; align-items: center;
padding-bottom: 1rem !important;
} }
.jump-to-note-dialog .modal-body { .jump-to-note-dialog .modal-body {