diff --git a/ReactNativeClient/lib/components/screens/folder.js b/ReactNativeClient/lib/components/screens/folder.js index ebed831ee..18dc464fa 100644 --- a/ReactNativeClient/lib/components/screens/folder.js +++ b/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} /> - this.title_changeText(text)} /> + this.title_changeText(text)} /> { this.dialogbox = dialogbox }}/> ); diff --git a/ReactNativeClient/lib/components/side-menu-content.js b/ReactNativeClient/lib/components/side-menu-content.js index 88b5b8255..fe12c177b 100644 --- a/ReactNativeClient/lib/components/side-menu-content.js +++ b/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 = + + if (key === 'synchronize_button') { + icon = ( + + {icon} + + ); + } + const content = ( - + {icon} {title} ); @@ -296,8 +328,8 @@ class SideMenuContentComponent extends Component { items.push(this.renderSideBarButton( 'synchronize_button', - !this.props.syncStarted ? _('Synchronise') : _('Cancel synchronisation'), - !this.props.syncStarted ? 'md-sync' : 'md-close', + !this.props.syncStarted ? _('Synchronise') : _('Cancel'), + '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);