Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 02:16:05 +01:00
Code Issues Packages Projects Releases Activity

option tabs refactored

Browse Source
This commit is contained in:
zadam
2022-11-20 23:20:42 +01:00
parent 0a67af4f46
commit bcb3a707f4
11 changed files with 115 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/public/app/widgets/dialogs/options/appearance.js
View File

@@ -227,11 +227,9 @@ export default class AppearanceOptions extends OptionsTab {
});
this.$overrideThemeFonts.on('change', async () => {
const isOverriden = this.$overrideThemeFonts.is(":checked");
this.updateCheckboxOption('overrideThemeFonts', this.$overrideThemeFonts);
await server.put('options/overrideThemeFonts/' + isOverriden.toString());
this.$overridenFontSettings.toggle(isOverriden);
this.$overridenFontSettings.toggle(this.$overrideThemeFonts.is(":checked"));
});
this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
@@ -239,7 +237,7 @@ export default class AppearanceOptions extends OptionsTab {
this.$nativeTitleBarSelect.on('change', () => {
const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false';
server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
this.updateOption('nativeTitleBarVisible', nativeTitleBarVisible);
});
const optionsToSave = [
@@ -250,16 +248,14 @@ export default class AppearanceOptions extends OptionsTab {
];
for (const optionName of optionsToSave) {
this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`));
this['$' + optionName].on('change', () =>
this.updateOption(optionName, this['$' + optionName].val()));
}
this.$maxContentWidth = this.$widget.find("#max-content-width");
this.$maxContentWidth.on('change', async () => {
const maxContentWidth = this.$maxContentWidth.val();
await server.put('options/maxContentWidth/' + maxContentWidth);
})
this.$maxContentWidth.on('change', async () =>
this.updateOption('maxContentWidth', this.$maxContentWidth.val()))
}
toggleBodyClass(prefix, value) {
@@ -298,7 +294,7 @@ export default class AppearanceOptions extends OptionsTab {
this.$themeSelect.val(options.theme);
this.$overrideThemeFonts.prop('checked', options.overrideThemeFonts === 'true');
this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
this.$overridenFontSettings.toggle(options.overrideThemeFonts === 'true');
this.$mainFontSize.val(options.mainFontSize);

30
src/public/app/widgets/dialogs/options/backup.js
View File

@@ -53,31 +53,19 @@ export default class BackupOptions extends OptionsTab {
this.$weeklyBackupEnabled = this.$widget.find("#weekly-backup-enabled");
this.$monthlyBackupEnabled = this.$widget.find("#monthly-backup-enabled");
this.$dailyBackupEnabled.on('change', () => {
const opts = { 'dailyBackupEnabled': this.$dailyBackupEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
this.$dailyBackupEnabled.on('change', () =>
this.updateCheckboxOption('dailyBackupEnabled', this.$dailyBackupEnabled));
return false;
});
this.$weeklyBackupEnabled.on('change', () =>
this.updateCheckboxOption('weeklyBackupEnabled', this.$weeklyBackupEnabled));
this.$weeklyBackupEnabled.on('change', () => {
const opts = { 'weeklyBackupEnabled': this.$weeklyBackupEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$monthlyBackupEnabled.on('change', () => {
const opts = { 'monthlyBackupEnabled': this.$monthlyBackupEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$monthlyBackupEnabled.on('change', () =>
this.updateCheckboxOption('monthlyBackupEnabled', this.$monthlyBackupEnabled));
}
optionsLoaded(options) {
this.$dailyBackupEnabled.prop("checked", options['dailyBackupEnabled'] === 'true');
this.$weeklyBackupEnabled.prop("checked", options['weeklyBackupEnabled'] === 'true');
this.$monthlyBackupEnabled.prop("checked", options['monthlyBackupEnabled'] === 'true');
this.setCheckboxState(this.$dailyBackupEnabled, options.dailyBackupEnabled);
this.setCheckboxState(this.$weeklyBackupEnabled, options.weeklyBackupEnabled);
this.setCheckboxState(this.$monthlyBackupEnabled, options.monthlyBackupEnabled);
}
}

31
src/public/app/widgets/dialogs/options/code_notes.js
View File

@@ -45,34 +45,25 @@ export default class CodeNotesOptions extends OptionsTab {
this.$widget = $(TPL);
this.$vimKeymapEnabled = this.$widget.find("#vim-keymap-enabled");
this.$vimKeymapEnabled.on('change', () => {
const opts = { 'vimKeymapEnabled': this.$vimKeymapEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$vimKeymapEnabled.on('change', () =>
this.updateCheckboxOption('vimKeymapEnabled', this.$vimKeymapEnabled));
this.$codeLineWrapEnabled = this.$widget.find("#line-wrap-enabled");
this.$codeLineWrapEnabled.on('change', () => {
const opts = { 'codeLineWrapEnabled': this.$codeLineWrapEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$codeLineWrapEnabled.on('change', () =>
this.updateCheckboxOption('codeLineWrapEnabled', this.$codeLineWrapEnabled));
this.$mimeTypes = this.$widget.find("#options-mime-types");
this.$autoReadonlySizeCode = this.$widget.find("#auto-readonly-size-code");
this.$autoReadonlySizeCode.on('change', () => {
const opts = { 'autoReadonlySizeCode': this.$autoReadonlySizeCode.val() };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$autoReadonlySizeCode.on('change', () =>
this.updateOption('autoReadonlySizeCode', this.$autoReadonlySizeCode.val()));
}
async optionsLoaded(options) {
this.$mimeTypes.empty();
this.$vimKeymapEnabled.prop("checked", options['vimKeymapEnabled'] === 'true');
this.$codeLineWrapEnabled.prop("checked", options['codeLineWrapEnabled'] === 'true');
this.$autoReadonlySizeCode.val(options['autoReadonlySizeCode']);
this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
let idCtr = 1;
@@ -99,7 +90,7 @@ export default class CodeNotesOptions extends OptionsTab {
this.$mimeTypes.find("input:checked").each(
(i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
await options.save('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
await this.updateOption('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
mimeTypesService.loadMimeTypes();
}

55
src/public/app/widgets/dialogs/options/images.js
View File

@@ -1,6 +1,13 @@
import OptionsTab from "./options_tab.js";
const TPL = `
<style>
.options-section .disabled-field {
opacity: 0.5;
pointer-events: none;
}
</style>
<div class="options-section">
<h4>Images</h4>
@@ -38,49 +45,41 @@ export default class ImageOptions extends OptionsTab {
this.$imageMaxWidthHeight = this.$widget.find("#image-max-width-height");
this.$imageJpegQuality = this.$widget.find("#image-jpeg-quality");
this.$imageMaxWidthHeight.on('change', () => {
this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val());
});
this.$imageMaxWidthHeight.on('change', () =>
this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val()));
this.$imageJpegQuality.on('change', () => {
this.updateOption('imageJpegQuality', this.$imageJpegQuality.val());
});
this.$imageJpegQuality.on('change', () =>
this.updateOption('imageJpegQuality', this.$imageJpegQuality.val()));
this.$downloadImagesAutomatically = this.$widget.find("#download-images-automatically");
this.$downloadImagesAutomatically.on("change", () => {
const isChecked = this.$downloadImagesAutomatically.prop("checked");
this.updateOption('downloadImagesAutomatically', isChecked ? 'true' : 'false');
});
this.$downloadImagesAutomatically.on("change", () =>
this.updateCheckboxOption('downloadImagesAutomatically', this.$downloadImagesAutomatically));
this.$enableImageCompression = this.$widget.find("#image-compresion-enabled");
this.$imageCompressionWrapper = this.$widget.find("#image-compression-enabled-wraper");
this.$enableImageCompression.on("change", () => {
const isChecked = this.$enableImageCompression.prop("checked");
this.updateOption('compressImages', isChecked ? 'true' : 'false');
this.setImageCompression(isChecked);
this.updateCheckboxOption('compressImages', this.$enableImageCompression);
this.setImageCompression();
});
}
setImageCompression(isChecked) {
if (isChecked) {
optionsLoaded(options) {
this.$imageMaxWidthHeight.val(options.imageMaxWidthHeight);
this.$imageJpegQuality.val(options.imageJpegQuality);
this.setCheckboxState(this.$downloadImagesAutomatically, options.downloadImagesAutomatically);
this.setCheckboxState(this.$enableImageCompression, options.compressImages);
this.setImageCompression();
}
setImageCompression() {
if (this.$enableImageCompression.prop("checked")) {
this.$imageCompressionWrapper.removeClass("disabled-field");
} else {
this.$imageCompressionWrapper.addClass("disabled-field");
}
}
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);
}
}

