From 2066f821cbae2c554218fcb06eddd14f21bf86af Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 03:24:04 +0200 Subject: [PATCH 01/14] style(next)/ribbon/image properties: improve the layout --- src/public/stylesheets/theme-next/ribbon.css | 24 +++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) 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 */ From 69f95068f14e96f1e16a61322bb85e9dfe4e885b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 04:04:08 +0200 Subject: [PATCH 02/14] style(next)/shell/right pane: minor restyle --- src/public/stylesheets/theme-next-dark.css | 2 ++ src/public/stylesheets/theme-next-light.css | 2 ++ src/public/stylesheets/theme-next/shell.css | 19 +++++++++++++++++++ 3 files changed, 23 insertions(+) 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/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, From 6c6d20a830c2d9c5e739da7d9f30c74de2c435a1 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 04:19:42 +0200 Subject: [PATCH 03/14] style: fix note title input overlapping with the zen mode exit button --- src/public/stylesheets/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index c2791032d..5cd99b048 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, From 0e748fbce0e70f718014c24c44f130ac1b2a2227 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 04:30:42 +0200 Subject: [PATCH 04/14] style/options/ETAPI: update the icon of the edit token button --- src/public/app/widgets/type_widgets/options/etapi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/app/widgets/type_widgets/options/etapi.ts b/src/public/app/widgets/type_widgets/options/etapi.ts index 747ca39f4..90149e41a 100644 --- a/src/public/app/widgets/type_widgets/options/etapi.ts +++ b/src/public/app/widgets/type_widgets/options/etapi.ts @@ -118,7 +118,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)) ) ) From 88aa9a4e7906885e62df3d1894a267c0a9f565b4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 05:20:58 +0200 Subject: [PATCH 05/14] client/options/code notes: create the "Editor" section, reorganize --- .../widgets/type_widgets/content_widget.ts | 5 +-- .../options/code_notes/code_editor.ts | 39 +++++++++++++++++++ .../options/code_notes/vim_key_bindings.ts | 27 ------------- .../options/code_notes/wrap_lines.ts | 27 ------------- src/public/translations/en/translation.json | 3 ++ 5 files changed, 44 insertions(+), 57 deletions(-) create mode 100644 src/public/app/widgets/type_widgets/options/code_notes/code_editor.ts delete mode 100644 src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts delete mode 100644 src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts diff --git a/src/public/app/widgets/type_widgets/content_widget.ts b/src/public/app/widgets/type_widgets/content_widget.ts index b3408d129..a76f6c569 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"; @@ -65,7 +64,7 @@ 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], + _optionsCodeNotes: [CodeEditorOptions, CodeMimeTypesOptions, CodeAutoReadOnlySizeOptions], _optionsImages: [ImageOptions], _optionsSpellcheck: [SpellcheckOptions], _optionsPassword: [PasswordOptions, ProtectedSessionTimeoutOptions], 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/translations/en/translation.json b/src/public/translations/en/translation.json index 5d6b0221a..3288e8834 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1130,6 +1130,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" }, From 1369a44d9be73c25ea43c532e0dc20eef645800c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 05:25:34 +0200 Subject: [PATCH 06/14] style/options/ETAPI: add an icon to the create token button --- src/public/app/widgets/type_widgets/options/etapi.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/public/app/widgets/type_widgets/options/etapi.ts b/src/public/app/widgets/type_widgets/options/etapi.ts index 90149e41a..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 = ` })}

- +
From 04c6813b0afd3a23c05525d3fa621a54f15fb82b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 05:35:43 +0200 Subject: [PATCH 07/14] client/options: relocate the "Localization" section to the "Language & Region" page --- src/public/app/widgets/type_widgets/content_widget.ts | 6 +++--- .../type_widgets/options/{appearance => i18n}/i18n.ts | 0 2 files changed, 3 insertions(+), 3 deletions(-) rename src/public/app/widgets/type_widgets/options/{appearance => i18n}/i18n.ts (100%) diff --git a/src/public/app/widgets/type_widgets/content_widget.ts b/src/public/app/widgets/type_widgets/content_widget.ts index a76f6c569..68b61390d 100644 --- a/src/public/app/widgets/type_widgets/content_widget.ts +++ b/src/public/app/widgets/type_widgets/content_widget.ts @@ -32,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"; @@ -61,7 +61,7 @@ const TPL = `
`; const CONTENT_WIDGETS: Record = { - _optionsAppearance: [LocalizationOptions, ThemeOptions, FontsOptions, CodeBlockOptions, ElectronIntegrationOptions, MaxContentWidthOptions, RibbonOptions], + _optionsAppearance: [ThemeOptions, FontsOptions, CodeBlockOptions, ElectronIntegrationOptions, MaxContentWidthOptions, RibbonOptions], _optionsShortcuts: [KeyboardShortcutsOptions], _optionsTextNotes: [EditorOptions, HeadingStyleOptions, TableOfContentsOptions, HighlightsListOptions, TextAutoReadOnlySizeOptions], _optionsCodeNotes: [CodeEditorOptions, CodeMimeTypesOptions, CodeAutoReadOnlySizeOptions], @@ -82,7 +82,7 @@ const CONTENT_WIDGETS: Record = { HtmlImportTagsOptions, ShareSettingsOptions ], - _optionsLocalization: [ LanguageOptions ], + _optionsLocalization: [LocalizationOptions, LanguageOptions ], _optionsAdvanced: [DatabaseIntegrityCheckOptions, DatabaseAnonymizationOptions, AdvancedSyncOptions, VacuumDatabaseOptions], _backendLog: [BackendLogWidget] }; 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 From 5cab7eb4030dc51b6b363bce133127e218f82607 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 05:46:34 +0200 Subject: [PATCH 08/14] client/options: reorder sections --- src/public/app/widgets/type_widgets/content_widget.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/public/app/widgets/type_widgets/content_widget.ts b/src/public/app/widgets/type_widgets/content_widget.ts index 68b61390d..dd4b6c14e 100644 --- a/src/public/app/widgets/type_widgets/content_widget.ts +++ b/src/public/app/widgets/type_widgets/content_widget.ts @@ -78,12 +78,12 @@ const CONTENT_WIDGETS: Record = { AttachmentErasureTimeoutOptions, RevisionsSnapshotIntervalOptions, RevisionSnapshotsLimitOptions, - NetworkConnectionsOptions, HtmlImportTagsOptions, - ShareSettingsOptions + ShareSettingsOptions, + NetworkConnectionsOptions ], _optionsLocalization: [LocalizationOptions, LanguageOptions ], - _optionsAdvanced: [DatabaseIntegrityCheckOptions, DatabaseAnonymizationOptions, AdvancedSyncOptions, VacuumDatabaseOptions], + _optionsAdvanced: [AdvancedSyncOptions, DatabaseIntegrityCheckOptions, DatabaseAnonymizationOptions, VacuumDatabaseOptions], _backendLog: [BackendLogWidget] }; From eb630c80d638e961a5c4ce387a0a063d12e94908 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 05:50:29 +0200 Subject: [PATCH 09/14] client/options: format code --- .../widgets/type_widgets/content_widget.ts | 68 +++++++++++++++---- 1 file changed, 55 insertions(+), 13 deletions(-) diff --git a/src/public/app/widgets/type_widgets/content_widget.ts b/src/public/app/widgets/type_widgets/content_widget.ts index dd4b6c14e..5fbb49a7a 100644 --- a/src/public/app/widgets/type_widgets/content_widget.ts +++ b/src/public/app/widgets/type_widgets/content_widget.ts @@ -61,16 +61,48 @@ const TPL = `
`; const CONTENT_WIDGETS: Record = { - _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], + _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 + ], _optionsOther: [ SearchEngineOptions, TrayOptions, @@ -82,9 +114,19 @@ const CONTENT_WIDGETS: Record = { ShareSettingsOptions, NetworkConnectionsOptions ], - _optionsLocalization: [LocalizationOptions, LanguageOptions ], - _optionsAdvanced: [AdvancedSyncOptions, DatabaseIntegrityCheckOptions, DatabaseAnonymizationOptions, VacuumDatabaseOptions], - _backendLog: [BackendLogWidget] + _optionsLocalization: [ + LocalizationOptions, + LanguageOptions + ], + _optionsAdvanced: [ + AdvancedSyncOptions, + DatabaseIntegrityCheckOptions, + DatabaseAnonymizationOptions, + VacuumDatabaseOptions + ], + _backendLog: [ + BackendLogWidget + ] }; export default class ContentWidgetTypeWidget extends TypeWidget { From 10de4e798b57e5fbdbb0a7a6aca71aaad5f8d08e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 13 Mar 2025 06:10:09 +0200 Subject: [PATCH 10/14] client/options: fix failing test --- e2e/i18n.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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. From adf5bee98f1ce1fac89bc44b8633d82abe3c578b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 13 Mar 2025 09:15:11 +0200 Subject: [PATCH 11/14] feat(admonitions): apply basic styling & configure for paragraphs --- src/public/app/widgets/type_widgets/ckeditor/config.ts | 2 +- src/public/stylesheets/style.css | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) 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/stylesheets/style.css b/src/public/stylesheets/style.css index 5cd99b048..c46a38800 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1708,7 +1708,10 @@ footer.file-footer button { margin: 5px; } -.ck-content .admonition { +body.desktop .ck-content .admonition { box-shadow: var(--card-box-shadow); + border-radius: 0.5em; padding: 1em; + margin: 1.25em 0; + margin-right: 14px; } \ No newline at end of file From ba39769174d8a5fe8a2f762b64803033ad21a3a8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 13 Mar 2025 16:13:16 +0200 Subject: [PATCH 12/14] feat(admonitions): add icon --- src/public/stylesheets/style.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index c46a38800..e9e7a55e5 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1709,9 +1709,25 @@ footer.file-footer button { } body.desktop .ck-content .admonition { + border: 1px solid var(--card-border-color); box-shadow: var(--card-box-shadow); border-radius: 0.5em; padding: 1em; margin: 1.25em 0; margin-right: 14px; -} \ No newline at end of file + position: relative; + padding-left: 2.5em; +} + +body.desktop .ck-content .admonition::before { + font-family: boxicons !important; + position: absolute; + top: 1em; + left: 1em; +} + +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"; } From 732252df5bce2c8178549445be848c7fff049f9a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 13 Mar 2025 16:19:58 +0200 Subject: [PATCH 13/14] feat(admonitions): add custom color per admonition --- src/public/stylesheets/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index e9e7a55e5..a9c1431a8 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1709,7 +1709,8 @@ footer.file-footer button { } body.desktop .ck-content .admonition { - border: 1px solid var(--card-border-color); + --accent-color: var(--card-border-color); + border: 1px solid var(--accent-color); box-shadow: var(--card-box-shadow); border-radius: 0.5em; padding: 1em; @@ -1726,6 +1727,12 @@ body.desktop .ck-content .admonition::before { 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"; } From 507a594198bd6db0fb2208b341a716b89be80b9e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 13 Mar 2025 16:22:05 +0200 Subject: [PATCH 14/14] feat(admonitions): color the icon --- src/public/stylesheets/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index a9c1431a8..d97e2db51 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1721,6 +1721,7 @@ body.desktop .ck-content .admonition { } body.desktop .ck-content .admonition::before { + color: var(--accent-color); font-family: boxicons !important; position: absolute; top: 1em;