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

2025-12-13 01:36:22 +00:00 · 2016-01-02 22:39:26 +09:00
parent bec0528a3a
commit 931f9bdce0
3 changed files with 117 additions and 38 deletions
--- a/browser/main/HomePage/ArticleDetail/ShareButton.js
+++ b/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
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/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)}>
-                <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (^ + Del)</span>
+              <button onClick={e => this.handleOthersButtonClick(e)}>
+                <i className='fa fa-fw fa-angle-down'/>
              </button>
            </div>
          </div>
--- a/browser/styles/main/ArticleDetail.styl
+++ b/browser/styles/main/ArticleDetail.styl
@@ -78,20 +78,73 @@ infoButton()
          .tooltip
            opacity 1
      &>button
-        &:nth-child(1) .tooltip
-          margin-left -85px
-        &:nth-child(3) .tooltip
-          margin-left -80px
-        &:nth-child(4) .tooltip
-          margin-left -60px
-        &:nth-child(5) .tooltip
-          margin-left -100px
+        &:nth-child(2) .tooltip
+          margin-left -65px
      .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