23
src/public/app/widgets/dialogs/options/options_tab.js
View File

@@ -5,14 +5,33 @@ import toastService from "../../../services/toast.js";
export default class OptionsTab extends BasicWidget {
async updateOption(name, value) {
const opts = { [name]: value };
server.put('options', opts).then(() => {
await this.updateMultipleOptions(opts);
}
async updateMultipleOptions(opts) {
await server.put('options', opts);
this.showUpdateNotification();
}
showUpdateNotification() {
toastService.showPersistent({
id: "options-change-saved",
title: "Options status",
message: "Options change have been saved.",
icon: "slider",
closeAfter: 2000
})
});
}
async updateCheckboxOption(name, $checkbox) {
const isChecked = $checkbox.prop("checked");
return await this.updateOption(name, isChecked ? 'true' : 'false');
}
setCheckboxState($checkbox, optionValue) {
$checkbox.prop('checked', optionValue === 'true');
}
}

44
src/public/app/widgets/dialogs/options/other.js
View File

@@ -57,24 +57,11 @@ export default class OtherOptions extends OptionsTab {
this.$widget = $(TPL);
this.$trayEnabled = this.$widget.find("#tray-enabled");
this.$trayEnabled.on('change', () => {
const opts = { 'disableTray': !this.$trayEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$trayEnabled.on('change', () =>
this.updateOption('disableTray', !this.$trayEnabled.is(":checked") ? "true" : "false"));
this.$eraseEntitiesAfterTimeInSeconds = this.$widget.find("#erase-entities-after-time-in-seconds");
this.$eraseEntitiesAfterTimeInSeconds.on('change', () => {
const eraseEntitiesAfterTimeInSeconds = this.$eraseEntitiesAfterTimeInSeconds.val();
server.put('options', { 'eraseEntitiesAfterTimeInSeconds': eraseEntitiesAfterTimeInSeconds }).then(() => {
toastService.showMessage("Options change have been saved.");
});
return false;
});
this.$eraseEntitiesAfterTimeInSeconds.on('change', () => this.updateOption('eraseEntitiesAfterTimeInSeconds', this.$eraseEntitiesAfterTimeInSeconds.val()));
this.$eraseDeletedNotesButton = this.$widget.find("#erase-deleted-notes-now-button");
this.$eraseDeletedNotesButton.on('click', () => {
@@ -85,29 +72,20 @@ export default class OtherOptions extends OptionsTab {
this.$noteRevisionsTimeInterval = this.$widget.find("#note-revision-snapshot-time-interval-in-seconds");
this.$noteRevisionsTimeInterval.on('change', () => {
const opts = { 'noteRevisionSnapshotTimeInterval': this.$noteRevisionsTimeInterval.val() };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$noteRevisionsTimeInterval.on('change', () =>
this.updateOption('noteRevisionSnapshotTimeInterval', this.$noteRevisionsTimeInterval.val()));
this.$checkForUpdates = this.$widget.find("#check-for-updates");
this.$checkForUpdates.on("change", () => {
const isChecked = this.$checkForUpdates.prop("checked");
const opts = { 'checkForUpdates': isChecked ? 'true' : 'false' };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
});
this.$checkForUpdates.on("change", () =>
this.updateCheckboxOption('checkForUpdates', this.$checkForUpdates));
}
optionsLoaded(options) {
this.$trayEnabled.prop("checked", options['disableTray'] !== 'true');
this.$trayEnabled.prop("checked", options.disableTray !== 'true');
this.$eraseEntitiesAfterTimeInSeconds.val(options['eraseEntitiesAfterTimeInSeconds']);
this.$noteRevisionsTimeInterval.val(options['noteRevisionSnapshotTimeInterval']);
this.$eraseEntitiesAfterTimeInSeconds.val(options.eraseEntitiesAfterTimeInSeconds);
this.$noteRevisionsTimeInterval.val(options.noteRevisionSnapshotTimeInterval);
const checkForUpdates = options['checkForUpdates'] === 'true';
this.$checkForUpdates.prop('checked', checkForUpdates);
this.setCheckboxState(this.$checkForUpdates, options.checkForUpdates);
}
}

14
src/public/app/widgets/dialogs/options/password.js
View File

@@ -73,16 +73,8 @@ export default class PasswordOptions extends OptionsTab {
this.$changePasswordForm.on('submit', () => this.save());
this.$protectedSessionTimeout = this.$widget.find("#protected-session-timeout-in-seconds");
this.$protectedSessionTimeout.on('change', () => {
const protectedSessionTimeout = this.$protectedSessionTimeout.val();
server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
toastService.showMessage("Options change have been saved.");
});
return false;
});
this.$protectedSessionTimeout.on('change', () =>
this.updateOption('protectedSessionTimeout', this.$protectedSessionTimeout.val()));
}
optionsLoaded(options) {
@@ -91,7 +83,7 @@ export default class PasswordOptions extends OptionsTab {
this.$widget.find("#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']);
this.$protectedSessionTimeout.val(options.protectedSessionTimeout);
}
save() {

5
src/public/app/widgets/dialogs/options/shortcuts.js
View File

@@ -85,10 +85,9 @@ export default class KeyboardShortcutsOptions extends OptionsTab {
.map(shortcut => shortcut.replace("+Comma", "+,"))
.filter(shortcut => !!shortcut);
const opts = {};
opts['keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1)] = JSON.stringify(shortcuts);
const optionName = 'keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1);
server.put('options', opts);
this.updateOption(optionName, JSON.stringify(shortcuts));
});
this.$widget.find("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {

29
src/public/app/widgets/dialogs/options/spellcheck.js
View File

@@ -1,16 +1,7 @@
import utils from "../../../services/utils.js";
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
import OptionsTab from "./options_tab.js";
const TPL = `
<style>
.disabled-field {
opacity: 0.5;
pointer-events: none;
}
</style>
<div class="options-section">
<h4>Spell check</h4>
@@ -42,19 +33,11 @@ export default class SpellcheckOptions extends OptionsTab {
this.$spellCheckEnabled = this.$widget.find("#spell-check-enabled");
this.$spellCheckLanguageCode = this.$widget.find("#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 change have been saved."));
this.$spellCheckEnabled.on('change', () =>
this.updateCheckboxOption('spellCheckEnabled', this.$spellCheckEnabled));
return false;
});
this.$spellCheckLanguageCode.on('change', () => {
const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$spellCheckLanguageCode.on('change', () =>
this.updateOption('spellCheckLanguageCode', this.$spellCheckLanguageCode.val()));
this.$availableLanguageCodes = this.$widget.find("#available-language-codes");
@@ -66,7 +49,7 @@ export default class SpellcheckOptions extends OptionsTab {
}
optionsLoaded(options) {
this.$spellCheckEnabled.prop("checked", options['spellCheckEnabled'] === 'true');
this.$spellCheckLanguageCode.val(options['spellCheckLanguageCode']);
this.setCheckboxState(this.$spellCheckEnabled, options.spellCheckEnabled);
this.$spellCheckLanguageCode.val(options.spellCheckLanguageCode);
}
}

12
src/public/app/widgets/dialogs/options/sync.js
View File

@@ -67,19 +67,17 @@ export default class SyncOptions extends OptionsTab {
}
optionsLoaded(options) {
this.$syncServerHost.val(options['syncServerHost']);
this.$syncServerTimeout.val(options['syncServerTimeout']);
this.$syncProxy.val(options['syncProxy']);
this.$syncServerHost.val(options.syncServerHost);
this.$syncServerTimeout.val(options.syncServerTimeout);
this.$syncProxy.val(options.syncProxy);
}
save() {
const opts = {
this.updateMultipleOptions({
'syncServerHost': this.$syncServerHost.val(),
'syncServerTimeout': this.$syncServerTimeout.val(),
'syncProxy': this.$syncProxy.val()
};
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
});
return false;
}

21
src/public/app/widgets/dialogs/options/text_notes.js
View File

@@ -42,8 +42,7 @@ export default class TextNotesOptions extends OptionsTab {
lazyRender() {
this.$widget = $(TPL);
this.$body = this.$widget.find("body");
this.$body = $("body");
this.$headingStyle = this.$widget.find("#heading-style");
this.$headingStyle.on('change', () => {
@@ -51,24 +50,16 @@ export default class TextNotesOptions extends OptionsTab {
this.toggleBodyClass("heading-style-", newHeadingStyle);
server.put('options/headingStyle/' + newHeadingStyle);
this.updateOption('headingStyle', newHeadingStyle);
});
this.$minTocHeadings = this.$widget.find("#min-toc-headings");
this.$minTocHeadings.on('change', () => {
const minTocHeadings = this.$minTocHeadings.val();
server.put('options/minTocHeadings/' + minTocHeadings);
});
this.$minTocHeadings.on('change', () =>
this.updateOption('minTocHeadings', this.$minTocHeadings.val()));
this.$autoReadonlySizeText = this.$widget.find("#auto-readonly-size-text");
this.$autoReadonlySizeText.on('change', () => {
const opts = { 'autoReadonlySizeText': this.$autoReadonlySizeText.val() };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
this.$autoReadonlySizeText.on('change', () =>
this.updateOption('autoReadonlySizeText', this.$autoReadonlySizeText.val()));
}
toggleBodyClass(prefix, value) {