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 dropdowns and tooltips, fix some translations

Browse Source
This commit is contained in:
Jin 2024-09-03 17:08:07 +02:00
parent 44bd008829
commit 464d8417f5
31 changed files with 173 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/public/app/services/note_autocomplete.js
View File

@ -105,28 +105,23 @@ function initNoteAutocomplete($el, options) {
$el.addClass("note-autocomplete-input");
const $clearTextButton = $("<a>")
.addClass("input-group-text input-clearer-button bx bxs-tag-x")
.prop("title", "Clear text field");
const $clearTextButton = $("<button>")
.addClass("input-group-text input-clearer-button bx bxs-tag-x")
.prop("title", "Clear text field");
const $showRecentNotesButton = $("<a>")
.addClass("input-group-text show-recent-notes-button bx bx-time")
.prop("title", "Show recent notes");
const $showRecentNotesButton = $("<button>")
.addClass("input-group-text show-recent-notes-button bx bx-time")
.prop("title", "Show recent notes");
const $goToSelectedNoteButton = $("<a>")
const $goToSelectedNoteButton = $("<button>")
.addClass("input-group-text go-to-selected-note-button bx bx-arrow-to-right");
const $sideButtons = $("<div>")
.addClass("input-group-append")
.append($clearTextButton)
.append($showRecentNotesButton);
$el.after($clearTextButton).after($showRecentNotesButton);
if (!options.hideGoToSelectedNoteButton) {
$sideButtons.append($goToSelectedNoteButton);
$el.after($goToSelectedNoteButton);
}
$el.after($sideButtons);
$clearTextButton.on('click', () => clearText($el));
$showRecentNotesButton.on('click', e => {
@ -180,13 +175,13 @@ function initNoteAutocomplete($el, options) {
}
if (suggestion.action === 'create-note') {
const {success, noteType, templateNoteId} = await noteCreateService.chooseNoteType();
const { success, noteType, templateNoteId } = await noteCreateService.chooseNoteType();
if (!success) {
return;
}
const {note} = await noteCreateService.createNote(suggestion.parentNoteId, {
const { note } = await noteCreateService.createNote(suggestion.parentNoteId, {
title: suggestion.noteTitle,
activate: false,
type: noteType,

2
src/public/app/widgets/bulk_actions/execute_script.js
View File

@ -15,7 +15,7 @@ const TPL = `
<td class="button-column">
<div style="display: flex">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t('execute_script.help_text')}

4
src/public/app/widgets/bulk_actions/label/add_label.js
View File

@ -21,7 +21,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t("add_label.help_text")}</p>
@ -30,7 +30,7 @@ const TPL = `
<li>${t("add_label.help_text_item2")}</li>
</ul>
<p>${t("add_label.help_text_note")}</p>
${t("add_label.help_text_note")}
</div>
</div>

4
src/public/app/widgets/bulk_actions/label/update_label_value.js
View File

@ -21,11 +21,11 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t("update_label_value.help_text")}</p>
<p>${t("update_label_value.help_text_note")}</p>
${t("update_label_value.help_text_note")}
</div>
</div>

4
src/public/app/widgets/bulk_actions/note/delete_note.js
View File

@ -10,13 +10,13 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t("delete_note.delete_matched_notes_description")}</p>
<p>${t("delete_note.undelete_notes_instruction")}</p>
<p>${t("delete_note.erase_notes_instruction")}</p>
${t("delete_note.erase_notes_instruction")}
</div>
</div>

2
src/public/app/widgets/bulk_actions/note/delete_revisions.js
View File

@ -9,7 +9,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t('delete_revisions.all_past_note_revisions')}
</div>

4
src/public/app/widgets/bulk_actions/note/move_note.js
View File

@ -18,11 +18,11 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t('move_note.on_all_matched_notes')}:</p>
<ul>
<ul style="margin-bottom: 0;">
<li>${t('move_note.move_note_new_parent')}</li>
<li>${t('move_note.clone_note_new_parent')}</li>
<li>${t('move_note.nothing_will_happen')}</li>

2
src/public/app/widgets/bulk_actions/note/rename_note.js
View File

@ -16,7 +16,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t('rename_note.evaluated_as_js_string')}</p>

4
src/public/app/widgets/bulk_actions/relation/add_relation.js
View File

@ -25,9 +25,9 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t('add_relation.create_relation_on_all_matched_notes')}</p>
${t('add_relation.create_relation_on_all_matched_notes')}
</div>
</div>

4
src/public/app/widgets/bulk_actions/relation/update_relation_target.js
View File

@ -25,11 +25,11 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t('update_relation_target.on_all_matched_notes')}:</p>
<ul>
<ul style="margin-bottom: 0;">
<li>${t('update_relation_target.create_given_relation')}</li>
<li>${t('update_relation_target.change_target_note')}</li>
</ul>

13
src/public/app/widgets/buttons/attachments_actions.js
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 icon-action-always-border bx bx-dots-vertical-rounded"
style="position: relative; top: 3px;"></button>
@ -61,7 +61,8 @@ export default class AttachmentActionsWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$widget.on('click', '.dropdown-item', () => this.dropdown.toggle());
this.$uploadNewRevisionInput = this.$widget.find(".attachment-upload-new-revision-input");
this.$uploadNewRevisionInput.on('change', async () => {
@ -84,7 +85,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
.addClass("disabled")
.append($('<span class="disabled-tooltip"> (?)</span>')
.attr("title", t('attachments_actions.open_externally_detail_page'))
);
);
if (isElectron) {
const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
$openAttachmentCustomButton
@ -94,7 +95,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
);
}
}
if (!isElectron){
if (!isElectron) {
const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
$openAttachmentCustomButton
.addClass("disabled")
@ -138,7 +139,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
return;
}
const {note: newNote} = await server.post(`attachments/${this.attachmentId}/convert-to-note`)
const { note: newNote } = await server.post(`attachments/${this.attachmentId}/convert-to-note`)
toastService.showMessage(t('attachments_actions.convert_success', { title: this.attachment.title }));
await ws.waitForMaxKnownEntityChangeId();
await appContext.tabManager.getActiveContext().setNote(newNote.noteId);
@ -155,6 +156,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
return;
}
await server.put(`attachments/${this.attachmentId}/rename`, {title: attachmentTitle});
await server.put(`attachments/${this.attachmentId}/rename`, { title: attachmentTitle });
}
}

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

