Improved edit/save note

ReactNativeClient/lib/components/action-button.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ReactNativeActionButton from 'react-native-action-button';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
+import { _ } from 'lib/locale.js'
 
 const styles = StyleSheet.create({
 	actionButtonIcon: {
@@ -15,6 +16,13 @@ const styles = StyleSheet.create({
 
 class ActionButtonComponent extends React.Component {
 
+	constructor() {
+		super();
+		this.state = {
+			toggled: false,
+		};
+	}
+
 	newTodo_press() {
 		this.props.dispatch({
 			type: 'Navigation/NAVIGATE',
@@ -44,33 +52,73 @@ class ActionButtonComponent extends React.Component {
 	}
 
 	render() {
-		let buttons = [];
+		let buttons = this.props.buttons ? this.props.buttons : [];
 
-		if (this.props.folders.length) {
+		if (this.props.addFolderNoteButtons) {
-			buttons.push(
+			if (this.props.folders.length) {
-				<ReactNativeActionButton.Item key="ab_todo" buttonColor='#9b59b6' title="New todo" onPress={() => { this.newTodo_press() }}>
+				buttons.push({
-					<Icon name="md-checkbox-outline" style={styles.actionButtonIcon} />
+					title: _('New todo'),
-				</ReactNativeActionButton.Item>
+					onPress: () => { this.newTodo_press() },
-			);
+					color: '#9b59b6',
+					icon: 'md-checkbox-outline',
+				});
 
-			buttons.push(
+				buttons.push({
-				<ReactNativeActionButton.Item key="ab_note" buttonColor='#9b59b6' title="New note" onPress={() => { this.newNote_press() }}>
+					title: _('New note'),
-					<Icon name="md-document" style={styles.actionButtonIcon} />
+					onPress: () => { this.newNote_press() },
+					color: '#9b59b6',
+					icon: 'md-document',
+				});
+			}
+
+			buttons.push({
+				title: _('New folder'),
+				onPress: () => { this.newFolder_press() },
+				color: '#3498db',
+				icon: 'md-folder',
+			});
+		}
+
+		let buttonComps = [];
+		for (let i = 0; i < buttons.length; i++) {
+			let button = buttons[i];
+			let buttonTitle = button.title ? button.title : '';
+			let key = buttonTitle.replace(/\s/g, '_') + '_' + button.icon;
+			buttonComps.push(
+				<ReactNativeActionButton.Item key={key} buttonColor={button.color} title={buttonTitle} onPress={button.onPress}>
+					<Icon name={button.icon} style={styles.actionButtonIcon} />
 				</ReactNativeActionButton.Item>
 			);
 		}
 
-		buttons.push(
+		if (!buttonComps.length && !this.props.mainButton) {
-			<ReactNativeActionButton.Item key="ab_folder" buttonColor='#3498db' title="New folder" onPress={() => { this.newFolder_press() }}>
+			return <ReactNativeActionButton style={{ display: 'none' }}/>
-				<Icon name="md-folder" style={styles.actionButtonIcon} />
+		}
-			</ReactNativeActionButton.Item>
-		);
 
-		return (
+		let mainButton = this.props.mainButton ? this.props.mainButton : {};
-			<ReactNativeActionButton buttonColor="rgba(231,76,60,1)">
+		let mainIcon = mainButton.icon ? <Icon name={mainButton.icon} style={styles.actionButtonIcon} /> : <Text style={{fontSize: 20, color:"#ffffff"}}>+</Text>;
-				{ buttons }
+
-			</ReactNativeActionButton>
+		if (this.props.isToggle) {
-		);
+			if (!this.props.buttons || this.props.buttons.length != 2) throw new Error('Toggle state requires two buttons');
+			let button = this.props.buttons[this.state.toggled ? 1 : 0];
+			let mainIcon = <Icon name={button.icon} style={styles.actionButtonIcon} />
+			return (
+				<ReactNativeActionButton
+					icon={mainIcon}
+					buttonColor="rgba(231,76,60,1)"
+					onPress={() => {
+						let doToggle = button.onPress(this.state.toggled);
+						if (doToggle !== false) this.setState({ toggled: !this.state.toggled });
+					}}
+				/>
+			);
+		} else {
+			return (
+				<ReactNativeActionButton icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
+					{ buttonComps }
+				</ReactNativeActionButton>
+			);
+		}
 	}
 }
 

ReactNativeClient/lib/components/screens/folders.js

@@ -18,7 +18,7 @@ class FoldersScreenComponent extends React.Component {
 			<View style={{flex: 1}}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<FolderList noItemMessage={_('There is currently no notebook. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
-				<ActionButton></ActionButton>
+				<ActionButton addFolderNoteButtons={true}></ActionButton>
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/note.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { Note } from 'lib/models/note.js'
 import { Folder } from 'lib/models/folder.js'
+import { ActionButton } from 'lib/components/action-button.js';
+import Icon from 'react-native-vector-icons/Ionicons';
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { Checkbox } from 'lib/components/checkbox.js'
 import { _ } from 'lib/locale.js';
@@ -189,11 +191,10 @@ class NoteScreenComponent extends React.Component {
 			bodyComponent = (
 				<View style={{flex:1}}>
 					<WebView source={source}/>
-					<Button title="Edit note" onPress={() => { this.setState({ mode: 'edit' }); }}/>
 				</View>
 			);
 		} else {
-			bodyComponent = <TextInput style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
+			bodyComponent = <TextInput autoFocus={true} style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
 		}
 
 		let title = null;
@@ -204,6 +205,31 @@ class NoteScreenComponent extends React.Component {
 			title = noteHeaderTitle;
 		}
 
+		const renderActionButton = () => {
+			let buttons = [];
+
+			buttons.push({
+				title: _('Edit'),
+				icon: 'md-create',
+				onPress: () => {
+					this.setState({ mode: 'edit' });
+				},
+			});
+
+			buttons.push({
+				title: _('Save'),
+				icon: 'md-checkmark',
+				onPress: () => {
+					this.saveNoteButton_press();
+					return false;
+				},
+			});
+
+			return <ActionButton isToggle={true} buttons={buttons}/>
+		}
+
+		const actionButtonComp = renderActionButton();
+
 		return (
 			<View style={{flex: 1}}>
 				<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} title={title} />
@@ -212,7 +238,7 @@ class NoteScreenComponent extends React.Component {
 				</View>
 				{ bodyComponent }
 				{ todoComponents }
-				<Button title="Save note" onPress={() => this.saveNoteButton_press()} />
+				{ actionButtonComp }
 				{ this.state.showNoteMetadata && <Text>{this.state.noteMetadata}</Text> }
 			</View>
 		);

ReactNativeClient/lib/components/screens/notes.js

@@ -55,8 +55,7 @@ class NotesScreenComponent extends React.Component {
 			<View style={{flex: 1}}>
 				<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
 				<NoteList noItemMessage={_('There are currently no notes. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
-				<ActionButton parentFolderId={this.props.selectedFolderId}></ActionButton>
+				<ActionButton addFolderNoteButtons={true} parentFolderId={this.props.selectedFolderId}></ActionButton>
-
 				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>
 		);

ReactNativeClient/lib/components/screens/welcome.js

@@ -24,9 +24,9 @@ class WelcomeScreenComponent extends React.Component {
 
 			return (
 				<View style={{flex: 1}}>
-					<ScreenHeader navState={this.props.navigation.state} />
+					<ScreenHeader navState={this.props.navigation.state}/>
 					<Text>{message}</Text>
-					<ActionButton></ActionButton>
+					<ActionButton addFolderNoteButtons={true}/>
 				</View>
 			);			
 		}