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%)