Skip to content
This repository was archived by the owner on May 12, 2026. It is now read-only.

Commit 3c89e6a

Browse files
asmsuechanasmsuechan
authored
Merge pull request #672 from asmsuechan/componentnize-top-bar-of-note-detail
Componentnize TrashButton
2 parents a36be79 + 617f0e0 commit 3c89e6a

6 files changed

Lines changed: 42 additions & 40 deletions

File tree

‎browser/main/Detail/MarkdownNoteDetail.js‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import StatusBar from '../StatusBar'
1414
import _ from 'lodash'
1515
import { findNoteTitle } from 'browser/lib/findNoteTitle'
1616
import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
17+
import TrashButton from './TrashButton'
1718

1819
const electron = require('electron')
1920
const { remote } = electron
@@ -171,7 +172,7 @@ class MarkdownNoteDetail extends React.Component {
171172

172173
}
173174

174-
handleDeleteButtonClick (e) {
175+
handleTrashButtonClick (e) {
175176
let index = dialog.showMessageBox(remote.getCurrentWindow(), {
176177
type: 'warning',
177178
message: 'Delete a note',
@@ -278,19 +279,9 @@ class MarkdownNoteDetail extends React.Component {
278279
this.state.isLockButtonShown ? lockButtonComponent : ''
279280
)
280281
})()}
281-
<button styleName='control-trashButton'
282-
onClick={(e) => this.handleDeleteButtonClick(e)}
283-
>
284-
<svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
285-
<g>
286-
<g id='_x34__19_'>
287-
<g>
288-
<path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
289-
</g>
290-
</g>
291-
</g>
292-
</svg>
293-
</button>
282+
<TrashButton
283+
onClick={(e) => this.handleTrashButtonClick(e)}
284+
/>
294285
<button styleName='control-fullScreenButton'
295286
onMouseDown={(e) => this.handleFullScreenButton(e)}
296287
>

‎browser/main/Detail/MarkdownNoteDetail.styl‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@
2727
opacity 0
2828
transition 0.1s
2929

30-
.control-trashButton
31-
float right
32-
topBarButtonLight()
33-
3430
.control-fullScreenButton
3531
float right
3632
padding 7px
@@ -58,8 +54,5 @@ body[data-theme="dark"]
5854
.control-lockButton-tooltip
5955
darkTooltip()
6056

61-
.control-trashButton
62-
topBarButtonDark()
63-
6457
.control-fullScreenButton
6558
topBarButtonDark()

‎browser/main/Detail/SnippetNoteDetail.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
1717
import _ from 'lodash'
1818
import { findNoteTitle } from 'browser/lib/findNoteTitle'
1919
import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
20+
import TrashButton from './TrashButton'
2021

2122
function pass (name) {
2223
switch (name) {
@@ -518,19 +519,9 @@ class SnippetNoteDetail extends React.Component {
518519
/>
519520
</div>
520521
<div styleName='info-right'>
521-
<button styleName='control-trashButton'
522+
<TrashButton
522523
onClick={(e) => this.handleDeleteButtonClick(e)}
523-
>
524-
<svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
525-
<g>
526-
<g id='_x34__19_'>
527-
<g>
528-
<path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
529-
</g>
530-
</g>
531-
</g>
532-
</svg>
533-
</button>
524+
/>
534525
<button styleName='control-fullScreenButton'
535526
onMouseDown={(e) => this.handleFullScreenButton(e)}
536527
>

‎browser/main/Detail/SnippetNoteDetail.styl‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,6 @@
6666
&:active .update-icon
6767
color white
6868

69-
.control-trashButton
70-
float right
71-
topBarButtonLight()
72-
7369
.control-fullScreenButton
7470
float right
7571
padding 7px
@@ -105,8 +101,5 @@ body[data-theme="dark"]
105101
transition 0.15s
106102
color $ui-dark-text-color
107103

108-
.control-trashButton
109-
topBarButtonDark()
110-
111104
.control-fullScreenButton
112105
topBarButtonDark()

‎browser/main/Detail/TrashButton.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { PropTypes } from 'react'
2+
import CSSModules from 'browser/lib/CSSModules'
3+
import styles from './TrashButton.styl'
4+
5+
const TrashButton = ({
6+
onClick
7+
}) => (
8+
<button styleName='control-trashButton'
9+
onClick={(e) => onClick(e)}
10+
>
11+
<svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
12+
<g>
13+
<g id='_x34__19_'>
14+
<g>
15+
<path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
16+
</g>
17+
</g>
18+
</g>
19+
</svg>
20+
</button>
21+
)
22+
23+
TrashButton.propTypes = {
24+
onClick: PropTypes.func.isRequired
25+
}
26+
27+
export default CSSModules(TrashButton, styles)

‎browser/main/Detail/TrashButton.styl‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.control-trashButton
2+
float right
3+
topBarButtonLight()
4+
5+
body[data-theme="dark"]
6+
.control-trashButton
7+
topBarButtonDark()

0 commit comments

Comments
 (0)