@ -9,13 +9,11 @@ const TPL = `
<div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mr-auto">${t('add_link.add_link')}</h5>
<h5 class="modal-title me-auto">${t('add_link.add_link')}</h5>
<button type="button" class="help-button" title="${t('add_link.help_on_links')}" data-help-page="links.html">?</button>
<button type="button" class="close" data-dismiss="modal" aria-label="${t('add_link.close')}" style="margin-left: 0 !important;">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('add_link.close')}" style="margin-left: 0 !important;"></button>
</div>
<form class="add-link-form">
<div class="modal-body">
@ -62,6 +60,8 @@ const TPL = `
export default class AddLinkDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".add-link-form");
this.$autoComplete = this.$widget.find(".add-link-note-autocomplete");
this.$linkTitle = this.$widget.find(".link-title");

11
src/public/app/widgets/dialogs/bulk_actions.js
View File

@ -40,18 +40,14 @@ const TPL = `
<div class="modal-header">
<h5 class="modal-title mr-auto">${t('bulk_actions.bulk_actions')}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="${t('bulk_actions.close')}">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('bulk_actions.close')}"></button>
</div>
<div class="modal-body">
<h4>${t('bulk_actions.affected_notes')}: <span class="affected-note-count">0</span></h4>
<div class="form-check">
<label class="form-check-label">
<input class="include-descendants form-check-input" type="checkbox" value="">
${t('bulk_actions.include_descendants')}
</label>
<input class="include-descendants form-check-input" type="checkbox" value="">
<label class="form-check-label">${t('bulk_actions.include_descendants')}</label>
</div>
<h4>${t('bulk_actions.available_actions')}</h4>
@ -72,6 +68,7 @@ const TPL = `
export default class BulkActionsDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$includeDescendants = this.$widget.find(".include-descendants");
this.$includeDescendants.on("change", () => this.refresh());

