Various bug fixes

ReactNativeClient/lib/components/global-style.js

@@ -21,8 +21,10 @@ const globalStyle = {
 
 	// For WebView - must correspond to the properties above
 	htmlFontSize: '20x',
-	htmlColor: 'black', // Note: CSS in WebView component only seem to work if the colour is written in full letters (so no hexadecimal)
+	htmlColor: 'black', // Note: CSS in WebView component only supports named colors or rgb() notation
+	htmlBackgroundColor: 'white',
 	htmlDividerColor: 'Gainsboro',
+	htmlLinkColor: 'blue',
 };
 
 globalStyle.marginRight = globalStyle.margin;
@@ -50,16 +52,19 @@ function themeStyle(theme) {
 	if (theme == Setting.THEME_LIGHT) return output;
 
 	output.backgroundColor = '#1D2024';
-	output.color = '#ffffff';
+	output.color = '#dddddd';
 	output.colorFaded = '#777777';
 	output.dividerColor = '#555555';
 	output.selectedColor = '#333333';
-	output.htmlColor = 'white';
 
 	output.raisedBackgroundColor = "#0F2051";
 	output.raisedColor = "#788BC3";
 	output.raisedHighlightedColor = "#ffffff";
 
+	output.htmlColor = 'rgb(220,220,220)';
+	output.htmlBackgroundColor = 'rgb(29,32,36)';
+	output.htmlLinkColor = 'rgb(166,166,255)';
+
 	themeCache_[theme] = output;
 	return themeCache_[theme];
 }

ReactNativeClient/lib/components/note-body-viewer.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { WebView, View } from 'react-native';
+import { WebView, View, Linking } from 'react-native';
 import { globalStyle } from 'lib/components/global-style.js';
 import { Resource } from 'lib/models/resource.js';
 import { shim } from 'lib/shim.js';
@@ -45,7 +45,7 @@ class NoteBodyViewer extends Component {
 		return body;
 	}
 
