Mobile: Added support for sub-notebooks

ElectronClient/app/gui/SideBar.jsx

@@ -291,7 +291,7 @@ class SideBarComponent extends React.Component {
 			paddingLeft: 8 + depth * 10,
 		}
 
-		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-minus-square' : 'fa-plus-square';
+		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-plus-square' : 'fa-minus-square';
 		const expandIcon = <i style={expandIconStyle} className={"fa " + iconName}></i>
 		const expandLink = hasChildren ? <a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>{expandIcon}</a> : <span style={expandLinkStyle}>{expandIcon}</span>
 

ReactNativeClient/lib/components/shared/reduxSharedMiddleware.js

@@ -1,3 +1,5 @@
+const Setting = require('lib/models/Setting');
+
 const reduxSharedMiddleware = function(store, next, action) {
 	const newState = store.getState();
 

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

@@ -64,11 +64,13 @@ class SideMenuContentComponent extends Component {
 		};
 
 		styles.folderButton = Object.assign({}, styles.button);
+		styles.folderButton.paddingLeft = 0;
 		styles.folderButtonText = Object.assign({}, styles.buttonText);
 		styles.folderButtonSelected = Object.assign({}, styles.folderButton);
 		styles.folderButtonSelected.backgroundColor = theme.selectedColor;
 		styles.folderIcon = Object.assign({}, theme.icon);
-		styles.folderIcon.color = '#0072d5';
+		styles.folderIcon.color = theme.colorFaded;//'#0072d5';
+		styles.folderIcon.paddingTop = 3;
 
 		styles.tagButton = Object.assign({}, styles.button);
 		styles.tagButtonSelected = Object.assign({}, styles.tagButton);
@@ -94,6 +96,13 @@ class SideMenuContentComponent extends Component {
 		});
 	}
 
+	folder_togglePress(folder) {
+		this.props.dispatch({
+			type: 'FOLDER_TOGGLE',
+			id: folder.id,
+		});
+	}
+
 	tag_press(tag) {
 		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
 
@@ -109,17 +118,41 @@ class SideMenuContentComponent extends Component {
 		if (actionDone === 'auth') this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
 	}
 
-	folderItem(folder, selected) {
+	folderItem(folder, selected, hasChildren, depth) {
-		const iconComp = selected ? <Icon name='md-folder-open' style={this.styles().folderIcon} /> : <Icon name='md-folder' style={this.styles().folderIcon} />;
+		const theme = themeStyle(this.props.theme);
-		const folderButtonStyle = selected ? this.styles().folderButtonSelected : this.styles().folderButton;
+
+		const folderButtonStyle = {
+			flex: 1,
+			flexDirection: 'row',
+			height: 36,
+			alignItems: 'center',
+			paddingLeft: theme.marginLeft,
+			paddingRight: theme.marginRight,
+		};
+		if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
+		folderButtonStyle.paddingLeft = depth * 10;
+
+		const iconWrapperStyle = { paddingLeft: 10, paddingRight: 10 };
+		if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
+
+		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'md-arrow-dropdown' : 'md-arrow-dropup';
+		const iconComp = <Icon name={iconName} style={this.styles().folderIcon} />
+
+		const iconWrapper = !hasChildren ? null : (
+			<TouchableOpacity style={iconWrapperStyle} folderid={folder.id} onPress={() => { if (hasChildren) this.folder_togglePress(folder) }}>
+				{ iconComp }
+			</TouchableOpacity>
+		);
 
 		return (
-			<TouchableOpacity key={folder.id} onPress={() => { this.folder_press(folder) }}>
+			<View key={folder.id} style={{ flex: 1, flexDirection: 'row' }}>
+				<TouchableOpacity style={{ flex: 1 }} onPress={() => { this.folder_press(folder) }}>
 					<View style={folderButtonStyle}>
-					{ iconComp }
 						<Text numberOfLines={1} style={this.styles().folderButtonText}>{Folder.displayTitle(folder)}</Text>
 					</View>
 				</TouchableOpacity>
+				{ iconWrapper }
+			</View>
 		);
 	}
 
@@ -204,9 +237,6 @@ class SideMenuContentComponent extends Component {
 		return (
 			<View style={style}>
 				<View style={{flex:1, opacity: this.props.opacity}}>
-					<View style={{flexDirection:'row'}}>
-						<Image style={{flex:1, height: 100}} source={require('../images/SideMenuHeader.png')} />
-					</View>
 					<ScrollView scrollsToTop={false} style={this.styles().menu}>
 						{ items }
 					</ScrollView>
@@ -229,6 +259,7 @@ const SideMenuContent = connect(
 			locale: state.settings.locale,
 			theme: state.settings.theme,
 			opacity: state.sideMenuOpenPercent,
+			collapsedFolderIds: state.collapsedFolderIds,
 		};
 	}
 )(SideMenuContentComponent)

ReactNativeClient/lib/models/Folder.js

@@ -18,7 +18,7 @@ class Folder extends BaseItem {
 	static async serialize(folder) {
 		let fieldNames = this.fieldNames();
 		fieldNames.push('type_');
-		lodash.pull(fieldNames, 'parent_id');
+		//lodash.pull(fieldNames, 'parent_id');
 		return super.serialize(folder, 'folder', fieldNames);
 	}
 

ReactNativeClient/root.js

@@ -8,6 +8,7 @@ const AlarmService = require('lib/services/AlarmService.js');
 const AlarmServiceDriver = require('lib/services/AlarmServiceDriver');
 const Alarm = require('lib/models/Alarm');
 const { createStore, applyMiddleware } = require('redux');
+const reduxSharedMiddleware = require('lib/components/shared/reduxSharedMiddleware');
 const { shimInit } = require('lib/shim-init-react.js');
 const { time } = require('lib/time-utils.js');
 const { AppNav } = require('lib/components/app-nav.js');
@@ -88,6 +89,8 @@ const generalMiddleware = store => next => async (action) => {
 	const result = next(action);
 	const newState = store.getState();
 
+	reduxSharedMiddleware(store, next, action);
+
 	if (action.type == "NAV_GO") Keyboard.dismiss();
 
 	if (["NOTE_UPDATE_ONE", "NOTE_DELETE", "FOLDER_UPDATE_ONE", "FOLDER_DELETE"].indexOf(action.type) >= 0) {
@@ -444,6 +447,11 @@ async function initialize(dispatch) {
 
 		if (!folder) folder = await Folder.defaultFolder();
 
+		dispatch({
+			type: 'FOLDER_SET_COLLAPSED_ALL',
+			ids: Setting.value('collapsedFolderIds'),
+		});
+
 		if (!folder) {
 			dispatch({
 				type: 'NAV_GO',