Merge branch 'master' of github.com:laurent22/joplin

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;
 
@@ -1201,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 () => {

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;

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",

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) {
+	switch (theme) {
-		output = Object.assign({}, output, darkStyle);
+	case Setting.THEME_DARK :
-	} else if (theme == Setting.THEME_SOLARIZED_LIGHT) {
+		output = Object.assign({}, output, darkStyle); break;
-		output = Object.assign({}, output, solarizedLightStyle);
+	case Setting.THEME_SOLARIZED_LIGHT :
-	} else if (theme == Setting.THEME_SOLARIZED_DARK) {
+		output = Object.assign({}, output, solarizedLightStyle); break;
-		output = Object.assign({}, output, solarizedDarkStyle);
+	case Setting.THEME_SOLARIZED_DARK :
-	} else if (theme == Setting.THEME_DRACULA) {
+		output = Object.assign({}, output, solarizedDarkStyle); break;
-		output = Object.assign({}, output, draculaStyle);
+	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

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
 

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) {

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;

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",