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

side menu

Browse Source
This commit is contained in:
Laurent Cozic 2017-05-24 19:27:13 +00:00
parent 3078797134
commit c5584d70a6
6 changed files with 133 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
ReactNativeClient/index.android.js
View File

@ -1,90 +1,3 @@
import { main } from 'src/main.js';
main();
// let defaultState = {
// 'myButtonLabel': 'click',
// 'counter': 0,
// }
// function shallowcopy(a) {
// return Object.assign({}, a);
// }
// let store = createStore(reducer, defaultState);
// function reducer(state, action) {
// switch (action.type) {
// case 'SET_BUTTON_NAME':
// var state = shallowcopy(state);
// state.myButtonLabel = action.name;
// return state;
// case 'INC_COUNTER':
// var state = shallowcopy(state);
// state.counter++;
// return state;
// }
// return state;
// }
// class MyInput extends Component {
// render() {
// return <TextInput onChangeText={this.props.onChangeText} />
// }
// }
// const mapStateToInputProps = function(state) {
// return {}
// }
// const mapDispatchToInputProps = function(dispatch) {
// return {
// onChangeText(text) {
// dispatch({
// type: 'SET_BUTTON_NAME',
// name: text
// });
// }
// }
// }
// const MyConnectionInput = connect(
// mapStateToInputProps,
// mapDispatchToInputProps
// )(MyInput)
// class App extends Component {
// render() {
// return (
// <Provider store={store}>
// <View>
// <MyConnectionInput />
// <LoginButton />
// </View>
// </Provider>
// )
// }
// }
// let api = new WebApi('http://192.168.1.2');
// let sessionService = new SessionService(api);
// sessionService.login('laurent@cozic.net', '12345678', clientId).then((session) => {
// console.info('GOT DATA:');
// console.info(session);
// }).catch(function(error) {
// console.warn('GOT ERROR:');
// console.warn(error);
// })
// AppRegistry.registerComponent('AwesomeProject', () => App);
main();

5
ReactNativeClient/src/components/screen-header.js
View File

