Mobile: Added sync button animation; Added notebook header; Improved layout of Edit Notebook screen

ReactNativeClient/lib/components/screens/folder.js

@@ -35,7 +35,8 @@ class FolderScreenComponent extends BaseScreenComponent {
 		let styles = {
 			textInput: {
 				color: theme.color,
-				paddingLeft: 10,
+				paddingLeft: theme.marginLeft,
+				marginTop: theme.marginTop,
 			},
 		};
 
@@ -115,7 +116,7 @@ class FolderScreenComponent extends BaseScreenComponent {
 					showSideMenuButton={false}
 					showSearchButton={false}
 				/>
-				<TextInput underlineColorAndroid={theme.strongDividerColor} selectionColor={theme.textSelectionColor} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
+				<TextInput placeholder={_('Enter notebook title')} underlineColorAndroid={theme.strongDividerColor} selectionColor={theme.textSelectionColor} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
 				<dialogs.DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>
 		);

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

@@ -1,5 +1,5 @@
 const React = require('react'); const Component = React.Component;
-const { TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View, Alert } = require('react-native');
+const { Easing, Animated, TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View, Alert } = require('react-native');
 const { connect } = require('react-redux');
 const Icon = require('react-native-vector-icons/Ionicons').default;
 const Tag = require('lib/models/Tag.js');
@@ -30,6 +30,12 @@ class SideMenuContentComponent extends Component {
 		this.configButton_press = this.configButton_press.bind(this);
 		this.allNotesButton_press = this.allNotesButton_press.bind(this);
 		this.renderFolderItem = this.renderFolderItem.bind(this);
+
+		this.syncIconRotationValue = new Animated.Value(0);
+		this.syncIconRotation = this.syncIconRotationValue.interpolate({
+			inputRange: [0, 1],
+			outputRange: ['360deg', '0deg'],
+		});
 	}
 
 	styles() {
@@ -87,6 +93,23 @@ class SideMenuContentComponent extends Component {
 		return this.styles_[this.props.theme];
 	}
 
+	componentDidUpdate(prevProps) {
+		if (this.props.syncStarted !== prevProps.syncStarted) {
+			if (this.props.syncStarted) {
+				this.syncIconAnimation = Animated.loop(Animated.timing(this.syncIconRotationValue, {
+					toValue: 1,
+					duration: 3000,
+					easing: Easing.linear,
+				}));
+
+				this.syncIconAnimation.start();
+			} else {
+				if (this.syncIconAnimation) this.syncIconAnimation.stop();
+				this.syncIconAnimation = null;
+			}
+		} 
+	}
+
 	folder_press(folder) {
 		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
 
@@ -206,11 +229,10 @@ class SideMenuContentComponent extends Component {
 			flexDirection: 'row',
 			height: 36,
 			alignItems: 'center',
-			paddingLeft: theme.marginLeft,
 			paddingRight: theme.marginRight,
 		};
 		if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
-		folderButtonStyle.paddingLeft = depth * 10;
+		folderButtonStyle.paddingLeft = depth * 10 + theme.marginLeft;
 
 		const iconWrapperStyle = { paddingLeft: 10, paddingRight: 10 };
 		if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
@@ -241,9 +263,19 @@ class SideMenuContentComponent extends Component {
 	renderSideBarButton(key, title, iconName, onPressHandler = null, selected = false) {
 		const theme = themeStyle(this.props.theme);
 
+		let icon = <Icon name={iconName} style={this.styles().sidebarIcon} />
+
+		if (key === 'synchronize_button') {
+			icon = (
+				<Animated.View style={{transform: [{rotate: this.syncIconRotation}]}}>
+					{icon}
+				</Animated.View>
+			);
+		}
+
 		const content = (
 			<View key={key} style={selected ? this.styles().sideButtonSelected : this.styles().sideButton}>
-				<Icon name={iconName} style={this.styles().sidebarIcon} />
+				{icon}
 				<Text style={this.styles().sideButtonText}>{title}</Text>
 			</View>
 		);
@@ -296,8 +328,8 @@ class SideMenuContentComponent extends Component {
 
 		items.push(this.renderSideBarButton(
 			'synchronize_button',
-			!this.props.syncStarted ? _('Synchronise') : _('Cancel synchronisation'),
+			!this.props.syncStarted ? _('Synchronise') : _('Cancel'),
-			!this.props.syncStarted ? 'md-sync' : 'md-close',
+			'md-sync',
 			this.synchronize_press
 		));
 
@@ -323,7 +355,7 @@ class SideMenuContentComponent extends Component {
 
 		items.push(this.makeDivider('divider_all'));
 
-		// items.push(this.renderSideBarButton('folder_header', _('Notebooks'), 'md-folder'));
+		items.push(this.renderSideBarButton('folder_header', _('Notebooks'), 'md-folder'));
 
 		if (this.props.folders.length) {
 			const result = shared.renderFolders(this.props, this.renderFolderItem);