20
src/public/app/widgets/dialogs/import.js
View File

@ -11,9 +11,7 @@ const TPL = `
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${t('import.importIntoNote')}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="${t('import.close')}">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('import.close')}"></button>
</div>
<form class="import-form">
<div class="modal-body">
@ -29,21 +27,21 @@ const TPL = `
<strong>${t('import.options')}:</strong>
<div class="checkbox">
<label data-toggle="tooltip" title="${t('import.safeImportTooltip')}">
<label data-bs-toggle="tooltip" title="${t('import.safeImportTooltip')}">
<input class="safe-import-checkbox" value="1" type="checkbox" checked>
<span>${t('import.safeImport')}</span>
</label>
</div>
<div class="checkbox">
<label data-toggle="tooltip" title="${t('import.explodeArchivesTooltip')}">
<label data-bs-toggle="tooltip" title="${t('import.explodeArchivesTooltip')}">
<input class="explode-archives-checkbox" value="1" type="checkbox" checked>
<span>${t('import.explodeArchives')}</span>
</label>
</div>
<div class="checkbox">
<label data-toggle="tooltip" title="${t('import.shrinkImagesTooltip')}">
<label data-bs-toggle="tooltip" title="${t('import.shrinkImagesTooltip')}">
<input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t('import.shrinkImages')}</span>
</label>
</div>
@ -86,6 +84,8 @@ export default class ImportDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".import-form");
this.$noteTitle = this.$widget.find(".import-note-title");
this.$fileUploadInput = this.$widget.find(".import-file-upload-input");
@ -115,12 +115,14 @@ export default class ImportDialog extends BasicWidget {
}
});
this.$widget.find('[data-toggle="tooltip"]').tooltip({
html: true
let _ = [...this.$widget.find('[data-bs-toggle="tooltip"]')].forEach(element => {
bootstrap.Tooltip.getOrCreateInstance(element, {
html: true
});
});
}
async showImportDialogEvent({noteId}) {
async showImportDialogEvent({ noteId }) {
this.parentNoteId = noteId;
this.$fileUploadInput.val('').trigger('change'); // to trigger Import button disabling listener below

29
src/public/app/widgets/dialogs/note_type_chooser.js
View File

@ -23,17 +23,17 @@ const TPL = `
<div class="modal-dialog" style="max-width: 500px;" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mr-auto">${t("note_type_chooser.modal_title")}</h5>
<h5 class="modal-title me-auto">${t("note_type_chooser.modal_title")}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;"></button>
</div>
<div class="modal-body">
${t("note_type_chooser.modal_body")}
<div class="dropdown">
<button class="note-type-dropdown-trigger" type="button" style="display: none;" data-toggle="dropdown"></button>
<div class="dropdown" style="display: flex;">
<button class="note-type-dropdown-trigger" type="button" style="display: none;"
data-bs-toggle="dropdown" data-bs-display="static">
</button>
<div class="note-type-dropdown dropdown-menu"></div>
</div>
@ -53,13 +53,14 @@ export default class NoteTypeChooserDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
this.$noteTypeDropdownTrigger = this.$widget.find(".note-type-dropdown-trigger");
this.$noteTypeDropdownTrigger.dropdown();
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger"));
this.$widget.on("hidden.bs.modal", () => {
if (this.resolve) {
this.resolve({success: false});
this.resolve({ success: false });
}
if (this.$originalFocused) {
@ -94,7 +95,7 @@ export default class NoteTypeChooserDialog extends BasicWidget {
});
}
async chooseNoteTypeEvent({callback}) {
async chooseNoteTypeEvent({ callback }) {
this.$originalFocused = $(':focus');
const noteTypes = await noteTypesService.getNoteTypeItems();
@ -116,11 +117,11 @@ export default class NoteTypeChooserDialog extends BasicWidget {
}
}
this.$noteTypeDropdownTrigger.dropdown('show');
this.dropdown.show();
this.$originalDialog = glob.activeDialog;
glob.activeDialog = this.$widget;
this.$widget.modal();
glob.activeDialog = this.modal;
this.modal.show();
this.$noteTypeDropdown.find(".dropdown-item:first").focus();
@ -139,6 +140,6 @@ export default class NoteTypeChooserDialog extends BasicWidget {
});
this.resolve = null;
this.$widget.modal("hide");
this.modal.hide();
}
}

16
src/public/app/widgets/dialogs/protected_session_password.js
View File

@ -8,22 +8,16 @@ const TPL = `
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mr-auto">${t("protected_session_password.modal_title")}</h5>
<h5 class="modal-title me-auto">${t("protected_session_password.modal_title")}</h5>
<button class="help-button" type="button" data-help-page="protected-notes.html" title="${t("protected_session_password.help_title")}">?</button>
<button type="button" class="close" data-dismiss="modal" aria-label="${t("protected_session_password.close_label")}" style="margin-left: 0;">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("protected_session_password.close_label")}" style="margin-left: 0;"></button>
</div>
<form class="protected-session-password-form">
<div class="modal-body">
<div class="form-group">
<label>
${t("protected_session_password.form_label")}
<input class="form-control protected-session-password" type="password">
</label>
</div>
<label class="col-form-label">${t("protected_session_password.form_label")}</label>
<input class="form-control protected-session-password" type="password">
</div>
<div class="modal-footer">
<button class="btn btn-primary">${t("protected_session_password.start_button")}</button>
@ -36,6 +30,8 @@ const TPL = `
export default class ProtectedSessionPasswordDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$passwordForm = this.$widget.find(".protected-session-password-form");
this.$passwordInput = this.$widget.find(".protected-session-password");
this.$passwordForm.on('submit', () => {

14
src/public/app/widgets/dialogs/upload_attachments.js
View File

@ -11,9 +11,7 @@ const TPL = `
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${t("upload_attachments.upload_attachments_to_note")}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="upload-attachment-form">
<div class="modal-body">
@ -26,8 +24,8 @@ const TPL = `
<div class="form-group">
<strong>${t("upload_attachments.options")}:</strong>
<div class="checkbox">
<label data-toggle="tooltip" title="${t("upload_attachments.tooltip")}">
<input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t("upload_attachments.shrink_images")}</span>
<label data-bs-toggle="tooltip" title="${t("upload_attachments.tooltip")}">
<input class="shrink-images-checkbox form-check-input" value="1" type="checkbox" checked> <span>${t("upload_attachments.shrink_images")}</span>
</label>
</div>
</div>
@ -49,6 +47,8 @@ export default class UploadAttachmentsDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$form = this.$widget.find(".upload-attachment-form");
this.$noteTitle = this.$widget.find(".upload-attachment-note-title");
this.$fileUploadInput = this.$widget.find(".upload-attachment-file-upload-input");
@ -71,12 +71,12 @@ export default class UploadAttachmentsDialog extends BasicWidget {
}
});
this.$widget.find('[data-toggle="tooltip"]').tooltip({
bootstrap.Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
html: true
});
}
async showUploadAttachmentsDialogEvent({noteId}) {
async showUploadAttachmentsDialogEvent({ noteId }) {
this.parentNoteId = noteId;
this.$fileUploadInput.val('').trigger('change'); // to trigger upload button disabling listener below

8
src/public/app/widgets/editability_select.js
View File

@ -15,7 +15,7 @@ const TPL = `
white-space: normal;
}
</style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle editability-button">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle editability-button">
<span class="editability-active-desc">${t("editability_select.auto")}</span>
<span class="caret"></span>
</button>
@ -43,11 +43,13 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
this.$widget.on('click', '.dropdown-item',
async e => {
this.$widget.find('.dropdown-toggle').dropdown('toggle');
this.dropdown.toggle();
const editability = $(e.target).closest("[data-editability]").attr("data-editability");
@ -85,7 +87,7 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
this.$editabilityActiveDesc.text(labels[editability]);
}
entitiesReloadedEvent({loadResults}) {
entitiesReloadedEvent({ loadResults }) {
if (loadResults.getAttributeRows().find(attr => attr.noteId === this.noteId)) {
this.refresh();
}

3
src/public/app/widgets/note_icon.js
View File

@ -1,3 +1,4 @@
import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import attributeService from "../services/attributes.js";
import server from "../services/server.js";
@ -66,7 +67,7 @@ const TPL = `
}
</style>
<button class="btn dropdown-toggle note-icon" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Change note icon"></button>
<button class="btn dropdown-toggle note-icon" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="${t("note_icon.change_note_icon")}"></button>
<div class="dropdown-menu" aria-labelledby="note-path-list-button" style="width: 610px;">
<div class="filter-row">
<span>Category:</span> <select name="icon-category" class="form-control"></select>

13
src/public/app/widgets/note_type.js
View File

@ -35,7 +35,7 @@ const TPL = `
overflow-x: hidden;
}
</style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
<span class="note-type-desc"></span>
<span class="caret"></span>
</button>
@ -47,14 +47,15 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$widget.on('show.bs.dropdown', () => this.renderDropdown());
this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
this.$noteTypeButton = this.$widget.find(".note-type-button");
this.$noteTypeDesc = this.$widget.find(".note-type-desc");
this.$widget.on('click', '.dropdown-item',
() => this.$widget.find('.dropdown-toggle').dropdown('toggle'));
this.$widget.on('click', '.dropdown-item', () => this.dropdown.toggle());
}
async refreshWithNote(note) {
@ -63,7 +64,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
this.$noteTypeButton.dropdown('hide');
this.dropdown.hide();
}
/** the actual body is rendered lazily on note-type button click */
@ -92,7 +93,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
.append('<span class="check">&check;</span> ')
.append($('<strong>').text(noteType.title));
}
if (this.note.type === noteType.type) {
$typeLink.addClass("selected");
}
@ -161,7 +162,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
return await dialogService.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
}
async entitiesReloadedEvent({loadResults}) {
async entitiesReloadedEvent({ loadResults }) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}

