diff --git a/e2e/i18n.spec.ts b/e2e/i18n.spec.ts index 1f711b060..21fd1880b 100644 --- a/e2e/i18n.spec.ts +++ b/e2e/i18n.spec.ts @@ -26,7 +26,7 @@ test("Displays translations in Settings", async ({ page, context }) => { await app.goto(); await app.closeAllTabs(); await app.goToSettings(); - await app.noteTree.getByText("Appearance").click(); + await app.noteTree.getByText("Language & Region").click(); await expect(app.currentNoteSplit).toContainText("Localization"); await expect(app.currentNoteSplit).toContainText("Language"); @@ -38,16 +38,16 @@ test("User can change language from settings", async ({ page, context }) => { await app.closeAllTabs(); await app.goToSettings(); - await app.noteTree.getByText("Appearance").click(); + await app.noteTree.getByText("Language & Region").click(); // Check that the default value (English) is set. - await expect(app.currentNoteSplit).toContainText("Theme"); + await expect(app.currentNoteSplit).toContainText("First day of the week"); const languageCombobox = app.currentNoteSplit.getByRole("combobox").first(); await expect(languageCombobox).toHaveValue("en"); // Select Chinese and ensure the translation is set. await languageCombobox.selectOption("cn"); - await expect(app.currentNoteSplit).toContainText("主题", { timeout: 15000 }); + await expect(app.currentNoteSplit).toContainText("一周的第一天", { timeout: 15000 }); await expect(languageCombobox).toHaveValue("cn"); // Select English again. diff --git a/src/public/app/widgets/type_widgets/ckeditor/config.ts b/src/public/app/widgets/type_widgets/ckeditor/config.ts index 93d912893..0a51fc2fa 100644 --- a/src/public/app/widgets/type_widgets/ckeditor/config.ts +++ b/src/public/app/widgets/type_widgets/ckeditor/config.ts @@ -105,7 +105,7 @@ export function buildConfig() { } function buildStyleDefinitions() { - const element = "blockquote"; + const element = "p"; return [ { name: "Note", diff --git a/src/public/app/widgets/type_widgets/content_widget.ts b/src/public/app/widgets/type_widgets/content_widget.ts index 7cf7fb123..5bdc85093 100644 --- a/src/public/app/widgets/type_widgets/content_widget.ts +++ b/src/public/app/widgets/type_widgets/content_widget.ts @@ -8,8 +8,7 @@ import HeadingStyleOptions from "./options/text_notes/heading_style.js"; import TableOfContentsOptions from "./options/text_notes/table_of_contents.js"; import HighlightsListOptions from "./options/text_notes/highlights_list.js"; import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js"; -import VimKeyBindingsOptions from "./options/code_notes/vim_key_bindings.js"; -import WrapLinesOptions from "./options/code_notes/wrap_lines.js"; +import CodeEditorOptions from "./options/code_notes/code_editor.js"; import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js"; import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js"; import ImageOptions from "./options/images/images.js"; @@ -33,7 +32,7 @@ import DatabaseAnonymizationOptions from "./options/advanced/database_anonymizat import BackendLogWidget from "./content/backend_log.js"; import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js"; import RibbonOptions from "./options/appearance/ribbon.js"; -import LocalizationOptions from "./options/appearance/i18n.js"; +import LocalizationOptions from "./options/i18n/i18n.js"; import CodeBlockOptions from "./options/appearance/code_block.js"; import EditorOptions from "./options/text_notes/editor.js"; import ShareSettingsOptions from "./options/other/share_settings.js"; @@ -63,16 +62,48 @@ const TPL = `
`; const CONTENT_WIDGETS: Record = { - _optionsAppearance: [LocalizationOptions, ThemeOptions, FontsOptions, CodeBlockOptions, ElectronIntegrationOptions, MaxContentWidthOptions, RibbonOptions], - _optionsShortcuts: [KeyboardShortcutsOptions], - _optionsTextNotes: [EditorOptions, HeadingStyleOptions, TableOfContentsOptions, HighlightsListOptions, TextAutoReadOnlySizeOptions], - _optionsCodeNotes: [VimKeyBindingsOptions, WrapLinesOptions, CodeAutoReadOnlySizeOptions, CodeMimeTypesOptions], - _optionsImages: [ImageOptions], - _optionsSpellcheck: [SpellcheckOptions], - _optionsPassword: [PasswordOptions, ProtectedSessionTimeoutOptions], - _optionsEtapi: [EtapiOptions], - _optionsBackup: [BackupOptions], - _optionsSync: [SyncOptions], + _optionsAppearance: [ + ThemeOptions, + FontsOptions, + CodeBlockOptions, + ElectronIntegrationOptions, + MaxContentWidthOptions, + RibbonOptions + ], + _optionsShortcuts: [ + KeyboardShortcutsOptions + ], + _optionsTextNotes: [ + EditorOptions, + HeadingStyleOptions, + TableOfContentsOptions, + HighlightsListOptions, + TextAutoReadOnlySizeOptions + ], + _optionsCodeNotes: [ + CodeEditorOptions, + CodeMimeTypesOptions, + CodeAutoReadOnlySizeOptions + ], + _optionsImages: [ + ImageOptions + ], + _optionsSpellcheck: [ + SpellcheckOptions + ], + _optionsPassword: [ + PasswordOptions, + ProtectedSessionTimeoutOptions + ], + _optionsEtapi: [ + EtapiOptions + ], + _optionsBackup: [ + BackupOptions + ], + _optionsSync: [ + SyncOptions + ], _optionsAi: [AiSettingsOptions], _optionsOther: [ SearchEngineOptions, @@ -81,13 +112,23 @@ const CONTENT_WIDGETS: Record = { AttachmentErasureTimeoutOptions, RevisionsSnapshotIntervalOptions, RevisionSnapshotsLimitOptions, - NetworkConnectionsOptions, HtmlImportTagsOptions, - ShareSettingsOptions + ShareSettingsOptions, + NetworkConnectionsOptions ], - _optionsLocalization: [ LanguageOptions ], - _optionsAdvanced: [DatabaseIntegrityCheckOptions, DatabaseAnonymizationOptions, AdvancedSyncOptions, VacuumDatabaseOptions], - _backendLog: [BackendLogWidget] + _optionsLocalization: [ + LocalizationOptions, + LanguageOptions + ], + _optionsAdvanced: [ + AdvancedSyncOptions, + DatabaseIntegrityCheckOptions, + DatabaseAnonymizationOptions, + VacuumDatabaseOptions + ], + _backendLog: [ + BackendLogWidget + ] }; export default class ContentWidgetTypeWidget extends TypeWidget { diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_editor.ts b/src/public/app/widgets/type_widgets/options/code_notes/code_editor.ts new file mode 100644 index 000000000..a97546916 --- /dev/null +++ b/src/public/app/widgets/type_widgets/options/code_notes/code_editor.ts @@ -0,0 +1,39 @@ +import OptionsWidget from "../options_widget.js"; +import { t } from "../../../../services/i18n.js"; +import type { OptionMap } from "../../../../../../services/options_interface.js"; + +const TPL = ` +
+

${t("code-editor-options.title")}

+ +

${t("vim_key_bindings.enable_vim_keybindings")}

+ + +

${t("wrap_lines.enable_line_wrap")}

+
`; + +export default class CodeEditorOptions extends OptionsWidget { + + private $vimKeymapEnabled!: JQuery; + private $codeLineWrapEnabled!: JQuery; + + doRender() { + this.$widget = $(TPL); + this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled"); + this.$vimKeymapEnabled.on("change", () => this.updateCheckboxOption("vimKeymapEnabled", this.$vimKeymapEnabled)); + + this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled"); + this.$codeLineWrapEnabled.on("change", () => this.updateCheckboxOption("codeLineWrapEnabled", this.$codeLineWrapEnabled)); + } + + async optionsLoaded(options: OptionMap) { + this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled); + this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled); + } +} diff --git a/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts b/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts deleted file mode 100644 index 167e6c073..000000000 --- a/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts +++ /dev/null @@ -1,27 +0,0 @@ -import OptionsWidget from "../options_widget.js"; -import { t } from "../../../../services/i18n.js"; -import type { OptionMap } from "../../../../../../services/options_interface.js"; - -const TPL = ` -
-

${t("vim_key_bindings.use_vim_keybindings_in_code_notes")}

- -
`; - -export default class VimKeyBindingsOptions extends OptionsWidget { - - private $vimKeymapEnabled!: JQuery; - - doRender() { - this.$widget = $(TPL); - this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled"); - this.$vimKeymapEnabled.on("change", () => this.updateCheckboxOption("vimKeymapEnabled", this.$vimKeymapEnabled)); - } - - async optionsLoaded(options: OptionMap) { - this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled); - } -} diff --git a/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts b/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts deleted file mode 100644 index 606d2e441..000000000 --- a/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts +++ /dev/null @@ -1,27 +0,0 @@ -import OptionsWidget from "../options_widget.js"; -import { t } from "../../../../services/i18n.js"; -import type { OptionMap } from "../../../../../../services/options_interface.js"; - -const TPL = ` -
-

${t("wrap_lines.wrap_lines_in_code_notes")}

- -
`; - -export default class WrapLinesOptions extends OptionsWidget { - - private $codeLineWrapEnabled!: JQuery; - - doRender() { - this.$widget = $(TPL); - this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled"); - this.$codeLineWrapEnabled.on("change", () => this.updateCheckboxOption("codeLineWrapEnabled", this.$codeLineWrapEnabled)); - } - - async optionsLoaded(options: OptionMap) { - this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled); - } -} diff --git a/src/public/app/widgets/type_widgets/options/etapi.ts b/src/public/app/widgets/type_widgets/options/etapi.ts index 747ca39f4..b2dd9c42d 100644 --- a/src/public/app/widgets/type_widgets/options/etapi.ts +++ b/src/public/app/widgets/type_widgets/options/etapi.ts @@ -18,7 +18,10 @@ const TPL = ` })}

- +
@@ -118,7 +121,7 @@ export default class EtapiOptions extends OptionsWidget { .append($("").text(formatDateTime(token.utcDateCreated))) .append( $("").append( - $(``).on("click", () => this.renameToken(token.etapiTokenId, token.name)), + $(``).on("click", () => this.renameToken(token.etapiTokenId, token.name)), $(``).on("click", () => this.deleteToken(token.etapiTokenId, token.name)) ) ) diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.ts b/src/public/app/widgets/type_widgets/options/i18n/i18n.ts similarity index 100% rename from src/public/app/widgets/type_widgets/options/appearance/i18n.ts rename to src/public/app/widgets/type_widgets/options/i18n/i18n.ts diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 398804817..2fd7c5f0a 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1688,6 +1688,7 @@ body.zen .title-row { height: unset !important; -webkit-app-region: drag; padding-left: env(titlebar-area-x); + padding-right: 2.5em; } body.zen .note-title-widget, @@ -1888,6 +1889,35 @@ footer.file-footer button { font-size: 1.1em; } .ck-content .admonition { +body.desktop .ck-content .admonition { + --accent-color: var(--card-border-color); + border: 1px solid var(--accent-color); box-shadow: var(--card-box-shadow); + border-radius: 0.5em; padding: 1em; } + margin: 1.25em 0; + margin-right: 14px; + position: relative; + padding-left: 2.5em; +} + +body.desktop .ck-content .admonition::before { + color: var(--accent-color); + font-family: boxicons !important; + position: absolute; + top: 1em; + left: 1em; +} + +body.desktop .ck-content .admonition.note { --accent-color: #69c7ff; } +body.desktop .ck-content .admonition.tip { --accent-color: #40c025; } +body.desktop .ck-content .admonition.important { --accent-color: #9839f7; } +body.desktop .ck-content .admonition.caution { --accent-color: #ff2e2e; } +body.desktop .ck-content .admonition.warning { --accent-color: #e2aa03; } + +body.desktop .ck-content .admonition.note::before { content: "\eb21"; } +body.desktop .ck-content .admonition.tip::before { content: "\ea0d"; } +body.desktop .ck-content .admonition.important::before { content: "\ea7c"; } +body.desktop .ck-content .admonition.caution::before { content: "\eac7"; } +body.desktop .ck-content .admonition.warning::before { content: "\eac5"; } diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 22ca6dbc8..66d76fd33 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -138,6 +138,8 @@ --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; + --right-pane-heading-color: gray; + --root-background: var(--left-pane-background-color); --gutter-color: transparent; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index c0ac2c03d..8c26932f9 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -132,6 +132,8 @@ --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; + --right-pane-heading-color: gray; + --root-background: var(--left-pane-background-color); --gutter-color: transparent; diff --git a/src/public/stylesheets/theme-next/ribbon.css b/src/public/stylesheets/theme-next/ribbon.css index f702e4829..56e3e5d66 100644 --- a/src/public/stylesheets/theme-next/ribbon.css +++ b/src/public/stylesheets/theme-next/ribbon.css @@ -37,19 +37,17 @@ div.promoted-attributes-container { } /* - * File Properties and Note Info + * File/Image Properties and Note Info */ + /* The property label */ .note-info-widget-table th, -.file-properties-widget .file-table th { +.file-properties-widget .file-table th, +.image-properties > div:first-child > span > strong { opacity: 0.65; font-weight: 500; } -/* - * File Properties - */ - .file-properties-widget { container: info-section / inline-size; } @@ -63,9 +61,12 @@ div.promoted-attributes-container { padding: 8px 0 0 0; } -.file-properties-widget .file-buttons { +/* The button bar */ +.file-properties-widget .file-buttons, +.image-properties > div:last-of-type { padding: 0; - justify-content: flex-start; + margin: 0; + justify-content: flex-start !important; flex-wrap: wrap; gap: 12px; } @@ -74,6 +75,13 @@ div.promoted-attributes-container { white-space: nowrap; } +/* The properties row for images */ +.image-properties > div:first-child { + justify-content: flex-start !important; + flex-wrap: wrap; + gap: 10px 40px; +} + /* * Basic properties */ diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 13b597a46..a3f8992c8 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -958,8 +958,27 @@ body.mobile .note-title { background: var(--main-background-color); } +#right-pane div.card-header { + align-items: center; + border: 0; +} + +#right-pane .card-header-title { + margin-top: 2px; + font-weight: 600; + font-size: .85em; + letter-spacing: .3pt; + color: var(--right-pane-heading-color); +} + #right-pane .card-header-buttons { align-items: center; + top: 0; +} + +#right-pane .toc-widget, +#right-pane .highlights-list-widget { + padding: 0 0 0 10px; } #right-pane .toc li, diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index 7aa352a17..56e30711e 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1224,6 +1224,9 @@ "description": "Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).", "label": "Automatic read-only size (code notes)" }, + "code-editor-options": { + "title": "Editor" + }, "code_mime_types": { "title": "Available MIME types in the dropdown" },