Open links in browser

ReactNativeClient/lib/components/global-style.js

@@ -11,6 +11,7 @@ const globalStyle = {
 	// For WebView - must correspond to the properties above
 	htmlFontSize: '14px',
 	htmlColor: 'black', // Note: CSS in WebView component only seem to work if the colour is written in full letters (so no hexadecimal)
+	htmlDividerColor: 'Gainsboro',
 };
 
 globalStyle.marginRight = globalStyle.margin;

ReactNativeClient/lib/components/item-list.js

@@ -19,6 +19,12 @@ const styles = StyleSheet.create({
 		paddingLeft: globalStyle.marginLeft,
 		backgroundColor: globalStyle.backgroundColor,
 	},
+	noItemMessage: {
+		paddingLeft: globalStyle.marginLeft,
+		paddingRight: globalStyle.marginRight,
+		paddingTop: globalStyle.marginTop,
+		paddingBottom: globalStyle.marginBottom
+	},
 });
 
 class ItemListComponent extends Component {
@@ -93,7 +99,7 @@ class ItemListComponent extends Component {
 			);
 		} else {
 			const noItemMessage = this.props.noItemMessage ? this.props.noItemMessage : '';
-			return <Text>{noItemMessage}</Text>;
+			return <Text style={styles.noItemMessage} >{noItemMessage}</Text>;
 		}
 	}
 }

ReactNativeClient/lib/components/screen-header.js

@@ -25,7 +25,7 @@ let styleObject = {
 		height: 30,
 		flex:1,
 		color: globalStyle.color,
-		backgroundColor: globalStyle.backgroundColor,
+		// Note: cannot set backgroundStyle as that would remove the arrow in the component
 	},
 	divider: {
 		borderBottomWidth: 1,

ReactNativeClient/lib/components/screens/note.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet } from 'react-native';
+import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { Note } from 'lib/models/note.js'
@@ -303,7 +303,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 				const css = `
 					body {
 						font-size: ` + style.htmlFontSize + `;
-						/* margin: ` + style.htmlMarginLeft + `; */
 						color: ` + style.htmlColor + `;
 					}
 					h1 {
@@ -334,6 +333,9 @@ class NoteScreenComponent extends BaseScreenComponent {
 						border: 1px solid silver;
 						padding: .5em 1em .5em 1em;
 					}
+					hr {
+						border: 1px solid ` + style.htmlDividerColor + `;
+					}
 				`;
 
 				let counter = -1;
@@ -345,7 +347,14 @@ class NoteScreenComponent extends BaseScreenComponent {
 					});
 				}
 
-				let html = note ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, { gfm: true, breaks: true }) : '';
+				const renderer = new marked.Renderer();
+				renderer.link = function (href, title, text) {
+					const js = "postMessage(" + JSON.stringify(href) + "); return false;";
+					let output = "<a href='#' onclick='" + js + "'>" + text + '</a>';
+					return output;
+				}
+
+				let html = note ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, { gfm: true, breaks: true, renderer: renderer }) : '';
 
 				let elementId = 1;
 				while (html.indexOf('°°JOP°') >= 0) {
@@ -364,12 +373,17 @@ class NoteScreenComponent extends BaseScreenComponent {
 						source={{ html: markdownToHtml(note.body, globalStyle) }}
 						onMessage={(event) => {
 							let msg = event.nativeEvent.data;
+
+							reg.logger().info('postMessage received: ' + msg);
+
 							if (msg.indexOf('checkboxclick_') === 0) {
 								msg = msg.split('_');
 								let index = Number(msg[msg.length - 1]);
 								let currentState = msg[msg.length - 2]; // Not really needed but keep it anyway
 								const newBody = toggleTickAt(note.body, index);
 								this.saveOneProperty('body', newBody);
+							} else {
+								Linking.openURL(msg);
 							}
 						}}
 					/>

ReactNativeClient/lib/components/side-menu-content.js

@@ -48,7 +48,7 @@ const styleObject = {
 styleObject.folderButton = Object.assign({}, styleObject.button);
 styleObject.folderButtonText = Object.assign({}, styleObject.buttonText);
 styleObject.folderIcon = Object.assign({}, globalStyle.icon);
-styleObject.folderIcon.color = '#026CB6';
+styleObject.folderIcon.color = '#0072d5';
 styleObject.syncButton = Object.assign({}, styleObject.button);
 styleObject.syncButtonText = Object.assign({}, styleObject.buttonText);
 styleObject.folderButtonSelected = Object.assign({}, styleObject.folderButton);