gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 04:29:01 +01:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

Merge pull request #1074 from TriliumNext/style/next/forms

Browse Source 
Style Next: Restyle form elements
This commit is contained in:
Adorian Doran 2025-01-31 11:19:25 +02:00 committed by GitHub
commit c878a6d2fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
57 changed files with 956 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/help.spec.ts
View File

@ -9,7 +9,7 @@ test("Help popup", async ({ page, context }) => {
const popupPromise = page.waitForEvent("popup");
await app.currentNoteSplit.press("F1");
await page.getByRole("link", { name: "online↗" }).click();
await page.getByRole("link", { name: "online" }).click();
const popup = await popupPromise;
expect(popup.url()).toBe("https://triliumnext.github.io/Docs/");
});

2
src/public/app/services/note_list_renderer.ts
View File

@ -151,7 +151,7 @@ const TPL = `
<div class="note-list-wrapper">
<div class="note-list-pager"></div>
<div class="note-list-container"></div>
<div class="note-list-container use-tn-links"></div>
<div class="note-list-pager"></div>
</div>

19
src/public/app/widgets/attachment_detail.js
View File

@ -119,15 +119,16 @@ export default class AttachmentDetailWidget extends BasicWidget {
this.$wrapper.addClass(this.isFullDetail ? "full-detail" : "list-view");
if (!this.isFullDetail) {
this.$wrapper.find(".attachment-title").append(
await linkService.createLink(this.attachment.ownerId, {
title: this.attachment.title,
viewScope: {
viewMode: "attachments",
attachmentId: this.attachment.attachmentId
}
})
);
const $link = await linkService.createLink(this.attachment.ownerId, {
title: this.attachment.title,
viewScope: {
viewMode: "attachments",
attachmentId: this.attachment.attachmentId
}
});
$link.addClass("use-tn-links");
this.$wrapper.find(".attachment-title").append($link);
} else {
this.$wrapper.find(".attachment-title").text(this.attachment.title);
}

11
src/public/app/widgets/bookmark_switch.js
View File

@ -15,11 +15,11 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
doRender() {
super.doRender();
this.$switchOnName.text(t("bookmark_switch.bookmark"));
this.$switchOnButton.attr("title", t("bookmark_switch.bookmark_this_note"));
this.switchOnName = t("bookmark_switch.bookmark");
this.switchOnTooltip = t("bookmark_switch.bookmark_this_note");
this.$switchOffName.text(t("bookmark_switch.bookmark"));
this.$switchOffButton.attr("title", t("bookmark_switch.remove_bookmark"));
this.switchOffName = t("bookmark_switch.bookmark");
this.switchOffTooltip = t("bookmark_switch.remove_bookmark");
}
async toggle(state) {
@ -33,8 +33,7 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
async refreshWithNote(note) {
const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
this.$switchOn.toggle(!isBookmarked);
this.$switchOff.toggle(isBookmarked);
this.isToggled = isBookmarked;
}
entitiesReloadedEvent({ loadResults }) {

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

@ -17,7 +17,7 @@ const TPL = `
<table class="table table-borderless">
<tr>
<th>${t("about.homepage")}</th>
<td><a href="https://github.com/TriliumNext/Notes" class="external">https://github.com/TriliumNext/Notes</a></td>
<td><a class="tn-link" href="https://github.com/TriliumNext/Notes" class="external">https://github.com/TriliumNext/Notes</a></td>
</tr>
<tr>
<th>${t("about.app_version")}</th>
@ -38,7 +38,7 @@ const TPL = `
<tr>
<th>${t("about.build_revision")}</th>
<td><a href="" class="build-revision external" target="_blank"></a></td>
<td><a class="tn-link" href="" class="build-revision external" target="_blank"></a></td>
</tr>
<tr>
@ -82,6 +82,7 @@ export default class AboutDialog extends BasicWidget {
this.$dataDirectory.html(
$("<a></a>", {
href: "#",
class: "tn-link",
text: appInfo.dataDirectory
})
);

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

@ -12,21 +12,21 @@ const TPL = `
.bulk-actions-dialog .modal-body h4:not(:first-child) {
margin-top: 20px;
}
.bulk-actions-dialog .bulk-available-action-list button {
padding: 2px 7px;
margin-right: 10px;
margin-bottom: 5px;
}
.bulk-actions-dialog .bulk-existing-action-list {
width: 100%;
}
.bulk-actions-dialog .bulk-existing-action-list td {
padding: 7px;
}
.bulk-actions-dialog .bulk-existing-action-list .button-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
@ -45,8 +45,10 @@ const TPL = `
<h4>${t("bulk_actions.affected_notes")}: <span class="affected-note-count">0</span></h4>
<div class="form-check">
<input id="include-descendants" class="include-descendants form-check-input" type="checkbox" value="">
<label for="include-descendants" class="form-check-label">${t("bulk_actions.include_descendants")}</label>
<label for="include-descendants" class="form-check-label tn-checkbox">
<input id="include-descendants" class="include-descendants form-check-input" type="checkbox" value="">
${t("bulk_actions.include_descendants")}
</label>
</div>
<h4>${t("bulk_actions.available_actions")}</h4>

12
src/public/app/widgets/dialogs/delete_notes.ts
View File

@ -34,13 +34,17 @@ const TPL = `
</div>
<div class="modal-body">
<div class="form-checkbox">
<input id="delete-all-clones" class="delete-all-clones form-check-input" value="1" type="checkbox">
<label for="delete-all-clones" class="form-check-label">${t("delete_notes.delete_all_clones_description")}</label>
<label for="delete-all-clones" class="form-check-label tn-checkbox">
<input id="delete-all-clones" class="delete-all-clones form-check-input" value="1" type="checkbox">
${t("delete_notes.delete_all_clones_description")}
</label>
</div>
<div class="form-checkbox" style="margin-bottom: 1rem">
<input id="erase-notes" class="erase-notes form-check-input" value="1" type="checkbox">
<label for="erase-notes" class="form-check-label">${t("delete_notes.erase_notes_warning")}</label>
<label for="erase-notes" class="form-check-label tn-checkbox">
<input id="erase-notes" class="erase-notes form-check-input" value="1" type="checkbox">
${t("delete_notes.erase_notes_warning")}
</label>
</div>
<div class="delete-notes-list-wrapper">

24
src/public/app/widgets/dialogs/export.js
View File

@ -14,17 +14,17 @@ const TPL = `
padding-top: 10px;
padding-bottom: 10px;
}
.export-dialog .export-form .format-choice {
padding-left: 40px;
display: none;
}
.export-dialog .export-form .opml-versions {
padding-left: 60px;
display: none;
}
.export-dialog .export-form .form-check-label {
padding: 2px;
}
@ -39,7 +39,7 @@ const TPL = `
<form class="export-form">
<div class="modal-body">
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="export-type-subtree form-check-input" type="radio" name="export-type" value="subtree">
${t("export.export_type_subtree")}
</label>
@ -47,21 +47,21 @@ const TPL = `
<div class="export-subtree-formats format-choice">
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-subtree-format" value="html">
${t("export.format_html_zip")}
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-subtree-format" value="markdown">
${t("export.format_markdown")}
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-subtree-format" value="opml">
${t("export.format_opml")}
</label>
@ -69,14 +69,14 @@ const TPL = `
<div class="opml-versions">
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="opml-version" value="1.0">
${t("export.opml_version_1")}
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="opml-version" value="2.0">
${t("export.opml_version_2")}
</label>
@ -85,7 +85,7 @@ const TPL = `
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-type" value="single">
${t("export.export_type_single")}
</label>
@ -93,14 +93,14 @@ const TPL = `
<div class="export-single-formats format-choice">
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-single-format" value="html">
${t("export.format_html")}
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-radio">
<input class="form-check-input" type="radio" name="export-single-format" value="markdown">
${t("export.format_markdown")}
</label>

2
src/public/app/widgets/dialogs/help.ts
View File

