From 8e4be780137fcce2872f4df2a78cfb444b42ae24 Mon Sep 17 00:00:00 2001 From: Laurent Date: Fri, 16 Jul 2021 11:32:29 +0100 Subject: [PATCH] Desktop: Make Markdown editor styling closer to view styling (#5174) --- .../NoteBody/CodeMirror/CodeMirror.tsx | 49 +++++++++++++++++-- packages/lib/models/Setting.ts | 2 +- packages/lib/themes/dark.ts | 3 ++ packages/lib/themes/light.ts | 2 + packages/lib/themes/type.ts | 2 + packages/renderer/noteStyle.ts | 2 +- 6 files changed, 53 insertions(+), 7 deletions(-) diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index 1a3d424ac..8e43e7dbc 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -396,7 +396,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { color: inherit !important; background-color: inherit !important; position: absolute !important; - -webkit-box-shadow: none !important; // Some themes add a box shadow for some reason + /* Some themes add a box shadow for some reason */ + -webkit-box-shadow: none !important; + line-height: ${theme.lineHeight} !important; } .CodeMirror-lines { @@ -422,20 +424,54 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { font-family: ${monospaceFonts.join(', ')} !important; } - .cm-header-1 { + .CodeMirror .cm-header-1 { font-size: 1.5em; + color: ${theme.color}; } - .cm-header-2 { + .CodeMirror .cm-header-2 { font-size: 1.3em; + color: ${theme.color}; } - .cm-header-3 { + .CodeMirror .cm-header-3 { font-size: 1.1em; + color: ${theme.color}; } - .cm-header-4, .cm-header-5, .cm-header-6 { + .CodeMirror .cm-header-4, .CodeMirror .cm-header-5, .CodeMirror .cm-header-6 { font-size: 1em; + color: ${theme.color}; + } + + .CodeMirror .cm-quote { + color: ${theme.color}; + opacity: ${theme.blockQuoteOpacity}; + } + + div.CodeMirror span.cm-link-text { + color: ${theme.urlColor}; + } + + div.CodeMirror span.cm-url { + color: ${theme.urlColor}; + opacity: 0.5; + } + + .CodeMirror .cm-variable-2, .CodeMirror .cm-variable-3, .CodeMirror .cm-keyword { + color: ${theme.color}; + } + + div.CodeMirror span.cm-comment { + color: ${theme.codeColor}; + } + + div.CodeMirror span.cm-strong { + color: ${theme.colorBright}; + } + + div.CodeMirror span.cm-hr { + color: ${theme.dividerColor}; } .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 { @@ -467,6 +503,8 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { } /* The default dark theme colors don't have enough contrast with the background */ + + /* .cm-s-nord span.cm-comment { color: #9aa4b6 !important; } @@ -486,6 +524,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { .cm-s-solarized.cm-s-dark span.cm-comment { color: #8ba1a7 !important; } + */ ${selectionColorCss} `)); diff --git a/packages/lib/models/Setting.ts b/packages/lib/models/Setting.ts index 70ac9fdbb..6424651e2 100644 --- a/packages/lib/models/Setting.ts +++ b/packages/lib/models/Setting.ts @@ -915,7 +915,7 @@ class Setting extends BaseModel { // Deprecated in favour of windowContentZoomFactor 'style.zoom': { value: 100, type: SettingItemType.Int, public: false, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => '', minimum: 50, maximum: 500, step: 10 }, - 'style.editor.fontSize': { value: 13, type: SettingItemType.Int, public: true, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 }, + 'style.editor.fontSize': { value: 15, type: SettingItemType.Int, public: true, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 }, 'style.editor.fontFamily': (mobilePlatform) ? ({ diff --git a/packages/lib/themes/dark.ts b/packages/lib/themes/dark.ts index 7fa98da45..5fb824d7f 100644 --- a/packages/lib/themes/dark.ts +++ b/packages/lib/themes/dark.ts @@ -1,7 +1,10 @@ import { Theme, ThemeAppearance } from './type'; +import lightTheme from './light'; // This is the default dark theme in Joplin const theme: Theme = { + ...lightTheme, + appearance: ThemeAppearance.Dark, // Color scheme "1" is the basic one, like used to display the note diff --git a/packages/lib/themes/light.ts b/packages/lib/themes/light.ts index a3134356f..35aedddb9 100644 --- a/packages/lib/themes/light.ts +++ b/packages/lib/themes/light.ts @@ -50,6 +50,8 @@ const theme: Theme = { codeBorderColor: 'rgb(220, 220, 220)', codeColor: 'rgb(0,0,0)', + blockQuoteOpacity: 0.7, + codeMirrorTheme: 'default', codeThemeCss: 'atom-one-light.css', }; diff --git a/packages/lib/themes/type.ts b/packages/lib/themes/type.ts index eeb61ffcc..e2e5d2809 100644 --- a/packages/lib/themes/type.ts +++ b/packages/lib/themes/type.ts @@ -52,6 +52,8 @@ export interface Theme { codeBorderColor: string; codeColor: string; + blockQuoteOpacity: number; + codeMirrorTheme: string; codeThemeCss: string; diff --git a/packages/renderer/noteStyle.ts b/packages/renderer/noteStyle.ts index 459e738a0..8abc3c6ee 100644 --- a/packages/renderer/noteStyle.ts +++ b/packages/renderer/noteStyle.ts @@ -205,7 +205,7 @@ export default function(theme: any) { border-left: 4px solid ${theme.codeBorderColor}; padding-left: 1.2em; margin-left: 0; - opacity: .7; + opacity: ${theme.blockQuoteOpacity}; } .jop-tinymce table,