Created new todo button, and option to switch is_todo

ElectronClient/app/gui/MainScreen.jsx

@@ -19,6 +19,7 @@ class MainScreenComponent extends React.Component {
 		this.setState({
 			newNotePromptVisible: false,
 			newFolderPromptVisible: false,
+			promptOptions: null,
 			noteVisiblePanes: ['editor', 'viewer'],
 		});
 	}
@@ -39,6 +40,7 @@ class MainScreenComponent extends React.Component {
 	render() {
 		const style = this.props.style;
 		const theme = themeStyle(this.props.theme);
+		const promptOptions = this.state.promptOptions;
 
 		const headerStyle = {
 			width: style.width,
@@ -72,72 +74,98 @@ class MainScreenComponent extends React.Component {
 			height: style.height,
 		};
 
-		const headerButtons = [
-			{
-				title: _('New note'),
-				onClick: () => {
-					this.setState({ newNotePromptVisible: true });
-				},
-				iconName: 'fa-file-o',
-			}, {
-				title: _('New notebook'),
-				onClick: () => {
-					this.setState({ newFolderPromptVisible: true });
-				},
-				iconName: 'fa-folder-o',
-			}, {
-				title: _('Layout'),
-				onClick: () => {
-					this.toggleVisiblePanes();
-				},
-				iconName: 'fa-columns',
+		const createNewNote = async (title, isTodo) => {
+			const folderId = Setting.value('activeFolderId');
+			if (!folderId) return;
+
+			const note = await Note.save({
+				title: title,
+				parent_id: folderId,
+				is_todo: isTodo ? 1 : 0,
+			});
+			Note.updateGeolocation(note.id);
+
+			this.props.dispatch({
+				type: 'NOTE_SELECT',
+				id: note.id,
+			});
+		}
+
+		const headerButtons = [];
+
+		headerButtons.push({
+			title: _('New note'),
+			iconName: 'fa-file-o',
+			onClick: () => {
+				this.setState({
+					promptOptions: {
+						message: _('Note title:'),
+						onClose: async (answer) => {
+							if (answer) await createNewNote(answer, false);
+							this.setState({ promptOptions: null });
+						}
+					},
+				});
 			},
-		];
-
-
-		const newNotePromptOnClose = async (answer) => {
-			if (answer) {
-				const folderId = Setting.value('activeFolderId');
-				if (!folderId) return;
-
-				const note = await Note.save({
-					title: answer,
-					parent_id: folderId,
+		});
+				
+		headerButtons.push({
+			title: _('New to-do'),
+			iconName: 'fa-check-square-o',
+			onClick: () => {
+				this.setState({
+					promptOptions: {
+						message: _('Note title:'),
+						onClose: async (answer) => {
+							if (answer) await createNewNote(answer, true);
+							this.setState({ promptOptions: null });
+						}
+					},
 				});
-				Note.updateGeolocation(note.id);
+			},
+		});
 
-				this.props.dispatch({
-					type: 'NOTE_SELECT',
-					id: note.id,
+		headerButtons.push({
+			title: _('New notebook'),
+			iconName: 'fa-folder-o',
+			onClick: () => {
+				this.setState({
+					promptOptions: {
+						message: _('Notebook title:'),
+						onClose: async (answer) => {
+							if (answer) {
+								let folder = null;
+								try {
+									folder = await Folder.save({ title: answer }, { userSideValidation: true });		
+								} catch (error) {
+									bridge().showErrorMessageBox(error.message);
+									return;
+								}
+
+								this.props.dispatch({
+									type: 'FOLDER_SELECT',
+									id: folder.id,
+								});
+							}
+
+							this.setState({ promptOptions: null });
+						}
+					},
 				});
-			}
+			},
+		});
 
-			this.setState({ newNotePromptVisible: false });
-		}
-
-		const newFolderPromptOnClose = async (answer) => {
-			if (answer) {
-				let folder = null;
-				try {
-					folder = await Folder.save({ title: answer }, { userSideValidation: true });		
-				} catch (error) {
-					bridge().showErrorMessageBox(error.message);
-					return;
-				}
-
-				this.props.dispatch({
-					type: 'FOLDER_SELECT',
-					id: folder.id,
-				});
-			}
-
-			this.setState({ newFolderPromptVisible: false });
-		}
+		headerButtons.push({
+			title: _('Layout'),
+			iconName: 'fa-columns',
+			onClick: () => {
+				this.toggleVisiblePanes();
+			},
+		});
 
 		return (
 			<div style={style}>
-				<PromptDialog style={promptStyle} onClose={(answer) => newNotePromptOnClose(answer)}   message={_('Note title:')}     visible={this.state.newNotePromptVisible}/>
-				<PromptDialog style={promptStyle} onClose={(answer) => newFolderPromptOnClose(answer)} message={_('Notebook title:')} visible={this.state.newFolderPromptVisible}/>
+				<PromptDialog theme={this.props.theme} style={promptStyle} onClose={(answer) => promptOptions.onClose(answer)} message={promptOptions ? promptOptions.message : ''} visible={!!this.state.promptOptions}/>
 				<Header style={headerStyle} showBackButton={false} buttons={headerButtons} />
 				<SideBar style={sideBarStyle} />
 				<NoteList itemHeight={40} style={noteListStyle} />
@@ -150,7 +178,7 @@ class MainScreenComponent extends React.Component {
 
 const mapStateToProps = (state) => {
 	return {
-		theme: state.theme,
+		theme: state.settings.theme,
 	};
 };
 

ElectronClient/app/gui/NoteList.jsx

@@ -56,11 +56,18 @@ class NoteListComponent extends React.Component {
 		if (!noteId) throw new Error('No data-id on element');
 
 		const menu = new Menu()
+
 		menu.append(new MenuItem({label: _('Delete'), click: async () => {
 			const ok = bridge().showConfirmMessageBox(_('Delete note?'));
 			if (!ok) return;
 			await Note.delete(noteId);
+		}}));
+
+		menu.append(new MenuItem({label: _('Switch between note and to-do'), click: async () => {
+			const note = await Note.load(noteId);
+			await Note.save(Note.toggleIsTodo(note));
 		}}))
+
 		menu.popup(bridge().window());
 	}
 

ElectronClient/app/gui/PromptDialog.jsx

@@ -44,7 +44,7 @@ class PromptDialog extends React.Component {
 
 		const promptDialogStyle = {
 			backgroundColor: 'white',
-			padding: 10,
+			padding: 16,
 			display: 'inline-block',
 			boxShadow: '6px 6px 20px rgba(0,0,0,0.5)',
 		};
@@ -55,6 +55,13 @@ class PromptDialog extends React.Component {
 			marginLeft: 5,
 		};
 
+		const labelStyle = {
+			marginRight: 5,
+			fontSize: theme.fontSize,
+			color: theme.color,
+			fontFamily: theme.fontFamily,
+		};
+
 		const inputStyle = {
 			width: 0.5 * style.width,
 			maxWidth: 400,
@@ -80,7 +87,7 @@ class PromptDialog extends React.Component {
 		return (
 			<div style={modalLayerStyle}>
 				<div style={promptDialogStyle}>
-					<label style={{ marginRight: 5 }}>{this.props.message ? this.props.message : ''}</label>
+					<label style={labelStyle}>{this.props.message ? this.props.message : ''}</label>
 					<input
 						style={inputStyle}
 						ref={input => this.answerInput_ = input}

ElectronClient/app/theme.js

@@ -59,6 +59,7 @@ globalStyle.lineInput = {
 let themeCache_ = {};
 
 function themeStyle(theme) {
+	if (!theme) throw new Error('Theme must be specified');
 	if (themeCache_[theme]) return themeCache_[theme];
 
 	let output = Object.assign({}, globalStyle);