@ -3,7 +3,7 @@ import BasicWidget from "../basic_widget.js";
import { t } from "../../services/i18n.js";
const TPL = `
<div class="help-dialog modal" tabindex="-1" role="dialog">
<div class="help-dialog modal use-tn-links" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="min-width: 90%;">
<div class="modal-content" style="height: auto;">
<div class="modal-header">

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

@ -27,40 +27,40 @@ const TPL = `
<strong>${t("import.options")}:</strong>
<div class="checkbox">
<label data-bs-toggle="tooltip" title="${escapeQuotes(t("import.safeImportTooltip"))}">
<label class="tn-checkbox" data-bs-toggle="tooltip" title="${escapeQuotes(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-bs-toggle="tooltip" title="${escapeQuotes(t("import.explodeArchivesTooltip"))}">
<label class="tn-checkbox" data-bs-toggle="tooltip" title="${escapeQuotes(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-bs-toggle="tooltip" title="${escapeQuotes(t("import.shrinkImagesTooltip"))}">
<label class="tn-checkbox" data-bs-toggle="tooltip" title="${escapeQuotes(t("import.shrinkImagesTooltip"))}">
<input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t("import.shrinkImages")}</span>
</label>
</div>
<div class="checkbox">
<label>
<label class="tn-checkbox">
<input class="text-imported-as-text-checkbox" value="1" type="checkbox" checked>
${t("import.textImportedAsText")}
</label>
</div>
<div class="checkbox">
<label>
<label class="tn-checkbox">
<input class="code-imported-as-code-checkbox" value="1" type="checkbox" checked> ${t("import.codeImportedAsCode")}
</label>
</div>
<div class="checkbox">
<label>
<label class="tn-checkbox">
<input class="replace-underscores-with-spaces-checkbox" value="1" type="checkbox" checked>
${t("import.replaceUnderscoresWithSpaces")}
</label>

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

@ -64,7 +64,7 @@ const TPL = `
<div class="revision-title-buttons"></div>
</div>
<div class="revision-content"></div>
<div class="revision-content use-tn-links"></div>
</div>
</div>
<div class="modal-footer py-0">

42
src/public/app/widgets/dialogs/sort_child_notes.js
View File

@ -14,38 +14,52 @@ const TPL = `<div class="sort-child-notes-dialog modal mx-auto" tabindex="-1" ro
<div class="modal-body">
<h5>${t("sort_child_notes.sorting_criteria")}</h5>
<div class="form-check">
<input id="sort-by-title" class="form-check-input" type="radio" name="sort-by" value="title" checked>
<label for="sort-by-title" class="form-check-label">${t("sort_child_notes.title")}</label>
<label for="sort-by-title" class="form-check-label tn-radio">
<input id="sort-by-title" class="form-check-input" type="radio" name="sort-by" value="title" checked>
${t("sort_child_notes.title")}
</label>
</div>
<div class="form-check">
<input id="sort-by-dateCreated" class="form-check-input" type="radio" name="sort-by" value="dateCreated">
<label for="sort-by-dateCreated" class="form-check-label">${t("sort_child_notes.date_created")}</label>
<label for="sort-by-dateCreated" class="form-check-label tn-radio">
<input id="sort-by-dateCreated" class="form-check-input" type="radio" name="sort-by" value="dateCreated">
${t("sort_child_notes.date_created")}
</label>
</div>
<div class="form-check">
<input id="sort-by-dateModified" class="form-check-input" type="radio" name="sort-by" value="dateModified">
<label for="sort-by-dateModified" class="form-check-label">${t("sort_child_notes.date_modified")}</label>
<label for="sort-by-dateModified" class="form-check-label tn-radio">
<input id="sort-by-dateModified" class="form-check-input" type="radio" name="sort-by" value="dateModified">
${t("sort_child_notes.date_modified")}
</label>
</div>
<br/>
<h5>${t("sort_child_notes.sorting_direction")}</h5>
<div class="form-check">
<input id="sort-direction-asc" class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
<label for="sort-direction-asc" class="form-check-label">${t("sort_child_notes.ascending")}</label>
<label for="sort-direction-asc" class="form-check-label tn-radio">
<input id="sort-direction-asc" class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
${t("sort_child_notes.ascending")}
</label>
</div>
<div class="form-check">
<input id="sort-direction-desc" class="form-check-input" type="radio" name="sort-direction" value="desc">
<label for="sort-direction-desc" class="form-check-label">${t("sort_child_notes.descending")}</label>
<label for="sort-direction-desc" class="form-check-label tn-radio">
<input id="sort-direction-desc" class="form-check-input" type="radio" name="sort-direction" value="desc">
${t("sort_child_notes.descending")}
</label>
</div>
<br />
<h5>${t("sort_child_notes.folders")}</h5>
<div class="form-check">
<input id="sort-folders-first" class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
<label for="sort-folders-first" class="form-check-label">${t("sort_child_notes.sort_folders_at_top")}</label>
<label for="sort-folders-first" class="form-check-label tn-checkbox">
<input id="sort-folders-first" class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
${t("sort_child_notes.sort_folders_at_top")}
</label>
</div>
<br />
<h5>${t("sort_child_notes.natural_sort")}</h5>
<div class="form-check">
<input id="sort-natural" class="form-check-input" type="checkbox" name="sort-natural" value="1">
<label for="sort-natural" class="form-check-label">${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}</label>
<label for="sort-natural" class="form-check-label tn-checkbox">
<input id="sort-natural" class="form-check-input" type="checkbox" name="sort-natural" value="1">
${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}
</label>
</div>
<br />
<div class="form-check">

2
src/public/app/widgets/editability_select.ts
View File

@ -23,7 +23,7 @@ const TPL = `
white-space: normal;
}
</style>
<button type="button" data-bs-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 select-button dropdown-toggle editability-button">
<span class="editability-active-desc">${t("editability_select.auto")}</span>
<span class="caret"></span>
</button>

22
src/public/app/widgets/find.js
View File

@ -23,11 +23,11 @@ const TPL = `
padding: 2px 10px 2px 10px;
align-items: center;
}
.find-widget-box > *, .replace-widget-box > *{
margin-right: 15px;
}
.find-widget-box, .replace-widget-box {
display: flex;
}
@ -35,11 +35,11 @@ const TPL = `
.find-widget-found-wrapper {
font-weight: bold;
}
.find-widget-search-term-input-group, .replace-widget-replacetext-input {
max-width: 300px;
}
.find-widget-spacer {
flex-grow: 1;
}
@ -51,29 +51,29 @@ const TPL = `
<button class="btn btn-outline-secondary bx bxs-chevron-up find-widget-previous-button" type="button"></button>
<button class="btn btn-outline-secondary bx bxs-chevron-down find-widget-next-button" type="button"></button>
</div>
<div class="form-check">
<label tabIndex="-1" class="form-check-label">
<input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox">
<label tabIndex="-1" class="form-check-label tn-checkbox">
<input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox">
${t("find.case_sensitive")}
</label>
</div>
<div class="form-check">
<label tabIndex="-1" class="form-check-label">
<label tabIndex="-1" class="form-check-label tn-checkbox">
<input type="checkbox" class="form-check-input find-widget-match-words-checkbox">
${t("find.match_words")}
</label>
</div>
<div class="find-widget-found-wrapper">
<span class="find-widget-current-found">0</span>
/
<span class="find-widget-total-found">0</span>
</div>
<div class="find-widget-spacer"></div>
<div class="find-widget-close-button"><button class="btn icon-action bx bx-x"></button></div>
</div>

2
src/public/app/widgets/note_icon.ts
View File

@ -73,7 +73,7 @@ const TPL = `
<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>${t("note_icon.category")}</span> <select name="icon-category" class="form-control"></select>
<span>${t("note_icon.category")}</span> <select name="icon-category" class="form-select"></select>
<span>${t("note_icon.search")}</span> <input type="text" name="icon-search" class="form-control" />
</div>

6
src/public/app/widgets/note_tree.js
View File

@ -115,16 +115,14 @@ const TPL = `
<div class="tree-settings-popup">
<h4>${t("note_tree.tree-settings-title")}</h4>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-checkbox">
<input class="form-check-input hide-archived-notes" type="checkbox" value="">
${t("note_tree.hide-archived-notes")}
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<label class="form-check-label tn-checkbox">
<input class="form-check-input auto-collapse-note-tree" type="checkbox" value="">
${t("note_tree.automatically-collapse-notes")}
<span class="bx bx-info-circle"
title="${t("note_tree.automatically-collapse-notes-title")}"></span>

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

