add DeleteArticleModal

browser/main/HomePage/ArticleDetail/index.js

@@ -7,15 +7,15 @@ import CodeEditor from 'browser/components/CodeEditor'
 import {
   switchFolder,
   cacheArticle,
-  saveArticle,
-  destroyArticle
+  saveArticle
 } from '../../actions'
 import linkState from 'browser/lib/linkState'
-import FolderMark from 'browser/components/FolderMark'
 import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
 import activityRecord from 'browser/lib/activityRecord'
 import ShareButton from './ShareButton'
+import { openModal } from 'browser/lib/modal'
+import DeleteArticleModal from '../../modal/DeleteArticleModal'
 
 const electron = require('electron')
 const clipboard = electron.clipboard
@@ -251,6 +251,12 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  handleDeleteButtonClick (e) {
+    if (this.props.activeArticle) {
+      openModal(DeleteArticleModal, {articleKey: this.props.activeArticle.key})
+    }
+  }
+
   handleTitleKeyDown (e) {
     if (e.keyCode === 9 && !e.shiftKey) {
       e.preventDefault()

browser/main/modal/DeleteArticleModal.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import store from '../store'
+import { destroyArticle } from '../actions'
+
+export default class DeleteArticleModal extends React.Component {
+  componentDidMount () {
+    ReactDOM.findDOMNode(this.refs.no).focus()
+  }
+
+  handleNoButtonClick (e) {
+    this.props.close()
+  }
+
+  handleYesButtonClick (e) {
+    store.dispatch(destroyArticle(this.props.articleKey))
+    this.props.close()
+  }
+
+  render () {
+    return (
+      <div className='DeleteArticleModal modal'>
+        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+
+        <div className='message'>Do you really want to delete?</div>
+
+        <div className='control'>
+          <button ref='no' onClick={e => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
+          <button ref='yes' onClick={e => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+DeleteArticleModal.propTypes = {
+  action: PropTypes.object,
+  articleKey: PropTypes.string,
+  close: PropTypes.func
+}

browser/main/reducer.js

@@ -222,7 +222,9 @@ function articles (state = initialArticles, action) {
         let articleKey = action.data.key
 
         let targetIndex = _.findIndex(state.data, _article => articleKey === _article.key)
-        if (targetIndex >= 0) state.splice(targetIndex, 1)
+        if (targetIndex >= 0) state.data.splice(targetIndex, 1)
+        let modifiedIndex = _.findIndex(state.modified, _article => articleKey === _article.key)
+        if (modifiedIndex >= 0) state.modified.splice(modifiedIndex, 1)
 
         dataStore.setArticles(state)
         return state

browser/styles/main/index.styl

@@ -3,9 +3,9 @@
 @import '../mixins/*'
 global-reset()
 @import '../shared/*'
-@import './components/*'
 @import './containers/*'
 @import './HomeContainer'
+@import './modal/*'
 
 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
 

browser/styles/main/modal/DeleteArticleModal.styl

@@ -0,0 +1,29 @@
+.DeleteArticleModal.modal
+  width 350px
+  top 100px
+  user-select none
+  .title
+    font-size 24px
+    margin-bottom 15px
+  .message
+    font-size 14px
+    margin-bottom 15px
+  .control
+    text-align right
+    button
+      border-radius 5px
+      height 33px
+      padding 0 15px
+      font-size 14px
+      background-color white
+      border 1px solid borderColor
+      border-radius 5px
+      margin-left 5px
+      &:hover
+        background-color darken(white, 10%)
+      &.danger
+        border-color #E9432A
+        background-color #E9432A
+        color white
+        &:hover
+          background-color lighten(#E9432A, 15%)