From dece5d8de75d376f21890c3099ebbac65b95f046 Mon Sep 17 00:00:00 2001 From: "Helmut K. C. Tessarek" Date: Wed, 30 Oct 2019 05:55:45 -0400 Subject: [PATCH 1/4] Desktop: Resolves #1903: Add Nord theme (#2004) code by vzsky (PR was abandoned) closes #1903 --- ElectronClient/app/gui/NoteText.jsx | 1 + ElectronClient/app/gui/style/theme/nord.js | 84 ++++++++++++++++++++++ ElectronClient/app/theme.js | 20 +++--- ReactNativeClient/lib/models/Setting.js | 2 + 4 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 ElectronClient/app/gui/style/theme/nord.js diff --git a/ElectronClient/app/gui/NoteText.jsx b/ElectronClient/app/gui/NoteText.jsx index a8f6b9e89..41c21086b 100644 --- a/ElectronClient/app/gui/NoteText.jsx +++ b/ElectronClient/app/gui/NoteText.jsx @@ -49,6 +49,7 @@ require('brace/theme/solarized_light'); require('brace/theme/solarized_dark'); require('brace/theme/twilight'); require('brace/theme/dracula'); +require('brace/theme/chaos'); const NOTE_TAG_BAR_FEATURE_ENABLED = false; diff --git a/ElectronClient/app/gui/style/theme/nord.js b/ElectronClient/app/gui/style/theme/nord.js new file mode 100644 index 000000000..e3137383e --- /dev/null +++ b/ElectronClient/app/gui/style/theme/nord.js @@ -0,0 +1,84 @@ +const nord = ['#2e3440', '#3b4252', '#434c5e', '#4c566a', '#d8dee9', '#e5e9f0', '#eceff4', '#8fbcbb', '#88c0d0', '#81a1c1', '#5e81ac', '#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#b48ead']; + +// DOCUMENTATION of Nord as of Oct 3 +// 0 #2e3440 : Base component color of "Polar Night". +// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. +// 1 #3b4252 : Lighter shade color of the base component color. +// Used as a lighter background color for UI elements like status bars. +// 2 #434c5e : Lighter shade color of the base component color. +// Used as line highlighting in the editor. +// In the UI scope it may be used as selection- and highlight color. +// 3 #4c566a : Lighter shade color of the base component color. +// Used for comments, invisibles, indent- and wrap guide marker. +// In the UI scope used as pseudoclass color for disabled elements. +// 4 #d8dee9 : Base component color of "Snow Storm". +// Main color for text, variables, constants and attributes. +// In the UI scope used as semi-light background depending on the theme shading design. +// 5 #e5e9f0 : Lighter shade color of the base component color. +// Used as a lighter background color for UI elements like status bars. +// Used as semi-light background depending on the theme shading design. +// 6 #eceff4 : Lighter shade color of the base component color. +// Used for punctuations, carets and structuring characters like curly- and square brackets. +// In the UI scope used as background, selection- and highlight color depending on the theme shading design. +// 7 #8fbcbb : Bluish core color. +// Used for classes, types and documentation tags. +// 8 #88c0d0 : Bluish core accent color. +// Represents the accent color of the color palette. +// Main color for primary UI elements and methods/functions. +// 9 #81a1c1 : Bluish core color. +// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and +// punctuations like (semi)colons,commas and braces. +// 10 #5e81ac : Bluish core color. +// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). +// 11 #bf616a : Colorful component color. +// Used for errors, git/diff deletion and linter marker. +// 12 #d08770 : Colorful component color. +// Used for annotations. +// 13 #ebcb8b : Colorful component color. +// Used for escape characters, regular expressions and markup entities. +// In the UI scope used for warnings and git/diff renamings. +// 14 #a3be8c : Colorful component color. +// Main color for strings and attribute values. +// In the UI scope used for git/diff additions and success visualizations. +// 15 #b48ead : Colorful component color. +// Used for numbers. +// 2e3440 === rbga(46, 52, 64, 1) + +const nordStyle = { + backgroundColor: nord[0], + backgroundColorTransparent: 'rgba(46, 52, 64, 0.9)', + oddBackgroundColor: nord[1], + color: nord[5], // For regular text + colorError: nord[11], + colorWarn: nord[12], + colorFaded: nord[4], // For less important text; + colorBright: nord[6], // For important text; + dividerColor: nord[10], + selectedColor: nord[9], + urlColor: nord[8], + + backgroundColor2: nord[2], + depthColor: 'rgb(200, 200, 200, OPACITY)', + color2: nord[8], + selectedColor2: nord[10], + colorError2: nord[11], + + raisedBackgroundColor: nord[2], + raisedColor: nord[7], + + warningBackgroundColor: nord[13], + + htmlColor: nord[4], + htmlBackgroundColor: nord[1], + htmlDividerColor: nord[2], + htmlLinkColor: nord[10], + htmlTableBackgroundColor: nord[0], + htmlCodeBackgroundColor: nord[0], + htmlCodeBorderColor: nord[2], + htmlCodeColor: nord[13], + + editorTheme: 'chaos', + codeThemeCss: 'atom-one-dark-reasonable.css', +}; + +module.exports = nordStyle; diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js index e9e472f1c..2038ae995 100644 --- a/ElectronClient/app/theme.js +++ b/ElectronClient/app/theme.js @@ -1,4 +1,5 @@ const Setting = require('lib/models/Setting.js'); +const nordStyle = require('./gui/style/theme/nord'); // globalStyle should be used for properties that do not change across themes // i.e. should not be used for colors @@ -399,14 +400,17 @@ function themeStyle(theme) { // relevant properties output = Object.assign({}, globalStyle, fontSizes, lightStyle); - if (theme == Setting.THEME_DARK) { - output = Object.assign({}, output, darkStyle); - } else if (theme == Setting.THEME_SOLARIZED_LIGHT) { - output = Object.assign({}, output, solarizedLightStyle); - } else if (theme == Setting.THEME_SOLARIZED_DARK) { - output = Object.assign({}, output, solarizedDarkStyle); - } else if (theme == Setting.THEME_DRACULA) { - output = Object.assign({}, output, draculaStyle); + switch (theme) { + case Setting.THEME_DARK : + output = Object.assign({}, output, darkStyle); break; + case Setting.THEME_SOLARIZED_LIGHT : + output = Object.assign({}, output, solarizedLightStyle); break; + case Setting.THEME_SOLARIZED_DARK : + output = Object.assign({}, output, solarizedDarkStyle); break; + case Setting.THEME_DRACULA : + output = Object.assign({}, output, draculaStyle); break; + case Setting.THEME_NORD : + output = Object.assign({}, output, nordStyle); break; } // Note: All the theme specific things should go in addExtraStyles diff --git a/ReactNativeClient/lib/models/Setting.js b/ReactNativeClient/lib/models/Setting.js index c2a7c9601..8a5d0796d 100644 --- a/ReactNativeClient/lib/models/Setting.js +++ b/ReactNativeClient/lib/models/Setting.js @@ -228,6 +228,7 @@ class Setting extends BaseModel { output[Setting.THEME_DRACULA] = _('Dracula'); output[Setting.THEME_SOLARIZED_LIGHT] = _('Solarised Light'); output[Setting.THEME_SOLARIZED_DARK] = _('Solarised Dark'); + output[Setting.THEME_NORD] = _('Nord'); } return output; }, @@ -914,6 +915,7 @@ Setting.THEME_DARK = 2; Setting.THEME_SOLARIZED_LIGHT = 3; Setting.THEME_SOLARIZED_DARK = 4; Setting.THEME_DRACULA = 5; +Setting.THEME_NORD = 6; Setting.FONT_DEFAULT = 0; Setting.FONT_MENLO = 1; From cdf6f9c436762587be9f108114f8fcdce84a54e5 Mon Sep 17 00:00:00 2001 From: "Helmut K. C. Tessarek" Date: Wed, 30 Oct 2019 06:18:31 -0400 Subject: [PATCH 2/4] Desktop, Mobile: Resolves #1953: Update Markdown plugins: toc-done-right, anchor (#2005) This change fixes a few issues with the toc plugin. It now allows to set inline options. e.g. to set the max toc depth. 1. set toc depth to 2 levels ``` $ ``` 2. set toc depth to 3 levels and use an ordered list ``` $ ``` /ref https://github.com/nagaozen/markdown-it-toc-done-right/issues/16 --- fixes #1953 fixes #1843 fixes https://discourse.joplinapp.org/t/set-depth-of-toc/2899 --- ElectronClient/app/package.json | 4 ++-- ReactNativeClient/package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ElectronClient/app/package.json b/ElectronClient/app/package.json index c02e37c4e..844fa5458 100644 --- a/ElectronClient/app/package.json +++ b/ElectronClient/app/package.json @@ -113,7 +113,7 @@ "mark.js": "^8.11.1", "markdown-it": "^8.4.1", "markdown-it-abbr": "^1.0.4", - "markdown-it-anchor": "^5.2.4", + "markdown-it-anchor": "^5.2.5", "markdown-it-deflist": "^2.0.3", "markdown-it-emoji": "^1.4.0", "markdown-it-footnote": "^3.0.2", @@ -123,7 +123,7 @@ "markdown-it-multimd-table": "^3.2.0", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "^1.0.0", - "markdown-it-toc-done-right": "^4.0.2", + "markdown-it-toc-done-right": "^4.1.0", "md5": "^2.2.1", "moment": "^2.22.2", "multiparty": "^4.2.1", diff --git a/ReactNativeClient/package.json b/ReactNativeClient/package.json index 9f282f25c..e7c5d1df2 100644 --- a/ReactNativeClient/package.json +++ b/ReactNativeClient/package.json @@ -23,7 +23,7 @@ "katex": "^0.10.0", "markdown-it": "^8.4.0", "markdown-it-abbr": "^1.0.4", - "markdown-it-anchor": "^5.2.4", + "markdown-it-anchor": "^5.2.5", "markdown-it-deflist": "^2.0.3", "markdown-it-emoji": "^1.4.0", "markdown-it-footnote": "^3.0.2", @@ -33,7 +33,7 @@ "markdown-it-multimd-table": "^3.2.0", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "^1.0.0", - "markdown-it-toc-done-right": "^4.0.2", + "markdown-it-toc-done-right": "^4.1.0", "md5": "^2.2.1", "moment": "^2.24.0", "prop-types": "^15.6.0", From 7bf394d8d5e46589f88ad92b52b48924630c61d3 Mon Sep 17 00:00:00 2001 From: Stephanie Foskitt Date: Wed, 30 Oct 2019 05:21:58 -0500 Subject: [PATCH 3/4] Desktop: Resolves #1918: Allow custom CSS when printing (#2014) * Sets `useCustomCss` default to "true". Updates README.md for reference to Custom CSS. * Reverse changes to and . Correct the spacing in . --- ElectronClient/app/gui/NoteText.jsx | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ElectronClient/app/gui/NoteText.jsx b/ElectronClient/app/gui/NoteText.jsx index 41c21086b..66f47df6f 100644 --- a/ElectronClient/app/gui/NoteText.jsx +++ b/ElectronClient/app/gui/NoteText.jsx @@ -1202,7 +1202,7 @@ class NoteTextComponent extends React.Component { const previousTheme = Setting.value('theme'); Setting.setValue('theme', Setting.THEME_LIGHT); this.lastSetHtml_ = ''; - await this.updateHtml(this.state.note.markup_language, tempBody, { useCustomCss: false }); + await this.updateHtml(this.state.note.markup_language, tempBody, { useCustomCss: true }); this.forceUpdate(); const restoreSettings = async () => { diff --git a/README.md b/README.md index 5ad945a3d..5be48e234 100644 --- a/README.md +++ b/README.md @@ -266,7 +266,7 @@ Joplin uses and renders a Github-flavoured Markdown with a few variations and ad # Custom CSS -Rendered markdown can be customized by placing a userstyle file in the profile directory `~/.config/joplin-desktop/userstyle.css` (This path might be different on your device - check at the top of the Config screen for the exact path). This file supports standard CSS syntax. Joplin ***must*** be restarted for the new css to be applied, please ensure that Joplin is not closing to the tray, but is actually exiting. Note that this file is used only when display the notes, **not when printing or exporting to PDF**. This is because printing has a lot more restrictions (for example, printing white text over a black background is usually not wanted), so special rules are applied to make it look good when printing, and a userstyle.css would interfer with that. +Rendered markdown can be customized by placing a userstyle file in the profile directory `~/.config/joplin-desktop/userstyle.css` (This path might be different on your device - check at the top of the Config screen for the exact path). This file supports standard CSS syntax. Joplin ***must*** be restarted for the new css to be applied, please ensure that Joplin is not closing to the tray, but is actually exiting. Note that this file is used for both displaying the notes and printing the notes. Be aware how the CSS may look printed (for example, printing white text over a black background is usually not wanted). # Note templates From 26d91e355a469d3217c75580a58da6b660f5fbc1 Mon Sep 17 00:00:00 2001 From: "Helmut K. C. Tessarek" Date: Wed, 30 Oct 2019 06:24:06 -0400 Subject: [PATCH 4/4] Mobile: Show alarm in correct date and time format (#2026) --- ReactNativeClient/lib/components/select-date-time-dialog.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ReactNativeClient/lib/components/select-date-time-dialog.js b/ReactNativeClient/lib/components/select-date-time-dialog.js index df8818d1a..a66fe6d3c 100644 --- a/ReactNativeClient/lib/components/select-date-time-dialog.js +++ b/ReactNativeClient/lib/components/select-date-time-dialog.js @@ -4,6 +4,7 @@ import PopupDialog, { DialogTitle, DialogButton } from 'react-native-popup-dialo import DatePicker from 'react-native-datepicker'; import moment from 'moment'; import { _ } from 'lib/locale.js'; +const { time } = require('lib/time-utils.js'); class SelectDateTimeDialog extends React.PureComponent { @@ -41,7 +42,7 @@ class SelectDateTimeDialog extends React.PureComponent { } dateTimeFormat() { - return 'MM/DD/YYYY HH:mm'; + return time.dateTimeFormat(); } stringToDate(s) {