Add styling changes and beginnings of adding notes

Zoom set to 85% since components can't be resized.

Added start of functionality to add notes.

app/components/EntrySelector.jsx

@@ -12,6 +12,17 @@ import SelectableList from 'SelectableList'
 
 import Item from 'Item'
 
+import uuid from 'node-uuid'
+import path from 'path-extra'
+
+import * as utils from 'utils'
+import glob from 'glob'
+
+import fs from 'fs'
+import mkdirp from 'mkdirp'
+import jsfile from 'jsonfile'
+import rmdir from 'rimraf'
+
 const {AppBar,
       AppCanvas,
       FontIcon,
@@ -55,6 +66,17 @@ export default class EntrySelector extends React.Component {
     blank(){
     
     }
+    
+    addNoteTapped = () => {
+        this.createNewNote((note) => {
+            var notes = this.state.notes
+            notes.splice(0, 0, note)
+            this.setState({notes: notes}, () => {
+                //this.refs['textField0'].focus()
+            })
+        })
+
+    };
 
     render(){
         return (
@@ -65,11 +87,16 @@ export default class EntrySelector extends React.Component {
                         active={false}
                         selected={false}
                         leftIcon={<Search color={colors.grey600}/>}
-                        rightIconButton={<IconButton tooltip="Add New Note">
+                        rightIconButton={<IconButton
+                                            style={{'zIndex': 1000}}
+                                            touch={true}
+                                            onTouchTap={this.addNoteTapped}
+                                            tooltip="Add New Note">
                                             <Add color={colors.grey600}/>
                                          </IconButton>}>
                         <TextField
                             hintText="Filter by keyword, title or tag."
+                            style={{width: 210}}
                             onKeyDown={()=>{}}
                             onEnterKeyDown={()=>{}}
                         />
@@ -80,7 +107,7 @@ export default class EntrySelector extends React.Component {
                     ref="entryList"
                     selectedItemStyle={{backgroundColor: colors.grey300}}>
                     <ListItem
-                        leftAvatar={<Description color={colors.grey700}/>}
+                        leftIcon={<Description color={colors.grey600}/>}
                         primaryText="Today's Notes"
                         secondaryText={
                             <p>

app/components/LibraryNav.jsx

@@ -30,15 +30,6 @@ import rmdir from 'rimraf'
 
 const colors = styles.Colors
 
-function eventFire(el, etype){
-  if (el.fireEvent) {
-    el.fireEvent('on' + etype);
-  } else {
-    var evObj = document.createEvent('Events');
-    evObj.initEvent(etype, true, false);
-    el.dispatchEvent(evObj);
-  }
-}
 String.prototype.trunc = String.prototype.trunc || function(n){
           return (this.length > n) ? this.substr(0, n-1)+'...' : this;
 };
@@ -108,7 +99,6 @@ export default class LibraryNav extends React.Component {
             notebooks: [
             ]
         }
-        this.sortNotebooks(true)
         this.getNotebooks()
     }
 
@@ -134,8 +124,8 @@ export default class LibraryNav extends React.Component {
             }
 
             this.state.notebooks.push(nb)
-            this.sortNotebooks(true)
         }
+        this.sortNotebooks(true)
     };
 
     compareNotebooks = (a, b) => {
@@ -210,17 +200,27 @@ export default class LibraryNav extends React.Component {
     };
 
 
-    createNewNotebook = (notebook, callback) => {
+    createNewNotebook = (callback) => {
-        var notePath = utils.getNotebookPath(notebook)
+        var nbUuid = uuid.v4().toUpperCase()
-        mkdirp(notePath, (err) => {
+        var nbPath = utils.getNotebookPathFromUUID(nbUuid)
+
+        var nb = {
+            'state': 'editing',
+            'title': '',
+            'uuid': nbUuid,
+            'path': nbPath,
+            'notes': 0
+        }
+
+        mkdirp(nbPath, (err) => {
+            if (callback){
+                callback(nb, err)
+            }
             if(err){
                 console.log('There was an error creating the directory '+notePath)
                 console.log(err)
             }
             else{
-                if (callback){
-                    callback()
-                }
                 this.createNotebookMeta(notebook)
             }
         })
@@ -242,7 +242,6 @@ export default class LibraryNav extends React.Component {
     };
 
     newNotebookUnfocus = (i) => {
-    
         var nb = this.state.notebooks[i]
 
         var tf = this.refs["textField"+i]
@@ -263,23 +262,13 @@ export default class LibraryNav extends React.Component {
     };
 
     addNotebookTapped = () => {
-        var nb_uuid = uuid.v4().toUpperCase()
+        this.createNewNotebook((nb, err) => {
-
-        var nb = {
-            'state': 'editing',
-            'title': '',
-            'uuid': nb_uuid,
-            'notes': 0
-        }
-
-        this.createNewNotebook(nb, () => {
             var nbs = this.state.notebooks
             nbs.splice(0, 0, nb)
             this.setState({notebooks: nbs}, () => {
                 this.refs['textField0'].focus()
             })
         })
-
     };
 
     newNotebookTyped = (i) => {
@@ -347,6 +336,10 @@ export default class LibraryNav extends React.Component {
         this.refs.mainList.setIndex(-1)
     };
 
+    preventEventProp = (ev) => {
+        ev.stopPropagation();
+    };
+
     notebookList = () => {
         return (<div id="notebook-list">
 
@@ -359,13 +352,16 @@ export default class LibraryNav extends React.Component {
                                     value={i}
                                     innerDivStyle={{'paddingBottom': 0,
                                                     'paddingTop': 0}}
+                                    onTouchTap={this.noteBookTapped.bind(this, i)}
                                     leftIcon={<NoteBook color={colors.grey500}/>}
                                     rightIcon={<Badge badgeContent={notebook.notes}/>}>
+
                                     
                                     <TextField
                                         ref={"textField"+i}
                                         fullWidth={true}
-                                        hintText={notebook.title.trunc(18) || "Notebook Name"}
+                                        style={{maxWidth: 120}}
+                                        hintText={notebook.title.trunc(14) || "Notebook Name"}
                                         underlineShow={false}
                                         onBlur={this.newNotebookUnfocus.bind(this, i)}
                                         onEnterKeyDown={this.newNotebookUnfocus.bind(this, i)}
@@ -377,14 +373,21 @@ export default class LibraryNav extends React.Component {
                             l = <ListItem
                                     key={notebook.uuid || i}
                                     value={i}
-                                    primaryText={notebook.title.trunc(18)}
+                                    primaryText={notebook.title.trunc(14)}
                                     tooltip={notebook.title}
                                     ref={notebook.title+i}
                                     className="noselect"
                                     onTouchTap={this.noteBookTapped.bind(this, i)}
-                                    leftIcon={<NoteBook
+                                    leftIcon={
+                                            <IconButton
+                                                onClick={this.preventEventProp}
                                                 onTouchTap={this.notebookIconTapped.bind(this, i)}
-                                                color={colors.grey500}/>}
+                                                style={{padding: 0}}
+                                            >
+                                                  <NoteBook
+                                                      color={colors.grey500}/>
+                                              </IconButton>
+                                              }
                                     rightIcon={<Badge 
                                                 style={{'padding': 0}}
                                                 badgeContent={notebook.notes} />}
@@ -397,6 +400,7 @@ export default class LibraryNav extends React.Component {
     };
 
     notebookIconTapped = (i, ev) => {
+        ev.stopPropagation()
     };
 
     render(){
@@ -406,7 +410,7 @@ export default class LibraryNav extends React.Component {
                     ref='mainList'
                     className="list"
                     id="main-nav"
-                    selectedItemStyle={{backgroundColor: "#C8C8C8"}}
+                    selectedItemStyle={{backgroundColor: colors.lightBlue100}}
                     subheader="Library">
                         {this.state.navItems.map((item, i) => {
                             return <ListItem
@@ -424,12 +428,13 @@ export default class LibraryNav extends React.Component {
                       id="nblist"
                       className="list"
                       ref='notebookList'
-                      selectedItemStyle={{backgroundColor: "#C8C8C8"}}
+                      selectedItemStyle={{backgroundColor: colors.lightBlue100}}
                       subheader={<div>
                                     <div className="inline">NoteBooks</div>
                                     <IconButton
                                         onTouchTap={this.addNotebookTapped}
                                         tooltip="Add New Notebook"
+                                        touch={true}
                                         style={{'zIndex': 1000}}
                                         className="right inline">
                                         <AddCircleOutline

app/utils.jsx

@@ -1,10 +1,52 @@
 import path from 'path-extra'
+import uuid from 'node-uuid'
+
+import * as utils from 'utils'
+import glob from 'glob'
+
+import fs from 'fs'
+import mkdirp from 'mkdirp'
+import jsfile from 'jsonfile'
+import rmdir from 'rimraf'
+
 
 export function getAppDataPath(){
     return path.datadir(APP_NAME)
 }
 
-export function getNotebookPath(notebook){
+export function getNotePath(notebook, note){
     var notePath = getAppDataPath()
-    return path.join(notePath, notebook.uuid+'.qvnotebook')
+    var notebookPath = getNotebookPath(notebook)
+    return path.join(notebookPath, note.uuid+'.qvnote')
+}
+
+export function getNotebookPath(notebook){
+    var noteBookPath = getAppDataPath()
+    return path.join(noteBookPath, notebook.uuid+'.qvnotebook')
+}
+
+export function loadNotebookByName(nameOrUUID){
+    var dataPath = getAppDataPath()
+    var notebookPath = path.join(dataPath, nameOrUUID+'.qvnotebook')
+    var obj = jsfile.readFileSync(path.join(notebookPath, 'meta.json'))
+    var notes = glob.sync(path.join(notebookPath, '*.qvnote'))
+
+    var nb = {
+        'title': obj.name,
+        'uuid': obj.uuid,
+        'notes': notes.length,
+        'path': notebookPath
+    }
+
+    if(nb.title == ''){
+        nb.state = 'editing'
+    }
+    else{
+        nb.state = 'displaying'
+    }
+    return nb
+}
+
+export function getNotebookPathFromUUID(uuid){
+    return getNotebookPath({uuid: uuid})
 }

main.js

@@ -56,7 +56,7 @@ app.on('ready', function() {
         "webgl": true,
         "allowRunningInsecureContent": false,
         "webaudio": true,
-        "zoomFactor": 1.0,
+        "zoomFactor": 0.85,
         "blinkFeatures": "",
         "experimentalFeatures": false,
         "allowDisplayingInsecureContent": false,
@@ -65,7 +65,7 @@ app.on('ready', function() {
         "partition": "",
         "webSecurity": true
     },
-    "title": "Electrify",
+    "title": "TechNote",
     "disableAutoHideCursor": false,
     "center": true
 });
@@ -75,7 +75,7 @@ app.on('ready', function() {
   mainWindow.webContents.setUserAgent("");
 
   mainWindow.webContents.on('did-finish-load',function(){
-    mainWindow.setTitle("Electrify");
+    mainWindow.setTitle("TechNote");
     
   });
 

style.css

@@ -39,7 +39,7 @@ body, html{
 #entry-selector{
     border-right: solid 1px #d9d9d9;
     min-width: 250px;
-    max-width: 390px !important;
+    max-width: 350px !important;
 }
 #library-nav{
     border-right: solid 1px #d9d9d9;
@@ -51,5 +51,6 @@ body, html{
     padding-bottom: 0px !important;
 }
 #notebook-list{
+    width: 100%;
     overflow-y: auto;
 }