Button styling

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 } from 'react-native';
+import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
 import { Log } from 'lib/log.js';
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
 import { _ } from 'lib/locale.js';
@@ -9,14 +9,44 @@ import { FileApi } from 'lib/file-api.js';
 import { FileApiDriverOneDrive } from 'lib/file-api-driver-onedrive.js';
 import { reg } from 'lib/registry.js'
 
-const styles = StyleSheet.create({
+let styleObject = {
 	divider: {
 		marginVertical: 5,
 		marginHorizontal: 2,
 		borderBottomWidth: 1,
 		borderColor: '#ccc'
 	},
-});
+	sideMenuButton: {
+		flex: 1,
+		backgroundColor: "#0482E3",
+		paddingLeft: 15,
+		paddingRight: 15,
+		marginRight: 10,
+	},
+	sideMenuButtonText: {
+		textAlignVertical: 'center',
+		color: "#ffffff",
+		fontWeight: 'bold',
+		flex: 1,
+	},
+	backButton: {
+		flex: 1,
+		backgroundColor: "#0482E3",
+		paddingLeft: 15,
+		paddingRight: 15,
+		marginRight: 10,
+	},
+	backButtonText: {
+		textAlignVertical: 'center',
+		color: "#ffffff",
+		fontWeight: 'bold',
+		flex: 1,
+	},
+};
+
+styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { backgroundColor: "#c6c6c6" });
+
+const styles = StyleSheet.create(styleObject);
 
 class ScreenHeaderComponent extends Component {
 
@@ -49,6 +79,27 @@ class ScreenHeaderComponent extends Component {
 	}
 
 	render() {
+
+		function sideMenuButton(styles, onPress) {
+			return (
+				<TouchableOpacity onPress={onPress}>
+					<View style={styles.sideMenuButton}>
+						<Text style={styles.sideMenuButtonText}>☰</Text>
+					</View>
+				</TouchableOpacity>
+			);
+		}
+
+		function backButton(styles, onPress, disabled) {
+			return (
+				<TouchableOpacity onPress={onPress} disabled={disabled}>
+					<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
+						<Text style={styles.backButtonText}>&lt;</Text>
+					</View>
+				</TouchableOpacity>
+			);
+		}
+
 		let key = 0;
 		let menuOptionComponents = [];
 		for (let i = 0; i < this.props.menuOptions.length; i++) {
@@ -77,8 +128,8 @@ class ScreenHeaderComponent extends Component {
 
 		return (
 			<View style={{ flexDirection: 'row', paddingLeft: 10, paddingTop: 10, paddingBottom: 10, paddingRight: 0, backgroundColor: '#ffffff', alignItems: 'center' }} >
-				<Button title="☰" onPress={() => this.sideMenuButton_press()} />
+				{ sideMenuButton(styles, () => this.sideMenuButton_press()) }
-				<Button disabled={!this.props.historyCanGoBack} title="<" onPress={() => this.backButton_press()}></Button>
+				{ backButton(styles, () => this.backButton_press(), !this.props.historyCanGoBack) }
 				<Text style={{ flex:1, marginLeft: 10 }} >{title}</Text>
 			    <Menu onSelect={(value) => this.menu_select(value)}>
 					<MenuTrigger>

ReactNativeClient/lib/components/screens/folder.js

@@ -106,7 +106,7 @@ class FolderScreenComponent extends BaseScreenComponent {
 		return (
 			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
-				<TextInput value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
+				<TextInput autoFocus={true} value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
 				{ actionButtonComp }
 				<dialogs.DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>

ReactNativeClient/lib/synchronizer.js

@@ -53,7 +53,7 @@ class Synchronizer {
 		if (report.updatedRemote) lines.push(_('Updated remote items: %d.', report.updatedRemote));
 		if (report.deleteLocal) lines.push(_('Deleted local items: %d.', report.deleteLocal));
 		if (report.deleteRemote) lines.push(_('Deleted remote items: %d.', report.deleteRemote));
-		if (report.state) lines.push(_('State: %s.', report.state));
+		if (report.state) lines.push(_('State: %s.', report.state.replace(/_/g, ' ')));
 		return lines;
 	}
 
@@ -154,7 +154,7 @@ class Synchronizer {
 
 		let synchronizationId = time.unixMs().toString();
 
-		this.state_ = 'started';
+		this.state_ = 'in_progress';
 
 		this.logSyncOperation('starting', null, null, 'Starting synchronization... [' + synchronizationId + ']');