Skip to content

Commit 0290d23

Browse files
asmsuechanasmsuechan
authored
Merge pull request #722 from BoostIO/fix-layout
Fix layout
2 parents 961dab4 + e001c97 commit 0290d23

File tree

12 files changed

+93
-58
lines changed

12 files changed

+93
-58
lines changed

‎browser/main/Detail/InfoPanel.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,21 @@ const InfoPanel = ({
4747
</div>
4848
</div>
4949

50-
<div styleName='group-export'>
51-
<i className='fa fa-file-text fa-fw'
52-
onClick={(e) => exportAsMd(e)}
53-
/>
50+
<div id='export-wrap'>
51+
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
52+
<i className='fa fa-file-code-o fa-fw' />
53+
<p>.md</p>
54+
</button>
5455

55-
<i className='fa fa-file-text fa-fw'
56-
onClick={(e) => exportAsTxt(e)}
57-
/>
56+
<button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
57+
<i className='fa fa-file-text-o fa-fw' />
58+
<p>.txt</p>
59+
</button>
60+
61+
<button styleName='export--unable'>
62+
<i className='fa fa-file-pdf-o fa-fw' />
63+
<p>.pdf</p>
64+
</button>
5865
</div>
5966
</div>
6067
)

‎browser/main/Detail/InfoPanel.styl‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
margin-top 45px
1414
margin-left -210px
1515
position absolute
16-
padding 20px
16+
padding 20px 20px 0 20px
1717
width 340px
1818
background-color $ui-noteList-backgroundColor
1919
border 1px solid $border-color
@@ -40,8 +40,35 @@
4040
width 160px
4141
height 25px
4242

43-
.group-export
44-
height 25px
43+
[id=export-wrap]
44+
height 90px
45+
display flex
46+
justify-content center
47+
margin 20px 0 10px 0
48+
button
49+
outline none
50+
font-size 48px
51+
color #A0A0A0
52+
background-color transparent
53+
border none
54+
margin 0 5px
55+
border-radius 5px
56+
&:hover
57+
transition 0.2s
58+
background-color alpha($ui-button--hover-backgroundColor, 30%)
59+
color $ui-inactive-text-color
60+
p
61+
font-size 13px
62+
color #A0A0A0
63+
font-weight light
64+
&:hover
65+
color $ui-inactive-text-color
66+
67+
.export--enable
68+
cursor pointer
69+
70+
.export--unable
71+
cursor not-allowed
4572

4673
body[data-theme="dark"]
4774
.control-infoButton-panel
@@ -57,3 +84,14 @@ body[data-theme="dark"]
5784
.group-section-control input
5885
background-color alpha($ui-dark-borderColor, 80%)
5986
color $ui-dark-text-color
87+
88+
[id=export-wrap]
89+
button
90+
color $ui-dark-inactive-text-color
91+
&:hover
92+
background-color alpha($ui-dark-borderColor, 20%)
93+
color $ui-dark-text-color
94+
p
95+
color $ui-dark-inactive-text-color
96+
&:hover
97+
color $ui-dark-text-color

‎browser/main/Detail/MarkdownNoteDetail.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -290,14 +290,10 @@ class MarkdownNoteDetail extends React.Component {
290290

291291
const trashTopBar = <div styleName='info'>
292292
<div styleName='info-left'>
293-
<div styleName='info-left-top'>
294-
<div styleName='info-left-top-folderSelect'>
295-
<i styleName='undo-button'
296-
className='fa fa-undo fa-fw'
297-
onClick={(e) => this.handleUndoButtonClick(e)}
298-
/>
299-
</div>
300-
</div>
293+
<i styleName='undo-button'
294+
className='fa fa-undo fa-fw'
295+
onClick={(e) => this.handleUndoButtonClick(e)}
296+
/>
301297
</div>
302298
<div styleName='info-right'>
303299
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

‎browser/main/Detail/NoteDetailInfo.styl‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,19 @@ $info-margin-under-border = 27px
1515
float left
1616
padding 0 5px
1717
margin 0px 2px
18-
1918
.info-left-top
2019
display inline-block
2120
height $info-height
2221
line-height $info-height
2322

2423
.info-left-top-folderSelect
25-
display inline-block
2624
padding 0 3px
2725
height 34px
2826
line-height 26px
29-
vertical-align middle
27+
display flex
28+
align-items center
29+
justify-content center
3030
border-radius 3px
31-
3231
.info-left-button
3332
width 34px
3433
height 34px
@@ -45,7 +44,7 @@ $info-margin-under-border = 27px
4544
border-color $ui-favorite-star-button-color
4645
&:active, &:active:hover
4746
background-color $ui-favorite-star-button-color
48-
color $ui-button--active-color
47+
color $ui-button--
4948

5049
.info-right
5150
position absolute
@@ -56,16 +55,7 @@ $info-margin-under-border = 27px
5655
padding-left 30px
5756

5857
.undo-button
59-
position relative
60-
border solid 1px transparent
61-
line-height 34px
62-
vertical-align middle
63-
border-radius 2px
64-
transition 0.15s
65-
user-select none
66-
cursor pointer
67-
&:hover
68-
background-color #D9D9D9
58+
topBarButtonLight()
6959

7060
body[data-theme="dark"]
7161
.info
@@ -86,3 +76,6 @@ body[data-theme="dark"]
8676

8777
.info-right
8878
background-color $ui-dark-noteDetail-backgroundColor
79+
80+
.undo-button
81+
topBarButtonDark()

‎browser/main/Detail/SnippetNoteDetail.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -549,14 +549,10 @@ class SnippetNoteDetail extends React.Component {
549549

550550
const trashTopBar = <div styleName='info'>
551551
<div styleName='info-left'>
552-
<div styleName='info-left-top'>
553-
<div styleName='info-left-top-folderSelect'>
554-
<i styleName='undo-button'
555-
className='fa fa-undo fa-fw'
556-
onClick={(e) => this.handleUndoButtonClick(e)}
557-
/>
558-
</div>
559-
</div>
552+
<i styleName='undo-button'
553+
className='fa fa-undo fa-fw'
554+
onClick={(e) => this.handleUndoButtonClick(e)}
555+
/>
560556
</div>
561557
<div styleName='info-right'>
562558
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -589,7 +585,7 @@ class SnippetNoteDetail extends React.Component {
589585
<button styleName='control-fullScreenButton'
590586
onMouseDown={(e) => this.handleFullScreenButton(e)}
591587
>
592-
<i className='fa fa-arrows-alt' styleName='fullScreen-button' />
588+
<i className='fa fa-expand' styleName='fullScreen-button' />
593589
</button>
594590
<InfoButton
595591
onClick={(e) => this.handleInfoButtonClick(e)}

‎browser/main/Detail/TagSelect.styl‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.root
22
display inline-block
3-
top 19px
43
user-select none
5-
height 26px
4+
height 23px
65
vertical-align middle
76
width 300px
87
overflow-x scroll

‎browser/main/Detail/TrashButton.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,7 @@ const TrashButton = ({
88
<button styleName='control-trashButton'
99
onClick={(e) => onClick(e)}
1010
>
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>
11+
<i className='fa fa-trash trashButton' styleName='info-button' />
2012
</button>
2113
)
2214

‎browser/main/Detail/TrashButton.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
float right
33
topBarButtonLight()
44

5+
.trashButton
6+
padding 0px
7+
margin 15px 0
8+
59
body[data-theme="dark"]
610
.control-trashButton
711
topBarButtonDark()

‎browser/main/SideNav/StorageItem.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.root
22
width 100%
33
user-select none
4+
padding-top 20px
45

56
.header
67
position relative

‎browser/main/modals/PreferencesModal/InfoTab.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,16 @@ class InfoTab extends React.Component {
9696
</ul>
9797
<hr />
9898
<div styleName='policy'>Data collection policy</div>
99-
<p>We collect only the number of users on Boostnote for DAU and any detail information<br />
100-
such as a note's content or title is not collected.</p>
101-
<p>You can see how it works on <a href='https://github.com/BoostIO/Boostnote'>GitHub</a></p>
99+
<p>We collect only the number of DAU for Boostnote and DO NOT COLLECTED any detail information</p>
100+
<p>such as your note content. You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</p>
101+
<p>These data are only used for Boostnote improvements.</p>
102102
<input onChange={(e) => this.handleConfigChange(e)}
103103
checked={this.state.config.amaEnabled}
104104
ref='amaEnabled'
105105
type='checkbox'
106106
/>
107107
Enable to send analytics to our servers<br />
108-
<button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
108+
<button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
109109
</div>
110110
)
111111
}

0 commit comments

Comments
 (0)