-	markdownToHtml (body, style) {
+	markdownToHtml(body, style) {
 		// https://necolas.github.io/normalize.css/
 		const normalizeCss = `
 			html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -59,6 +59,7 @@ class NoteBodyViewer extends Component {
 				font-size: ` + style.htmlFontSize + `;
 				color: ` + style.htmlColor + `;
 				line-height: 1.5em;
+				background-color: ` + style.htmlBackgroundColor + `;
 			}
 			h1 {
 				font-size: 1.2em;
@@ -68,8 +69,8 @@ class NoteBodyViewer extends Component {
 				font-size: 1em;
 				font-weight: bold;
 			}
-			li {
-				
+			a {
+				color: ` + style.htmlLinkColor + `
 			}
 			ul {
 				padding-left: 1em;
@@ -134,12 +135,14 @@ class NoteBodyViewer extends Component {
 			return '[Image: ' + htmlentities(r.title) + '(' + htmlentities(r.mime) + ')]';
 		}
 
-		let html = body ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, {
+		let styleHtml = '<style>' + normalizeCss + "\n" + css + '</style>';
+
+		let html = body ? styleHtml + marked(body, {
 			gfm: true,
 			breaks: true,
 			renderer: renderer,
 			sanitize: true,
-		}) : '';
+		}) : styleHtml;
 
 		let elementId = 1;
 		while (html.indexOf('°°JOP°') >= 0) {
@@ -166,7 +169,7 @@ class NoteBodyViewer extends Component {
 		return (
 			<View style={style}>
 				<WebView
-					source={{ html: this.markdownToHtml(note ? note.body : '', globalStyle) }}
+					source={{ html: this.markdownToHtml(note ? note.body : '', this.props.webViewStyle) }}
 					onMessage={(event) => {
 						let msg = event.nativeEvent.data;
 

ReactNativeClient/lib/components/screens/note.js

@@ -16,50 +16,10 @@ import { reg } from 'lib/registry.js';
 import { shim } from 'lib/shim.js';
 import { BaseScreenComponent } from 'lib/components/base-screen.js';
 import { dialogs } from 'lib/dialogs.js';
-import { globalStyle } from 'lib/components/global-style.js';
+import { globalStyle, themeStyle } from 'lib/components/global-style.js';
 import DialogBox from 'react-native-dialogbox';
 import { NoteBodyViewer } from 'lib/components/note-body-viewer.js';
 
-const styleObject = {
-	titleTextInput: {
-		flex: 1,
-		paddingLeft: 0,
-		color: globalStyle.color,
-		backgroundColor: globalStyle.backgroundColor,
-		fontWeight: 'bold',
-		fontSize: globalStyle.fontSize,
-	},
-	bodyTextInput: {
-		flex: 1,
-		paddingLeft: globalStyle.marginLeft,
-		paddingRight: globalStyle.marginRight,
-		textAlignVertical: 'top',
-		color: globalStyle.color,
-		backgroundColor: globalStyle.backgroundColor,
-		fontSize: globalStyle.fontSize,
-	},
-	noteBodyViewer: {
-		flex: 1,
-		paddingLeft: globalStyle.marginLeft,
-		paddingRight: globalStyle.marginRight,
-		paddingTop: globalStyle.marginTop,
-		paddingBottom: globalStyle.marginBottom,
-	},
-};
-
-styleObject.titleContainer = {
-	flex: 0,
-	flexDirection: 'row',
-	paddingLeft: globalStyle.marginLeft,
-	paddingRight: globalStyle.marginRight,
-	borderBottomColor: globalStyle.dividerColor,
-	borderBottomWidth: 1,
-};
-
-styleObject.titleContainerTodo = Object.assign({}, styleObject.titleContainer);
-
-const styles = StyleSheet.create(styleObject);
-
 class NoteScreenComponent extends BaseScreenComponent {
 	
 	static navigationOptions(options) {
@@ -82,6 +42,8 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 		this.saveButtonHasBeenShown_ = false;
 
+		this.styles_ = {};
+
 		// Disabled for now because it doesn't work consistently and proabably interfer with the backHandler
 		// on root.js. Handling of the back button should be in one single place for this to work well.
 
@@ -102,6 +64,55 @@ class NoteScreenComponent extends BaseScreenComponent {
 		// };
 	}
 
+	styles() {
+		const themeId = this.props.theme;
+		const theme = themeStyle(themeId);
+
+		if (this.styles_[themeId]) return this.styles_[themeId];
+		this.styles_ = {};
+
+		let styles = {
+			// titleTextInput: {
+			// 	flex: 1,
+			// 	paddingLeft: 0,
+			// 	color: theme.color,
+			// 	backgroundColor: theme.backgroundColor,
+			// 	fontWeight: 'bold',
+			// 	fontSize: theme.fontSize,
+			// },
+			bodyTextInput: {
+				flex: 1,
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				textAlignVertical: 'top',
+				color: theme.color,
+				backgroundColor: theme.backgroundColor,
+				fontSize: theme.fontSize,
+			},
+			noteBodyViewer: {
+				flex: 1,
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				paddingTop: theme.marginTop,
+				paddingBottom: theme.marginBottom,
+			},
+		};
+
+		styles.titleContainer = {
+			flex: 0,
+			flexDirection: 'row',
+			paddingLeft: theme.marginLeft,
+			paddingRight: theme.marginRight,
+			borderBottomColor: theme.dividerColor,
+			borderBottomWidth: 1,
+		};
+
+		styles.titleContainerTodo = Object.assign({}, styles.titleContainer);
+
+		this.styles_[themeId] = StyleSheet.create(styles);
+		return this.styles_[themeId];
+	}
+
 	isModified() {
 		if (!this.state.note || !this.state.lastSavedNote) return false;
 		let diff = BaseModel.diffObjects(this.state.note, this.state.lastSavedNote);
@@ -294,6 +305,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			);
 		}
 
+		const theme = themeStyle(this.props.theme);
 		const note = this.state.note;
 		const isTodo = !!Number(note.is_todo);
 		const folder = this.state.folder;
@@ -305,14 +317,14 @@ class NoteScreenComponent extends BaseScreenComponent {
 				this.saveOneProperty('body', newBody);
 			};
 
-			bodyComponent = <NoteBodyViewer style={styles.noteBodyViewer} note={note} onCheckboxChange={(newBody) => { onCheckboxChange(newBody) }}/>
+			bodyComponent = <NoteBodyViewer style={this.styles().noteBodyViewer} webViewStyle={theme} note={note} onCheckboxChange={(newBody) => { onCheckboxChange(newBody) }}/>
 		} else {
 			const focusBody = !isNew && !!note.title;
 			bodyComponent = (
 				<TextInput
 					autoCapitalize="sentences"
 					autoFocus={focusBody}
-					style={styles.bodyTextInput}
+					style={this.styles().bodyTextInput}
 					multiline={true}
 					value={note.body}
 					onChangeText={(text) => this.body_changeText(text)}
@@ -352,14 +364,22 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 		if (showSaveButton) this.saveButtonHasBeenShown_ = true;
 
-		const titleContainerStyle = isTodo ? styles.titleContainerTodo : styles.titleContainer;
+		const titleContainerStyle = isTodo ? this.styles().titleContainerTodo : this.styles().titleContainer;
+
+		let titleTextInputStyle = {
+			flex: 1,
+			paddingLeft: 0,
+			color: theme.color,
+			backgroundColor: theme.backgroundColor,
+			fontWeight: 'bold',
+			fontSize: theme.fontSize,
+		};
 
-		const titleTextInputStyle = Object.assign({}, styleObject.titleTextInput);
 		titleTextInputStyle.height = this.state.titleTextInputHeight;
 
 		const titleComp = (
 			<View style={titleContainerStyle}>
-				{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }
+				{ isTodo && <Checkbox style={{ color: theme.color }} checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }
 				<TextInput
 					onContentSizeChange={(event) => this.titleTextInput_contentSizeChange(event)}
 					autoFocus={isNew}
@@ -374,7 +394,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		);
 
 		return (
-			<View style={this.styles().screen}>
+			<View style={this.rootStyle(this.props.theme).root}>
 				<ScreenHeader
 					titlePicker={{
 						items: titlePickerItems(),
@@ -424,6 +444,7 @@ const NoteScreen = connect(
 			folderId: state.selectedFolderId,
 			itemType: state.selectedItemType,
 			folders: state.folders,
+			theme: state.settings.theme,
 		};
 	}
 )(NoteScreenComponent)