Skip to content

Fix layout #722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asmsuechan merged 7 commits into from
Jul 25, 2017
Merged

Fix layout #722

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
27b9952
Change policy content
Jul 24, 2017
f7d1f9e
Fix InfoTab layout
Jul 24, 2017
c697f19
Fix layout at export note in InfoPanel
Jul 24, 2017
4a77f25
Fix button layout
Jul 24, 2017
dee6495
Fix typo
Jul 24, 2017
976d1bb
Delete unnecessary comma.
Jul 24, 2017
e001c97
Make padding between Storages at SideNav.
Jul 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions browser/main/Detail/InfoPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
44 changes: 41 additions & 3 deletions browser/main/Detail/InfoPanel.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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 changes: 4 additions & 8 deletions browser/main/Detail/MarkdownNoteDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)} />
Expand Down
23 changes: 8 additions & 15 deletions browser/main/Detail/NoteDetailInfo.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -86,3 +76,6 @@ body[data-theme="dark"]

.info-right
background-color $ui-dark-noteDetail-backgroundColor

.undo-button
topBarButtonDark()
14 changes: 5 additions & 9 deletions browser/main/Detail/SnippetNoteDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)} />
Expand Down Expand Up @@ -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)}
Expand Down
3 changes: 1 addition & 2 deletions browser/main/Detail/TagSelect.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
10 changes: 1 addition & 9 deletions browser/main/Detail/TrashButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
4 changes: 4 additions & 0 deletions browser/main/Detail/TrashButton.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
float right
topBarButtonLight()

.trashButton
padding 0px
margin 15px 0

body[data-theme="dark"]
.control-trashButton
topBarButtonDark()
8 changes: 4 additions & 4 deletions browser/main/modals/PreferencesModal/InfoTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, NOT COLLECTED any detail information</p>
Copy link
Copy Markdown
Contributor

@asmsuechan asmsuechan Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume and DO NOT COLLECT is better.

Copy link
Copy Markdown
Member Author

@kazup01 kazup01 Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done👍

Copy link
Copy Markdown
Contributor

@asmsuechan asmsuechan Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excuse me again, the comma is not needed.

Copy link
Copy Markdown
Contributor

@asmsuechan asmsuechan Jul 25, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I now noticed that it's COLLECTED...

<p>like 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>
Copy link
Copy Markdown
Contributor

@asmsuechan asmsuechan Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you change such as to like?

Copy link
Copy Markdown
Member Author

@kazup01 kazup01 Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No mean. I turned back it to such as.

Copy link
Copy Markdown
Contributor

@asmsuechan asmsuechan Jul 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem.

<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>
)
}
Expand Down
4 changes: 4 additions & 0 deletions browser/main/modals/PreferencesModal/InfoTab.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@

.policy
font-size 20px
margin-bottom 10px

.policy-submit
margin-top 10px

body[data-theme="dark"]
.root
Expand Down
7 changes: 6 additions & 1 deletion browser/styles/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,9 @@ modal()

topBarButtonLight()
width 34px
display flex
align-items center
justify-content center
height 34px
border-radius 17px
font-size 14px
Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down