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(),
 });
 
@@ -128,6 +129,17 @@ class Application extends BaseApplication {
 					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;
 	}
 

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;
 
@@ -163,6 +169,8 @@ class MainScreenComponent extends React.Component {
 
 		} 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') {
@@ -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);
@@ -248,6 +256,11 @@ class MainScreenComponent extends React.Component {
 			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)),
 			height: rowHeight,
@@ -287,13 +300,20 @@ 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',
@@ -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,

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