diff --git a/browser/main/HomePage/ArticleDetail/ShareButton.js b/browser/main/HomePage/ArticleDetail/ShareButton.js index d8f95c1c..a5b725e3 100644 --- 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 { ) } + ) @@ -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 diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js index d2012c02..2131059a 100644 --- 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 = ( ) -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 { />
- { - this.state.article.mode === 'markdown' - ? - : null - } - - - -
diff --git a/browser/styles/main/ArticleDetail.styl b/browser/styles/main/ArticleDetail.styl index 8cf24651..aaca45f8 100644 --- 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