38
src/public/app/widgets/quick_search.js
View File

@ -30,13 +30,12 @@ const TPL = `
</style>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary search-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-outline-secondary search-button" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="bx bx-search"></span>
</button>
<div class="dropdown-menu dropdown-menu-left"></div>
</div>
<input type="text" class="form-control form-control-sm search-string" placeholder="Quick search">
</div>
</div>`;
const MAX_DISPLAYED_NOTES = 15;
@ -44,21 +43,20 @@ const MAX_DISPLAYED_NOTES = 15;
export default class QuickSearchWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$searchString = this.$widget.find('.search-string');
this.$dropdownMenu = this.$widget.find('.dropdown-menu');
this.$dropdownToggle = this.$widget.find('.search-button');
this.$dropdownToggle.dropdown();
this.$widget.find('.input-group-prepend').on('shown.bs.dropdown', () => this.search());
if(utils.isMobile()) {
this.$searchString.keydown(e =>{
if(e.which === 13) {
if (utils.isMobile()) {
this.$searchString.keydown(e => {
if (e.which === 13) {
if (this.$dropdownMenu.is(":visible")) {
this.search(); // just update already visible dropdown
} else {
this.$dropdownToggle.dropdown('show');
this.dropdown.show();
}
e.preventDefault();
e.stopPropagation();
@ -70,7 +68,7 @@ export default class QuickSearchWidget extends BasicWidget {
if (this.$dropdownMenu.is(":visible")) {
this.search(); // just update already visible dropdown
} else {
this.$dropdownToggle.dropdown('show');
this.dropdown.show();
}
this.$searchString.focus();
@ -81,7 +79,7 @@ export default class QuickSearchWidget extends BasicWidget {
});
shortcutService.bindElShortcut(this.$searchString, 'esc', () => {
this.$dropdownToggle.dropdown('hide');
this.dropdown.hide();
});
return this.$widget;
@ -91,25 +89,25 @@ export default class QuickSearchWidget extends BasicWidget {
const searchString = this.$searchString.val().trim();
if (!searchString) {
this.$dropdownToggle.dropdown("hide");
this.dropdown.hide();
return;
}
this.$dropdownMenu.empty();
this.$dropdownMenu.append('<span class="dropdown-item disabled"><span class="bx bx-loader bx-spin"></span> Searching ...</span>');
const {searchResultNoteIds, error} = await server.get(`quick-search/${encodeURIComponent(searchString)}`);
const { searchResultNoteIds, error } = await server.get(`quick-search/${encodeURIComponent(searchString)}`);
if (error) {
this.$searchString.tooltip({
let tooltip = new bootstrap.Tooltip(this.$searchString, {
trigger: 'manual',
title: `Search error: ${error}`,
placement: 'right'
});
this.$searchString.tooltip("show");
tooltip.show();
setTimeout(() => this.$searchString.tooltip("dispose"), 4000);
setTimeout(() => tooltip.dispose(), 4000);
}
const displayedNoteIds = searchResultNoteIds.slice(0, Math.min(MAX_DISPLAYED_NOTES, searchResultNoteIds.length));
@ -121,11 +119,11 @@ export default class QuickSearchWidget extends BasicWidget {
}
for (const note of await froca.getNotes(displayedNoteIds)) {
const $link = await linkService.createLink(note.noteId, {showNotePath: true});
const $link = await linkService.createLink(note.noteId, { showNotePath: true });
$link.addClass('dropdown-item');
$link.attr("tabIndex", "0");
$link.on('click', e => {
this.$dropdownToggle.dropdown("hide");
this.dropdown.hide();
if (!e.target || e.target.nodeName !== 'A') {
// click on the link is handled by link handling, but we want the whole item clickable
@ -133,7 +131,7 @@ export default class QuickSearchWidget extends BasicWidget {
}
});
shortcutService.bindElShortcut($link, 'return', () => {
this.$dropdownToggle.dropdown("hide");
this.dropdown.hide();
appContext.tabManager.getActiveContext().setNote(note.noteId);
});
@ -156,11 +154,11 @@ export default class QuickSearchWidget extends BasicWidget {
shortcutService.bindElShortcut(this.$dropdownMenu.find('.dropdown-item:first'), 'up', () => this.$searchString.focus());
this.$dropdownToggle.dropdown('update');
this.dropdown.update();
}
async showInFullSearch() {
this.$dropdownToggle.dropdown("hide");
this.dropdown.hide();
await appContext.triggerCommand('searchNotes', {
searchString: this.$searchString.val()

4
src/public/app/widgets/ribbon_widgets/search_definition.js
View File

@ -119,7 +119,7 @@ const TPL = `
</button>
<div class="dropdown" style="display: inline-block;">
<button class="btn btn-sm dropdown-toggle action-add-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-sm dropdown-toggle action-add-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="bx bxs-zap"></span>
${t('search_definition.action')}
</button>
@ -219,7 +219,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
});
this.$widget.on('click', '[data-action-add]', async event => {
this.$widget.find('.action-add-toggle').dropdown('toggle');
bootstrap.Dropdown.getOrCreateInstance(this.$widget.find('.action-add-toggle'));
const actionName = $(event.target).attr('data-action-add');

4
src/public/app/widgets/search_options/debug.js
View File

@ -9,10 +9,10 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t("debug.debug_info")}</p>
<p>${t("debug.access_info")}</p>
${t("debug.access_info")}
</div>
</div>
<span class="bx bx-x icon-action search-option-del"></span>

2
src/public/app/widgets/search_options/fast_search.js
View File

@ -9,7 +9,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t('fast_search.description')}
</div>

2
src/public/app/widgets/search_options/limit.js
View File

@ -12,7 +12,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t('limit.take_first_x_results')}
</div>

4
src/public/app/widgets/search_options/search_script.js
View File

@ -14,7 +14,7 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<p>${t('search_script.description1')}</p>
@ -24,7 +24,7 @@ const TPL = `
<pre>${t('search_script.example_code')}</pre>
<p>${t('search_script.note')}</p>
${t('search_script.note')}
</div>
</div>

19
src/public/app/widgets/search_options/search_string.js
View File

@ -13,11 +13,11 @@ const TPL = `
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
<strong>${t('search_string.search_syntax')}</strong> - ${t('search_string.also_see')} <button class="btn btn-sm" type="button" data-help-page="search.html">${t('search_string.complete_help')}</button>
<p>
<ul>
<strong>${t('search_string.search_syntax')}</strong> - ${t('search_string.also_see')} <a href="#" data-help-page="search.html">${t('search_string.complete_help')}</a>
<ul style="marigin-bottom: 0;">
<li>${t('search_string.full_text_search')}</li>
<li><code>#abc</code> - ${t('search_string.label_abc')}</li>
<li><code>#year = 2019</code> - ${t('search_string.label_year')}</li>
@ -26,7 +26,6 @@ const TPL = `
<li><code>#year &lt;= 2000</code> - ${t('search_string.label_year_comparison')}</li>
<li><code>note.dateCreated >= MONTH-1</code> - ${t('search_string.label_date_created')}</li>
</ul>
</p>
</div>
</div>
@ -74,16 +73,16 @@ export default class SearchString extends AbstractSearchOption {
return $option;
}
showSearchErrorEvent({error}) {
this.$searchString.tooltip({
showSearchErrorEvent({ error }) {
let tooltip = new bootstrap.Tooltip(this.$searchString, {
trigger: 'manual',
title: `${t('search_string.error', {error})}`,
title: `${t('search_string.error', { error })}`,
placement: 'bottom'
});
this.$searchString.tooltip("show");
tooltip.show();
setTimeout(() => this.$searchString.tooltip("dispose"), 4000);
setTimeout(() => tooltip.dispose(), 4000);
}
focusOnSearchDefinitionEvent() {

40
src/public/app/widgets/sync_status.js
View File

@ -1,3 +1,4 @@
import { t } from "../services/i18n.js";
import BasicWidget from "./basic_widget.js";
import ws from "../services/ws.js";
import options from "../services/options.js";
@ -39,36 +40,30 @@ const TPL = `
<div class="sync-status">
<span class="sync-status-icon sync-status-unknown bx bx-time"
data-toggle="tooltip"
data-placement="right"
title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>">
data-bs-toggle="tooltip"
title="${t("sync_status.unknown")}">
</span>
<span class="sync-status-icon sync-status-connected-with-changes bx bx-wifi"
data-toggle="tooltip"
data-placement="right"
title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
data-bs-toggle="tooltip"
title="${t("sync_status.connected_with_changes")}">
<span class="bx bxs-star sync-status-sub-icon"></span>
</span>
<span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi"
data-toggle="tooltip"
data-placement="right"
title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>">
data-bs-toggle="tooltip"
title="${t("sync_status.connected_no_changes")}">
</span>
<span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
data-toggle="tooltip"
data-placement="right"
title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
data-bs-toggle="tooltip"
title="${t("sync_status.disconnected_with_changes")}">
<span class="bx bxs-star sync-status-sub-icon"></span>
</span>
<span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off"
data-toggle="tooltip"
data-placement="right"
title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>">
data-bs-toggle="tooltip"
title="${t("sync_status.disconnected_no_changes")}">
</span>
<span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin"
data-toggle="tooltip"
data-placement="right"
title="Sync with the server is in progress.">
data-bs-toggle="tooltip"
title="${t("sync_status.in_progress")}">
</span>
</div>
</div>
@ -86,10 +81,6 @@ export default class SyncStatusWidget extends BasicWidget {
this.$widget = $(TPL);
this.$widget.hide();
this.$widget.find('[data-toggle="tooltip"]').tooltip({
html: true
});
this.$widget.find('.sync-status-icon:not(.sync-status-in-progress)')
.on('click', () => syncService.syncNow());
@ -102,6 +93,11 @@ export default class SyncStatusWidget extends BasicWidget {
return;
}
bootstrap.Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
html: true,
placement: 'right',
});
this.$widget.show();
this.$widget.find('.sync-status-icon').hide();
this.$widget.find(`.sync-status-${className}`).show();

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

@ -881,7 +881,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
background-color: inherit;
}
[data-toggle="tooltip"]:not(.button-widget) span {
[data-bs-toggle="tooltip"]:not(.button-widget) span {
padding-bottom: 0;
border-bottom: 1px dotted;
}

17
src/public/translations/cn/translation.json
View File

@ -468,8 +468,8 @@
"to": "到",
"target_parent_note": "目标父笔记",
"on_all_matched_notes": "对于所有匹配的笔记",
"move_note_new_parent": "",
"clone_note_new_parent": "",
"move_note_new_parent": "如果笔记只有一个父级（即旧分支被移除并创建新分支到新父级），则将笔记移动到新父级",
"clone_note_new_parent": "如果笔记有多个克隆/分支（不清楚应该移除哪个分支），则将笔记克隆到新父级",
"nothing_will_happen": "如果笔记无法移动到目标笔记（即这会创建一个树循环），则不会发生任何事情"
},
"rename_note": {
@ -477,7 +477,7 @@
"rename_note_title_to": "重命名笔记标题为",
"new_note_title": "新笔记标题",
"click_help_icon": "点击右侧的帮助图标查看所有选项",
"evaluated_as_js_string": "给定的值被评估为JavaScript字符串，因此可以通过注入的<code>note</code>变量（正在重命名的笔记）丰富动态内容。 例如：",
"evaluated_as_js_string": "给定的值被评估为 JavaScript 字符串，因此可以通过注入的 <code>note</code> 变量（正在重命名的笔记）丰富动态内容。 例如：",
"example_note": "<code>Note</code> - 所有匹配的笔记都被重命名为“Note”",
"example_new_title": "<code>NEW: ${note.title}</code> - 匹配的笔记标题以“NEW: ”为前缀",
"example_date_prefix": "<code>${note.dateCreatedObj.format('MM-DD:')}: ${note.title}</code> - 匹配的笔记以笔记的创建月份-日期为前缀",
@ -593,6 +593,14 @@
"about": "关于 TriliumNext 笔记",
"logout": "登出"
},
"sync_status": {
"unknown": "<p>同步状态将在下一次同步尝试开始后显示。</p><p>点击以立即触发同步。</p>",
"connected_with_changes": "<p>已连接到同步服务器。<br>有一些未同步的变更。</p><p>点击以触发同步。</p>",
"connected_no_changes": "<p>已连接到同步服务器。<br>所有变更均已同步。</p><p>点击以触发同步。</p>",
"disconnected_with_changes": "<p>连接同步服务器失败。<br>有一些未同步的变更。</p><p>点击以触发同步。</p>",
"disconnected_no_changes": "<p>连接同步服务器失败。<br>所有已知变更均已同步。</p><p>点击以触发同步。</p>",
"in_progress": "正在与服务器进行同步。"
},
"left_pane_toggle": {
"hide_panel": "隐藏面板",
"show_panel": "显示面板"
@ -662,6 +670,9 @@
"error_cannot_get_branch_id": "无法获取 notePath '{{notePath}}' 的 branchId",
"error_unrecognized_command": "无法识别的命令 {{command}}"
},
"note_icon": {
"change_note_icon": "更改笔记图标"
},
"basic_properties": {
"note_type": "笔记类型",
"editable": "可编辑",

11
src/public/translations/en/translation.json
View File

@ -593,6 +593,14 @@
"about": "About TriliumNext Notes",
"logout": "Logout"
},
"sync_status": {
"unknown": "<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>",
"connected_with_changes": "<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>",
"connected_no_changes":"<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>",
"disconnected_with_changes":"<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>",
"disconnected_no_changes":"<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>",
"in_progress":"Sync with the server is in progress."
},
"left_pane_toggle": {
"show_panel": "Show panel",
"hide_panel": "Hide panel"
@ -665,6 +673,9 @@
"error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'",
"error_unrecognized_command": "Unrecognized command {{command}}"
},
"note_icon": {
"change_note_icon": "Change note icon"
},
"basic_properties": {
"note_type": "Note type",
"editable": "Editable",