options UI for image quality

src/public/javascripts/dialogs/options/other.js

@@ -7,9 +7,6 @@ export default class ProtectedSessionOptions {
         this.$spellCheckEnabled = $("#spell-check-enabled");
         this.$spellCheckLanguageCode = $("#spell-check-language-code");
 
-        this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
-        this.$noteRevisionsTimeInterval = $("#note-revision-snapshot-time-interval-in-seconds");
-
         this.$spellCheckEnabled.change(() => {
             const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
@@ -24,6 +21,8 @@ export default class ProtectedSessionOptions {
             return false;
         });
 
+        this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
+
         this.$protectedSessionTimeout.change(() => {
             const protectedSessionTimeout = this.$protectedSessionTimeout.val();
 
@@ -36,12 +35,31 @@ export default class ProtectedSessionOptions {
             return false;
         });
 
+        this.$noteRevisionsTimeInterval = $("#note-revision-snapshot-time-interval-in-seconds");
+
         this.$noteRevisionsTimeInterval.change(() => {
             const opts = { 'noteRevisionSnapshotTimeInterval': this.$noteRevisionsTimeInterval.val() };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
             return false;
         });
+
+        this.$imageMaxWidthHeight = $("#image-max-width-height");
+        this.$imageJpegQuality = $("#image-jpeg-quality");
+
+        this.$imageMaxWidthHeight.change(() => {
+            const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
+            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+
+            return false;
+        });
+
+        this.$imageJpegQuality.change(() => {
+            const opts = { 'imageJpegQuality': this.$imageJpegQuality.val() };
+            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+
+            return false;
+        });
     }
 
     optionsLoaded(options) {
@@ -50,5 +68,8 @@ export default class ProtectedSessionOptions {
 
         this.$protectedSessionTimeout.val(options['protectedSessionTimeout']);
         this.$noteRevisionsTimeInterval.val(options['noteRevisionSnapshotTimeInterval']);
+
+        this.$imageMaxWidthHeight.val(options['imageMaxWidthHeight']);
+        this.$imageJpegQuality.val(options['imageJpegQuality']);
     }
 }

src/routes/api/options.js

@@ -34,7 +34,9 @@ const ALLOWED_OPTIONS = [
     'calendarWidget',
     'codeNotesMimeTypes',
     'spellCheckEnabled',
-    'spellCheckLanguageCode'
+    'spellCheckLanguageCode',
+    'imageMaxWidthHeight',
+    'imageJpegQuality'
 ];
 
 async function getOptions() {

src/views/dialogs/options/other.ejs

@@ -19,6 +19,20 @@
         <p>Changes to the spell check options will take effect after application restart.</p>
     </div>
 
+    <div>
+        <h4>Image compression</h4>
+
+        <div class="form-group">
+            <label for="image-max-width-height">Max width / height of an image in pixels (if image will be resized if it exceeds this setting).</label>
+            <input class="form-control" id="image-max-width-height" type="number">
+        </div>
+
+        <div class="form-group">
+            <label for="image-jpeg-quality">JPEG quality (0 - worst quality, 100 best quality)</label>
+            <input class="form-control" id="image-jpeg-quality" min="0" max="100" type="number">
+        </div>
+    </div>
+
     <div>
         <h4>Protected session timeout</h4>