public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Code Issues Releases Wiki Activity

Merge pull request #722 from BoostIO/fix-layout

Browse Source 
Fix layout
This commit is contained in:
SuenagaRyota
2017-07-25 10:18:12 +09:00
committed by GitHub
parent 961dab4a97 e001c97e01
commit 0290d23832
12 changed files with 93 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
browser/main/Detail/InfoPanel.js
View File

@@ -47,14 +47,21 @@ const InfoPanel = ({
</div>
</div>
<div styleName='group-export'>
<i className='fa fa-file-text fa-fw'
onClick={(e) => exportAsMd(e)}
/>
<div id='export-wrap'>
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
<i className='fa fa-file-code-o fa-fw' />
<p>.md</p>
</button>
<i className='fa fa-file-text fa-fw'
onClick={(e) => exportAsTxt(e)}
/>
<button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
<i className='fa fa-file-text-o fa-fw' />
<p>.txt</p>
</button>
<button styleName='export--unable'>
<i className='fa fa-file-pdf-o fa-fw' />
<p>.pdf</p>
</button>
</div>
</div>
)

44
browser/main/Detail/InfoPanel.styl
View File

@@ -13,7 +13,7 @@
margin-top 45px
margin-left -210px
position absolute
padding 20px
padding 20px 20px 0 20px
width 340px
background-color $ui-noteList-backgroundColor
border 1px solid $border-color
@@ -40,8 +40,35 @@
width 160px
height 25px
.group-export
height 25px
[id=export-wrap]
height 90px
display flex
justify-content center
margin 20px 0 10px 0
button
outline none
font-size 48px
color #A0A0A0
background-color transparent
border none
margin 0 5px
border-radius 5px
&:hover
transition 0.2s
background-color alpha($ui-button--hover-backgroundColor, 30%)
color $ui-inactive-text-color
p
font-size 13px
color #A0A0A0
font-weight light
&:hover
color $ui-inactive-text-color
.export--enable
cursor pointer
.export--unable
cursor not-allowed
body[data-theme="dark"]
.control-infoButton-panel
@@ -57,3 +84,14 @@ body[data-theme="dark"]
.group-section-control input
background-color alpha($ui-dark-borderColor, 80%)
color $ui-dark-text-color
[id=export-wrap]
button
color $ui-dark-inactive-text-color
&:hover
background-color alpha($ui-dark-borderColor, 20%)
color $ui-dark-text-color
p
color $ui-dark-inactive-text-color
&:hover
color $ui-dark-text-color

12
browser/main/Detail/MarkdownNoteDetail.js
View File

@@ -290,14 +290,10 @@ class MarkdownNoteDetail extends React.Component {
const trashTopBar = <div styleName='info'>
<div styleName='info-left'>
<div styleName='info-left-top'>
<div styleName='info-left-top-folderSelect'>
<i styleName='undo-button'
className='fa fa-undo fa-fw'
onClick={(e) => this.handleUndoButtonClick(e)}
/>
</div>
</div>
<i styleName='undo-button'
className='fa fa-undo fa-fw'
onClick={(e) => this.handleUndoButtonClick(e)}
/>
</div>
<div styleName='info-right'>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

23
browser/main/Detail/NoteDetailInfo.styl
View File

@@ -15,20 +15,19 @@ $info-margin-under-border = 27px
float left
padding 0 5px
margin 0px 2px
.info-left-top
display inline-block
height $info-height
line-height $info-height
.info-left-top-folderSelect
display inline-block
padding 0 3px
height 34px
line-height 26px
vertical-align middle
display flex
align-items center
justify-content center
border-radius 3px
.info-left-button
width 34px
height 34px
@@ -45,7 +44,7 @@ $info-margin-under-border = 27px
border-color $ui-favorite-star-button-color
&:active, &:active:hover
background-color $ui-favorite-star-button-color
color $ui-button--active-color
color $ui-button--
.info-right
position absolute
@@ -56,16 +55,7 @@ $info-margin-under-border = 27px
padding-left 30px
.undo-button
position relative
border solid 1px transparent
line-height 34px
vertical-align middle
border-radius 2px
transition 0.15s
user-select none
cursor pointer
&:hover
background-color #D9D9D9
topBarButtonLight()
body[data-theme="dark"]
.info
@@ -86,3 +76,6 @@ body[data-theme="dark"]
.info-right
background-color $ui-dark-noteDetail-backgroundColor
.undo-button
topBarButtonDark()

14
browser/main/Detail/SnippetNoteDetail.js
View File

@@ -549,14 +549,10 @@ class SnippetNoteDetail extends React.Component {
const trashTopBar = <div styleName='info'>
<div styleName='info-left'>
<div styleName='info-left-top'>
<div styleName='info-left-top-folderSelect'>
<i styleName='undo-button'
className='fa fa-undo fa-fw'
onClick={(e) => this.handleUndoButtonClick(e)}
/>
</div>
</div>
<i styleName='undo-button'
className='fa fa-undo fa-fw'
onClick={(e) => this.handleUndoButtonClick(e)}
/>
</div>
<div styleName='info-right'>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -589,7 +585,7 @@ class SnippetNoteDetail extends React.Component {
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}
>
<i className='fa fa-arrows-alt' styleName='fullScreen-button' />
<i className='fa fa-expand' styleName='fullScreen-button' />
</button>
<InfoButton
onClick={(e) => this.handleInfoButtonClick(e)}

3
browser/main/Detail/TagSelect.styl
View File

@@ -1,8 +1,7 @@
.root
display inline-block
top 19px
user-select none
height 26px
height 23px
vertical-align middle
width 300px
overflow-x scroll

10
browser/main/Detail/TrashButton.js
View File

@@ -8,15 +8,7 @@ const TrashButton = ({
<button styleName='control-trashButton'
onClick={(e) => onClick(e)}
>
<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'>
<g>
<g id='_x34__19_'>
<g>
<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' />
</g>
</g>
</g>
</svg>
<i className='fa fa-trash trashButton' styleName='info-button' />
</button>
)

4
browser/main/Detail/TrashButton.styl
View File

@@ -2,6 +2,10 @@
float right
topBarButtonLight()
.trashButton
padding 0px
margin 15px 0
body[data-theme="dark"]
.control-trashButton
topBarButtonDark()

1
browser/main/SideNav/StorageItem.styl
View File

@@ -1,6 +1,7 @@
.root
width 100%
user-select none
padding-top 20px
.header
position relative

8
browser/main/modals/PreferencesModal/InfoTab.js
View File

@@ -96,16 +96,16 @@ class InfoTab extends React.Component {
</ul>
<hr />
<div styleName='policy'>Data collection policy</div>
<p>We collect only the number of users on Boostnote for DAU and any detail information<br />
such as a note's content or title is not collected.</p>
<p>You can see how it works on <a href='https://github.com/BoostIO/Boostnote'>GitHub</a></p>
<p>We collect only the number of DAU for Boostnote and DO NOT COLLECTED any detail information</p>
<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>
<p>These data are only used for Boostnote improvements.</p>
<input onChange={(e) => this.handleConfigChange(e)}
checked={this.state.config.amaEnabled}
ref='amaEnabled'
type='checkbox'
/>
Enable to send analytics to our servers<br />
<button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
<button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
</div>
)
}

4
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -44,6 +44,10 @@
.policy
font-size 20px
margin-bottom 10px
.policy-submit
margin-top 10px
body[data-theme="dark"]
.root

7
browser/styles/index.styl
View File

@@ -157,6 +157,9 @@ modal()
topBarButtonLight()
width 34px
display flex
align-items center
justify-content center
height 34px
border-radius 17px
font-size 14px
@@ -168,7 +171,7 @@ topBarButtonLight()
&:active
border-color $ui-button--active-backgroundColor
&:hover
background-color $ui-button--hover-backgroundColor
background-color alpha($ui-button--hover-backgroundColor, 60%)
.control-lockButton-tooltip
opacity 1
@@ -231,10 +234,12 @@ topBarButtonDark()
color $ui-dark-topbar-button-color
&:hover
background-color $dark-default-button-background--hover
color $ui-dark-tooltip-text-color
&:active
border-color $ui-dark-button--focus-borderColor
&:active:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-tooltip-text-color
&:focus
border-color $ui-button--focus-borderColor