Added sidebar

ElectronClient/app/gui/NoteList.jsx

@@ -14,6 +14,7 @@ class NoteListComponent extends React.Component {
 
 		let classes = ['item'];
 		classes.push(index % 2 === 0 ? 'even' : 'odd');
+		if (this.props.selectedNoteId === item.id) classes.push('selected');
 		return <div onClick={() => { onClick(item) }} className={classes.join(' ')} key={index}>{item.title + ' ' + item.id.substr(0,4)}</div>
 	}
 
@@ -34,6 +35,7 @@ class NoteListComponent extends React.Component {
 const mapStateToProps = (state) => {
 	return {
 		notes: state.notes,
+		selectedNoteId: state.selectedNoteId,
 	};
 };
 

ElectronClient/app/gui/NoteText.jsx

@@ -92,8 +92,6 @@ class NoteTextComponent extends React.Component {
 	async reloadNote(noteId) {
 		const note = noteId ? await Note.load(noteId) : null;
 
-		console.info('Reload note: ' + noteId, note);
-
 		this.setState({
 			note: note,
 		});
@@ -103,8 +101,6 @@ class NoteTextComponent extends React.Component {
 		const note = this.state.note;
 		const body = note ? note.body : 'no note';
 
-		console.info('NOTE: ' + (note ? note.title + ' ' + note.id : 'UNDEFINED'));
-
 		if (this.state.webviewReady) {
 			const mdOptions = {
 				onResourceLoaded: () => {
@@ -121,6 +117,7 @@ class NoteTextComponent extends React.Component {
 		const webviewStyle = {
 			width: this.props.style.width,
 			height: this.props.style.height,
+			overflow: 'hidden',
 		};
 
 		return (

ElectronClient/app/gui/Root.jsx

@@ -3,6 +3,7 @@ const { render } = require('react-dom');
 const { createStore } = require('redux');
 const { connect, Provider } = require('react-redux');
 
+const { SideBar } = require('./SideBar.min.js');
 const { NoteList } = require('./NoteList.min.js');
 const { NoteText } = require('./NoteText.min.js');
 
@@ -49,14 +50,21 @@ class ReactRootComponent extends React.Component {
 		};
 
 		const noteListStyle = {
-			width: Math.floor(this.props.size.width / 2),
+			width: Math.floor(this.props.size.width / 3),
 			height: this.props.size.height,
 			display: 'inline-block',
 			verticalAlign: 'top',
 		};
 
 		const noteTextStyle = {
-			width: this.props.size.width - noteListStyle.width,
+			width: noteListStyle.width,
+			height: this.props.size.height,
+			display: 'inline-block',
+			verticalAlign: 'top',
+		};
+
+		const sideBarStyle = {
+			width: this.props.size.width - (noteTextStyle.width + noteListStyle.width),
 			height: this.props.size.height,
 			display: 'inline-block',
 			verticalAlign: 'top',
@@ -64,6 +72,7 @@ class ReactRootComponent extends React.Component {
 
 		return (
 			<div style={style}>
+				<SideBar style={sideBarStyle}></SideBar>
 				<NoteList itemHeight={40} style={noteListStyle}></NoteList>
 				<NoteText style={noteTextStyle}></NoteText>
 			</div>

ElectronClient/app/gui/SideBar.jsx

@@ -0,0 +1,92 @@
+const React = require('react');
+const { connect } = require('react-redux');
+const shared = require('lib/components/shared/side-menu-shared.js');
+const { Synchronizer } = require('lib/synchronizer.js');
+
+class SideBarComponent extends React.Component {
+
+	folderItem_click(folder) {
+		this.props.dispatch({
+			type: 'FOLDERS_SELECT',
+			id: folder ? folder.id : null,
+		});
+	}
+
+	tagItem_click(tag) {
+		this.props.dispatch({
+			type: 'TAGS_SELECT',
+			id: tag ? tag.id : null,
+		});
+	}
+
+	folderItem(folder, selected) {
+		let classes = [];
+		if (selected) classes.push('selected');
+		return <div key={folder.id} className={classes.join(' ')} onClick={() => {this.folderItem_click(folder)}}>{folder.title}</div>
+	}
+
+	tagItem(tag, selected) {
+		let classes = [];
+		if (selected) classes.push('selected');
+		return <div key={tag.id} className={classes.join(' ')} onClick={() => {this.tagItem_click(tag)}}>Tag: {tag.title}</div>
+	}
+
+	makeDivider(key) {
+		return <div style={{height:2, backgroundColor:'blue' }} key={key}></div>
+	}
+
+	synchronizeButton(label) {
+		return <div key="sync_button">{label}</div>
+	}
+
+	render() {
+		let items = [];
+
+		if (this.props.folders.length) {
+			const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
+			items = items.concat(folderItems);
+			if (items.length) items.push(this.makeDivider('divider_1'));
+		}
+
+		if (this.props.tags.length) {
+			const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
+
+			items.push(<div className="tags" key="tag_items">{tagItems}</div>);
+
+			if (tagItems.length) items.push(this.makeDivider('divider_2'));
+		}
+
+		let lines = Synchronizer.reportToLines(this.props.syncReport);
+		while (lines.length < 10) lines.push(''); // Add blank lines so that height of report text is fixed and doesn't affect scrolling
+		const syncReportText = lines.join("\n");
+
+		items.push(this.synchronizeButton(this.props.syncStarted ? 'cancel' : 'sync'));
+
+		items.push(<div key='sync_report'>{syncReportText}</div>);
+
+		return (
+			<div className="side-bar" style={this.props.style}>
+				{items}
+			</div>
+		);
+	}
+
+}
+
+const mapStateToProps = (state) => {
+	return {
+		folders: state.folders,
+		tags: state.tags,
+		syncStarted: state.syncStarted,
+		syncReport: state.syncReport,
+		selectedFolderId: state.selectedFolderId,
+		selectedTagId: state.selectedTagId,
+		notesParentType: state.notesParentType,
+		locale: state.settings.locale,
+		theme: state.settings.theme,
+	};
+};
+
+const SideBar = connect(mapStateToProps)(SideBarComponent);
+
+module.exports = { SideBar };

ElectronClient/app/style.css

@@ -21,3 +21,11 @@ body {
 .note-list .item.odd {
 	background-color: lightgray;
 }
+
+.note-list .selected {
+	font-weight: bold;
+}
+
+.side-bar .selected {
+	font-weight: bold;
+}

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

@@ -0,0 +1,23 @@
+let shared = {};
+
+shared.renderFolders = function(props, renderItem) {
+	let items = [];
+	for (let i = 0; i < props.folders.length; i++) {
+		let folder = props.folders[i];
+		items.push(renderItem(folder, props.selectedFolderId == folder.id && props.notesParentType == 'Folder'));
+	}
+	return items;
+}
+
+shared.renderTags = function(props, renderItem) {
+	let tags = props.tags.slice();
+	tags.sort((a, b) => { return a.title < b.title ? -1 : +1; });
+	let tagItems = [];
+	for (let i = 0; i < tags.length; i++) {
+		const tag = tags[i];
+		tagItems.push(renderItem(tag, props.selectedTagId == tag.id && props.notesParentType == 'Tag'));
+	}
+	return tagItems;
+}
+
+module.exports = shared;

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

@@ -11,6 +11,7 @@ const { Synchronizer } = require('lib/synchronizer.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');
 
 class SideMenuContentComponent extends Component {
 
@@ -188,22 +189,13 @@ class SideMenuContentComponent extends Component {
 		items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>);
 
 		if (this.props.folders.length) {
-			for (let i = 0; i < this.props.folders.length; i++) {
+			const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
-				let folder = this.props.folders[i];
+			items = items.concat(folderItems);
-				items.push(this.folderItem(folder, this.props.selectedFolderId == folder.id && this.props.notesParentType == 'Folder'));
-			}
-
 			if (items.length) items.push(this.makeDivider('divider_1'));
 		}
 
 		if (this.props.tags.length) {
-			let tags = this.props.tags.slice();
+			const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
-			tags.sort((a, b) => { return a.title < b.title ? -1 : +1; });
-			let tagItems = [];
-			for (let i = 0; i < tags.length; i++) {
-				const tag = tags[i];
-				tagItems.push(this.tagItem(tag, this.props.selectedTagId == tag.id && this.props.notesParentType == 'Tag'));
-			}
 
 			items.push(
 				<View style={this.styles().tagItemList} key="tag_items">