mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
refactoring option templates to use "options-section" class
This commit is contained in:
zadam
parent
b3c0b36ba6
commit
0a67af4f46
@ -15,6 +15,20 @@ const TPL = `
|
||||
overflow-y: auto;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
.options-dialog .options-section:first-of-type h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.options-dialog .options-section h4 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.options-dialog .options-section h5 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal-dialog modal-lg" style="min-width: 1000px;" role="document">
|
||||
|
||||
@ -3,49 +3,53 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<h4 style="margin-top: 0;">Sync</h4>
|
||||
<button id="force-full-sync-button" class="btn">Force full sync</button>
|
||||
<div class="options-section">
|
||||
<h4>Sync</h4>
|
||||
<button id="force-full-sync-button" class="btn">Force full sync</button>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<button id="fill-entity-changes-button" class="btn">Fill entity changes records</button>
|
||||
</div>
|
||||
|
||||
<button id="fill-entity-changes-button" class="btn">Fill entity changes records</button>
|
||||
<div class="options-section">
|
||||
<h4>Database integrity check</h4>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<p>This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.</p>
|
||||
|
||||
<h4>Database integrity check</h4>
|
||||
<button id="check-integrity-button" class="btn">Check database integrity</button>
|
||||
</div>
|
||||
|
||||
<p>This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.</p>
|
||||
<div class="options-section">
|
||||
<h4>Consistency checks</h4>
|
||||
|
||||
<button id="check-integrity-button" class="btn">Check database integrity</button><br/><br/>
|
||||
<button id="find-and-fix-consistency-issues-button" class="btn">Find and fix consistency issues</button>
|
||||
</div>
|
||||
|
||||
<h4>Consistency checks</h4>
|
||||
<div class="options-section">
|
||||
<h4>Anonymize database</h4>
|
||||
|
||||
<button id="find-and-fix-consistency-issues-button" class="btn">Find and fix consistency issues</button><br/><br/>
|
||||
<h5>Full anonymization</h5>
|
||||
|
||||
<h4>Anonymize database</h4>
|
||||
<p>This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata)
|
||||
for sharing online for debugging purposes without fear of leaking your personal data.</p>
|
||||
|
||||
<h5>Full anonymization</h5>
|
||||
<button id="anonymize-full-button" class="btn">Save fully anonymized database</button>
|
||||
|
||||
<p>This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata)
|
||||
for sharing online for debugging purposes without fear of leaking your personal data.</p>
|
||||
<h5>Light anonymization</h5>
|
||||
|
||||
<button id="anonymize-full-button" class="btn">Save fully anonymized database</button><br/><br/>
|
||||
<p>This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.</p>
|
||||
|
||||
<h5>Light anonymization</h5>
|
||||
<p>You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.</p>
|
||||
|
||||
<p>This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.</p>
|
||||
<button id="anonymize-light-button" class="btn">Save lightly anonymized database</button>
|
||||
</div>
|
||||
|
||||
<p>You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.</p>
|
||||
<div class="options-section">
|
||||
<h4>Vacuum database</h4>
|
||||
|
||||
<button id="anonymize-light-button" class="btn">Save lightly anonymized database</button><br/><br/>
|
||||
<p>This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.</p>
|
||||
|
||||
<h4>Vacuum database</h4>
|
||||
|
||||
<p>This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.</p>
|
||||
|
||||
<button id="vacuum-database-button" class="btn">Vacuum database</button>`;
|
||||
<button id="vacuum-database-button" class="btn">Vacuum database</button>
|
||||
</div>`;
|
||||
|
||||
export default class AdvancedOptions extends OptionsTab {
|
||||
get tabTitle() { return "Advanced" }
|
||||
|
||||
@ -31,7 +31,15 @@ const FONT_FAMILIES = [
|
||||
const TPL = `
|
||||
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
|
||||
|
||||
<form>
|
||||
<style>
|
||||
.options-section .row {
|
||||
/* rows otherwise overflow horizontally and force a scrollbar */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="options-section">
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="zoom-factor-select">Zoom factor (desktop build only)</label>
|
||||
@ -50,7 +58,9 @@ const TPL = `
|
||||
</div>
|
||||
|
||||
<p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Theme</h4>
|
||||
|
||||
<div class="form-group row">
|
||||
@ -64,100 +74,102 @@ const TPL = `
|
||||
<input type="checkbox" class="form-control" id="override-theme-fonts">
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
|
||||
<div id="overriden-font-settings">
|
||||
<h4>Fonts</h4>
|
||||
<div id="overriden-font-settings" class="options-section">
|
||||
<h4>Fonts</h4>
|
||||
|
||||
<h5>Main font</h5>
|
||||
<h5>Main font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="main-font-family">Font family</label>
|
||||
<select class="form-control" id="main-font-family"></select>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="main-font-family">Font family</label>
|
||||
<select class="form-control" id="main-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="main-font-size">Size</label>
|
||||
<div class="col-6">
|
||||
<label for="main-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Note tree font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="tree-font-family">Font family</label>
|
||||
<select class="form-control" id="tree-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="tree-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Note detail font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="detail-font-family">Font family</label>
|
||||
<select class="form-control" id="detail-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="detail-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Monospace (code) font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-family">Font family</label>
|
||||
<select class="form-control" id="monospace-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="monospace-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Note that tree and detail font sizing is relative to the main font size setting.</p>
|
||||
|
||||
<p>Not all listed fonts may be available on your system.</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To apply font changes, click on
|
||||
<button class="btn btn-micro reload-frontend-button">reload frontend</button>
|
||||
</p>
|
||||
<h5>Note tree font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="tree-font-family">Font family</label>
|
||||
<select class="form-control" id="tree-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="tree-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Note detail font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="detail-font-family">Font family</label>
|
||||
<select class="form-control" id="detail-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="detail-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Monospace (code) font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-family">Font family</label>
|
||||
<select class="form-control" id="monospace-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="monospace-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Note that tree and detail font sizing is relative to the main font size setting.</p>
|
||||
|
||||
<p>Not all listed fonts may be available on your system.</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To apply font changes, click on
|
||||
<button class="btn btn-micro reload-frontend-button">reload frontend</button>
|
||||
</p>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Content width</h4>
|
||||
|
||||
<p>Trilium by default limits max content width to improve readability for maximized screens on wide screens.</p>
|
||||
@ -173,7 +185,8 @@ const TPL = `
|
||||
To content width changes, click on
|
||||
<button class="btn btn-micro reload-frontend-button">reload frontend</button>
|
||||
</p>
|
||||
</form>`;
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class AppearanceOptions extends OptionsTab {
|
||||
get tabTitle() { return "Appearance" }
|
||||
|
||||
@ -3,34 +3,36 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<h4>Automatic backup</h4>
|
||||
<div class="options-section">
|
||||
<h4>Automatic backup</h4>
|
||||
|
||||
<p>Trilium can back up the database automatically:</p>
|
||||
<p>Trilium can back up the database automatically:</p>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="daily-backup-enabled">
|
||||
<label class="custom-control-label" for="daily-backup-enabled">Enable daily backup</label>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="daily-backup-enabled">
|
||||
<label class="custom-control-label" for="daily-backup-enabled">Enable daily backup</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="weekly-backup-enabled">
|
||||
<label class="custom-control-label" for="weekly-backup-enabled">Enable weekly backup</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="monthly-backup-enabled">
|
||||
<label class="custom-control-label" for="monthly-backup-enabled">Enable monthly backup</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.</p>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="weekly-backup-enabled">
|
||||
<label class="custom-control-label" for="weekly-backup-enabled">Enable weekly backup</label>
|
||||
<div class="options-section">
|
||||
<h4>Backup now</h4>
|
||||
|
||||
<button id="backup-database-button" class="btn">Backup database now</button>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="monthly-backup-enabled">
|
||||
<label class="custom-control-label" for="monthly-backup-enabled">Enable monthly backup</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h4>Backup now</h4>
|
||||
|
||||
<button id="backup-database-button" class="btn">Backup database now</button><br/><br/>
|
||||
`;
|
||||
|
||||
export default class BackupOptions extends OptionsTab {
|
||||
|
||||
@ -5,25 +5,23 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Use vim keybindings in code notes (no ex mode)</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
|
||||
<label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Wrap lines in code notes</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="line-wrap-enabled">
|
||||
<label class="custom-control-label" for="line-wrap-enabled">Enable Line Wrap (change might need a frontend reload to take effect)</label>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Automatic readonly size</h4>
|
||||
|
||||
<p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
|
||||
@ -34,7 +32,7 @@ const TPL = `
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Available MIME types in the dropdown</h4>
|
||||
|
||||
<ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>
|
||||
|
||||
@ -4,30 +4,30 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<h4>ETAPI</h4>
|
||||
<div class="options-section">
|
||||
<h4>ETAPI</h4>
|
||||
|
||||
<p>ETAPI is a REST API used to access Trilium instance programmatically, without UI. <br/>
|
||||
See more details on <a href="https://github.com/zadam/trilium/wiki/ETAPI">wiki</a> and <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">ETAPI OpenAPI spec</a>.</p>
|
||||
<p>ETAPI is a REST API used to access Trilium instance programmatically, without UI. <br/>
|
||||
See more details on <a href="https://github.com/zadam/trilium/wiki/ETAPI">wiki</a> and <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">ETAPI OpenAPI spec</a>.</p>
|
||||
|
||||
<button type="button" class="btn btn-sm" id="create-etapi-token">Create new ETAPI token</button>
|
||||
<button type="button" class="btn btn-sm" id="create-etapi-token">Create new ETAPI token</button>
|
||||
|
||||
<br/><br/>
|
||||
<h5>Existing tokens</h5>
|
||||
|
||||
<h5>Existing tokens</h5>
|
||||
<div id="no-tokens-yet">There are no tokens yet. Click on the button above to create one.</div>
|
||||
|
||||
<div id="no-tokens-yet">There are no tokens yet. Click on the button above to create one.</div>
|
||||
|
||||
<div style="overflow: auto; height: 500px;">
|
||||
<table id="tokens-table" class="table table-stripped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token name</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div style="overflow: auto; height: 500px;">
|
||||
<table id="tokens-table" class="table table-stripped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token name</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Images</h4>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
@ -3,17 +3,16 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Tray</h4>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="tray-enabled">
|
||||
<label class="custom-control-label" for="tray-enabled">Enable tray (Trilium needs to be restarted for this change to take effect)</label>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Note erasure timeout</h4>
|
||||
|
||||
<p>Deleted notes (and attributes, revisions...) are at first only marked as deleted and it is possible to recover them
|
||||
@ -29,11 +28,9 @@ const TPL = `
|
||||
<p>You can also trigger erasing manually:</p>
|
||||
|
||||
<button id="erase-deleted-notes-now-button" class="btn">Erase deleted notes now</button>
|
||||
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Note revisions snapshot interval</h4>
|
||||
|
||||
<p>Note revision snapshot time interval is time in seconds after which a new note revision will be created for the note. See <a href="https://github.com/zadam/trilium/wiki/Note-revisions" class="external">wiki</a> for more info.</p>
|
||||
@ -44,7 +41,7 @@ const TPL = `
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Network connections</h4>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
@ -4,7 +4,7 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4 id="password-heading"></h4>
|
||||
|
||||
<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
|
||||
@ -33,9 +33,7 @@ const TPL = `
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Protected session timeout</h4>
|
||||
|
||||
<p>Protected session timeout is a time period after which the protected session is wiped from
|
||||
|
||||
@ -4,34 +4,35 @@ import dialogService from "../../dialog.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<h4>Keyboard shortcuts</h4>
|
||||
<div class="options-section">
|
||||
<h4>Keyboard shortcuts</h4>
|
||||
|
||||
<p>Multiple shortcuts for the same action can be separated by comma.</p>
|
||||
<p>Multiple shortcuts for the same action can be separated by comma.</p>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="keyboard-shortcut-filter" placeholder="Type text to filter shortcuts...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="keyboard-shortcut-filter" placeholder="Type text to filter shortcuts...">
|
||||
</div>
|
||||
|
||||
<div style="overflow: auto; height: 500px;">
|
||||
<table id="keyboard-shortcut-table" cellpadding="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action name</th>
|
||||
<th>Shortcuts</th>
|
||||
<th>Default shortcuts</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="overflow: auto; height: 500px;">
|
||||
<table id="keyboard-shortcut-table" cellpadding="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action name</th>
|
||||
<th>Shortcuts</th>
|
||||
<th>Default shortcuts</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<button class="btn btn-primary" id="options-keyboard-shortcuts-reload-app">Reload app to apply changes</button>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<button class="btn btn-primary" id="options-keyboard-shortcuts-reload-app">Reload app to apply changes</button>
|
||||
|
||||
<button class="btn" id="options-keyboard-shortcuts-set-all-to-default">Set all shortcuts to the default</button>
|
||||
</div>
|
||||
`;
|
||||
<button class="btn" id="options-keyboard-shortcuts-set-all-to-default">Set all shortcuts to the default</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
let globActions;
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ const TPL = `
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Spell check</h4>
|
||||
|
||||
<p>These options apply only for desktop builds, browsers will use their own native spell check. App restart is required after change.</p>
|
||||
|
||||
@ -3,40 +3,42 @@ import toastService from "../../../services/toast.js";
|
||||
import OptionsTab from "./options_tab.js";
|
||||
|
||||
const TPL = `
|
||||
<h4 style="margin-top: 0px;">Sync configuration</h4>
|
||||
<div class="options-section">
|
||||
<h4 style="margin-top: 0px;">Sync configuration</h4>
|
||||
|
||||
<form id="sync-setup-form">
|
||||
<div class="form-group">
|
||||
<label for="sync-server-host">Server instance address</label>
|
||||
<input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
|
||||
</div>
|
||||
<form id="sync-setup-form">
|
||||
<div class="form-group">
|
||||
<label for="sync-server-host">Server instance address</label>
|
||||
<input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sync-server-timeout">Sync timeout (milliseconds)</label>
|
||||
<input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number" style="text-align: left;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sync-server-timeout">Sync timeout (milliseconds)</label>
|
||||
<input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number" style="text-align: left;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sync-proxy">Sync proxy server (optional)</label>
|
||||
<input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
|
||||
<div class="form-group">
|
||||
<label for="sync-proxy">Sync proxy server (optional)</label>
|
||||
<input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
|
||||
|
||||
<p><strong>Note:</strong> If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)</p>
|
||||
</div>
|
||||
<p><strong>Note:</strong> If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<button class="btn btn-primary">Save</button>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<button class="btn btn-primary">Save</button>
|
||||
|
||||
<button class="btn" type="button" data-help-page="Synchronization">Help</button>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn" type="button" data-help-page="Synchronization">Help</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="options-section">
|
||||
<h4>Sync test</h4>
|
||||
|
||||
<h4>Sync test</h4>
|
||||
<p>This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.</p>
|
||||
|
||||
<p>This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.</p>
|
||||
|
||||
<button id="test-sync-button" class="btn">Test sync</button>`;
|
||||
<button id="test-sync-button" class="btn">Test sync</button>
|
||||
</div>`;
|
||||
|
||||
export default class SyncOptions extends OptionsTab {
|
||||
get tabTitle() { return "Sync" }
|
||||
|
||||
@ -5,16 +5,16 @@ import OptionsTab from "./options_tab.js";
|
||||
const TPL = `
|
||||
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
|
||||
|
||||
<form>
|
||||
<div class="options-section">
|
||||
<h4>Heading style</h4>
|
||||
<select class="form-control" id="heading-style">
|
||||
<option value="plain">Plain</option>
|
||||
<option value="underline">Underline</option>
|
||||
<option value="markdown">Markdown-style</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Table of contents</h4>
|
||||
|
||||
Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
|
||||
@ -24,8 +24,9 @@ const TPL = `
|
||||
</div>
|
||||
|
||||
<p>You can also use this option to effectively disable TOC by setting a very high number.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="options-section">
|
||||
<h4>Automatic readonly size</h4>
|
||||
|
||||
<p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
|
||||
@ -34,8 +35,7 @@ const TPL = `
|
||||
<label for="auto-readonly-size-text">Automatic readonly size (text notes)</label>
|
||||
<input class="form-control" id="auto-readonly-size-text" type="number" min="0" style="text-align: right;">
|
||||
</div>
|
||||
</div>
|
||||
</form>`;
|
||||
</div>`;
|
||||
|
||||
export default class TextNotesOptions extends OptionsTab {
|
||||
get tabTitle() { return "Text notes" }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user