client: mark the check boxes and radio buttons that should use the new style

This commit is contained in:
Adorian Doran 2025-01-24 22:35:45 +02:00
parent ed201ff9a4
commit 41ef47576d
18 changed files with 93 additions and 76 deletions

View File

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

View File

@ -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>

View File

@ -27,40 +27,40 @@ const TPL = `
<strong>${t("import.options")}:</strong>
<div class="checkbox">
<label data-bs-toggle="tooltip" title="${t("import.safeImportTooltip")}">
<label class="tn-checkbox" 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-bs-toggle="tooltip" title="${t("import.explodeArchivesTooltip")}">
<label class="tn-checkbox" 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-bs-toggle="tooltip" title="${t("import.shrinkImagesTooltip")}">
<label class="tn-checkbox" 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>
<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>

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">
<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>
<label for="sort-by-title" class="form-check-label">${t("sort_child_notes.title")}</label>
${t("sort_child_notes.title")}
</label>
</div>
<div class="form-check">
<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">
<label for="sort-by-dateCreated" class="form-check-label">${t("sort_child_notes.date_created")}</label>
${t("sort_child_notes.date_created")}
</label>
</div>
<div class="form-check">
<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">
<label for="sort-by-dateModified" class="form-check-label">${t("sort_child_notes.date_modified")}</label>
${t("sort_child_notes.date_modified")}
</label>
</div>
<br/>
<h5>${t("sort_child_notes.sorting_direction")}</h5>
<div class="form-check">
<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>
<label for="sort-direction-asc" class="form-check-label">${t("sort_child_notes.ascending")}</label>
${t("sort_child_notes.ascending")}
</label>
</div>
<div class="form-check">
<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">
<label for="sort-direction-desc" class="form-check-label">${t("sort_child_notes.descending")}</label>
${t("sort_child_notes.descending")}
</label>
</div>
<br />
<h5>${t("sort_child_notes.folders")}</h5>
<div class="form-check">
<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">
<label for="sort-folders-first" class="form-check-label">${t("sort_child_notes.sort_folders_at_top")}</label>
${t("sort_child_notes.sort_folders_at_top")}
</label>
</div>
<br />
<h5>${t("sort_child_notes.natural_sort")}</h5>
<div class="form-check">
<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">
<label for="sort-natural" class="form-check-label">${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}</label>
${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}
</label>
</div>
<br />
<div class="form-check">

View File

@ -53,14 +53,14 @@ const TPL = `
</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-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>

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>

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>

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>

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>

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>

View File

@ -94,7 +94,7 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
#buildSelectionForMimeType(mimeType: MimeType) {
const id = "code-mime-type-" + idCtr++;
const checkbox = $("<label>")
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(mimeType.title)

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>

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>

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>

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>

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>

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 />

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>