From 5f6a10ef225598c8bcdf344f71c2bcbb9fb71513 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 7 Dec 2022 15:37:53 +0100 Subject: [PATCH] options widget work --- .../app/components/root_command_executor.js | 4 +- src/public/app/layouts/desktop_layout.js | 27 -- src/public/app/widgets/buttons/global_menu.js | 5 - src/public/app/widgets/dialogs/options.js | 90 ----- .../app/widgets/dialogs/options/appearance.js | 325 ------------------ .../app/widgets/dialogs/options/code_notes.js | 97 ------ .../app/widgets/dialogs/options/text_notes.js | 80 ----- .../widgets/type_widgets/content_widget.js | 22 +- .../options/advanced.js | 30 +- .../type_widgets/options/appearance/fonts.js | 2 +- .../options/appearance/max_content_width.js | 2 +- .../options/appearance/native_title_bar.js | 2 +- .../type_widgets/options/appearance/theme.js | 2 +- .../options/appearance/zoom_factor.js | 2 +- .../options/backup.js | 24 +- .../code_notes/code_auto_read_only_size.js | 26 ++ .../options/code_notes/code_mime_types.js | 49 +++ .../options/code_notes/vim_key_bindings.js | 23 ++ .../options/code_notes/wrap_lines.js | 23 ++ .../options/etapi.js | 14 +- .../options/images.js | 30 +- .../{appearance => }/options_widget.js | 10 +- .../options/other.js | 30 +- .../options/password.js | 46 +-- .../options/shortcuts.js | 26 +- .../options/spellcheck.js | 18 +- .../{dialogs => type_widgets}/options/sync.js | 28 +- .../options/text_notes/heading_style.js | 40 +++ .../options/text_notes/table_of_contents.js | 27 ++ .../text_notes/text_auto_read_only_size.js | 26 ++ 30 files changed, 370 insertions(+), 760 deletions(-) delete mode 100644 src/public/app/widgets/dialogs/options.js delete mode 100644 src/public/app/widgets/dialogs/options/appearance.js delete mode 100644 src/public/app/widgets/dialogs/options/code_notes.js delete mode 100644 src/public/app/widgets/dialogs/options/text_notes.js rename src/public/app/widgets/{dialogs => type_widgets}/options/advanced.js (80%) rename src/public/app/widgets/{dialogs => type_widgets}/options/backup.js (65%) create mode 100644 src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js create mode 100644 src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js create mode 100644 src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js create mode 100644 src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js rename src/public/app/widgets/{dialogs => type_widgets}/options/etapi.js (87%) rename src/public/app/widgets/{dialogs => type_widgets}/options/images.js (62%) rename src/public/app/widgets/type_widgets/options/{appearance => }/options_widget.js (82%) rename src/public/app/widgets/{dialogs => type_widgets}/options/other.js (68%) rename src/public/app/widgets/{dialogs => type_widgets}/options/password.js (68%) rename src/public/app/widgets/{dialogs => type_widgets}/options/shortcuts.js (84%) rename src/public/app/widgets/{dialogs => type_widgets}/options/spellcheck.js (66%) rename src/public/app/widgets/{dialogs => type_widgets}/options/sync.js (66%) create mode 100644 src/public/app/widgets/type_widgets/options/text_notes/heading_style.js create mode 100644 src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js create mode 100644 src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js diff --git a/src/public/app/components/root_command_executor.js b/src/public/app/components/root_command_executor.js index 3fb219c3c..57bda8a91 100644 --- a/src/public/app/components/root_command_executor.js +++ b/src/public/app/components/root_command_executor.js @@ -84,7 +84,7 @@ export default class RootCommandExecutor extends Component { await appContext.tabManager.openContextWithNote('hidden', true, null, 'hidden'); } - async showOptionsInHiddenCommand() { - await appContext.tabManager.openContextWithNote('opt_root', true, null, 'opt_root'); + async showOptionsCommand() { + await appContext.tabManager.openContextWithNote('options', true, null, 'opt_root') } } diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index c04aa42d7..341f43a96 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -68,7 +68,6 @@ import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js"; import InfoDialog from "../widgets/dialogs/info.js"; import ConfirmDialog from "../widgets/dialogs/confirm.js"; import PromptDialog from "../widgets/dialogs/prompt.js"; -import OptionsDialog from "../widgets/dialogs/options.js"; import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js"; import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js"; import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_button.js"; @@ -77,18 +76,6 @@ import NoteRevisionsButton from "../widgets/buttons/note_revisions_button.js"; import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js"; import ApiLogWidget from "../widgets/api_log.js"; import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js"; -import AppearanceOptions from "../widgets/dialogs/options/appearance.js"; -import KeyboardShortcutsOptions from "../widgets/dialogs/options/shortcuts.js"; -import TextNotesOptions from "../widgets/dialogs/options/text_notes.js"; -import CodeNotesOptions from "../widgets/dialogs/options/code_notes.js"; -import ImageOptions from "../widgets/dialogs/options/images.js"; -import SpellcheckOptions from "../widgets/dialogs/options/spellcheck.js"; -import PasswordOptions from "../widgets/dialogs/options/password.js"; -import EtapiOptions from "../widgets/dialogs/options/etapi.js"; -import BackupOptions from "../widgets/dialogs/options/backup.js"; -import SyncOptions from "../widgets/dialogs/options/sync.js"; -import OtherOptions from "../widgets/dialogs/options/other.js"; -import AdvancedOptions from "../widgets/dialogs/options/advanced.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -219,19 +206,5 @@ export default class DesktopLayout { .child(new InfoDialog()) .child(new ConfirmDialog()) .child(new PromptDialog()); - // .child(new OptionsDialog() - // .child(new AppearanceOptions()) - // .child(new KeyboardShortcutsOptions()) - // .child(new TextNotesOptions()) - // .child(new CodeNotesOptions()) - // .child(new ImageOptions()) - // .child(new SpellcheckOptions()) - // .child(new PasswordOptions()) - // .child(new EtapiOptions()) - // .child(new BackupOptions()) - // .child(new SyncOptions()) - // .child(new OtherOptions()) - // .child(new AdvancedOptions()) - // ); } } diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js index a62caa951..bde21b82a 100644 --- a/src/public/app/widgets/buttons/global_menu.js +++ b/src/public/app/widgets/buttons/global_menu.js @@ -87,11 +87,6 @@ const TPL = ` Options - -
  • - - Options in hidden -
  • diff --git a/src/public/app/widgets/dialogs/options.js b/src/public/app/widgets/dialogs/options.js deleted file mode 100644 index 93d338693..000000000 --- a/src/public/app/widgets/dialogs/options.js +++ /dev/null @@ -1,90 +0,0 @@ -"use strict"; - -import server from '../../services/server.js'; -import utils from "../../services/utils.js"; -import BasicWidget from "../basic_widget.js"; - -const TPL = ` -`; - - -export default class OptionsDialog extends BasicWidget { - doRender() { - this.$widget = $(TPL); - this.$navTabs = this.$widget.find(".nav-tabs"); - this.$tabContent = this.$widget.find(".tab-content"); - - for (const child of this.children) { - this.$navTabs.append( - $('
  • ') - .append( - $('') - .attr("href", '#options-' + child.constructor.name) - .text(child.tabTitle) - ) - ); - - this.$tabContent.append( - $('
    ') - .attr("id", "options-" + child.constructor.name) - ); - } - } - - async showOptionsEvent({openTab}) { - const optionPromise = server.get('options'); - - for (const child of this.children) { - child.lazyRender(); - - this.$widget.find("#options-" + child.constructor.name) - .empty() - .append(child.$widget); - } - - const options = await optionPromise; - - for (const child of this.children) { - if (child.optionsLoaded) { - child.optionsLoaded(options) - } - } - - await utils.openDialog(this.$widget); - - if (!openTab) { - openTab = "AppearanceOptions"; - } - - this.$widget.find(`.nav-link[href='#options-${openTab}']`).trigger("click"); - } -} diff --git a/src/public/app/widgets/dialogs/options/appearance.js b/src/public/app/widgets/dialogs/options/appearance.js deleted file mode 100644 index bb7a0110c..000000000 --- a/src/public/app/widgets/dialogs/options/appearance.js +++ /dev/null @@ -1,325 +0,0 @@ -import server from "../../../services/server.js"; -import utils from "../../../services/utils.js"; -import appContext from "../../../components/app_context.js"; -import OptionsWidget from "../../type_widgets/options/appearance/options_widget.js"; - -const FONT_FAMILIES = [ - { value: "theme", label: "Theme defined" }, - { value: "serif", label: "Serif" }, - { value: "sans-serif", label: "Sans Serif" }, - { value: "monospace", label: "Monospace" }, - { value: "Arial", label: "Arial" }, - { value: "Verdana", label: "Verdana" }, - { value: "Helvetica", label: "Helvetica" }, - { value: "Tahoma", label: "Tahoma" }, - { value: "Trebuchet MS", label: "Trebuchet MS" }, - { value: "Times New Roman", label: "Times New Roman" }, - { value: "Georgia", label: "Georgia" }, - { value: "Garamond", label: "Garamond" }, - { value: "Courier New", label: "Courier New" }, - { value: "Brush Script MT", label: "Brush Script MT" }, - { value: "Impact", label: "Impact" }, - { value: "American Typewriter", label: "American Typewriter" }, - { value: "Andalé Mono", label: "Andalé Mono" }, - { value: "Lucida Console", label: "Lucida Console" }, - { value: "Monaco", label: "Monaco" }, - { value: "Bradley Hand", label: "Bradley Hand" }, - { value: "Luminari", label: "Luminari" }, - { value: "Comic Sans MS", label: "Comic Sans MS" }, -]; - -const TPL = ` -

    Settings on this options tab are saved automatically after each change.

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

    Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.

    -
    - -
    -

    Theme

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

    Fonts

    - -
    Main font
    - -
    -
    - - -
    - -
    - - -
    - -
    - % -
    -
    -
    -
    - -
    Note tree font
    - -
    -
    - - -
    - -
    - - -
    - -
    - % -
    -
    -
    -
    - -
    Note detail font
    - -
    -
    - - -
    - -
    - - -
    - -
    - % -
    -
    -
    -
    - -
    Monospace (code) font
    - -
    -
    - - -
    - -
    - - -
    - -
    - % -
    -
    -
    -
    - -

    Note that tree and detail font sizing is relative to the main font size setting.

    - -

    Not all listed fonts may be available on your system.

    -
    - -

    - To apply font changes, click on - -

    - -
    -

    Content width

    - -

    Trilium by default limits max content width to improve readability for maximized screens on wide screens.

    - -
    -
    - - -
    -
    - -

    - To content width changes, click on - -

    -
    -`; - -export default class AppearanceOptions extends OptionsWidget { - get tabTitle() { return "Appearance" } - - lazyRender() { - this.$widget = $(TPL); - - this.$zoomFactorSelect = this.$widget.find("#zoom-factor-select"); - this.$nativeTitleBarSelect = this.$widget.find("#native-title-bar-select"); - - this.$themeSelect = this.$widget.find("#theme-select"); - this.$overrideThemeFonts = this.$widget.find("#override-theme-fonts"); - - this.$overridenFontSettings = this.$widget.find("#overriden-font-settings"); - - this.$mainFontSize = this.$widget.find("#main-font-size"); - this.$mainFontFamily = this.$widget.find("#main-font-family"); - - this.$treeFontSize = this.$widget.find("#tree-font-size"); - this.$treeFontFamily = this.$widget.find("#tree-font-family"); - - this.$detailFontSize = this.$widget.find("#detail-font-size"); - this.$detailFontFamily = this.$widget.find("#detail-font-family"); - - this.$monospaceFontSize = this.$widget.find("#monospace-font-size"); - this.$monospaceFontFamily = this.$widget.find("#monospace-font-family"); - - this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options")); - - this.$body = this.$widget.find("body"); - - this.$themeSelect.on('change', async () => { - const newTheme = this.$themeSelect.val(); - - await server.put('options/theme/' + newTheme); - - utils.reloadFrontendApp("theme change"); - }); - - this.$overrideThemeFonts.on('change', async () => { - this.updateCheckboxOption('overrideThemeFonts', this.$overrideThemeFonts); - - this.$overridenFontSettings.toggle(this.$overrideThemeFonts.is(":checked")); - }); - - this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); }); - - this.$nativeTitleBarSelect.on('change', () => { - const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false'; - - this.updateOption('nativeTitleBarVisible', nativeTitleBarVisible); - }); - - const optionsToSave = [ - 'mainFontFamily', 'mainFontSize', - 'treeFontFamily', 'treeFontSize', - 'detailFontFamily', 'detailFontSize', - 'monospaceFontFamily', 'monospaceFontSize' - ]; - - for (const optionName of optionsToSave) { - this['$' + optionName].on('change', () => - this.updateOption(optionName, this['$' + optionName].val())); - } - - this.$maxContentWidth = this.$widget.find("#max-content-width"); - - this.$maxContentWidth.on('change', async () => - this.updateOption('maxContentWidth', this.$maxContentWidth.val())) - } - - toggleBodyClass(prefix, value) { - for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes - if (clazz.startsWith(prefix)) { - this.$body.removeClass(clazz); - } - } - - this.$body.addClass(prefix + value); - } - - async optionsLoaded(options) { - if (utils.isElectron()) { - this.$zoomFactorSelect.val(options.zoomFactor); - } - else { - this.$zoomFactorSelect.prop('disabled', true); - } - - this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide'); - - const themes = [ - { val: 'light', title: 'Light' }, - { val: 'dark', title: 'Dark' } - ].concat(await server.get('options/user-themes')); - - this.$themeSelect.empty(); - - for (const theme of themes) { - this.$themeSelect.append($("
  • ") - .append($('') - .attr("id", id) - .attr("data-mime-type", mimeType.mime) - .prop("checked", mimeType.enabled)) - .on('change', () => this.save()) - .append("   ") - .append($('