moved options to new tabs Images/Spellcheck

This commit is contained in:
zadam 2022-11-18 21:38:36 +01:00
parent ae0c5a0c09
commit 1a95e459eb
5 changed files with 227 additions and 191 deletions

View File

@ -40,6 +40,12 @@ const TPL = `
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#options-code-notes">Code notes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#options-images">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#options-spellcheck">Spellcheck</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#options-password">Password</a>
</li>
@ -65,6 +71,8 @@ const TPL = `
<div id="options-shortcuts" class="tab-pane"></div>
<div id="options-text-notes" class="tab-pane"></div>
<div id="options-code-notes" class="tab-pane"></div>
<div id="options-images" class="tab-pane"></div>
<div id="options-spellcheck" class="tab-pane"></div>
<div id="options-password" class="tab-pane"></div>
<div id="options-etapi" class="tab-pane"></div>
<div id="options-backup" class="tab-pane"></div>
@ -94,6 +102,8 @@ export default class OptionsDialog extends BasicWidget {
import('./options/shortcuts.js'),
import('./options/text_notes.js'),
import('./options/code_notes.js'),
import('./options/images.js'),
import('./options/spellcheck.js'),
import('./options/password.js'),
import('./options/etapi.js'),
import('./options/backup.js'),

View File

@ -0,0 +1,95 @@
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
const TPL = `
<div>
<h4>Images</h4>
<div class="form-group">
<input id="download-images-automatically" type="checkbox" name="download-images-automatically">
<label for="download-images-automatically">Download images automatically for offline use.</label>
<p>(pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)</p>
</div>
<div class="form-group">
<input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
<label for="image-compresion-enabled">Enable image compression</label>
</div>
<div id="image-compression-enabled-wraper">
<div class="form-group">
<label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
<input class="form-control" id="image-max-width-height" type="number" min="1">
</div>
<div class="form-group">
<label for="image-jpeg-quality">JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
<input class="form-control" id="image-jpeg-quality" min="10" max="100" type="number">
</div>
</div>
</div>
`;
export default class ImageOptions {
constructor() {
$("#options-images").html(TPL);
this.$imageMaxWidthHeight = $("#image-max-width-height");
this.$imageJpegQuality = $("#image-jpeg-quality");
this.$imageMaxWidthHeight.on('change', () => {
const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$imageJpegQuality.on('change', () => {
const opts = { 'imageJpegQuality': this.$imageJpegQuality.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$downloadImagesAutomatically = $("#download-images-automatically");
this.$downloadImagesAutomatically.on("change", () => {
const isChecked = this.$downloadImagesAutomatically.prop("checked");
const opts = { 'downloadImagesAutomatically': isChecked ? 'true' : 'false' };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
});
this.$enableImageCompression = $("#image-compresion-enabled");
this.$imageCompressionWrapper = $("#image-compression-enabled-wraper");
this.setImageCompression = (isChecked) => {
if (isChecked) {
this.$imageCompressionWrapper.removeClass("disabled-field");
} else {
this.$imageCompressionWrapper.addClass("disabled-field");
}
};
this.$enableImageCompression.on("change", () => {
const isChecked = this.$enableImageCompression.prop("checked");
const opts = { 'compressImages': isChecked ? 'true' : 'false' };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
this.setImageCompression(isChecked);
});
}
optionsLoaded(options) {
this.$imageMaxWidthHeight.val(options['imageMaxWidthHeight']);
this.$imageJpegQuality.val(options['imageJpegQuality']);
const downloadImagesAutomatically = options['downloadImagesAutomatically'] === 'true';
this.$downloadImagesAutomatically.prop('checked', downloadImagesAutomatically);
const compressImages = options['compressImages'] === 'true';
this.$enableImageCompression.prop('checked', compressImages);
this.setImageCompression(compressImages);
}
}

View File

@ -3,62 +3,6 @@ import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
const TPL = `
<style>
.disabled-field {
opacity: 0.5;
pointer-events: none;
}
</style>
<div>
<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>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="spell-check-enabled">
<label class="custom-control-label" for="spell-check-enabled">Enable spellcheck</label>
</div>
<br/>
<div class="form-group">
<label for="spell-check-language-code">Language code(s)</label>
<input type="text" class="form-control" id="spell-check-language-code" placeholder="for example &quot;en-US&quot;, &quot;de-AT&quot;">
</div>
<p>Multiple languages can be separated by comma, e.g. <code>en-US, de-DE, cs</code>. Changes to the spell check options will take effect after application restart.</p>
<p><strong>Available language codes: </strong> <span id="available-language-codes"></span></p>
</div>
<div>
<h4>Images</h4>
<div class="form-group">
<input id="download-images-automatically" type="checkbox" name="download-images-automatically">
<label for="download-images-automatically">Download images automatically for offline use.</label>
<p>(pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)</p>
</div>
<div class="form-group">
<input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
<label for="image-compresion-enabled">Enable image compression</label>
</div>
<div id="image-compression-enabled-wraper">
<div class="form-group">
<label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
<input class="form-control" id="image-max-width-height" type="number" min="1">
</div>
<div class="form-group">
<label for="image-jpeg-quality">JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
<input class="form-control" id="image-jpeg-quality" min="10" max="100" type="number">
</div>
</div>
</div>
<div>
<h4>Note erasure timeout</h4>
@ -79,18 +23,6 @@ const TPL = `
<br/><br/>
</div>
<div>
<h4>Protected session timeout</h4>
<p>Protected session timeout is a time period after which the protected session is wiped from
the browser's memory. This is measured from the last interaction with protected notes. See <a href="https://github.com/zadam/trilium/wiki/Protected-notes" class="external">wiki</a> for more info.</p>
<div class="form-group">
<label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
<input class="form-control" id="protected-session-timeout-in-seconds" type="number" min="60">
</div>
</div>
<div>
<h4>Note revisions snapshot interval</h4>
@ -117,31 +49,6 @@ export default class OtherOptions {
constructor() {
$("#options-other").html(TPL);
this.$spellCheckEnabled = $("#spell-check-enabled");
this.$spellCheckLanguageCode = $("#spell-check-language-code");
this.$spellCheckEnabled.on('change', () => {
const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$spellCheckLanguageCode.on('change', () => {
const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$availableLanguageCodes = $("#available-language-codes");
if (utils.isElectron()) {
const { webContents } = utils.dynamicRequire('@electron/remote').getCurrentWindow();
this.$availableLanguageCodes.text(webContents.session.availableSpellCheckerLanguages.join(', '));
}
this.$eraseEntitiesAfterTimeInSeconds = $("#erase-entities-after-time-in-seconds");
this.$eraseEntitiesAfterTimeInSeconds.on('change', () => {
@ -161,18 +68,6 @@ export default class OtherOptions {
});
});
this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
this.$protectedSessionTimeout.on('change', () => {
const protectedSessionTimeout = this.$protectedSessionTimeout.val();
server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
toastService.showMessage("Options changed have been saved.");
});
return false;
});
this.$noteRevisionsTimeInterval = $("#note-revision-snapshot-time-interval-in-seconds");
this.$noteRevisionsTimeInterval.on('change', () => {
@ -182,52 +77,6 @@ export default class OtherOptions {
return false;
});
this.$imageMaxWidthHeight = $("#image-max-width-height");
this.$imageJpegQuality = $("#image-jpeg-quality");
this.$imageMaxWidthHeight.on('change', () => {
const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$imageJpegQuality.on('change', () => {
const opts = { 'imageJpegQuality': this.$imageJpegQuality.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$downloadImagesAutomatically = $("#download-images-automatically");
this.$downloadImagesAutomatically.on("change", () => {
const isChecked = this.$downloadImagesAutomatically.prop("checked");
const opts = { 'downloadImagesAutomatically': isChecked ? 'true' : 'false' };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
});
this.$enableImageCompression = $("#image-compresion-enabled");
this.$imageCompressionWrapper = $("#image-compression-enabled-wraper");
this.setImageCompression = (isChecked) => {
if (isChecked) {
this.$imageCompressionWrapper.removeClass("disabled-field");
} else {
this.$imageCompressionWrapper.addClass("disabled-field");
}
};
this.$enableImageCompression.on("change", () => {
const isChecked = this.$enableImageCompression.prop("checked");
const opts = { 'compressImages': isChecked ? 'true' : 'false' };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
this.setImageCompression(isChecked);
});
this.$checkForUpdates = $("#check-for-updates");
this.$checkForUpdates.on("change", () => {
const isChecked = this.$checkForUpdates.prop("checked");
@ -238,26 +87,10 @@ export default class OtherOptions {
}
optionsLoaded(options) {
this.$spellCheckEnabled.prop("checked", options['spellCheckEnabled'] === 'true');
this.$spellCheckLanguageCode.val(options['spellCheckLanguageCode']);
this.$eraseEntitiesAfterTimeInSeconds.val(options['eraseEntitiesAfterTimeInSeconds']);
this.$protectedSessionTimeout.val(options['protectedSessionTimeout']);
this.$noteRevisionsTimeInterval.val(options['noteRevisionSnapshotTimeInterval']);
this.$imageMaxWidthHeight.val(options['imageMaxWidthHeight']);
this.$imageJpegQuality.val(options['imageJpegQuality']);
const downloadImagesAutomatically = options['downloadImagesAutomatically'] === 'true';
this.$downloadImagesAutomatically.prop('checked', downloadImagesAutomatically);
const compressImages = options['compressImages'] === 'true';
this.$enableImageCompression.prop('checked', compressImages);
this.setImageCompression(compressImages);
const checkForUpdates = options['checkForUpdates'] === 'true';
this.$checkForUpdates.prop('checked', checkForUpdates);
}
}

View File

@ -3,39 +3,55 @@ import protectedSessionHolder from "../../../services/protected_session_holder.j
import toastService from "../../../services/toast.js";
const TPL = `
<h3 id="password-heading"></h3>
<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
Please take care to remember your new password. Password is used for logging into the web interface and
to encrypt protected notes. If you forget your password, then all your protected notes are forever lost.
In case you did forget your password, <a id="reset-password-button" href="javascript:">click here to reset it</a>.
<div>
<h4 id="password-heading"></h4>
<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
Please take care to remember your new password. Password is used for logging into the web interface and
to encrypt protected notes. If you forget your password, then all your protected notes are forever lost.
In case you did forget your password, <a id="reset-password-button" href="javascript:">click here to reset it</a>.
</div>
<form id="change-password-form">
<div class="form-group" id="old-password-form-group">
<label for="old-password">Old password</label>
<input class="form-control" id="old-password" type="password">
</div>
<div class="form-group">
<label for="new-password1">New password</label>
<input class="form-control" id="new-password1" type="password">
</div>
<div class="form-group">
<label for="new-password2">New password Confirmation</label>
<input class="form-control" id="new-password2" type="password">
</div>
<button class="btn btn-primary" id="save-password-button">Change password</button>
</form>
</div>
<form id="change-password-form">
<div class="form-group" id="old-password-form-group">
<label for="old-password">Old password</label>
<input class="form-control" id="old-password" type="password">
</div>
<br/>
<div>
<h4>Protected session timeout</h4>
<p>Protected session timeout is a time period after which the protected session is wiped from
the browser's memory. This is measured from the last interaction with protected notes. See <a href="https://github.com/zadam/trilium/wiki/Protected-notes" class="external">wiki</a> for more info.</p>
<div class="form-group">
<label for="new-password1">New password</label>
<input class="form-control" id="new-password1" type="password">
<label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
<input class="form-control" id="protected-session-timeout-in-seconds" type="number" min="60">
</div>
</div>`;
<div class="form-group">
<label for="new-password2">New password Confirmation</label>
<input class="form-control" id="new-password2" type="password">
</div>
<button class="btn btn-primary" id="save-password-button">Change password</button>
</form>`;
export default class ChangePasswordOptions {
export default class PasswordOptions {
constructor() {
$("#options-password").html(TPL);
this.$passwordHeading = $("#password-heading");
this.$form = $("#change-password-form");
this.$changePasswordForm = $("#change-password-form");
this.$oldPassword = $("#old-password");
this.$newPassword1 = $("#new-password1");
this.$newPassword2 = $("#new-password2");
@ -53,7 +69,19 @@ export default class ChangePasswordOptions {
}
});
this.$form.on('submit', () => this.save());
this.$changePasswordForm.on('submit', () => this.save());
this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
this.$protectedSessionTimeout.on('change', () => {
const protectedSessionTimeout = this.$protectedSessionTimeout.val();
server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
toastService.showMessage("Options changed have been saved.");
});
return false;
});
}
optionsLoaded(options) {
@ -62,6 +90,7 @@ export default class ChangePasswordOptions {
$("#old-password-form-group").toggle(isPasswordSet);
this.$passwordHeading.text(isPasswordSet ? 'Change password' : 'Set password');
this.$savePasswordButton.text(isPasswordSet ? 'Change password' : 'Set password');
this.$protectedSessionTimeout.val(options['protectedSessionTimeout']);
}
save() {

View File

@ -0,0 +1,69 @@
import utils from "../../../services/utils.js";
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
const TPL = `
<style>
.disabled-field {
opacity: 0.5;
pointer-events: none;
}
</style>
<div>
<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>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="spell-check-enabled">
<label class="custom-control-label" for="spell-check-enabled">Enable spellcheck</label>
</div>
<br/>
<div class="form-group">
<label for="spell-check-language-code">Language code(s)</label>
<input type="text" class="form-control" id="spell-check-language-code" placeholder="for example &quot;en-US&quot;, &quot;de-AT&quot;">
</div>
<p>Multiple languages can be separated by comma, e.g. <code>en-US, de-DE, cs</code>. Changes to the spell check options will take effect after application restart.</p>
<p><strong>Available language codes: </strong> <span id="available-language-codes"></span></p>
</div>`;
export default class SpellcheckOptions {
constructor() {
$("#options-spellcheck").html(TPL);
this.$spellCheckEnabled = $("#spell-check-enabled");
this.$spellCheckLanguageCode = $("#spell-check-language-code");
this.$spellCheckEnabled.on('change', () => {
const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$spellCheckLanguageCode.on('change', () => {
const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
return false;
});
this.$availableLanguageCodes = $("#available-language-codes");
if (utils.isElectron()) {
const { webContents } = utils.dynamicRequire('@electron/remote').getCurrentWindow();
this.$availableLanguageCodes.text(webContents.session.availableSpellCheckerLanguages.join(', '));
}
}
optionsLoaded(options) {
this.$spellCheckEnabled.prop("checked", options['spellCheckEnabled'] === 'true');
this.$spellCheckLanguageCode.val(options['spellCheckLanguageCode']);
}
}