add uncache button to article detail & change share dropdown seems to be native

browser/main/HomePage/ArticleDetail/ShareButton.js

@@ -5,6 +5,10 @@ import clientKey from 'browser/lib/clientKey'
 import activityRecord from 'browser/lib/activityRecord'
 const clipboard = require('electron').clipboard
 
+function notify (...args) {
+  return new window.Notification(...args)
+}
+
 function getDefault () {
   return {
     openDropdown: false,
@@ -66,6 +70,15 @@ export default class ShareButton extends React.Component {
     this.setState({openDropdown: false})
   }
 
+  handleClipboardButtonClick (e) {
+    activityRecord.emit('MAIN_DETAIL_COPY')
+    clipboard.writeText(this.props.article.content)
+    notify('Saved to Clipboard!', {
+      body: 'Paste it wherever you want!'
+    })
+    this.setState({openDropdown: false})
+  }
+
   handleShareViaPublicURLClick (e) {
     let { user } = this.props
     let input = Object.assign({}, this.props.article, {
@@ -135,6 +148,9 @@ export default class ShareButton extends React.Component {
               </div>
             )
           }
+          <button onClick={e => this.handleClipboardButtonClick(e)}>
+            <i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
+          </button>
         </div>
       </div>
     )
@@ -143,7 +159,8 @@ export default class ShareButton extends React.Component {
 
 ShareButton.propTypes = {
   article: PropTypes.shape({
-    publicURL: PropTypes.string
+    publicURL: PropTypes.string,
+    content: PropTypes.string
   }),
   user: PropTypes.shape({
     name: PropTypes.string

browser/main/HomePage/ArticleDetail/index.js

@@ -7,19 +7,34 @@ import CodeEditor from 'browser/components/CodeEditor'
 import {
   switchFolder,
   cacheArticle,
-  saveArticle
+  saveArticle,
+  uncacheArticle
 } from '../../actions'
 import linkState from 'browser/lib/linkState'
 import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
-import activityRecord from 'browser/lib/activityRecord'
 import ShareButton from './ShareButton'
 import { openModal, isModalOpen } from 'browser/lib/modal'
 import DeleteArticleModal from '../../modal/DeleteArticleModal'
 
 const electron = require('electron')
-const clipboard = electron.clipboard
 const ipc = electron.ipcRenderer
+const remote = electron.remote
+const { Menu, MenuItem } = remote
+
+const othersMenu = new Menu()
+othersMenu.append(new MenuItem({
+  label: 'Delete Post',
+  click: function () {
+    remote.getCurrentWebContents().send('detail-delete')
+  }
+}))
+othersMenu.append(new MenuItem({
+  label: 'Discard Change',
+  click: function (item) {
+    remote.getCurrentWebContents().send('detail-uncache')
+  }
+}))
 
 const OSX = global.process.platform === 'darwin'
 const BRAND_COLOR = '#18AF90'
@@ -81,10 +96,6 @@ const modeSelectTutorialElement = (
   </svg>
 )
 
-function notify (...args) {
-  return new window.Notification(...args)
-}
-
 export default class ArticleDetail extends React.Component {
   constructor (props) {
     super(props)
@@ -97,6 +108,10 @@ export default class ArticleDetail extends React.Component {
       if (isModalOpen()) return true
       this.handleDeleteButtonClick()
     }
+    this.uncacheHandler = e => {
+      if (isModalOpen()) return true
+      this.handleUncache()
+    }
     this.togglePreviewHandler = e => {
       if (isModalOpen()) return true
       this.handleTogglePreviewButtonClick()
@@ -123,6 +138,7 @@ export default class ArticleDetail extends React.Component {
 
     ipc.on('detail-save', this.saveHandler)
     ipc.on('detail-delete', this.deleteHandler)
+    ipc.on('detail-uncache', this.uncacheHandler)
     ipc.on('detail-toggle-preview', this.togglePreviewHandler)
     ipc.on('detail-edit', this.editHandler)
   }
@@ -132,6 +148,7 @@ export default class ArticleDetail extends React.Component {
 
     ipc.removeListener('detail-save', this.saveHandler)
     ipc.removeListener('detail-delete', this.deleteHandler)
+    ipc.removeListener('detail-uncache', this.uncacheHandler)
     ipc.removeListener('detail-toggle-preview', this.togglePreviewHandler)
     ipc.removeListener('detail-on', this.editHandler)
   }
@@ -169,14 +186,6 @@ export default class ArticleDetail extends React.Component {
     )
   }
 
-  handleClipboardButtonClick (e) {
-    activityRecord.emit('MAIN_DETAIL_COPY')
-    clipboard.writeText(this.props.activeArticle.content)
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!'
-    })
-  }
-
   handleSaveButtonClick (e) {
     let { dispatch, folders, status } = this.props
 
@@ -188,6 +197,11 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  handleOthersButtonClick (e) {
+    let size = remote.getCurrentWindow().getSize()
+    othersMenu.popup(size[0] - 150, 100)
+  }
+
   handleFolderKeyChange (e) {
     let article = this.state.article
     article.FolderKey = e.target.value
@@ -244,6 +258,13 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  handleUncache (e) {
+    if (this.props.activeArticle) {
+      let { dispatch, activeArticle } = this.props
+      dispatch(uncacheArticle(activeArticle.key))
+    }
+  }
+
   handleTitleKeyDown (e) {
     if (e.keyCode === 9 && !e.shiftKey) {
       e.preventDefault()
@@ -303,28 +324,16 @@ export default class ArticleDetail extends React.Component {
             />
 
             <div className='ArticleDetail-info-control'>
-              {
-                this.state.article.mode === 'markdown'
-                ? <button onClick={e => this.handleTogglePreviewButtonClick(e)}>
-                    {this.state.previewMode ? <i className='fa fa-fw fa-code'/> : <i className='fa fa-fw fa-image'/>}<span className='tooltip'>Toggle preview ({OSX ? '⌘ + p' : '^ + p'})</span>
-                  </button>
-                : null
-              }
-
               <ShareButton
                 article={activeArticle}
                 user={user}
                 />
 
-              <button onClick={e => this.handleClipboardButtonClick(e)}>
-                <i className='fa fa-fw fa-clipboard'/><span className='tooltip'>Copy to clipboard</span>
-              </button>
-
               <button onClick={e => this.handleSaveButtonClick(e)}>
                 <i className='fa fa-fw fa-save'/><span className='tooltip'>Save ({OSX ? '⌘ + s' : '^ + s'})</span>
               </button>
-              <button onClick={e => this.handleDeleteButtonClick(e)}>
+              <button onClick={e => this.handleOthersButtonClick(e)}>
-                <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (^ + Del)</span>
+                <i className='fa fa-fw fa-angle-down'/>
               </button>
             </div>
           </div>

browser/styles/main/ArticleDetail.styl

@@ -78,20 +78,73 @@ infoButton()
           .tooltip
             opacity 1
       &>button
-        &:nth-child(1) .tooltip
+        &:nth-child(2) .tooltip
-          margin-left -85px
+          margin-left -65px
-        &:nth-child(3) .tooltip
-          margin-left -80px
-        &:nth-child(4) .tooltip
-          margin-left -60px
-        &:nth-child(5) .tooltip
-          margin-left -100px
       .ShareButton-open-button .tooltip
         margin-left -40px
       .ShareButton-dropdown
         position fixed
+        width 185px
+        z-index 35
+        background-color #F0F0F0
+        padding 4px 0
+        border-radius 5px
+        right 5px
+        top 95px
+        box-shadow 0px 0px 10px 1px #c0c0c0
+        border 1px solid #bcbcbc
         &.hide
           display none
+        &>button
+          background-color transparent
+          height 21px
+          width 100%
+          border none
+          padding-left 20px
+          text-align left
+          font-size 13px
+          font-family 'Helvetica Neue'
+          &:hover
+            background-color #4297FE
+            color white
+        .ShareButton-url
+          height 40px
+          width 100%
+          position relative
+          padding 0 5px
+          .ShareButton-url-input
+            height 21px
+            border none
+            width 143px
+            float left
+            border-top-left-radius 3px
+            border-bottom-left-radius 3px
+            border 1px solid borderColor
+            border-right none
+          .ShareButton-url-button
+            height 21px
+            border none
+            width 30px
+            float left
+            background-color #F0F0F0
+            border-top-right-radius 3px
+            border-bottom-right-radius 3px
+            border 1px solid borderColor
+            .ShareButton-url-button-tooltip
+              tooltip()
+              right 10px
+              margin-top 5px
+            &:hover
+              .ShareButton-url-button-tooltip
+                opacity 1
+            &:active
+              background-color #4297FE
+              color white
+          .ShareButton-url-alert
+            padding 10px
+            line-height 16px
+
+
 
     .TagSelect
       margin-top 5px