Merge pull request #424 from Abijeet/master

Adds support to toggle the sidebar.

ElectronClient/app/app.js

@@ -38,6 +38,7 @@ const appDefaultState = Object.assign({}, defaultState, {
 	fileToImport: null,
 	windowCommand: null,
 	noteVisiblePanes: ['editor', 'viewer'],
+	sidebarVisibility: true,
 	windowContentSize: bridge().windowContentSize(),
 });
 
@@ -85,7 +86,7 @@ class Application extends BaseApplication {
 
 						action = newAction;
 					}
-					
+
 					if (!goingBack) newNavHistory.push(currentRoute);
 					newState.navHistory = newNavHistory
 					newState.route = action;
@@ -123,11 +124,22 @@ class Application extends BaseApplication {
 					break;
 
 				case 'NOTE_VISIBLE_PANES_SET':
-				
+
 					newState = Object.assign({}, state);
 					newState.noteVisiblePanes = action.panes;
 					break;
 
+				case 'SIDEBAR_VISIBILITY_TOGGLE':
+
+					newState = Object.assign({}, state);
+					newState.sidebarVisibility = !state.sidebarVisibility;
+					break;
+
+				case 'SIDEBAR_VISIBILITY_SET':
+					newState = Object.assign({}, state);
+					newState.sidebarVisibility = action.visibility;
+					break;
+
 			}
 		} catch (error) {
 			error.message = 'In reducer: ' + error.message + ' Action: ' + JSON.stringify(action);
@@ -170,6 +182,10 @@ class Application extends BaseApplication {
 			Setting.setValue('noteVisiblePanes', newState.noteVisiblePanes);
 		}
 
+		if (['SIDEBAR_VISIBILITY_TOGGLE', 'SIDEBAR_VISIBILITY_SET'].indexOf(action.type) >= 0) {
+			Setting.setValue('sidebarVisibility', newState.sidebarVisibility);
+		}
+
 		return result;
 	}
 
@@ -195,7 +211,7 @@ class Application extends BaseApplication {
 					Setting.setValue('notes.sortOrder.field', field);
 					this.refreshMenu();
 				}
-			});		
+			});
 		}
 
 		const importItems = [];
@@ -273,7 +289,7 @@ class Application extends BaseApplication {
 				this.dispatch({
 					type: 'WINDOW_COMMAND',
 					name: 'exportPdf',
-				});				
+				});
 			}
 		});
 
@@ -596,7 +612,7 @@ class Application extends BaseApplication {
 					bridge().checkForUpdates(true, bridge().window(), this.checkForUpdateLoggerPath());
 				}
 			}
-			
+
 			// Initial check on startup
 			setTimeout(() => { runAutoUpdateCheck() }, 5000);
 			// Then every x hours

ElectronClient/app/gui/MainScreen.jsx

@@ -25,7 +25,7 @@ class MainScreenComponent extends React.Component {
 			modalLayer: {
 				visible: false,
 				message: '',
-			},
+			}
 		});
 	}
 
@@ -41,6 +41,12 @@ class MainScreenComponent extends React.Component {
 		});
 	}
 
+	toggleSidebar() {
+		this.props.dispatch({
+			type: 'SIDEBAR_VISIBILITY_TOGGLE',
+		});
+	}
+
 	async doCommand(command) {
 		if (!command) return;
 
@@ -83,7 +89,7 @@ class MainScreenComponent extends React.Component {
 						if (answer) {
 							let folder = null;
 							try {
-								folder = await Folder.save({ title: answer }, { userSideValidation: true });		
+								folder = await Folder.save({ title: answer }, { userSideValidation: true });
 							} catch (error) {
 								bridge().showErrorMessageBox(error.message);
 							}
@@ -160,9 +166,11 @@ class MainScreenComponent extends React.Component {
 					id: this.searchId_,
 				});
 			}
-			
+
 		} else if (command.name === 'toggleVisiblePanes') {
 			this.toggleVisiblePanes();
+		} else if (command.name === 'toggleSidebar') {
+			this.toggleSidebar();
 		} else if (command.name === 'showModalMessage') {
 			this.setState({ modalLayer: { visible: true, message: command.message } });
 		} else if (command.name === 'hideModalMessage') {
@@ -203,7 +211,7 @@ class MainScreenComponent extends React.Component {
 						this.setState({ promptOptions: null });
 					}
 				},
-			});	
+			});
 		} else {
 			commandProcessed = false;
 		}
@@ -216,8 +224,8 @@ class MainScreenComponent extends React.Component {
 		}
 	}
 
