Mobile: Adding note side menu

ReactNativeClient/lib/components/screens/note.js

@@ -186,6 +186,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.cameraView_onPhoto = this.cameraView_onPhoto.bind(this);
 		this.cameraView_onCancel = this.cameraView_onCancel.bind(this);
 		this.onMarkForDownload = this.onMarkForDownload.bind(this);
+		this.menuOptions = this.menuOptions.bind(this);
 	}
 
 	styles() {
@@ -273,6 +274,13 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
+	componentDidMount() {
+		this.props.dispatch({
+			type: 'NOTE_SIDE_MENU_OPTIONS_SET',
+			options: this.menuOptions,
+		});
+	}
+
 	componentWillUnmount() {
 		BackButtonService.removeHandler(this.backHandler);
 		NavService.removeHandler(this.navHandler);

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

@@ -0,0 +1,113 @@
+const React = require('react'); const Component = React.Component;
+const { 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');
+const Note = require('lib/models/Note.js');
+const Folder = require('lib/models/Folder.js');
+const Setting = require('lib/models/Setting.js');
+const { FoldersScreenUtils } = require('lib/folders-screen-utils.js');
+const { Synchronizer } = require('lib/synchronizer.js');
+const NavService = require('lib/services/NavService.js');
+const { reg } = require('lib/registry.js');
+const { _ } = require('lib/locale.js');
+const { globalStyle, themeStyle } = require('lib/components/global-style.js');
+const shared = require('lib/components/shared/side-menu-shared.js');
+const { ActionButton } = require('lib/components/action-button.js');
+
+class SideMenuContentNoteComponent extends Component {
+
+	constructor() {
+		super();
+
+		this.styles_ = {};
+	}
+
+	styles() {
+		const theme = themeStyle(this.props.theme);
+
+		if (this.styles_[this.props.theme]) return this.styles_[this.props.theme];
+		this.styles_ = {};
+
+		let styles = {
+			menu: {
+				flex: 1,
+				backgroundColor: theme.backgroundColor
+			},
+			button: {
+				flex: 1,
+				flexDirection: 'row',
+				height: 36,
+				alignItems: 'center',
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+			},
+			sidebarIcon: {
+				fontSize: 22,
+				color: theme.color,
+			},
+		};
+
+		styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
+		styles.sideButtonText = Object.assign({}, styles.buttonText);
+
+		this.styles_[this.props.theme] = StyleSheet.create(styles);
+		return this.styles_[this.props.theme];
+	}
+
+	makeDivider(key) {
+		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>
+	}
+
+	renderSideBarButton(key, title, iconName, onPressHandler) {
+		const theme = themeStyle(this.props.theme);
+
+		return (
+			<TouchableOpacity key={key} onPress={onPressHandler}>
+				<View style={this.styles().sideButton}>
+					{ !iconName ? null : <Icon name={iconName} style={this.styles().sidebarIcon} /> }
+					<Text style={this.styles().sideButtonText}>{title}</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+
+	render() {
+		const theme = themeStyle(this.props.theme);
+
+		let items = [];
+
+		const options = this.props.options ? this.props.options() : [];
+
+		for (const option of options) {
+			items.push(this.renderSideBarButton(option.title, option.title, null, option.onPress));
+		}
+
+		let style = {
+			flex:1,
+			borderRightWidth: 1,
+			borderRightColor: globalStyle.dividerColor,
+			backgroundColor: theme.backgroundColor,
+		};
+
+		return (
+			<View style={style}>
+				<View style={{flex:1, opacity: this.props.opacity}}>
+					<ScrollView scrollsToTop={false} style={this.styles().menu}>
+						{ items }
+					</ScrollView>
+				</View>
+			</View>
+		);
+	}
+};
+
+const SideMenuContentNote = connect(
+	(state) => {
+		return {
+			theme: state.settings.theme,
+		};
+	}
+)(SideMenuContentNoteComponent)
+
+module.exports = { SideMenuContentNote };

ReactNativeClient/root.js

@@ -45,6 +45,7 @@ const Setting = require('lib/models/Setting.js');
 const { MenuContext } = require('react-native-popup-menu');
 const { SideMenu } = require('lib/components/side-menu.js');
 const { SideMenuContent } = require('lib/components/side-menu-content.js');
+const { SideMenuContentNote } = require('lib/components/side-menu-content-note.js');
 const { DatabaseDriverReactNative } = require('lib/database-driver-react-native');
 const { reg } = require('lib/registry.js');
 const { _, setLocale, closestSupportedLocale, defaultLocale } = require('lib/locale.js');
@@ -176,6 +177,7 @@ const appDefaultState = Object.assign({}, defaultState, {
 	sideMenuOpenPercent: 0,
 	route: DEFAULT_ROUTE,
 	noteSelectionEnabled: false,
+	noteSideMenuOptions: null,
 });
 
 const appReducer = (state = appDefaultState, action) => {
@@ -325,6 +327,11 @@ const appReducer = (state = appDefaultState, action) => {
 				newState.selectedNoteIds = [];
 				break;
 
+			case 'NOTE_SIDE_MENU_OPTIONS_SET':
+
+				newState = Object.assign({}, state);
+				newState.noteSideMenuOptions = action.options;
+				break;
 
 		}
 	} catch (error) {
@@ -685,7 +692,15 @@ class AppComponent extends React.Component {
 		if (this.props.appState != 'ready') return null;
 		const theme = themeStyle(this.props.theme);
 
-		const sideMenuContent = <SafeAreaView style={{flex:1, backgroundColor: theme.backgroundColor}}><SideMenuContent/></SafeAreaView>;
+		let sideMenuContent = null;
+		let menuPosition = 'left';
+
+		if (this.props.routeName === 'Note') {
+			sideMenuContent = <SafeAreaView style={{flex:1, backgroundColor: theme.backgroundColor}}><SideMenuContentNote options={this.props.noteSideMenuOptions}/></SafeAreaView>;
+			menuPosition = 'right';
+		} else {
+			sideMenuContent = <SafeAreaView style={{flex:1, backgroundColor: theme.backgroundColor}}><SideMenuContent/></SafeAreaView>;
+		}
 
 		const appNavInit = {
 			Notes: { screen: NotesScreen },
@@ -704,6 +719,7 @@ class AppComponent extends React.Component {
 		return (
 			<SideMenu
 				menu={sideMenuContent}
+				menuPosition={menuPosition}
 				onChange={(isOpen) => this.sideMenu_change(isOpen)}
 				onSliding={(percent) => {
 					this.props.dispatch({
@@ -733,7 +749,9 @@ const mapStateToProps = (state) => {
 		appState: state.appState,
 		noteSelectionEnabled: state.noteSelectionEnabled,
 		selectedFolderId: state.selectedFolderId,
-		theme: state.settings.theme
+		routeName: state.route.routeName,
+		theme: state.settings.theme,
+		noteSideMenuOptions: state.noteSideMenuOptions,
 	};
 };