Skip to content

Commit 9eaa90c

Browse files
asmsuechanasmsuechan
authored
Merge pull request #768 from BoostIO/fix-infoPanel-layout-in-trash
Fixed InfoPanel layout in Trash
2 parents a0def65 + 049835d commit 9eaa90c

File tree

5 files changed

+103
-6
lines changed

5 files changed

+103
-6
lines changed

‎browser/main/Detail/InfoPanel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ const InfoPanel = ({
2424
</div>
2525
<div styleName='group-section'>
2626
<div styleName='group-section-label'>
27-
Created at
27+
Created
2828
</div>
2929
<div styleName='group-section-control'>
3030
{createdAt}
3131
</div>
3232
</div>
3333
<div styleName='group-section'>
3434
<div styleName='group-section-label'>
35-
Updated at
35+
Updated
3636
</div>
3737
<div styleName='group-section-control'>
3838
{updatedAt}

‎browser/main/Detail/InfoPanel.styl‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@
1818
background-color $ui-noteList-backgroundColor
1919
border 1px solid $border-color
2020

21+
.control-infoButton-panel-trash
22+
z-index 200
23+
margin-top 45px
24+
margin-left -230px
25+
position absolute
26+
padding 20px 20px 0 20px
27+
width 320px
28+
background-color $ui-noteList-backgroundColor
29+
border 1px solid $border-color
30+
2131
.group-section
2232
display flex
2333
line-height 30px
@@ -40,6 +50,19 @@
4050
width 160px
4151
height 25px
4252

53+
.group-section-control text
54+
color #EA4447
55+
font-weight 600
56+
font-size 14px
57+
width 70px
58+
height 25px
59+
background-color rgba(226,33,113,0.1)
60+
border none
61+
outline none
62+
border-radius 2px
63+
margin-right 5px
64+
padding 2px 5px
65+
4366
[id=export-wrap]
4467
height 90px
4568
display flex
@@ -75,6 +98,10 @@ body[data-theme="dark"]
7598
background-color $ui-dark-noteList-backgroundColor
7699
border 1px solid $ui-dark-borderColor
77100

101+
.control-infoButton-panel-trash
102+
background-color $ui-dark-noteList-backgroundColor
103+
border 1px solid $ui-dark-borderColor
104+
78105
.group-section-label
79106
color $ui-inactive-text-color
80107

‎browser/main/Detail/InfoPanelTrashed.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { PropTypes } from 'react'
2+
import CSSModules from 'browser/lib/CSSModules'
3+
import styles from './InfoPanel.styl'
4+
5+
const InfoPanelTrashed = ({
6+
storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
7+
}) => (
8+
<div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
9+
<div styleName='group-section'>
10+
<div styleName='group-section-label'>
11+
Storage
12+
</div>
13+
<div styleName='group-section-control'>
14+
{storageName}
15+
</div>
16+
</div>
17+
<div styleName='group-section'>
18+
<div styleName='group-section-label'>
19+
Folder
20+
</div>
21+
<div styleName='group-section-control'>
22+
<text>Trash</text>{folderName}
23+
</div>
24+
</div>
25+
<div styleName='group-section'>
26+
<div styleName='group-section-label'>
27+
Created
28+
</div>
29+
<div styleName='group-section-control'>
30+
{createdAt}
31+
</div>
32+
</div>
33+
<div styleName='group-section'>
34+
<div styleName='group-section-label'>
35+
Updated
36+
</div>
37+
<div styleName='group-section-control'>
38+
{updatedAt}
39+
</div>
40+
</div>
41+
42+
<div id='export-wrap'>
43+
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
44+
<i className='fa fa-file-code-o fa-fw' />
45+
<p>.md</p>
46+
</button>
47+
48+
<button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
49+
<i className='fa fa-file-text-o fa-fw' />
50+
<p>.txt</p>
51+
</button>
52+
53+
<button styleName='export--unable'>
54+
<i className='fa fa-file-pdf-o fa-fw' />
55+
<p>.pdf</p>
56+
</button>
57+
</div>
58+
</div>
59+
)
60+
61+
InfoPanelTrashed.propTypes = {
62+
storageName: PropTypes.string.isRequired,
63+
folderName: PropTypes.string.isRequired,
64+
updatedAt: PropTypes.string.isRequired,
65+
createdAt: PropTypes.string.isRequired,
66+
exportAsMd: PropTypes.func.isRequired,
67+
exportAsTxt: PropTypes.func.isRequired
68+
}
69+
70+
export default CSSModules(InfoPanelTrashed, styles)

‎browser/main/Detail/MarkdownNoteDetail.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
1717
import TrashButton from './TrashButton'
1818
import InfoButton from './InfoButton'
1919
import InfoPanel from './InfoPanel'
20+
import InfoPanelTrashed from './InfoPanelTrashed'
2021
import { formatDate } from 'browser/lib/date-formatter'
2122

2223
const electron = require('electron')
@@ -300,10 +301,9 @@ class MarkdownNoteDetail extends React.Component {
300301
<InfoButton
301302
onClick={(e) => this.handleInfoButtonClick(e)}
302303
/>
303-
<InfoPanel
304+
<InfoPanelTrashed
304305
storageName={currentOption.storage.name}
305306
folderName={currentOption.folder.name}
306-
noteLink={`[${note.title}](${location.query.key})`}
307307
updatedAt={formatDate(note.updatedAt)}
308308
createdAt={formatDate(note.createdAt)}
309309
exportAsMd={this.exportAsMd}

‎browser/main/Detail/SnippetNoteDetail.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
2020
import TrashButton from './TrashButton'
2121
import InfoButton from './InfoButton'
2222
import InfoPanel from './InfoPanel'
23+
import InfoPanelTrashed from './InfoPanelTrashed'
2324
import { formatDate } from 'browser/lib/date-formatter'
2425

2526
function pass (name) {
@@ -560,10 +561,9 @@ class SnippetNoteDetail extends React.Component {
560561
<InfoButton
561562
onClick={(e) => this.handleInfoButtonClick(e)}
562563
/>
563-
<InfoPanel
564+
<InfoPanelTrashed
564565
storageName={currentOption.storage.name}
565566
folderName={currentOption.folder.name}
566-
noteLink={`[${note.title}](${location.query.key})`}
567567
updatedAt={formatDate(note.updatedAt)}
568568
createdAt={formatDate(note.createdAt)}
569569
exportAsMd={this.showWarning}

0 commit comments

Comments
 (0)