-	styles(themeId, width, height, messageBoxVisible) {
-		const styleKey = themeId + '_' + width + '_' + height + '_' + messageBoxVisible;
+	styles(themeId, width, height, messageBoxVisible, isSidebarVisible) {
+		const styleKey = themeId + '_' + width + '_' + height + '_' + messageBoxVisible + '_' + (+isSidebarVisible);
 		if (styleKey === this.styleKey_) return this.styles_;
 
 		const theme = themeStyle(themeId);
@@ -246,7 +254,12 @@ class MainScreenComponent extends React.Component {
 			height: rowHeight,
 			display: 'inline-block',
 			verticalAlign: 'top',
-		};
+    };
+
+		if (isSidebarVisible === false) {
+			this.styles_.sideBar.width = 0;
+			this.styles_.sideBar.display = 'none';
+		}
 
 		this.styles_.noteList = {
 			width: Math.floor(layoutUtils.size(width * .2, 150, 300)),
@@ -287,20 +300,27 @@ class MainScreenComponent extends React.Component {
 		const folders = this.props.folders;
 		const notes = this.props.notes;
 		const messageBoxVisible = this.props.hasDisabledSyncItems || this.props.showMissingMasterKeyMessage;
-		const styles = this.styles(this.props.theme, style.width, style.height, messageBoxVisible);
+		const sidebarVisibility = this.props.sidebarVisibility;
+		const styles = this.styles(this.props.theme, style.width, style.height, messageBoxVisible, sidebarVisibility);
 		const theme = themeStyle(this.props.theme);
 		const selectedFolderId = this.props.selectedFolderId;
 		const onConflictFolder = this.props.selectedFolderId === Folder.conflictFolderId();
 
 		const headerItems = [];
 
+		headerItems.push({
+			title: _('Toggle sidebar'),
+			iconName: 'fa-bars',
+			onClick: () => { this.doCommand({ name: 'toggleSidebar'}) }
+		});
+
 		headerItems.push({
 			title: _('New note'),
 			iconName: 'fa-file-o',
 			enabled: !!folders.length && !onConflictFolder,
 			onClick: () => { this.doCommand({ name: 'newNote' }) },
 		});
-				
+
 		headerItems.push({
 			title: _('New to-do'),
 			iconName: 'fa-check-square-o',
@@ -400,6 +420,7 @@ const mapStateToProps = (state) => {
 		theme: state.settings.theme,
 		windowCommand: state.windowCommand,
 		noteVisiblePanes: state.noteVisiblePanes,
+		sidebarVisibility: state.sidebarVisibility,
 		folders: state.folders,
 		notes: state.notes,
 		hasDisabledSyncItems: state.hasDisabledSyncItems,
@@ -410,4 +431,4 @@ const mapStateToProps = (state) => {
 
 const MainScreen = connect(mapStateToProps)(MainScreenComponent);
 
-module.exports = { MainScreen };
+module.exports = { MainScreen };

ElectronClient/app/gui/Root.jsx

@@ -47,6 +47,11 @@ async function initialize(dispatch) {
 		type: 'NOTE_VISIBLE_PANES_SET',
 		panes: Setting.value('noteVisiblePanes'),
 	});
+
+	store.dispatch({
+		type: 'SIDEBAR_VISIBILITY_SET',
+		visibility: Setting.value('sidebarVisibility')
+	});
 }
 
 class RootComponent extends React.Component {

ReactNativeClient/lib/models/Setting.js

@@ -98,6 +98,7 @@ class Setting extends BaseModel {
 				};
 			}},
 			'noteVisiblePanes': { value: ['editor', 'viewer'], type: Setting.TYPE_ARRAY, public: false, appTypes: ['desktop'] },
+			'sidebarVisibility': { value: true, type: Setting.TYPE_BOOL, public: false, appTypes: ['desktop'] },
 			'showAdvancedOptions': { value: false, type: Setting.TYPE_BOOL, public: true, appTypes: ['mobile' ], label: () => _('Show advanced options') },
 			'sync.target': { value: SyncTargetRegistry.nameToId('dropbox'), type: Setting.TYPE_INT, isEnum: true, public: true, label: () => _('Synchronisation target'), description: (appType) => { return appType !== 'cli' ? null : _('The target to synchonise to. Each sync target may have additional parameters which are named as `sync.NUM.NAME` (all documented below).') }, options: () => {
 				return SyncTargetRegistry.idAndLabelPlainObject();
@@ -224,7 +225,7 @@ class Setting extends BaseModel {
 		if (!this.cache_) throw new Error('Settings have not been initialized!');
 
 		value = this.formatValue(key, value);
-		
+
 		for (let i = 0; i < this.cache_.length; i++) {
 			let c = this.cache_[i];
 			if (c.key == key) {
@@ -291,7 +292,7 @@ class Setting extends BaseModel {
 		if (md.type == Setting.TYPE_OBJECT) return value ? JSON.stringify(value) : '{}';
 		if (md.type == Setting.TYPE_STRING) return value ? value + '' : '';
 
-		throw new Error('Unhandled value type: ' + md.type);	
+		throw new Error('Unhandled value type: ' + md.type);
 	}
 
 	static formatValue(key, value) {
@@ -461,7 +462,7 @@ class Setting extends BaseModel {
 		}
 
 		await BaseModel.db().transactionExecBatch(queries);
-		
+
 		this.logger().info('Settings have been saved.');
 	}