From 1a95e459eb67c45ccc596fcb7385e58384167f1b Mon Sep 17 00:00:00 2001 From: zadam Date: Fri, 18 Nov 2022 21:38:36 +0100 Subject: [PATCH] moved options to new tabs Images/Spellcheck --- src/public/app/widgets/dialogs/options.js | 10 ++ .../app/widgets/dialogs/options/images.js | 95 ++++++++++ .../app/widgets/dialogs/options/other.js | 167 ------------------ .../app/widgets/dialogs/options/password.js | 77 +++++--- .../app/widgets/dialogs/options/spellcheck.js | 69 ++++++++ 5 files changed, 227 insertions(+), 191 deletions(-) create mode 100644 src/public/app/widgets/dialogs/options/images.js create mode 100644 src/public/app/widgets/dialogs/options/spellcheck.js diff --git a/src/public/app/widgets/dialogs/options.js b/src/public/app/widgets/dialogs/options.js index 288bae91d..5d7ff1a90 100644 --- a/src/public/app/widgets/dialogs/options.js +++ b/src/public/app/widgets/dialogs/options.js @@ -40,6 +40,12 @@ const TPL = `
  • Code notes
    • +
  • + Images +
    • +
  • + Spellcheck +
  • Password
    • @@ -65,6 +71,8 @@ const TPL = `
    +
    +
    @@ -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'), diff --git a/src/public/app/widgets/dialogs/options/images.js b/src/public/app/widgets/dialogs/options/images.js new file mode 100644 index 000000000..699d6c06d --- /dev/null +++ b/src/public/app/widgets/dialogs/options/images.js @@ -0,0 +1,95 @@ +import server from "../../../services/server.js"; +import toastService from "../../../services/toast.js"; + +const TPL = ` +
    +

    Images

    + +
    + + +

    (pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)

    +
    + +
    + + +
    + +
    +
    + + +
    + +
    + + +
    +
    +
    +`; + +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); + } +} diff --git a/src/public/app/widgets/dialogs/options/other.js b/src/public/app/widgets/dialogs/options/other.js index a7452543b..6f4a8919d 100644 --- a/src/public/app/widgets/dialogs/options/other.js +++ b/src/public/app/widgets/dialogs/options/other.js @@ -3,62 +3,6 @@ import server from "../../../services/server.js"; import toastService from "../../../services/toast.js"; const TPL = ` - - -
    -

    Spell check

    - -

    These options apply only for desktop builds, browsers will use their own native spell check. App restart is required after change.

    - -
    - - -
    - -
    - -
    - - -
    - -

    Multiple languages can be separated by comma, e.g. en-US, de-DE, cs. Changes to the spell check options will take effect after application restart.

    - -

    Available language codes:

    -
    - -
    -

    Images

    - -
    - - -

    (pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)

    -
    - -
    - - -
    - -
    -
    - - -
    - -
    - - -
    -
    -
    -

    Note erasure timeout

    @@ -79,18 +23,6 @@ const TPL = `

    -
    -

    Protected session timeout

    - -

    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 wiki for more info.

    - -
    - - -
    -
    -

    Note revisions snapshot interval

    @@ -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); - } } diff --git a/src/public/app/widgets/dialogs/options/password.js b/src/public/app/widgets/dialogs/options/password.js index 708e04d9f..31816344b 100644 --- a/src/public/app/widgets/dialogs/options/password.js +++ b/src/public/app/widgets/dialogs/options/password.js @@ -3,39 +3,55 @@ import protectedSessionHolder from "../../../services/protected_session_holder.j import toastService from "../../../services/toast.js"; const TPL = ` -

    - -