@ -28,6 +28,10 @@ class ScreenHeaderComponent extends Component {
return this.props.navState.routeName != 'Folders';
}
sideMenuButton_press = () => {
this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
}
backButton_press = () => {
this.props.dispatch({ type: 'Navigation/BACK' });
}
@ -90,6 +94,7 @@ class ScreenHeaderComponent extends Component {
return (
<View style={{ flexDirection: 'row', padding: 10, backgroundColor: '#ffffff', alignItems: 'center' }} >
<Button title="☰" onPress={this.sideMenuButton_press} />
<Button disabled={!this.showBackButton()} title="<" onPress={this.backButton_press}></Button>
<Text style={{ flex:1, marginLeft: 10 }} >{title}</Text>
<Menu onSelect={this.menu_select}>

79
ReactNativeClient/src/components/side-menu-content.js Normal file
View File

@ -0,0 +1,79 @@
import { connect } from 'react-redux'
import { Button } from 'react-native';
import { Log } from 'src/log.js';
const React = require('react');
const {
Dimensions,
StyleSheet,
ScrollView,
View,
Image,
Text,
} = require('react-native');
const { Component } = React;
const window = Dimensions.get('window');
const styles = StyleSheet.create({
menu: {
flex: 1,
backgroundColor: 'white',
padding: 20,
},
name: {
position: 'absolute',
left: 70,
top: 20,
},
item: {
fontSize: 14,
fontWeight: '300',
paddingTop: 5,
},
button: {
flex: 1,
textAlign: 'left',
}
});
class SideMenuContentComponent extends Component {
folder_press(folder) {
this.props.dispatch({
type: 'Navigation/NAVIGATE',
routeName: 'Notes',
folderId: folder.id,
});
this.props.dispatch({
type: 'SIDE_MENU_CLOSE',
});
}
render() {
let buttons = [];
for (let i = 0; i < this.props.folders.length; i++) {
let f = this.props.folders[i];
buttons.push(
<Button style={styles.button} title={f.title} onPress={() => { this.folder_press(f) }} key={f.id} />
);
}
return (
<ScrollView scrollsToTop={false} style={styles.menu}>
{ buttons }
</ScrollView>
);
}
};
const SideMenuContent = connect(
(state) => {
return {
folders: state.folders,
};
}
)(SideMenuContentComponent)
export { SideMenuContent };

16
ReactNativeClient/src/components/side-menu.js Normal file
View File

@ -0,0 +1,16 @@
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Log } from 'src/log.js';
import SideMenu_ from 'react-native-side-menu';
class SideMenuComponent extends SideMenu_ {};
const SideMenu = connect(
(state) => {
return {
isOpen: state.showSideMenu,
};
}
)(SideMenuComponent)
export { SideMenu };

101
ReactNativeClient/src/menu.js
View File

@ -1,101 +0,0 @@
const React = require('react');
const {
Dimensions,
StyleSheet,
ScrollView,
View,
Image,
Text,
} = require('react-native');
const { Component } = React;
const window = Dimensions.get('window');
const uri = 'https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png';
const styles = StyleSheet.create({
menu: {
flex: 1,
width: window.width,
height: window.height,
backgroundColor: 'gray',
padding: 20,
},
avatarContainer: {
marginBottom: 20,
marginTop: 20,
},
avatar: {
width: 48,
height: 48,
borderRadius: 24,
flex: 1,
},
name: {
position: 'absolute',
left: 70,
top: 20,
},
item: {
fontSize: 14,
fontWeight: '300',
paddingTop: 5,
},
});
module.exports = class Menu extends Component {
static propTypes = {
onItemSelected: React.PropTypes.func.isRequired,
};
render() {
return (
<ScrollView scrollsToTop={false} style={styles.menu}>
<View style={styles.avatarContainer}>
<Image
style={styles.avatar}
source={{ uri, }}/>
<Text style={styles.name}>Your name</Text>
</View>
<Text
onPress={() => this.props.onItemSelected('About')}
style={styles.item}>
About
</Text>
<Text
onPress={() => this.props.onItemSelected('Contacts')}
style={styles.item}>
Contacts
</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>Contacts</Text>
<Text style={styles.item}>ContactsLL</Text>
</ScrollView>
);
}
};

39
ReactNativeClient/src/root.js
View File

@ -21,6 +21,9 @@ import { LoginScreen } from 'src/components/screens/login.js'
import { Setting } from 'src/models/setting.js'
import { Synchronizer } from 'src/synchronizer.js'
import { MenuContext } from 'react-native-popup-menu';
//import SideMenu from 'react-native-side-menu';
import { SideMenu } from 'src/components/side-menu.js';
import { SideMenuContent } from 'src/components/side-menu-content.js';
let defaultState = {
notes: [],
@ -29,6 +32,7 @@ let defaultState = {
selectedFolderId: null,
listMode: 'view',
user: { email: 'laurent@cozic.net', session: null },
showSideMenu: false,
};
const reducer = (state = defaultState, action) => {
@ -144,6 +148,24 @@ const reducer = (state = defaultState, action) => {
newState.nav = Object.assign({}, state.nav);
break;
case 'SIDE_MENU_TOGGLE':
newState = Object.assign({}, state);
newState.showSideMenu = !newState.showSideMenu
break;
case 'SIDE_MENU_OPEN':
newState = Object.assign({}, state);
newState.showSideMenu = true
break;
case 'SIDE_MENU_CLOSE':
newState = Object.assign({}, state);
newState.showSideMenu = false
break;
}
return newState;
@ -159,11 +181,6 @@ const AppNavigator = StackNavigator({
Login: {screen: LoginScreen},
});
const SideMenu = require('react-native-side-menu');
import Menu from 'src/menu.js';
class AppComponent extends React.Component {
componentDidMount() {
@ -211,11 +228,19 @@ class AppComponent extends React.Component {
});
}
sideMenu_change = (isOpen) => {
// Make sure showSideMenu property of state is updated
// when the menu is open/closed.
this.props.dispatch({
type: isOpen ? 'SIDE_MENU_OPEN' : 'SIDE_MENU_CLOSE',
});
}
render() {
const menu = <Menu/>;
const sideMenuContent = <SideMenuContent/>;
return (
<SideMenu menu={menu}>
<SideMenu menu={sideMenuContent} onChange={this.sideMenu_change}>
<MenuContext style={{ flex: 1 }}>
<AppNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,