From 0a67af4f46ee3b0681c3d9d2bd5eb6e5e5945dcc Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 20 Nov 2022 20:33:50 +0100 Subject: [PATCH] refactoring option templates to use "options-section" class --- src/public/app/widgets/dialogs/options.js | 14 ++ .../app/widgets/dialogs/options/advanced.js | 80 ++++---- .../app/widgets/dialogs/options/appearance.js | 191 ++++++++++-------- .../app/widgets/dialogs/options/backup.js | 54 ++--- .../app/widgets/dialogs/options/code_notes.js | 12 +- .../app/widgets/dialogs/options/etapi.js | 48 ++--- .../app/widgets/dialogs/options/images.js | 2 +- .../app/widgets/dialogs/options/other.js | 15 +- .../app/widgets/dialogs/options/password.js | 8 +- .../app/widgets/dialogs/options/shortcuts.js | 57 +++--- .../app/widgets/dialogs/options/spellcheck.js | 4 +- .../app/widgets/dialogs/options/sync.js | 70 +++---- .../app/widgets/dialogs/options/text_notes.js | 14 +- 13 files changed, 299 insertions(+), 270 deletions(-) diff --git a/src/public/app/widgets/dialogs/options.js b/src/public/app/widgets/dialogs/options.js index 93d338693..4a3e82eb3 100644 --- a/src/public/app/widgets/dialogs/options.js +++ b/src/public/app/widgets/dialogs/options.js @@ -15,6 +15,20 @@ const TPL = ` overflow-y: auto; max-height: 85vh; } + + .options-dialog .options-section:first-of-type h4 { + margin-top: 0; + } + + .options-dialog .options-section h4 { + margin-top: 15px; + margin-bottom: 15px; + } + + .options-dialog .options-section h5 { + margin-top: 10px; + margin-bottom: 10px; + }
diff --git a/src/public/app/widgets/dialogs/options/advanced.js b/src/public/app/widgets/dialogs/options/advanced.js index 0599044d8..84c224fe8 100644 --- a/src/public/app/widgets/dialogs/options/advanced.js +++ b/src/public/app/widgets/dialogs/options/advanced.js @@ -3,53 +3,57 @@ import toastService from "../../../services/toast.js"; import OptionsTab from "./options_tab.js"; const TPL = ` -

Sync

- - -
-
- - - -
-
- -

Database integrity check

- -

This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.

- -

- -

Consistency checks

- -

- -

Anonymize database

- -
Full anonymization
- -

This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata) - for sharing online for debugging purposes without fear of leaking your personal data.

- -

+
+

Sync

+ -
Light anonymization
+ +
-

This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.

+
+

Database integrity check

+ +

This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.

+ + +
-

You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.

+
+

Consistency checks

+ + +
-

+
+

Anonymize database

+ +
Full anonymization
+ +

This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata) + for sharing online for debugging purposes without fear of leaking your personal data.

+ + -

Vacuum database

+
Light anonymization
+ +

This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.

+ +

You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.

+ + +
-

This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.

