Electron: Started UI and backend for sub-notebook support

ElectronClient/app/gui/SideBar.jsx

@@ -23,23 +23,39 @@ class SideBarComponent extends React.Component {
 			root: {
 				backgroundColor: theme.backgroundColor2,
 			},
-			listItem: {
+			listItemContainer: {
+				boxSizing: "border-box",
 				height: itemHeight,
+				paddingLeft: 14,
+				display: "flex",
+				alignItems: "stretch",
+			},
+			listItem: {
 				fontFamily: theme.fontFamily,
 				fontSize: theme.fontSize,
 				textDecoration: "none",
-				boxSizing: "border-box",
 				color: theme.color2,
-				paddingLeft: 14,
-				display: "flex",
-				alignItems: "center",
 				cursor: "default",
 				opacity: 0.8,
 				whiteSpace: "nowrap",
+				display: "flex",
+				flex: 1,
+				alignItems: 'center',
 			},
 			listItemSelected: {
 				backgroundColor: theme.selectedColor2,
 			},
+			listItemExpandIcon: {
+				color: theme.color2,
+				cursor: "default",
+				opacity: 0.8,
+				fontFamily: theme.fontFamily,
+				fontSize: theme.fontSize,
+				textDecoration: "none",
+				paddingRight: 5,
+				display: "flex",
+				alignItems: 'center',
+			},
 			conflictFolder: {
 				color: theme.colorError2,
 				fontWeight: "bold",
@@ -194,9 +210,8 @@ class SideBarComponent extends React.Component {
 		await shared.synchronize_press(this);
 	}
 
-	folderItem(folder, selected) {
+	folderItem(folder, selected, hasChildren, depth) {
 		let style = Object.assign({}, this.style().listItem);
-		if (selected) style = Object.assign(style, this.style().listItemSelected);
 		if (folder.id === Folder.conflictFolderId()) style = Object.assign(style, this.style().conflictFolder);
 
 		const onDragOver = (event, folder) => {
@@ -215,27 +230,36 @@ class SideBarComponent extends React.Component {
 
 		const itemTitle = Folder.displayTitle(folder);
 
+		let containerStyle = Object.assign({}, this.style().listItemContainer);
+		containerStyle.marginLeft = depth * 5;
+
+		if (selected) containerStyle = Object.assign(containerStyle, this.style().listItemSelected);
+
+		const expandIcon = !hasChildren ? null : <a href="#" style={this.style().listItemExpandIcon}>[+]</a>
+
 		return (
-			<a
-				className="list-item"
-				onDragOver={event => {
-					onDragOver(event, folder);
-				}}
-				onDrop={event => {
-					onDrop(event, folder);
-				}}
-				href="#"
-				data-id={folder.id}
-				data-type={BaseModel.TYPE_FOLDER}
-				onContextMenu={event => this.itemContextMenu(event)}
-				key={folder.id}
-				style={style}
-				onClick={() => {
-					this.folderItem_click(folder);
-				}}
-			>
-				{itemTitle}
-			</a>
+			<div style={containerStyle} key={folder.id}>
+				{ expandIcon }
+				<a
+					className="list-item"
+					onDragOver={event => {
+						onDragOver(event, folder);
+					}}
+					onDrop={event => {
+						onDrop(event, folder);
+					}}
+					href="#"
+					data-id={folder.id}
+					data-type={BaseModel.TYPE_FOLDER}
+					onContextMenu={event => this.itemContextMenu(event)}
+					style={style}
+					onClick={() => {
+						this.folderItem_click(folder);
+					}}
+				>
+					{itemTitle}
+				</a>
+			</div>
 		);
 	}
 
@@ -345,18 +369,6 @@ class SideBarComponent extends React.Component {
 			);
 		}
 
-		// if (this.props.searches.length) {
-		// 	items.push(this.makeHeader("searchHeader", _("Searches"), "fa-search"));
-
-		// 	const searchItems = shared.renderSearches(this.props, this.searchItem.bind(this));
-
-		// 	items.push(
-		// 		<div className="searches" key="search_items">
-		// 			{searchItems}
-		// 		</div>
-		// 	);
-		// }
-
 		let lines = Synchronizer.reportToLines(this.props.syncReport);
 		const syncReportText = [];
 		for (let i = 0; i < lines.length; i++) {

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

@@ -1,14 +1,31 @@
+const ArrayUtils = require('lib/ArrayUtils');
+
 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'));
+function folderHasChildren_(folders, folderId) {
+	for (let i = 0; i < folders.length; i++) {
+		let folder = folders[i];
+		if (folder.parent_id === folderId) return true;
+	}
+	return false;
+}
+
+function renderFoldersRecursive_(props, renderItem, items, parentId, depth) {
+	const folders = props.folders;
+	for (let i = 0; i < folders.length; i++) {
+		let folder = folders[i];
+		if (folder.parent_id !== parentId) continue;
+		const hasChildren = folderHasChildren_(folders, folder.id);
+		items.push(renderItem(folder, props.selectedFolderId == folder.id && props.notesParentType == 'Folder', hasChildren, depth));
+		if (hasChildren) items = renderFoldersRecursive_(props, renderItem, items, folder.id, depth + 1);
 	}
 	return items;
 }
 
+shared.renderFolders = function(props, renderItem) {
+	return renderFoldersRecursive_(props, renderItem, [], '', 0);
+}
+
 shared.renderTags = function(props, renderItem) {
 	let tags = props.tags.slice();
 	tags.sort((a, b) => { return a.title < b.title ? -1 : +1; });

ReactNativeClient/lib/joplin-database.js

@@ -202,14 +202,14 @@ class JoplinDatabase extends Database {
 		// default value and thus might cause problems. In that case, the default value
 		// must be set in the synchronizer too.
 
-		const existingDatabaseVersions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+		const existingDatabaseVersions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 		let currentVersionIndex = existingDatabaseVersions.indexOf(fromVersion);
 
-		if (currentVersionIndex < 0) throw new Error('Unknown profile version. Most likely this is an old version of Joplin, while the profile was created by a newer version. Please upgrade Joplin at https://joplin.cozic.net and try again.');
-
 		// currentVersionIndex < 0 if for the case where an old version of Joplin used with a newer
 		// version of the database, so that migration is not run in this case.
+		if (currentVersionIndex < 0) throw new Error('Unknown profile version. Most likely this is an old version of Joplin, while the profile was created by a newer version. Please upgrade Joplin at https://joplin.cozic.net and try again.');
+
 		if (currentVersionIndex == existingDatabaseVersions.length - 1) return false;
 
 		while (currentVersionIndex < existingDatabaseVersions.length - 1) {
@@ -344,6 +344,10 @@ class JoplinDatabase extends Database {
 				upgradeVersion10();
 			}
 
+			if (targetVersion == 12) {
+				queries.push('ALTER TABLE folders ADD COLUMN parent_id TEXT NOT NULL DEFAULT ""');
+			}
+
 			queries.push({ sql: 'UPDATE version SET version = ?', params: [targetVersion] });
 			await this.transactionExecBatch(queries);