From 43dff9362a46a8929886d019f321afa40b02806a Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Fri, 10 Nov 2017 20:34:36 +0000 Subject: [PATCH] Created new todo button, and option to switch is_todo --- ElectronClient/app/gui/MainScreen.jsx | 146 ++++++++++++++---------- ElectronClient/app/gui/NoteList.jsx | 7 ++ ElectronClient/app/gui/PromptDialog.jsx | 11 +- ElectronClient/app/theme.js | 1 + 4 files changed, 104 insertions(+), 61 deletions(-) diff --git a/ElectronClient/app/gui/MainScreen.jsx b/ElectronClient/app/gui/MainScreen.jsx index 0912627a5..e7654d6d4 100644 --- a/ElectronClient/app/gui/MainScreen.jsx +++ b/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 (
- newNotePromptOnClose(answer)} message={_('Note title:')} visible={this.state.newNotePromptVisible}/> - newFolderPromptOnClose(answer)} message={_('Notebook title:')} visible={this.state.newFolderPromptVisible}/> + promptOptions.onClose(answer)} message={promptOptions ? promptOptions.message : ''} visible={!!this.state.promptOptions}/>
@@ -150,7 +178,7 @@ class MainScreenComponent extends React.Component { const mapStateToProps = (state) => { return { - theme: state.theme, + theme: state.settings.theme, }; }; diff --git a/ElectronClient/app/gui/NoteList.jsx b/ElectronClient/app/gui/NoteList.jsx index f2b5d8baa..f1bad37ed 100644 --- a/ElectronClient/app/gui/NoteList.jsx +++ b/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()); } diff --git a/ElectronClient/app/gui/PromptDialog.jsx b/ElectronClient/app/gui/PromptDialog.jsx index de2e856df..df171b94b 100644 --- a/ElectronClient/app/gui/PromptDialog.jsx +++ b/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 (
- + this.answerInput_ = input} diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js index 1f4225821..8b0303d3f 100644 --- a/ElectronClient/app/theme.js +++ b/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);