- -`; +
+

Vacuum database

+ +

This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.

+ + +
`; export default class AdvancedOptions extends OptionsTab { get tabTitle() { return "Advanced" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/appearance.js b/src/public/app/widgets/dialogs/options/appearance.js index 2e610a687..71234d56a 100644 --- a/src/public/app/widgets/dialogs/options/appearance.js +++ b/src/public/app/widgets/dialogs/options/appearance.js @@ -31,17 +31,25 @@ const FONT_FAMILIES = [ const TPL = `

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

-
+ + +
- +
- +
+
-
-

Fonts

- -
Main font
- -
-
- - -
- -
- +
+

Fonts

-
- -
- % -
+
Main font
+ +
+
+ + +
+ +
+ + +
+ +
+ %
+
+ +
Note tree 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 - -

+
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.

- +
@@ -173,11 +185,12 @@ const TPL = ` To content width changes, click on

-`; +
+`; export default class AppearanceOptions extends OptionsTab { get tabTitle() { return "Appearance" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/backup.js b/src/public/app/widgets/dialogs/options/backup.js index fb9dabd7a..13a2af246 100644 --- a/src/public/app/widgets/dialogs/options/backup.js +++ b/src/public/app/widgets/dialogs/options/backup.js @@ -3,39 +3,41 @@ import toastService from "../../../services/toast.js"; import OptionsTab from "./options_tab.js"; const TPL = ` -

Automatic backup

- -

Trilium can back up the database automatically:

- -
- - +
+

Automatic backup

+ +

Trilium can back up the database automatically:

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +

It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.

-
- - +
+

Backup now

+ +
- -
- - -
- -
- -

It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.

- -
- -

Backup now

- -

`; export default class BackupOptions extends OptionsTab { get tabTitle() { return "Backup" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/code_notes.js b/src/public/app/widgets/dialogs/options/code_notes.js index e894aa0e7..97c8b86c0 100644 --- a/src/public/app/widgets/dialogs/options/code_notes.js +++ b/src/public/app/widgets/dialogs/options/code_notes.js @@ -5,25 +5,23 @@ import toastService from "../../../services/toast.js"; import OptionsTab from "./options_tab.js"; const TPL = ` -
+

Use vim keybindings in code notes (no ex mode)

-
-
+

Wrap lines in code notes

-
-
+

Automatic readonly size

Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).

@@ -34,7 +32,7 @@ const TPL = `
-
+

Available MIME types in the dropdown

    @@ -42,7 +40,7 @@ const TPL = ` export default class CodeNotesOptions extends OptionsTab { get tabTitle() { return "Code notes" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/etapi.js b/src/public/app/widgets/dialogs/options/etapi.js index 43e58b9a2..7bbaf4dc4 100644 --- a/src/public/app/widgets/dialogs/options/etapi.js +++ b/src/public/app/widgets/dialogs/options/etapi.js @@ -4,30 +4,30 @@ import toastService from "../../../services/toast.js"; import OptionsTab from "./options_tab.js"; const TPL = ` -

    ETAPI

    +
    +

    ETAPI

    + +

    ETAPI is a REST API used to access Trilium instance programmatically, without UI.
    + See more details on wiki and ETAPI OpenAPI spec.

    + + -

    ETAPI is a REST API used to access Trilium instance programmatically, without UI.
    - See more details on wiki and ETAPI OpenAPI spec.

    - - - -

    - -
    Existing tokens
    - -
    There are no tokens yet. Click on the button above to create one.
    - -
    - - - - - - - - - -
    Token nameCreatedActions
    +
    Existing tokens
    + +
    There are no tokens yet. Click on the button above to create one.
    + +
    + + + + + + + + + +
    Token nameCreatedActions
    +
    -
    +

    Spell check

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

    @@ -35,7 +35,7 @@ const TPL = ` export default class SpellcheckOptions extends OptionsTab { get tabTitle() { return "Spellcheck" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/sync.js b/src/public/app/widgets/dialogs/options/sync.js index 6413b940e..9a7bdba42 100644 --- a/src/public/app/widgets/dialogs/options/sync.js +++ b/src/public/app/widgets/dialogs/options/sync.js @@ -3,44 +3,46 @@ import toastService from "../../../services/toast.js"; import OptionsTab from "./options_tab.js"; const TPL = ` -

    Sync configuration

    +
    +

    Sync configuration

    + +
    +
    + + +
    + +
    + + +
    + +
    + + + +

    Note: If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)

    +
    + +
    + + + +
    +
    +
    -
    -
    - - -
    - -
    - - -
    - -
    - - - -

    Note: If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)

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

    Sync test

    - -

    This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.

    - -`; +
    +

    Sync test

    + +

    This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.

    + + +
    `; export default class SyncOptions extends OptionsTab { get tabTitle() { return "Sync" } - + lazyRender() { this.$widget = $(TPL); diff --git a/src/public/app/widgets/dialogs/options/text_notes.js b/src/public/app/widgets/dialogs/options/text_notes.js index 015360e4f..8d90fbca1 100644 --- a/src/public/app/widgets/dialogs/options/text_notes.js +++ b/src/public/app/widgets/dialogs/options/text_notes.js @@ -5,16 +5,16 @@ import OptionsTab from "./options_tab.js"; const TPL = `

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

    -
    +

    Heading style

    +
    -
    - +

    Table of contents

    Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number: @@ -24,8 +24,9 @@ const TPL = `

    You can also use this option to effectively disable TOC by setting a very high number.

    +
    -
    +

    Automatic readonly size

    Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).

    @@ -34,12 +35,11 @@ const TPL = `
    -
    -`; +
    `; export default class TextNotesOptions extends OptionsTab { get tabTitle() { return "Text notes" } - + lazyRender() { this.$widget = $(TPL);