add todo percentage in item list

browser/components/NoteItem.js

@@ -4,7 +4,9 @@
 import React, { PropTypes } from 'react'
 import { isArray } from 'lodash'
 import CSSModules from 'browser/lib/CSSModules'
+import { getTodoState } from 'browser/lib/getTodoState'
 import styles from './NoteItem.styl'
+import TodoProcess from './TodoProcess'
 
 /**
  * @description Tag element component.
@@ -76,6 +78,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleDragStar
           }
         </div>
       </div>
+      {note.type === 'MARKDOWN_NOTE'
+        ? <TodoProcess todoState={getTodoState(note.content)} />
+        : ''
+      }
     </div>
   </div>
 )

browser/components/NoteItem.styl

@@ -39,6 +39,7 @@ $control-height = 30px
 .item-wrapper
   padding 15px 0
   border-bottom $ui-border
+  position relative
 
 .item--active
   @extend .item

browser/components/NoteItemSimple.styl

@@ -48,6 +48,7 @@ $control-height = 30px
   overflow ellipsis
   color $ui-inactive-text-color
   border-bottom $ui-border
+  position relative
 
 .item-simple-title-icon
   font-size 12px

browser/components/TodoProcess.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoProcess.styl'
+
+const TodoProcess = ({
+  todoState: {
+    total: totalTodo,
+    completed: completedTodo
+  }
+}) => (
+  <div styleName='todo-process' style={{display: totalTodo > 0 ? '' : 'none'}}>
+    <div styleName='todo-process-text'>
+      <i className='fa fa-fw fa-tasks' />
+      {completedTodo} of {totalTodo}
+    </div>
+    <div styleName='todo-process-bar'>
+      <div styleName='todo-process-bar--inner' style={{width: parseInt(completedTodo / totalTodo * 100) + '%'}} />
+    </div>
+  </div>
+)
+
+TodoProcess.propTypes = {
+  todoState: {
+    total: PropTypes.number.isRequired,
+    completed: PropTypes.number.isRequired
+  }
+}
+
+export default CSSModules(TodoProcess, styles)

browser/components/TodoProcess.styl

@@ -0,0 +1,35 @@
+.todo-process
+  font-size 12px
+  display flex
+
+.todo-process-text
+  display inline-block
+  padding-right 10px
+  white-space nowrap
+  text-overflow ellipsis
+  i
+    color grey
+    padding-right 5px
+
+.todo-process-bar
+  display inline-block
+  margin auto
+  width 150px
+  height 5px
+  background-color #DADFE1
+  border-radius 2px
+  flex-grow 1
+
+.todo-process-bar--inner
+  height 100%
+  background-color #6C7A89
+
+
+body[data-theme="dark"]
+  .todo-process
+    color $ui-dark-text-color
+  .todo-process-bar
+    background-color #363A3D
+
+  .todo-process-bar--inner
+    background-color: alpha(#939395, 50%)

browser/lib/getTodoState.js

@@ -0,0 +1,25 @@
+export function getTodoState (content) {
+  let splitted = content.split('\n')
+  let numberOfTodo = 0
+  let numberOfCompletedTodo = 0
+
+  splitted.forEach((line) => {
+    let trimmedLine = line.trim()
+    if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+      numberOfTodo++
+    }
+    if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+      numberOfCompletedTodo++
+    }
+  })
+
+  return {
+    total: numberOfTodo,
+    completed: numberOfCompletedTodo
+  }
+}
+
+export function getTodoPercentageOfCompleted (content) {
+  const state = getTodoState(content)
+  return Math.floor(state.completed / state.total * 100)
+}

browser/main/Detail/MarkdownNoteDetail.js

@@ -18,6 +18,7 @@ import TrashButton from './TrashButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import { formatDate } from 'browser/lib/date-formatter'
+import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoState'
 
 const electron = require('electron')
 const { remote } = electron
@@ -69,24 +70,6 @@ class MarkdownNoteDetail extends React.Component {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
-  getPercentageOfCompleteTodo (noteContent) {
-    let splitted = noteContent.split('\n')
-    let numberOfTodo = 0
-    let numberOfCompletedTodo = 0
-
-    splitted.forEach((line) => {
-      let trimmedLine = line.trim()
-      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
-        numberOfTodo++
-      }
-      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
-        numberOfCompletedTodo++
-      }
-    })
-
-    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
-  }
-
   handleChange (e) {
     let { note } = this.state
 
@@ -321,7 +304,7 @@ class MarkdownNoteDetail extends React.Component {
           onChange={(e) => this.handleChange(e)}
         />
         <TodoListPercentage
-          percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
         />
       </div>
       <div styleName='info-right'>