mirror of
				https://github.com/TriliumNext/Notes.git
				synced 2025-11-04 07:01:31 +08:00 
			
		
		
		
	moved options to new tabs Images/Spellcheck
This commit is contained in:
		
							parent
							
								
									ae0c5a0c09
								
							
						
					
					
						commit
						1a95e459eb
					
				@ -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'),
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										95
									
								
								src/public/app/widgets/dialogs/options/images.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										95
									
								
								src/public/app/widgets/dialogs/options/images.js
									
									
									
									
									
										Normal 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);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@ -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 "en-US", "de-AT"">
 | 
			
		||||
    </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);
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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() {
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										69
									
								
								src/public/app/widgets/dialogs/options/spellcheck.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										69
									
								
								src/public/app/widgets/dialogs/options/spellcheck.js
									
									
									
									
									
										Normal 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 "en-US", "de-AT"">
 | 
			
		||||
    </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']);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user