Skip to content

Commit 931f9bd

Browse files
Rokt33rRokt33r
committed
add uncache button to article detail & change share dropdown seems to be native
1 parent bec0528 commit 931f9bd

3 files changed

Lines changed: 117 additions & 38 deletions

File tree

‎browser/main/HomePage/ArticleDetail/ShareButton.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import clientKey from 'browser/lib/clientKey'
55
import activityRecord from 'browser/lib/activityRecord'
66
const clipboard = require('electron').clipboard
77

8+
function notify (...args) {
9+
return new window.Notification(...args)
10+
}
11+
812
function getDefault () {
913
return {
1014
openDropdown: false,
@@ -66,6 +70,15 @@ export default class ShareButton extends React.Component {
6670
this.setState({openDropdown: false})
6771
}
6872

73+
handleClipboardButtonClick (e) {
74+
activityRecord.emit('MAIN_DETAIL_COPY')
75+
clipboard.writeText(this.props.article.content)
76+
notify('Saved to Clipboard!', {
77+
body: 'Paste it wherever you want!'
78+
})
79+
this.setState({openDropdown: false})
80+
}
81+
6982
handleShareViaPublicURLClick (e) {
7083
let { user } = this.props
7184
let input = Object.assign({}, this.props.article, {
@@ -135,6 +148,9 @@ export default class ShareButton extends React.Component {
135148
</div>
136149
)
137150
}
151+
<button onClick={e => this.handleClipboardButtonClick(e)}>
152+
<i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
153+
</button>
138154
</div>
139155
</div>
140156
)
@@ -143,7 +159,8 @@ export default class ShareButton extends React.Component {
143159

144160
ShareButton.propTypes = {
145161
article: PropTypes.shape({
146-
publicURL: PropTypes.string
162+
publicURL: PropTypes.string,
163+
content: PropTypes.string
147164
}),
148165
user: PropTypes.shape({
149166
name: PropTypes.string

‎browser/main/HomePage/ArticleDetail/index.js‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,34 @@ import CodeEditor from 'browser/components/CodeEditor'
77
import {
88
switchFolder,
99
cacheArticle,
10-
saveArticle
10+
saveArticle,
11+
uncacheArticle
1112
} from '../../actions'
1213
import linkState from 'browser/lib/linkState'
1314
import TagSelect from 'browser/components/TagSelect'
1415
import ModeSelect from 'browser/components/ModeSelect'
15-
import activityRecord from 'browser/lib/activityRecord'
1616
import ShareButton from './ShareButton'
1717
import { openModal, isModalOpen } from 'browser/lib/modal'
1818
import DeleteArticleModal from '../../modal/DeleteArticleModal'
1919

2020
const electron = require('electron')
21-
const clipboard = electron.clipboard
2221
const ipc = electron.ipcRenderer
22+
const remote = electron.remote
23+
const { Menu, MenuItem } = remote
24+
25+
const othersMenu = new Menu()
26+
othersMenu.append(new MenuItem({
27+
label: 'Delete Post',
28+
click: function () {
29+
remote.getCurrentWebContents().send('detail-delete')
30+
}
31+
}))
32+
othersMenu.append(new MenuItem({
33+
label: 'Discard Change',
34+
click: function (item) {
35+
remote.getCurrentWebContents().send('detail-uncache')
36+
}
37+
}))
2338

2439
const OSX = global.process.platform === 'darwin'
2540
const BRAND_COLOR = '#18AF90'
@@ -81,10 +96,6 @@ const modeSelectTutorialElement = (
8196
</svg>
8297
)
8398

84-
function notify (...args) {
85-
return new window.Notification(...args)
86-
}
87-
8899
export default class ArticleDetail extends React.Component {
89100
constructor (props) {
90101
super(props)
@@ -97,6 +108,10 @@ export default class ArticleDetail extends React.Component {
97108
if (isModalOpen()) return true
98109
this.handleDeleteButtonClick()
99110
}
111+
this.uncacheHandler = e => {
112+
if (isModalOpen()) return true
113+
this.handleUncache()
114+
}
100115
this.togglePreviewHandler = e => {
101116
if (isModalOpen()) return true
102117
this.handleTogglePreviewButtonClick()
@@ -123,6 +138,7 @@ export default class ArticleDetail extends React.Component {
123138

124139
ipc.on('detail-save', this.saveHandler)
125140
ipc.on('detail-delete', this.deleteHandler)
141+
ipc.on('detail-uncache', this.uncacheHandler)
126142
ipc.on('detail-toggle-preview', this.togglePreviewHandler)
127143
ipc.on('detail-edit', this.editHandler)
128144
}
@@ -132,6 +148,7 @@ export default class ArticleDetail extends React.Component {
132148

133149
ipc.removeListener('detail-save', this.saveHandler)
134150
ipc.removeListener('detail-delete', this.deleteHandler)
151+
ipc.removeListener('detail-uncache', this.uncacheHandler)
135152
ipc.removeListener('detail-toggle-preview', this.togglePreviewHandler)
136153
ipc.removeListener('detail-on', this.editHandler)
137154
}
@@ -169,14 +186,6 @@ export default class ArticleDetail extends React.Component {
169186
)
170187
}
171188

172-
handleClipboardButtonClick (e) {
173-
activityRecord.emit('MAIN_DETAIL_COPY')
174-
clipboard.writeText(this.props.activeArticle.content)
175-
notify('Saved to Clipboard!', {
176-
body: 'Paste it wherever you want!'
177-
})
178-
}
179-
180189
handleSaveButtonClick (e) {
181190
let { dispatch, folders, status } = this.props
182191

@@ -188,6 +197,11 @@ export default class ArticleDetail extends React.Component {
188197
}
189198
}
190199

200+
handleOthersButtonClick (e) {
201+
let size = remote.getCurrentWindow().getSize()
202+
othersMenu.popup(size[0] - 150, 100)
203+
}
204+
191205
handleFolderKeyChange (e) {
192206
let article = this.state.article
193207
article.FolderKey = e.target.value
@@ -244,6 +258,13 @@ export default class ArticleDetail extends React.Component {
244258
}
245259
}
246260

261+
handleUncache (e) {
262+
if (this.props.activeArticle) {
263+
let { dispatch, activeArticle } = this.props
264+
dispatch(uncacheArticle(activeArticle.key))
265+
}
266+
}
267+
247268
handleTitleKeyDown (e) {
248269
if (e.keyCode === 9 && !e.shiftKey) {
249270
e.preventDefault()
@@ -303,28 +324,16 @@ export default class ArticleDetail extends React.Component {
303324
/>
304325

305326
<div className='ArticleDetail-info-control'>
306-
{
307-
this.state.article.mode === 'markdown'
308-
? <button onClick={e => this.handleTogglePreviewButtonClick(e)}>
309-
{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>
310-
</button>
311-
: null
312-
}
313-
314327
<ShareButton
315328
article={activeArticle}
316329
user={user}
317330
/>
318331

319-
<button onClick={e => this.handleClipboardButtonClick(e)}>
320-
<i className='fa fa-fw fa-clipboard'/><span className='tooltip'>Copy to clipboard</span>
321-
</button>
322-
323332
<button onClick={e => this.handleSaveButtonClick(e)}>
324333
<i className='fa fa-fw fa-save'/><span className='tooltip'>Save ({OSX ? '⌘ + s' : '^ + s'})</span>
325334
</button>
326-
<button onClick={e => this.handleDeleteButtonClick(e)}>
327-
<i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (^ + Del)</span>
335+
<button onClick={e => this.handleOthersButtonClick(e)}>
336+
<i className='fa fa-fw fa-angle-down'/>
328337
</button>
329338
</div>
330339
</div>

‎browser/styles/main/ArticleDetail.styl‎

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,20 +78,73 @@ infoButton()
7878
.tooltip
7979
opacity 1
8080
&>button
81-
&:nth-child(1) .tooltip
82-
margin-left -85px
83-
&:nth-child(3) .tooltip
84-
margin-left -80px
85-
&:nth-child(4) .tooltip
86-
margin-left -60px
87-
&:nth-child(5) .tooltip
88-
margin-left -100px
81+
&:nth-child(2) .tooltip
82+
margin-left -65px
8983
.ShareButton-open-button .tooltip
9084
margin-left -40px
9185
.ShareButton-dropdown
9286
position fixed
87+
width 185px
88+
z-index 35
89+
background-color #F0F0F0
90+
padding 4px 0
91+
border-radius 5px
92+
right 5px
93+
top 95px
94+
box-shadow 0px 0px 10px 1px #c0c0c0
95+
border 1px solid #bcbcbc
9396
&.hide
9497
display none
98+
&>button
99+
background-color transparent
100+
height 21px
101+
width 100%
102+
border none
103+
padding-left 20px
104+
text-align left
105+
font-size 13px
106+
font-family 'Helvetica Neue'
107+
&:hover
108+
background-color #4297FE
109+
color white
110+
.ShareButton-url
111+
height 40px
112+
width 100%
113+
position relative
114+
padding 0 5px
115+
.ShareButton-url-input
116+
height 21px
117+
border none
118+
width 143px
119+
float left
120+
border-top-left-radius 3px
121+
border-bottom-left-radius 3px
122+
border 1px solid borderColor
123+
border-right none
124+
.ShareButton-url-button
125+
height 21px
126+
border none
127+
width 30px
128+
float left
129+
background-color #F0F0F0
130+
border-top-right-radius 3px
131+
border-bottom-right-radius 3px
132+
border 1px solid borderColor
133+
.ShareButton-url-button-tooltip
134+
tooltip()
135+
right 10px
136+
margin-top 5px
137+
&:hover
138+
.ShareButton-url-button-tooltip
139+
opacity 1
140+
&:active
141+
background-color #4297FE
142+
color white
143+
.ShareButton-url-alert
144+
padding 10px
145+
line-height 16px
146+
147+
95148

96149
.TagSelect
97150
margin-top 5px

0 commit comments

Comments
 (0)