@ -36,7 +36,7 @@ const TPL = `
overflow-x: hidden;
}
</style>
<button type="button" data-bs-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 select-button note-type-button">
<span class="note-type-desc"></span>
<span class="caret"></span>
</button>

11
src/public/app/widgets/protected_note_switch.js
View File

@ -6,11 +6,11 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
doRender() {
super.doRender();
this.$switchOnName.text(t("protect_note.toggle-on"));
this.$switchOnButton.attr("title", t("protect_note.toggle-on-hint"));
this.switchOnName = t("protect_note.toggle-on");
this.switchOnTooltip = t("protect_note.toggle-on-hint");
this.$switchOffName.text(t("protect_note.toggle-off"));
this.$switchOffButton.attr("title", t("protect_note.toggle-off-hint"));
this.switchOffName = t("protect_note.toggle-off");
this.switchOffTooltip = t("protect_note.toggle-off-hint");
}
switchOn() {
@ -22,8 +22,7 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
}
async refreshWithNote(note) {
this.$switchOn.toggle(!note.isProtected);
this.$switchOff.toggle(!!note.isProtected);
this.isToggled = note.isProtected;
}
entitiesReloadedEvent({ loadResults }) {

2
src/public/app/widgets/ribbon_widgets/note_paths.ts
View File

@ -101,7 +101,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
const $noteLink = await linkService.createLink(notePath, { title });
$noteLink.find("a").addClass("no-tooltip-preview");
$noteLink.find("a").addClass("no-tooltip-preview tn-link");
const icons = [];

4
src/public/app/widgets/shared_info.js
View File

@ -4,7 +4,7 @@ import attributeService from "../services/attributes.js";
import { t } from "../services/i18n.js";
const TPL = `
<div class="shared-info-widget alert alert-warning">
<div class="shared-info-widget alert alert-warning use-tn-links">
<style>
.shared-info-widget {
margin: 10px;
@ -13,7 +13,7 @@ const TPL = `
font-weight: bold;
}
</style>
<span class="shared-text"></span> <a class="shared-link external"></a>. ${t("shared_info.help_link")}
</div>`;

19
src/public/app/widgets/shared_switch.js
View File

@ -14,11 +14,11 @@ export default class SharedSwitchWidget extends SwitchWidget {
doRender() {
super.doRender();
this.$switchOnName.text(t("shared_switch.shared"));
this.$switchOnButton.attr("title", t("shared_switch.toggle-on-title"));
this.switchOnName = t("shared_switch.shared");
this.switchOnTooltip = t("shared_switch.toggle-on-title");
this.$switchOffName.text(t("shared_switch.shared"));
this.$switchOffButton.attr("title", t("shared_switch.toggle-off-title"));
this.switchOffName = t("shared_switch.shared");
this.switchOffTooltip = t("shared_switch.toggle-off-title");
this.$helpButton.attr("data-help-page", "sharing.html").show();
this.$helpButton.on("click", (e) => utils.openHelp($(e.target)));
@ -53,15 +53,14 @@ export default class SharedSwitchWidget extends SwitchWidget {
const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share");
const switchDisabled = isShared && !canBeUnshared;
this.$switchOn.toggle(!isShared);
this.$switchOff.toggle(!!isShared);
this.isToggled = isShared;
if (switchDisabled) {
this.$widget.attr("title", t("shared_switch.inherited"));
this.$switchOff.addClass("switch-disabled");
this.disabledTooltip = t("shared_switch.inherited");
this.canToggle = false;
} else {
this.$widget.removeAttr("title");
this.$switchOff.removeClass("switch-disabled");
this.disabledTooltip = "";
this.canToggle = true;
}
}

212
src/public/app/widgets/switch.ts
View File

@ -5,120 +5,150 @@ const TPL = `
<div class="switch-widget">
<style>
.switch-widget {
--switch-track-width: 50px;
--switch-track-height: 24px;
--switch-off-track-background: var(--more-accented-background-color);
--switch-on-track-background: var(--main-text-color);
--switch-thumb-width: 16px;
--switch-thumb-height: 16px;
--switch-off-thumb-background: var(--main-background-color);
--switch-on-thumb-background: var(--main-background-color);
display: flex;
align-items: center;
}
/* The switch - the box around the slider */
.switch-widget .switch {
position: relative;
/* The track of the toggle switch */
.switch-widget .switch-button {
display: block;
width: 50px;
height: 24px;
margin: 0;
}
.switch-on, .switch-off {
display: flex;
}
/* The slider */
.switch-widget .slider {
position: relative;
margin-left: 8px;
width: var(--switch-track-width);
height: var(--switch-track-height);
border-radius: 24px;
background-color: var(--switch-off-track-background);
transition: background 200ms ease-in;
}
.switch-widget .switch-button.on {
background: var(--switch-on-track-background);
transition: background 100ms ease-out;
}
/* The thumb of the toggle switch */
.switch-widget .switch-button:after {
--y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);
--x: var(--y);
content: "";
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--more-accented-background-color);
transition: .4s;
}
.switch-widget .slider:before {
width: var(--switch-thumb-width);
height: var(--switch-thumb-height);
background-color: var(--switch-off-thumb-background);
border-radius: 50%;
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--main-background-color);
-webkit-transition: .4s;
transition: .4s;
transform: translate(var(--x), var(--y));
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
background 200ms ease-out;
}
.switch-widget .slider.checked {
background-color: var(--main-text-color);
.switch-widget .switch-button.on:after {
--x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));
background: var(--switch-on-thumb-background);
transition: transform 200ms cubic-bezier(0.64, 0, 0.78, 0),
background 100ms ease-in;
}
.switch-widget .slider.checked:before {
transform: translateX(26px);
.switch-widget .switch-button input[type="checkbox"] {
/* A hidden check box for accesibility purposes */
position: absolute:
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.switch-widget .switch-disabled {
/* Disabled state */
.switch-widget .switch-button:not(.disabled) input[type="checkbox"],
.switch-widget .switch-button:not(.disabled) {
cursor: pointer;
}
.switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) {
outline: 2px solid var(--button-border-color);
outline-offset: 2px;
}
.switch-widget .switch-button.disabled {
opacity: 70%;
pointer-events: none;
}
.switch-widget .switch-help-button {
font-weight: 900;
border: 0;
margin-left: 4px;
background: none;
cursor: pointer;
font-size: 1.1em;
color: var(--muted-text-color);
}
.switch-widget .switch-help-button:hover {
color: var(--main-text-color);
}
</style>
<div class="switch-on">
<span class="switch-on-name"></span>
<div class="switch-widget">
<span class="switch-name"></span>
&nbsp;
<label>
<div class="switch-button">
<input class="switch-toggle" type="checkbox" />
</div>
</label>
<span class="switch-on-button">
<label class="switch">
<span class="slider"></span>
</span>
</div>
<div class="switch-off">
<span class="switch-off-name"></span>
&nbsp;
<span class="switch-off-button">
<label class="switch">
<span class="slider checked"></span>
</span>
<button class="switch-help-button icon-action bx bx-help-circle" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;"></button>
</div>
<button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button>
</div>`;
export default class SwitchWidget extends NoteContextAwareWidget {
protected $switchOn!: JQuery<HTMLElement>;
protected $switchOnName!: JQuery<HTMLElement>;
protected $switchOnButton!: JQuery<HTMLElement>;
protected $switchOff!: JQuery<HTMLElement>;
protected $switchOffName!: JQuery<HTMLElement>;
protected $switchOffButton!: JQuery<HTMLElement>;
protected $helpButton!: JQuery<HTMLElement>;
private $switchButton!: JQuery<HTMLElement>;
private $switchToggle!: JQuery<HTMLElement>;
private $switchName!: JQuery<HTMLElement>;
private $helpButton!: JQuery<HTMLElement>;
private switchOnName = "";
private switchOnTooltip = "";
private switchOffName = "";
private switchOffTooltip = "";
private disabledTooltip = "";
private currentState = false;
doRender() {
this.$widget = $(TPL);
this.$switchButton = this.$widget.find(".switch-button");
this.$switchOn = this.$widget.find(".switch-on");
this.$switchOnName = this.$widget.find(".switch-on-name");
this.$switchOnButton = this.$widget.find(".switch-on-button");
this.$switchToggle = this.$widget.find(".switch-toggle");
this.$switchToggle.on("click", (e) => {
this.toggle(!this.currentState);
this.$switchOnButton.on("click", () => this.toggle(true));
this.$switchOff = this.$widget.find(".switch-off");
this.$switchOffName = this.$widget.find(".switch-off-name");
this.$switchOffButton = this.$widget.find(".switch-off-button");
this.$switchOffButton.on("click", () => this.toggle(false));
// Prevent the check box from being toggled by the click, the value of the check box
// should be set exclusively by the 'isToggled' property setter.
e.preventDefault();
});
this.$switchName = this.$widget.find(".switch-name");
this.$helpButton = this.$widget.find(".switch-help-button");
}
@ -132,4 +162,40 @@ export default class SwitchWidget extends NoteContextAwareWidget {
switchOff() {}
switchOn() {}
/** Gets or sets whether the switch is toggled. */
get isToggled() {
return this.currentState;
}
set isToggled(state) {
this.currentState = !!state;
this.$switchButton.toggleClass("on", this.currentState);
this.$switchToggle.prop("checked", this.currentState);
if (this.currentState) {
this.$switchName.text(this.switchOffName);
this.$switchButton.attr("title", this.switchOffTooltip);
} else {
this.$switchName.text(this.switchOnName);
this.$switchButton.attr("title", this.switchOnTooltip);
}
}
/** Gets or sets whether the switch is enabled. */
get canToggle() {
return (!this.$switchButton.hasClass("disabled"));
}
set canToggle(isEnabled) {
this.$switchButton.toggleClass("disabled", !isEnabled);
this.$switchToggle.attr("disabled", !isEnabled ? "disabled" : null);
if (isEnabled) {
this.isToggled = this.currentState; // Reapply the correct tooltip
} else {
this.$switchButton.attr("title", this.disabledTooltip);
}
}
}

27
src/public/app/widgets/template_switch.ts → src/public/app/widgets/template_switch.js
View File

@ -1,52 +1,43 @@
import SwitchWidget from "./switch.js";
import attributeService from "../services/attributes.js";
import { t } from "../services/i18n.js";
import type FNote from "../entities/fnote.js";
import type { EventData } from "../components/app_context.js";
/**
* Switch for the basic properties widget which allows the user to select whether the note is a template or not, which toggles the `#template` attribute.
*/
export default class TemplateSwitchWidget extends SwitchWidget {
isEnabled() {
return super.isEnabled() && !this.noteId?.startsWith("_options");
return super.isEnabled() && !this.noteId.startsWith("_options");
}
doRender() {
super.doRender();
this.$switchOnName.text(t("template_switch.template"));
this.$switchOnButton.attr("title", t("template_switch.toggle-on-hint"));
this.switchOnName = t("template_switch.template");
this.switchOnTooltip = t("template_switch.toggle-on-hint");
this.$switchOffName.text(t("template_switch.template"));
this.$switchOffButton.attr("title", t("template_switch.toggle-off-hint"));
this.switchOffName = t("template_switch.template");
this.switchOffTooltip = t("template_switch.toggle-off-hint");
this.$helpButton.attr("data-help-page", "template.html").show();
}
async switchOn() {
if (this.noteId) {
await attributeService.setLabel(this.noteId, "template");
}
await attributeService.setLabel(this.noteId, "template");
}
async switchOff() {
if (!this.note || !this.noteId) {
return;
}
for (const templateAttr of this.note.getOwnedLabels("template")) {
await attributeService.removeAttributeById(this.noteId, templateAttr.attributeId);
}
}
async refreshWithNote(note: FNote) {
async refreshWithNote(note) {
const isTemplate = note.hasLabel("template");
this.$switchOn.toggle(!isTemplate);
this.$switchOff.toggle(!!isTemplate);
this.isToggled = isTemplate;
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
entitiesReloadedEvent({ loadResults }) {
if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name === "template" && attr.noteId === this.noteId)) {
this.refresh();
}

5
src/public/app/widgets/type_widgets/attachment_list.js
View File

@ -11,7 +11,7 @@ const TPL = `
padding-left: 15px;
padding-right: 15px;
}
.attachment-list .links-wrapper {
font-size: larger;
margin-bottom: 15px;
@ -20,7 +20,7 @@ const TPL = `
align-items: baseline;
}
</style>
<div class="links-wrapper"></div>
<div class="attachment-list-wrapper"></div>
@ -48,6 +48,7 @@ export default class AttachmentListTypeWidget extends TypeWidget {
utils.initHelpButtons($helpButton);
const noteLink = await linkService.createLink(this.noteId); // do separately to avoid race condition between empty() and .append()
noteLink.addClass("use-tn-links");
this.$linksWrapper.empty().append(
$("<div>").append(t("attachment_list.owning_note"), noteLink),

2
src/public/app/widgets/type_widgets/editable_text.js
View File

@ -88,7 +88,7 @@ const TPL = `
}
</style>
<div class="note-detail-editable-text-editor" tabindex="300"></div>
<div class="note-detail-editable-text-editor use-tn-links" tabindex="300"></div>
</div>
`;

4
src/public/app/widgets/type_widgets/options/advanced/database_anonymization.ts
View File

@ -15,7 +15,7 @@ const TPL = `
<h5>${t("database_anonymization.full_anonymization")}</h5>
<p>${t("database_anonymization.full_anonymization_description")}</p>
<button class="anonymize-full-button btn">${t("database_anonymization.save_fully_anonymized_database")}</button>
<button class="anonymize-full-button btn btn-secondary">${t("database_anonymization.save_fully_anonymized_database")}</button>
</div>
<div class="col-md-6">
@ -23,7 +23,7 @@ const TPL = `
<p>${t("database_anonymization.light_anonymization_description")}</p>
<button class="anonymize-light-button btn">${t("database_anonymization.save_lightly_anonymized_database")}</button>
<button class="anonymize-light-button btn btn-secondary">${t("database_anonymization.save_lightly_anonymized_database")}</button>
</div>
</div>

4
src/public/app/widgets/type_widgets/options/advanced/database_integrity_check.ts
View File

@ -9,8 +9,8 @@ const TPL = `
<p>${t("database_integrity_check.description")}</p>
<button class="check-integrity-button btn">${t("database_integrity_check.check_button")}</button>
<button class="find-and-fix-consistency-issues-button btn">${t("consistency_checks.find_and_fix_button")}</button>
<button class="check-integrity-button btn btn-secondary">${t("database_integrity_check.check_button")}</button>
<button class="find-and-fix-consistency-issues-button btn btn-secondary">${t("consistency_checks.find_and_fix_button")}</button>
</div>
`;

4
src/public/app/widgets/type_widgets/options/advanced/sync.ts
View File

@ -7,9 +7,9 @@ import type { OptionMap } from "../../../../../../services/options_interface.js"
const TPL = `
<div class="options-section">
<h4>${t("sync.title")}</h4>
<button class="force-full-sync-button btn">${t("sync.force_full_sync_button")}</button>
<button class="force-full-sync-button btn btn-secondary">${t("sync.force_full_sync_button")}</button>
<button class="fill-entity-changes-button btn">${t("sync.fill_entity_changes_button")}</button>
<button class="fill-entity-changes-button btn btn-secondary">${t("sync.fill_entity_changes_button")}</button>
</div>`;
export default class AdvancedSyncOptions extends OptionsWidget {

2
src/public/app/widgets/type_widgets/options/advanced/vacuum_database.ts
View File

@ -9,7 +9,7 @@ const TPL = `
<p>${t("vacuum_database.description")}</p>
<button class="vacuum-database-button btn">${t("vacuum_database.button_text")}</button>
<button class="vacuum-database-button btn btn-secondary">${t("vacuum_database.button_text")}</button>
</div>`;
export default class VacuumDatabaseOptions extends OptionsWidget {

2
src/public/app/widgets/type_widgets/options/appearance/code_block.ts
View File

@ -34,7 +34,7 @@ const TPL = `
</div>
<div class="col-md-6 side-checkbox">
<label class="form-check">
<label class="form-check tn-checkbox">
<input type="checkbox" class="word-wrap form-check-input" />
${t("code_block.word_wrapping")}
</label>

2
src/public/app/widgets/type_widgets/options/appearance/fonts.ts
View File

@ -132,7 +132,7 @@ const TPL = `
<p>
${t("fonts.apply_font_changes")}
<button class="btn btn-micro reload-frontend-button">${t("fonts.reload_frontend")}</button>
<button class="btn btn-secondary btn-micro reload-frontend-button">${t("fonts.reload_frontend")}</button>
</p>
</div>`;

2
src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts
View File

@ -20,7 +20,7 @@ const TPL = `
<p>
${t("max_content_width.apply_changes_description")}
<button class="btn btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
<button class="btn btn-secondary btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
</p>
</div>`;

4
src/public/app/widgets/type_widgets/options/appearance/ribbon.ts
View File

@ -5,12 +5,12 @@ import OptionsWidget from "../options_widget.js";
const TPL = `
<div class="options-section">
<h4>${t("ribbon.widgets")}</h4>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="promoted-attributes-open-in-ribbon form-check-input">
${t("ribbon.promoted_attributes_message")}
</label>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="edited-notes-open-in-ribbon form-check-input">
${t("ribbon.edited_notes_message")}
</label>

6
src/public/app/widgets/type_widgets/options/appearance/theme.ts
View File

@ -10,7 +10,7 @@ const TPL = `
<div class="form-group row">
<div>
<label>
<label class="tn-radio">
<input type="radio" name="layout-orientation" value="vertical" />
<strong>${t("theme.layout-vertical-title")}</strong>
- ${t("theme.layout-vertical-description")}
@ -18,7 +18,7 @@ const TPL = `
</div>
<div>
<label>
<label class="tn-radio">
<input type="radio" name="layout-orientation" value="horizontal" />
<strong>${t("theme.layout-horizontal-title")}</strong>
- ${t("theme.layout-horizontal-description")}
@ -37,7 +37,7 @@ const TPL = `
</div>
<div class="col-md-6 side-checkbox">
<label class="form-check">
<label class="form-check tn-checkbox">
<input type="checkbox" class="override-theme-fonts form-check-input">
${t("theme.override_theme_fonts_label")}
</label>

8
src/public/app/widgets/type_widgets/options/backup.ts
View File

@ -13,19 +13,19 @@ const TPL = `
<ul style="list-style: none">
<li>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="daily-backup-enabled form-check-input">
${t("backup.enable_daily_backup")}
</label>
</li>
<li>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="weekly-backup-enabled form-check-input">
${t("backup.enable_weekly_backup")}
</label>
</li>
<li>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="monthly-backup-enabled form-check-input">
${t("backup.enable_monthly_backup")}
</label>
@ -38,7 +38,7 @@ const TPL = `
<div class="options-section">
<h4>${t("backup.backup_now")}</h4>
<button class="backup-database-button btn">${t("backup.backup_database_now")}</button>
<button class="backup-database-button btn btn-secondary">${t("backup.backup_database_now")}</button>
</div>
<div class="options-section">

9
src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts
View File

@ -93,10 +93,13 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
#buildSelectionForMimeType(mimeType: MimeType) {
const id = "code-mime-type-" + idCtr++;
return $("<li>")
const checkbox = $(`<label class="tn-checkbox">`)
.append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
.on("change", () => this.save())
.append(" &nbsp; ")
.append($("<label>").attr("for", id).text(mimeType.title));
.append(mimeType.title)
return $("<li>")
.append(checkbox);
}
}

2
src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts
View File

@ -5,7 +5,7 @@ import type { OptionMap } from "../../../../../../services/options_interface.js"
const TPL = `
<div class="options-section">
<h4>${t("vim_key_bindings.use_vim_keybindings_in_code_notes")}</h4>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="vim-keymap-enabled form-check-input">
${t("vim_key_bindings.enable_vim_keybindings")}
</label>

2
src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts
View File

@ -5,7 +5,7 @@ import type { OptionMap } from "../../../../../../services/options_interface.js"
const TPL = `
<div class="options-section">
<h4>${t("wrap_lines.wrap_lines_in_code_notes")}</h4>
<label>
<label class="tn-checkbox">
<input type="checkbox" class="line-wrap-enabled form-check-input">
${t("wrap_lines.enable_line_wrap")}
</label>

6
src/public/app/widgets/type_widgets/options/etapi.ts
View File

@ -10,7 +10,7 @@ const TPL = `
<h4>${t("etapi.title")}</h4>
<p>${t("etapi.description")} <br/>
${t("etapi.see_more")} <a href="https://triliumnext.github.io/Docs/Wiki/etapi.html">${t("etapi.wiki")}</a> ${t("etapi.and")} <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">${t("etapi.openapi_spec")}</a>.</p>
${t("etapi.see_more")} <a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/etapi.html">${t("etapi.wiki")}</a> ${t("etapi.and")} <a class="tn-link" onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">${t("etapi.openapi_spec")}</a>.</p>
<button type="button" class="create-etapi-token btn btn-sm">${t("etapi.create_token")}</button>
@ -112,8 +112,8 @@ export default class EtapiOptions extends OptionsWidget {
.append($("<td>").text(formatDateTime(token.utcDateCreated)))
.append(
$("<td>").append(
$(`<span class="bx bx-pen token-table-button" title="${t("etapi.rename_token")}"></span>`).on("click", () => this.renameToken(token.etapiTokenId, token.name)),
$(`<span class="bx bx-trash token-table-button" title="${t("etapi.delete_token")}"></span>`).on("click", () => this.deleteToken(token.etapiTokenId, token.name))
$(`<span class="bx bx-pen token-table-button icon-action" title="${t("etapi.rename_token")}"></span>`).on("click", () => this.renameToken(token.etapiTokenId, token.name)),
$(`<span class="bx bx-trash token-table-button icon-action" title="${t("etapi.delete_token")}"></span>`).on("click", () => this.deleteToken(token.etapiTokenId, token.name))
)
)
);

4
src/public/app/widgets/type_widgets/options/images/images.ts
View File

@ -13,7 +13,7 @@ const TPL = `
<h4>${t("images.images_section_title")}</h4>
<label>
<label class="tn-checkbox">
<input class="download-images-automatically" type="checkbox" name="download-images-automatically">
${t("images.download_images_automatically")}
</label>
@ -22,7 +22,7 @@ const TPL = `
<hr />
<label>
<label class="tn-checkbox">
<input class="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
${t("images.enable_image_compression")}
</label>

2
src/public/app/widgets/type_widgets/options/other/attachment_erasure_timeout.ts
View File

@ -17,7 +17,7 @@ const TPL = `
<p>${t("attachment_erasure_timeout.manual_erasing_description")}</p>
<button class="erase-unused-attachments-now-button btn">${t("attachment_erasure_timeout.erase_unused_attachments_now")}</button>
<button class="erase-unused-attachments-now-button btn btn-secondary">${t("attachment_erasure_timeout.erase_unused_attachments_now")}</button>
</div>`;
export default class AttachmentErasureTimeoutOptions extends OptionsWidget {

2
src/public/app/widgets/type_widgets/options/other/network_connections.ts
View File

@ -6,7 +6,7 @@ const TPL = `
<div class="options-section">
<h4>${t("network_connections.network_connections_title")}</h4>
<label>
<label class="tn-checkbox">
<input class="check-for-updates form-check-input" type="checkbox" name="check-for-updates">
${t("network_connections.check_for_updates")}
</label>

2
src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts
View File

@ -17,7 +17,7 @@ const TPL = `
<p>${t("note_erasure_timeout.manual_erasing_description")}</p>
<button class="erase-deleted-notes-now-button btn">${t("note_erasure_timeout.erase_deleted_notes_now")}</button>
<button class="erase-deleted-notes-now-button btn btn-secondary">${t("note_erasure_timeout.erase_deleted_notes_now")}</button>
</div>`;
export default class NoteErasureTimeoutOptions extends OptionsWidget {

2
src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts
View File

@ -15,7 +15,7 @@ const TPL = `
<input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
</div>
<button class="erase-excess-revision-snapshots-now-button btn btn-sm" style="padding: 0 10px">
<button class="erase-excess-revision-snapshots-now-button btn btn-sm">
${t("revisions_snapshot_limit.erase_excess_revision_snapshots")}</button>
</div>`;

2
src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.ts
View File

@ -6,7 +6,7 @@ const TPL = `
<div class="options-section">
<h4>${t("revisions_snapshot_interval.note_revisions_snapshot_interval_title")}</h4>
<p>${t("revisions_snapshot_interval.note_revisions_snapshot_description")}</p>
<p class="use-tn-links">${t("revisions_snapshot_interval.note_revisions_snapshot_description")}</p>
<div class="form-group">
<label>${t("revisions_snapshot_interval.snapshot_time_interval_label")}</label>

4
src/public/app/widgets/type_widgets/options/password.ts
View File

@ -10,7 +10,7 @@ const TPL = `
<h4 class="password-heading">${t("password.heading")}</h4>
<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
${t("password.alert_message")} <a class="reset-password-button" href="javascript:">${t("password.reset_link")}</a>
${t("password.alert_message")} <a class="reset-password-button tn-link" href="javascript:">${t("password.reset_link")}</a>
</div>
<form class="change-password-form">
@ -36,7 +36,7 @@ const TPL = `
<div class="options-section">
<h4>${t("password.protected_session_timeout")}</h4>
<p>${t("password.protected_session_timeout_description")} <a href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" class="external">${t("password.wiki")}</a> ${t("password.for_more_info")}</p>
<p>${t("password.protected_session_timeout_description")} <a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" class="external">${t("password.wiki")}</a> ${t("password.for_more_info")}</p>
<div class="form-group">
<label for="protected-session-timeout-in-seconds">${t("password.protected_session_timeout_label")}</label>

4
src/public/app/widgets/type_widgets/options/shortcuts.ts
View File

@ -30,7 +30,7 @@ const TPL = `
<h4>${t("shortcuts.keyboard_shortcuts")}</h4>
<p>
<p class="use-tn-links">
${t("shortcuts.multiple_shortcuts")}
${t("shortcuts.electron_documentation")}
</p>
@ -56,7 +56,7 @@ const TPL = `
<div class="shortcuts-options-buttons">
<button class="options-keyboard-shortcuts-reload-app btn btn-primary">${t("shortcuts.reload_app")}</button>
<button class="options-keyboard-shortcuts-set-all-to-default btn">${t("shortcuts.set_all_to_default")}</button>
<button class="options-keyboard-shortcuts-set-all-to-default btn btn-secondary">${t("shortcuts.set_all_to_default")}</button>
</div>
</div>`;

4
src/public/app/widgets/type_widgets/options/sync.ts
View File

@ -30,7 +30,7 @@ const TPL = `
<div style="display: flex; justify-content: space-between;">
<button class="btn btn-primary">${t("sync_2.save")}</button>
<button class="btn" type="button" data-help-page="synchronization.html">${t("sync_2.help")}</button>
<button class="btn btn-secondary" type="button" data-help-page="synchronization.html">${t("sync_2.help")}</button>
</div>
</form>
</div>
@ -40,7 +40,7 @@ const TPL = `
<p>${t("sync_2.test_description")}</p>
<button class="test-sync-button btn">${t("sync_2.test_button")}</button>
<button class="test-sync-button btn btn-secondary">${t("sync_2.test_button")}</button>
</div>`;
// TODO: Deduplicate

6
src/public/app/widgets/type_widgets/options/text_notes/editor.ts
View File

@ -8,7 +8,7 @@ const TPL = `
<h4>${t("editing.editor_type.label")}</h4>
<div>
<label>
<label class="tn-radio">
<input type="radio" name="editor-type" value="ckeditor-balloon" />
<strong>${t("editing.editor_type.floating.title")}</strong>
- ${t("editing.editor_type.floating.description")}
@ -16,14 +16,14 @@ const TPL = `
</div>
<div>
<label>
<label class="tn-radio">
<input type="radio" name="editor-type" value="ckeditor-classic" />
<strong>${t("editing.editor_type.fixed.title")}</strong>
- ${t("editing.editor_type.fixed.description")}
</label>
<div>
<label>
<label class="tn-checkbox">
<input type="checkbox" name="multiline-toolbar" />
${t("editing.editor_type.multiline-toolbar")}
</label>

10
src/public/app/widgets/type_widgets/options/text_notes/highlights_list.ts
View File

@ -9,11 +9,11 @@ const TPL = `
<p>${t("highlights_list.description")}</p>
<div>
<label><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
<label><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
<label><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
<label><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
<label><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
</div>
<hr />

2
src/public/app/widgets/type_widgets/read_only_text.js
View File

@ -66,7 +66,7 @@ const TPL = `
}
</style>
<div class="note-detail-readonly-text-content ck-content"></div>
<div class="note-detail-readonly-text-content ck-content use-tn-links"></div>
</div>
`;

53
src/public/stylesheets/theme-next-dark.css
View File

@ -8,7 +8,7 @@
--theme-style: dark;
--native-titlebar-background: #00000000;
--main-background-color: #333;
--main-background-color: #272727;
--main-text-color: #ccc;
--main-border-color: #454545;
--subtle-border-color: #313131;
@ -19,21 +19,50 @@
--accented-background-color: #555;
--button-background-color: transparent;
--button-border-color: #ccc;
--button-text-color: currentColor;
--button-border-radius: 5px;
--button-disabled-background-color: transparent;
--button-disabled-text-color: #999;
--primary-button-background-color: #888;
--primary-button-text-color: white;
--primary-button-border-color: #999;
--cmd-button-background-color: #ffffff28;
--cmd-button-text-color: #ffffffc2;
--cmd-button-hover-background-color: #ffffff37;
--cmd-button-hover-text-color: white;
--cmd-button-shadow-color: #00000080;
--cmd-button-icon-color: white;
--cmd-button-keyboard-shortcut-background: #0000004d;
--cmd-button-keyboard-shortcut-color: white;
--cmd-button-disabled-opacity: .5;
--icon-button-color: currentColor;
--icon-button-hover-background: var(--hover-item-background-color);
--icon-button-hover-color: var(--hover-item-text-color);
--muted-text-color: #bbb;
--input-text-color: #ccc;
--input-background-color: #333;
--input-background-color: #ffffff12;
--input-text-color: #ffffffc7;
--input-placeholder-color: #b7b7b782;
--input-selection-background: gray;
--input-selection-text-color: white;
--input-hover-background: #ffffff1f;
--input-hover-color: var(--input-text-color);
--input-focus-outline-color: #ffffff57;
--input-focus-background: #ffffff1f;
--input-focus-color: white;
--input-action-button-color: #c6c6c6;
--input-action-button-hover: white;
--radio-checkbox-background: #ffffff30;
--radio-checkbox-hover-background: #ffffff61;
--radio-checkbox-indicator-color: white;
--select-focus-background: #333;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
--select-group-heading-text-color: gray;
--link-hover-background: #ffffff26;
--link-hover-color: white;
--hover-item-text-color: #efefef;
--hover-item-background-color: #ffffff24;
@ -120,7 +149,7 @@
--code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
--card-background-color: #363636;
--card-background-color: #ffffff12;
--card-background-hover-color: #3c3c3c;
--card-background-press-color: #464646;
--card-border-color: #222222;

49
src/public/stylesheets/theme-next-light.css
View File

@ -19,21 +19,50 @@
--accented-background-color: #f5f5f5;
--button-background-color: transparent;
--button-border-color: #ddd;
--button-text-color: black;
--button-border-radius: 5px;
--button-disabled-background-color: #ddd;
--button-disabled-text-color: black;
--button-text-color: currentColor;
--primary-button-background-color: #6c757d;
--primary-button-text-color: white;
--primary-button-border-color: #6c757d;
--cmd-button-background-color: #0000000f;
--cmd-button-text-color: #000000ad;
--cmd-button-hover-background-color: #00000016;
--cmd-button-hover-text-color: #000;
--cmd-button-shadow-color: #00000040;
--cmd-button-icon-color: black;
--cmd-button-keyboard-shortcut-background: #00000017;
--cmd-button-keyboard-shortcut-color: black;
--cmd-button-disabled-opacity: .5;
--icon-button-color: currentColor;
--icon-button-hover-background: var(--hover-item-background-color);
--icon-button-hover-color: var(--hover-item-text-color);
--muted-text-color: #666;
--input-background-color: #00000012;
--input-text-color: black;
--input-background-color: transparent;
--input-placeholder-color: #06060682;
--input-selection-background: gray;
--input-selection-text-color: white;
--input-hover-background: #00000020;
--input-hover-color: black;
--input-focus-outline-color: #00000063;
--input-focus-background: #ffffff80;
--input-focus-color: #000;
--input-action-button-color: #575757;
--input-action-button-hover: black;
--radio-checkbox-background: #0000002e;
--radio-checkbox-hover-background: #0000004f;
--radio-checkbox-indicator-color: black;
--select-focus-background: white;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
--select-group-heading-text-color: gray;
--link-hover-background: #00000012;
--link-hover-color: black;
--hover-item-text-color: black;
--hover-item-background-color: #0000001a;

4
src/public/stylesheets/theme-next/base.css
View File

@ -1,3 +1,4 @@
@import url(./forms.css);
@import url(./shell.css);
@import url(./settings.css);
@import url(./notes/text.css);
@ -57,6 +58,9 @@
--help-backdrop-blur: 10px;
--icon-button-size: 32px;
--icon-button-icon-ratio: .65;
/* Theme capabilities */
--tab-note-icons: true;
}

516
src/public/stylesheets/theme-next/forms.css Normal file
View File

@ -0,0 +1,516 @@
/*
* Command buttons (.btn-primary / .btn-secondary / .btn-sm / .btn-success)
*/
button.btn.btn-primary,
button.btn.btn-secondary,
button.btn.btn-sm:not(.select-button),
button.btn.btn-success {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
box-shadow: 1px 1px 1px var(--cmd-button-shadow-color);
border: unset;
border-radius: 6px;
padding: 4px 16px;
background: var(--cmd-button-background-color);
color: var(--cmd-button-text-color);
}
button.btn.btn-primary:hover,
button.btn.btn-secondary:hover,
button.btn.btn-sm:not(.select-button):hover,
button.btn.btn-success:hover {
background: var(--cmd-button-hover-background-color);
color: var(--cmd-button-hover-text-color);
}
button.btn.btn-primary:active,
button.btn.btn-secondary:active,
button.btn.btn-sm:not(.select-button):active,
button.btn.btn-success:active {
opacity: .85;
box-shadow: unset;
background: var(--cmd-button-background-color) !important;
color: var(--cmd-button-text-color) !important;
transform: scale(.95);
}
button.btn.btn-primary:disabled,
button.btn.btn-secondary:disabled,
button.btn.btn-sm:not(.select-button):disabled,
button.btn.btn-success:disabled {
opacity: var(--cmd-button-disabled-opacity);
}
button.btn.btn-primary:focus-visible,
button.btn.btn-secondary:focus-visible,
button.btn.btn-sm:not(.select-button):focus-visible,
button.btn.btn-success:focus-visible {
outline: 2px solid var(--input-focus-outline-color);
}
/* Button's icon */
button.btn.btn-primary span.bx,
button.btn.btn-secondary span.bx,
button.btn.btn-sm span.bx,
button.btn.btn-success span.bx {
color: var(--cmd-button-icon-color);
padding-right: .35em;
font-size: 1.2em;
}
/* Button's keyboard shortcut */
button.btn.btn-primary kbd,
button.btn.btn-secondary kbd,
button.btn.btn-sm kbd,
button.btn.btn-success kbd {
margin-left: .5em;
background: var(--cmd-button-keyboard-shortcut-background);
color: var(--cmd-button-keyboard-shortcut-color);
font-size: .6em;
text-transform: uppercase;
letter-spacing: .5pt;
}
/*
* Icon buttons
*/
:root .icon-action:not(.global-menu-button) {
width: var(--icon-button-size);
height: var(--icon-button-size);
border: unset;
border-radius: 8px;
padding: 0;
text-align: center;
color: var(--icon-button-color);
}
/* The "x" icon button */
:root .icon-action.bx-x {
--icon-button-hover-background: var(--tab-close-button-hover-background);
--icon-button-hover-color: var(--tab-close-button-hover-color);
--icon-button-size: 24px;
--icon-button-icon-ratio: .8;
border-radius: 50%;
}
/* The icon */
:root .icon-action:not(.global-menu-button)::before {
display: block;
line-height: var(--icon-button-size);
font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio));
}
:root .icon-action:not(.global-menu-button):hover,
:root .icon-action:not(.global-menu-button).show {
background: var(--icon-button-hover-background);
color: var(--icon-button-hover-color);
}
:root .icon-action:not(.global-menu-button):active::before {
transform: scale(.85);
}
:root .icon-action:not(.global-menu-button):focus-visible {
outline: 2px solid var(--input-focus-outline-color);
}
/*
* Input boxes
*/
input:disabled {
opacity: .33;
}
/* Text boxes */
input:not([type]),
input[type="text"],
input[type="number"],
input[type="password"],
textarea.form-control,
textarea {
outline: 3px solid transparent;
outline-offset: 6px;
border: unset;
background: var(--input-background-color);
color: var(--input-text-color);
}
input:not([type]):hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
textarea.form-control:hover,
textarea:hover {
background: var(--input-hover-background);
color: var(--input-hover-color);
}
input:not([type]):focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea.form-control:focus,
textarea:focus {
box-shadow: unset;
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
background: var(--input-focus-background);
color: var(--input-focus-color);
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
input::placeholder,
.form-control::placeholder {
--muted-text-color: var(--input-placeholder-color);
}
input::selection,
.form-control::selection {
background: var(--input-selection-background);
color: var(--input-selection-text-color);
}
/* Input groups */
.input-group {
outline: 3px solid transparent;
outline-offset: 6px;
background: var(--input-background-color);
border-radius: 6px;
padding-right: 8px;
color: var(--quick-search-color);
}
.input-group:hover {
background: var(--input-hover-background);
}
.input-group:focus-within {
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
background: var(--input-focus-background);
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
.input-group input
.input-group input:hover,
.input-group input:focus,
.input-group .form-control,
.input-group .form-control:hover,
.input-group .form-control:focus {
/* Ignore the focus outline for the inputs that are children of an input group */
outline: unset;
background: transparent;
}
.input-group button,
.input-group a {
display: flex;
--bs-border-width: 0;
--accented-background-color: transparent;
background: transparent;
padding: 0 4px;
/* Workaround to set the "color" property. */
--muted-text-color: var(--input-action-button-color);
}
.input-group button:hover,
.input-group a:hover {
--muted-text-color: var(--input-action-button-hover);
}
.input-group button:focus-visible,
.input-group a:focus-visible {
outline: transparent;
border: transparent;
text-shadow: 0 0 3px var(--input-action-button-hover);
}
.input-group a.disabled {
opacity: .5;
/* Workaround to set the "background" property. */
--button-disabled-background-color: transparent;
}
.input-group .input-clearer-button {
background: transparent !important;
}
/* Combo box-like dropdown buttons */
.select-button.dropdown-toggle {
padding-right: 40px;
}
.select-button.dropdown-toggle::after {
/* Remove the original arrow */
content: unset;
}
/* Combo boxes and combo box-like dropdown buttons */
select,
select.form-select,
.select-button.dropdown-toggle.btn {
outline: 3px solid transparent;
outline-offset: 6px;
background: var(--input-background-color)
var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat;
color: var(--input-text-color);
border: unset;
border-radius: 0.375rem;
}
select:hover,
select.form-select:hover,
.select-button.dropdown-toggle.btn:hover {
background-color: var(--input-hover-background);
color: var(--input-hover-color);
}
button.select-button.dropdown-toggle.btn:active {
background-color: transparent;
color: var(--select-focus-text-color);
}
select:focus,
select.form-select:focus,
.select-button.dropdown-toggle.btn:focus {
box-shadow: unset;
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
background-color: var(--select-focus-background);
color: var(--select-focus-text-color);
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
option {
color: var(--select-dropdown-text-color);
}
optgroup {
color: var(--select-group-heading-text-color);
font-size: .75em;
font-weight: normal;
font-style: normal;
line-height: 40px;
}
/* Check boxes and radio buttons */
@supports selector(label:has(*)) {
/* Check box & radio button commons */
/* The parent label */
label.tn-radio,
label.tn-checkbox {
--box-size: 1em;
--box-label-gap: .5em;
position: relative;
padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
user-select: none;
}
/* The original input */
label.tn-radio > input[type="radio"],
label.tn-checkbox > input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
width: var(--box-size);
height: 100%;
opacity: 0 !important;
}
label.tn-radio::before,
label.tn-radio::after,
label.tn-checkbox::before,
label.tn-checkbox::after {
content: "";
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
width: var(--box-size);
height: var(--box-size);
}
label.tn-radio:has(>input[type="radio"]:focus-visible)::before,
label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before {
outline: 2px solid var(--input-focus-outline-color);
}
/* Check boxes */
/* The check box background */
label.tn-checkbox::before {
border-radius: 3px;
background: var(--radio-checkbox-background);
}
label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before {
background: var(--radio-checkbox-hover-background);
}
@keyframes checkbox-checked {
from {
transform: scale(2);
} to {
transform: scale(1);
}
}
/* The tick mark */
label.tn-checkbox::after {
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
mask-position: center center;
mask-size: .95em;
background-color: var(--radio-checkbox-indicator-color);
transform: scale(0);
opacity: 0;
transition: transform 300ms ease-out,
opacity 300ms linear;
}
label.tn-checkbox:has(>input[type="checkbox"]:checked)::after {
opacity: 1;
transform: scale(1);
transition: opacity 100ms ease-in-out;
animation: checkbox-checked 150ms ease-out;
}
/* Radio buttons */
label.tn-radio::before,
label.tn-radio::after {
border-radius: 50%;
}
/* The outer circle */
label.tn-radio::before {
background: var(--radio-checkbox-background);
}
label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before {
background: var(--radio-checkbox-hover-background);
}
@keyframes radio-checked {
from {
transform: scale(1.5);
} to {
transform: scale(.5);
}
}
/* The inner circle */
label.tn-radio::after {
background: var(--radio-checkbox-indicator-color);
transform: scale(0);
opacity: 0;
transition: opacity 300ms linear,
transform 300ms ease-in;
}
label.tn-radio:has(>input[type="radio"]:checked)::after {
transform: scale(.5);
opacity: 1;
transition: opacity 150ms linear;
animation: radio-checked 200ms ease-out;
}
/* Disabled check boxes and radio buttons */
label.tn-radio:has(> input[type="radio"]:disabled)::before,
label.tn-radio:has(> input[type="radio"]:disabled)::after,
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
opacity: .5;
}
}
/* Switches */
.switch-widget.component {
--icon-button-size: 28px;
}
/* Links */
body a.tn-link,
body a.tn-link:visited,
.use-tn-links a,
.use-tn-links a:visited {
--background: transparent;
box-shadow: 0 0 0 0 var(--background);
border-radius: 4px;
background: var(--background);
color: currentColor;
font-weight: normal;
text-decoration: underline;
transition: background-color 200ms ease-out,
box-shadow 200ms ease-out,
color 300ms ease-out;
}
body a.tn-link:focus-visible,
.use-tn-links a:focus-visible {
outline: 2px solid var(--input-focus-outline-color);
outline-offset: 2px;
}
body a.tn-link:hover,
.use-tn-links a:hover {
box-shadow: 0 0 0 4px var(--link-hover-background);
--background: var(--link-hover-background);
color: var(--link-hover-color);
transition: background-color 100ms ease-in,
box-shadow 100ms ease-in,
color 150ms ease-in;
}
a.tn-link.external:not(.no-arrow)::after,
a.tn-link[href^="http://"]:not(.no-arrow)::after,
a.tn-link[href^="https://"]:not(.no-arrow)::after,
.use-tn-links a.external:not(.no-arrow)::after,
.use-tn-links a[href^="http://"]:not(.no-arrow)::after,
.use-tn-links a[href^="https://"]:not(.no-arrow)::after {
display: inline-block;
opacity: .5;
}
@keyframes link-arrow-blink {
from {
opacity: 1;
} to {
opacity: .5;
}
}
a.tn-link:hover.external:not(.no-arrow)::after,
a.tn-link:hover[href^="http://"]:not(.no-arrow)::after,
a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
.use-tn-links a:hover.external:not(.no-arrow)::after,
.use-tn-links a:hover[href^="http://"]:not(.no-arrow)::after,
.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after {
animation: link-arrow-blink 500ms linear alternate infinite;
}

56
src/public/stylesheets/theme-next/shell.css
View File

@ -260,6 +260,12 @@ div.quick-search {
padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}
div.quick-search, div.quick-search:hover, div.quick-search:focus-within {
/* Prevent changes to background and outline when the state of the input group changes */
background: transparent;
outline: none;
}
div.quick-search::before {
/* The background rectangle of the search box */
position: absolute;
@ -899,6 +905,10 @@ body.mobile .note-title {
background: var(--main-background-color);
}
#right-pane .card-header-buttons {
align-items: center;
}
#right-pane .toc li,
#right-pane .highlights-list li {
padding: 2px 8px;
@ -1210,10 +1220,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
/* Search box wrapper */
.jump-to-note-dialog .input-group {
margin-right: 16px;
background: var(--quick-search-background);
border: 2px solid transparent;
border-radius: 6px;
color: var(--quick-search-color);
}
.jump-to-note-dialog .input-group:hover {
@ -1227,26 +1233,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
color: var(--quick-search-focus-color);
}
/* Search box input */
.jump-to-note-dialog .input-group input {
--bs-border-width: 0;
box-shadow: unset;
background: transparent;
color: currentColor;
}
/* Search box buttons */
.jump-to-note-dialog .input-group button {
--bs-border-width: 0;
--accented-background-color: transparent;
padding: 0 4px;
}
.jump-to-note-dialog .input-group button:last-child {
padding-right: 0.75em;
}
.jump-to-note-dialog .input-clearer-button {
background: transparent !important;
}
@ -1648,3 +1634,25 @@ body .calendar-dropdown-widget .calendar-body a:hover {
padding: 0 8px;
color: var(--help-code-color);
}
/* Note area */
.title-row > *:first-child {
margin-right: 0;
}
.title-row > *:nth-child(2) {
margin-left: 0;
}
.title-row {
/* Aligns the "Create new split" button with the note menu button (the three dots button) */
padding-right: 3px;
}
.note-title-widget input {
--input-background-color: transparent;
border-radius: 8px;
padding-left: 12px;
}

5
src/views/login.ejs
View File

@ -32,8 +32,9 @@
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input id="remember-me" name="rememberMe" value="1" type="checkbox"> <%= t("login.remember-me") %>
<label class="tn-checkbox">
<input id="remember-me" name="rememberMe" value="1" type="checkbox">
<%= t("login.remember-me") %>
</label>
</div>
</div>