inhance UX & search case insensitive

Author: Rokt33r

browser/main/Detail/MarkdownNoteDetail.js

@@ -175,6 +175,8 @@ class MarkdownNoteDetail extends React.Component {
   handleDeleteMenuClick (e) {
     this.setState({
       isDeleting: true
+    }, () => {
+      this.refs.deleteConfirmButton.focus()
     })
   }
 
@@ -191,6 +193,7 @@ class MarkdownNoteDetail extends React.Component {
         }
         ee.once('list:moved', dispatchHandler)
         ee.emit('list:next')
+        ee.emit('list:focus')
       })
   }
 
@@ -200,6 +203,10 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  handleDeleteKeyDown (e) {
+    if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
+  }
+
   render () {
     let { storages, config } = this.props
     let { note } = this.state
@@ -211,7 +218,10 @@ class MarkdownNoteDetail extends React.Component {
       >
         {this.state.isDeleting
           ? <div styleName='info'>
-            <div styleName='info-delete'>
+            <div styleName='info-delete'
+              tabIndex='-1'
+              onKeyDown={(e) => this.handleDeleteKeyDown(e)}
+            >
 
               <span styleName='info-delete-message'>
                 Are you sure to delete this note?
@@ -221,6 +231,7 @@ class MarkdownNoteDetail extends React.Component {
               >Cancel</button>
               <button styleName='info-delete-confirmButton'
                 onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+                ref='deleteConfirmButton'
               >Confirm</button>
             </div>
           </div>

browser/main/Detail/SnippetNoteDetail.js

@@ -186,6 +186,8 @@ class SnippetNoteDetail extends React.Component {
   handleDeleteMenuClick (e) {
     this.setState({
       isDeleting: true
+    }, () => {
+      this.refs.deleteConfirmButton.focus()
     })
   }
 
@@ -300,6 +302,10 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
+  handleDeleteKeyDown (e) {
+    if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
+  }
+
   render () {
     let { storages, config } = this.props
     let { note } = this.state
@@ -383,7 +389,10 @@ class SnippetNoteDetail extends React.Component {
       >
         {this.state.isDeleting
           ? <div styleName='info'>
-            <div styleName='info-delete'>
+            <div styleName='info-delete'
+              tabIndex='-1'
+              onKeyDown={(e) => this.handleDeleteKeyDown(e)}
+            >
 
               <span styleName='info-delete-message'>
                 Are you sure to delete this note?
@@ -393,6 +402,7 @@ class SnippetNoteDetail extends React.Component {
               >Cancel</button>
               <button styleName='info-delete-confirmButton'
                 onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+                ref='deleteConfirmButton'
               >Confirm</button>
             </div>
           </div>

browser/main/NoteList/index.js

@@ -16,19 +16,24 @@ class NoteList extends React.Component {
     this.selectPriorNoteHandler = () => {
       this.selectPriorNote()
     }
+    this.focusHandler = () => {
+      this.refs.root.focus()
+    }
   }
 
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
     ee.on('list:next', this.selectNextNoteHandler)
     ee.on('list:prior', this.selectPriorNoteHandler)
+    ee.on('lost:focus', this.focusHandler)
   }
 
   componentWillUnmount () {
     clearInterval(this.refreshTimer)
 
     ee.off('list:next', this.selectNextNoteHandler)
     ee.off('list:prior', this.selectPriorNoteHandler)
+    ee.off('lost:focus', this.focusHandler)
   }
 
   componentDidUpdate () {
@@ -120,34 +125,20 @@ class NoteList extends React.Component {
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 
-    // if (e.keyCode === 65 && !e.shiftKey) {
-    //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('top-new-post')
-    // }
-
-    // if (e.keyCode === 65 && e.shiftKey) {
-    //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('nav-new-folder')
-    // }
-
-    // if (e.keyCode === 68) {
-    //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('detail-delete')
-    // }
-
-    // if (e.keyCode === 84) {
-    //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('detail-title')
-    // }
+    if (e.keyCode === 65 && !e.shiftKey) {
+      e.preventDefault()
+      ee.emit('top:new-note')
+    }
 
-    // if (e.keyCode === 69) {
-    //   e.preventDefault()
-    // }
+    if (e.keyCode === 68) {
+      e.preventDefault()
+      ee.emit('detail:delete')
+    }
 
-    // if (e.keyCode === 83) {
-    //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('detail-save')
-    // }
+    if (e.keyCode === 69) {
+      e.preventDefault()
+      ee.emit('detail:focus')
+    }
 
     if (e.keyCode === 38) {
       e.preventDefault()
@@ -275,7 +266,7 @@ class NoteList extends React.Component {
       <div className='NoteList'
         styleName='root'
         ref='root'
-        tabIndex='0'
+        tabIndex='-1'
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}
       >

browser/main/TopBar/index.js

@@ -63,19 +63,21 @@ class TopBar extends React.Component {
     searchBlocks.forEach((block) => {
       if (block.match(/^#.+/)) {
         let tag = block.match(/#(.+)/)[1]
+        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
         notes = notes
           .filter((note) => {
             if (!_.isArray(note.tags)) return false
             return note.tags.some((_tag) => {
-              return _tag === tag
+              return _tag.match(regExp)
             })
           })
       } else {
+        let regExp = new RegExp(_.escapeRegExp(block), 'i')
         notes = notes.filter((note) => {
           if (note.type === 'SNIPPET_NOTE') {
-            return note.description.match(block)
+            return note.description.match(regExp)
           } else if (note.type === 'MARKDOWN_NOTE') {
-            return note.content.match(block)
+            return note.content.match(regExp)
           }
           return false
         })