Added save icon, fixed search ordering bug and fixed html rendering bug

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

@@ -134,7 +134,12 @@ class NoteBodyViewer extends Component {
 			return '[Image: ' + htmlentities(r.title) + '(' + htmlentities(r.mime) + ')]';
 		}
 
-		let html = body ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, { gfm: true, breaks: true, renderer: renderer }) : '';
+		let html = body ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, {
+			gfm: true,
+			breaks: true,
+			renderer: renderer,
+			sanitize: true,
+		}) : '';
 
 		let elementId = 1;
 		while (html.indexOf('°°JOP°') >= 0) {

ReactNativeClient/lib/components/screen-header.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
-import { View, Text, Button, StyleSheet, TouchableOpacity, Picker } from 'react-native';
+import { View, Text, Button, StyleSheet, TouchableOpacity, Picker, Image } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { Log } from 'lib/log.js';
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
@@ -11,18 +11,21 @@ import { FileApiDriverOneDrive } from 'lib/file-api-driver-onedrive.js';
 import { reg } from 'lib/registry.js'
 import { globalStyle } from 'lib/components/global-style.js';
 
+// Rather than applying a padding to the whole bar, it is applied to each
+// individual component (button, picker, etc.) so that the touchable areas
+// are widder and to give more room to the picker component which has a larger
+// default height.
+const PADDING_V = 10;
+
 let styleObject = {
 	container: {
 		flexDirection: 'row',
-		paddingTop: 10,
-		paddingBottom: 10,
 		backgroundColor: globalStyle.raisedBackgroundColor,
 		alignItems: 'center',
 		shadowColor: '#000000',
 		elevation: 5,
 	},
 	folderPicker: {
-		height: 30,
 		flex:1,
 		color: globalStyle.raisedHighlightedColor,
 		// Note: cannot set backgroundStyle as that would remove the arrow in the component
@@ -39,33 +42,41 @@ let styleObject = {
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: 5,
 		marginRight: 2,
+		paddingTop: PADDING_V,
+		paddingBottom: PADDING_V,
 	},
 	iconButton: {
 		flex: 1,
 		backgroundColor: globalStyle.raisedBackgroundColor,
 		paddingLeft: 15,
 		paddingRight: 15,
+		paddingTop: PADDING_V,
+		paddingBottom: PADDING_V,
 	},
 	saveButton: {
-		flex: 1,
+		flex: 0,
 		flexDirection: 'row',
 		alignItems: 'center',
-		paddingLeft: 15,
-		paddingRight: 15,
-		marginRight: 10,
+		padding: 10,
 		borderWidth: 1,
 		borderColor: globalStyle.raisedHighlightedColor,
 		borderRadius: 4,
+		marginRight: 8,
 	},
 	saveButtonText: {
 		textAlignVertical: 'center',
 		color: globalStyle.raisedHighlightedColor,
 		fontWeight: 'bold',
 	},
-	saveButtonIcon: {
+	savedButtonIcon: {
 		fontSize: 20,
 		color: globalStyle.raisedHighlightedColor,
-		marginRight: 5,
+		width: 18,
+		height: 18,
+	},
+	saveButtonIcon: {
+		width: 18,
+		height: 18,
 	},
 	contextMenuTrigger: {
 		fontSize: 25,
@@ -181,13 +192,12 @@ class ScreenHeaderComponent extends Component {
 		function saveButton(styles, onPress, disabled, show) {
 			if (!show) return null;
 
-			const title = disabled ? _('Saved') : _('Save');
+			const icon = disabled ? <Icon name='md-checkmark' style={styles.savedButtonIcon} /> : <Image style={styles.saveButtonIcon} source={require('./SaveIcon.png')} />;
 
 			return (
-				<TouchableOpacity onPress={onPress} disabled={disabled}>
+				<TouchableOpacity onPress={onPress} disabled={disabled} style={{ padding:0 }}>
 					<View style={disabled ? styles.saveButtonDisabled : styles.saveButton}>
-						{ disabled && <Icon name='md-checkmark' style={styles.saveButtonIcon} /> }
-						<Text style={styles.saveButtonText}>{title}</Text>
+						{ icon }
 					</View>
 				</TouchableOpacity>
 			);
@@ -245,9 +255,11 @@ class ScreenHeaderComponent extends Component {
 					items.push(<Picker.Item label={item.label} value={item.value} key={item.value}/>);
 				}
 				return (
-					<Picker style={styles.folderPicker} selectedValue={p.selectedValue} onValueChange={(itemValue, itemIndex) => { if (p.onValueChange) p.onValueChange(itemValue, itemIndex); }}>
-						{ items }
-					</Picker>
+					<View style={{ flex: 1 }}>
+						<Picker style={styles.folderPicker} selectedValue={p.selectedValue} onValueChange={(itemValue, itemIndex) => { if (p.onValueChange) p.onValueChange(itemValue, itemIndex); }}>
+							{ items }
+						</Picker>
+					</View>
 				);
 			} else {
 				let title = 'title' in this.props && this.props.title !== null ? this.props.title : '';
@@ -265,7 +277,7 @@ class ScreenHeaderComponent extends Component {
 				{ titleComp }
 				{ searchButton(styles, () => this.searchButton_press()) }
 			    <Menu onSelect={(value) => this.menu_select(value)} style={styles.contextMenu}>
-					<MenuTrigger>
+					<MenuTrigger style={{ paddingTop: PADDING_V, paddingBottom: PADDING_V }}>
 						<Text style={styles.contextMenuTrigger}>  &#8942;</Text>
 					</MenuTrigger>
 					<MenuOptions>

ReactNativeClient/lib/models/note.js

@@ -114,7 +114,7 @@ class Note extends BaseItem {
 		// is used to sort already loaded notes.
 
 		if (!options) options = {};
-		if (!options.order) options.order = { by: 'updated_time', dir: 'DESC' };
+		if (!options.order) options.order = [{ by: 'updated_time', dir: 'DESC' }];
 		if (!options.conditions) options.conditions = [];
 		if (!options.conditionsParams) options.conditionsParams = [];
 		if (!options.fields) options.fields = this.previewFields();