self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Laurent Cozic 2019-07-12 18:07:47 +01:00
parent e5a8114887
commit 091cbc5355
2 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ReactNativeClient/lib/components/screens/folder.js
View File

@ -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>
);

46
ReactNativeClient/lib/components/side-menu-content.js
View File

@ -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 ? '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);