Add button clear all checkboxes

browser/components/MarkdownEditor.js

@@ -64,6 +64,10 @@ class MarkdownEditor extends React.Component {
     })
   }
 
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)

browser/components/MarkdownSplitEditor.js

@@ -20,6 +20,10 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
   handleOnChange () {
     this.value = this.refs.code.value
     this.props.onChange()

browser/components/TodoListPercentage.js

@@ -12,7 +12,7 @@ import styles from './TodoListPercentage.styl'
  */
 
 const TodoListPercentage = ({
-  percentageOfTodo
+  percentageOfTodo, onClick
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
@@ -20,11 +20,15 @@ const TodoListPercentage = ({
         <p styleName='percentageText'>{percentageOfTodo}%</p>
       </div>
     </div>
+    <div styleName='todoClear'>
+      <p styleName='todoClearText' onClick={(e) => onClick(e)}>clear</p>
+    </div>
   </div>
 )
 
 TodoListPercentage.propTypes = {
-  percentageOfTodo: PropTypes.number.isRequired
+  percentageOfTodo: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(TodoListPercentage, styles)

browser/components/TodoListPercentage.styl

@@ -1,4 +1,5 @@
 .percentageBar
+  display: flex
   position absolute
   top 72px
   right 0px
@@ -30,6 +31,20 @@
   color #f4f4f4
   font-weight 600
 
+.todoClear
+  display flex
+  justify-content: flex-end
+  position absolute
+  z-index 120
+  width 100%
+  height 100%
+  padding 2px 10px
+
+.todoClearText
+  color #f4f4f4
+  cursor pointer
+  font-weight 500
+
 body[data-theme="dark"]
   .percentageBar
     background-color #444444
@@ -39,6 +54,9 @@ body[data-theme="dark"]
 
   .percentageText
     color $ui-dark-text-color
+  
+  .todoClearText
+    color $ui-dark-text-color
 
 body[data-theme="solarized-dark"]
   .percentageBar
@@ -50,6 +68,9 @@ body[data-theme="solarized-dark"]
   .percentageText
     color #fdf6e3
 
+  .todoClearText
+    color #fdf6e3
+
 body[data-theme="monokai"]
   .percentageBar
     background-color: $ui-monokai-borderColor
@@ -69,3 +90,6 @@ body[data-theme="dracula"]
 
   .percentageText
     color $ui-dracula-text-color
+
+  .percentageText
+    color $ui-dracula-text-color