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 #1121 from BoostIO/fix-note-detail-layout

Browse Source 
Fix note detail layout
This commit is contained in:
Kazz Yokomizo
2017-11-14 21:36:13 +09:00
committed by GitHub
parent 1613e72d47 55ef998c55
commit c238e1b5cb
18 changed files with 111 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Backers.md
View File

@@ -9,16 +9,20 @@ Boostnote is an open source project. It's an independent project with its ongoin
## Backers via OpenCollective
<a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
- [Kazu Yokomizo](https://twitter.com/kazup_bot) - $20
- [Ralph03](https://opencollective.com/ralph03) - $24
- [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
- [tatoosh11](https://twitter.com/ta11) - $10
- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
- [Yeojong Kim](https://twitter.com/yeojoy) - $5
- [Scotia Draven](https://opencollective.com/scotia-draven) - $5
- [spoonhoop](https://opencollective.com/spoonhoop) - $5
## Backers via Bountysource
https://salt.bountysource.com/teams/boostnote

6
browser/components/NoteItem.styl
View File

@@ -149,13 +149,15 @@ body[data-theme="white"]
.item
background-color $ui-white-noteList-backgroundColor
&:hover
background-color alpha($ui-button--active-backgroundColor, 40%)
background-color alpha($ui-button--active-backgroundColor, 60%)
&:active
background-color $ui-button--active-backgroundColor
.item--active
@extend .item
background-color $ui-button--active-backgroundColor
&:hover
background-color alpha($ui-button--active-backgroundColor, 60%)
body[data-theme="dark"]
.root
@@ -208,7 +210,7 @@ body[data-theme="dark"]
background-color alpha(white, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b
.item-bottom-tagList-item
background-color alpha(#fff, 20%)

6
browser/components/NoteItemSimple.styl
View File

@@ -71,13 +71,15 @@ body[data-theme="white"]
.item-simple
background-color $ui-white-noteList-backgroundColor
&:hover
background-color alpha($ui-button--active-backgroundColor, 40%)
background-color alpha($ui-button--active-backgroundColor, 60%)
&:active
background-color $ui-button--active-backgroundColor
.item-simple--active
@extend .item-simple
background-color $ui-button--active-backgroundColor
&:hover
background-color alpha($ui-button--active-backgroundColor, 60%)
body[data-theme="dark"]
.root
@@ -127,7 +129,7 @@ body[data-theme="dark"]
background-color alpha(white, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b
.item-simple-bottom-tagList-item
background-color alpha(#fff, 20%)

4
browser/components/TodoListPercentage.styl
View File

@@ -1,7 +1,7 @@
.percentageBar
position absolute
top 58px
right: 0px
top 40px
right 0px
left 0px
background-color #DADFE1
width 100%

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

@@ -3,7 +3,7 @@
*/
// Margin on the left side and the right side for NoteDetail component.
$note-detail-left-margin = 25px
$note-detail-right-margin = 25px
$note-detail-left-margin = 50px
$note-detail-right-margin = 70px
$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

2
browser/main/Detail/InfoButton.js
View File

@@ -8,7 +8,7 @@ const InfoButton = ({
<button styleName='control-infoButton'
onClick={onClick}
>
<i className='fa fa-info infoButton' styleName='info-button' />
<i className='fa fa-info-circle infoButton' styleName='info-button' />
</button>
)

2
browser/main/Detail/InfoButton.styl
View File

@@ -1,5 +1,5 @@
.control-infoButton
float right
top 10px
topBarButtonLight()
.control-infoPanel

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

@@ -11,7 +11,7 @@
.control-infoButton-panel
z-index 200
margin-top 38px
margin-left -140px
right 0px
position absolute
padding 20px 25px 0 25px
width 300px
@@ -33,7 +33,7 @@
.control-infoButton-panel-trash
z-index 200
margin-top 45px
margin-left -190px
right 0px
position absolute
padding 20px 25px 0 25px
width 300px

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

@@ -15,6 +15,7 @@ import _ from 'lodash'
import { findNoteTitle } from 'browser/lib/findNoteTitle'
import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
import TrashButton from './TrashButton'
import PermanentDeleteButton from './PermanentDeleteButton'
import InfoButton from './InfoButton'
import InfoPanel from './InfoPanel'
import InfoPanelTrashed from './InfoPanelTrashed'
@@ -231,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
}
getToggleLockButton () {
return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
}
handleDeleteKeyDown (e) {
@@ -285,7 +286,7 @@ class MarkdownNoteDetail extends React.Component {
/>
</div>
<div styleName='info-right'>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
<PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
<InfoButton
onClick={(e) => this.handleInfoButtonClick(e)}
/>
@@ -302,10 +303,6 @@ class MarkdownNoteDetail extends React.Component {
const detailTopBar = <div styleName='info'>
<div styleName='info-left'>
<StarButton styleName='info-left-button'
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
<div styleName='info-left-top'>
<FolderSelect styleName='info-left-top-folderSelect'
value={this.state.note.storage + '-' + this.state.note.folder}
@@ -325,6 +322,15 @@ class MarkdownNoteDetail extends React.Component {
/>
</div>
<div styleName='info-right'>
<InfoButton
onClick={(e) => this.handleInfoButtonClick(e)}
/>
<StarButton
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
{(() => {
const faClassName = `fa ${this.getToggleLockButton()}`
const lockButtonComponent =
@@ -333,23 +339,20 @@ class MarkdownNoteDetail extends React.Component {
onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
>
<i className={faClassName} styleName='lock-button' />
<span styleName='control-lockButton-tooltip'>
{this.state.isLocked ? 'Unlock Editor' : 'Keep Editor Locked'}
</span>
</button>
return (
this.state.isLockButtonShown ? lockButtonComponent : ''
)
})()}
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}
>
<i className='fa fa-window-maximize' styleName='fullScreen-button' />
</button>
<InfoButton
onClick={(e) => this.handleInfoButtonClick(e)}
/>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
<InfoPanel
storageName={currentOption.storage.name}
folderName={currentOption.folder.name}

18
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -11,23 +11,15 @@
padding-bottom 3px
.control-lockButton
top 160px
topBarButtonLight()
.control-lockButton-tooltip
tooltip()
position fixed
pointer-events none
top 50px
z-index 200
padding 5px
line-height normal
border-radius 2px
opacity 0
transition 0.1s
.trashed-infopanel
top 40px
position relative
.control-fullScreenButton
float right
padding 0 0 2px 0
top 80px
topBarButtonLight()
.body

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

@@ -1,7 +1,7 @@
@import('DetailVars')
$info-height = 60px
$info-margin-under-border = 27px
$info-height = 40px
$info-margin-under-border = 15px
.info
absolute top left right
@@ -13,8 +13,10 @@ $info-margin-under-border = 27px
.info-left
float left
padding 0 5px
margin 0px 2px
padding 0 7px
width 100%
display flex
.info-left-top
display inline-block
height $info-height
@@ -22,12 +24,13 @@ $info-margin-under-border = 27px
.info-left-top-folderSelect
padding 0 3px
height 34px
line-height 26px
height 40px
line-height 40px
display flex
align-items center
justify-content center
border-radius 3px
.info-left-button
width 34px
height 34px
@@ -48,7 +51,7 @@ $info-margin-under-border = 27px
.info-right
position absolute
right 0
right -20px
top 0
background $ui-noteDetail-backgroundColor
bottom 1px
@@ -59,7 +62,7 @@ $info-margin-under-border = 27px
height 34px
border-radius 17px
font-size 14px
margin 15px 7px
margin 5px 0px
border none
color $ui-button-color
display flex
@@ -72,6 +75,7 @@ $info-margin-under-border = 27px
border-color $ui-button--active-backgroundColor
&:hover
background-color alpha($ui-button--hover-backgroundColor, 60%)
transition 0.2s
.control-lockButton-tooltip
opacity 1

19
browser/main/Detail/PermanentDeleteButton.js Normal file
View File

@@ -0,0 +1,19 @@
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './TrashButton.styl'
const PermanentDeleteButton = ({
onClick
}) => (
<button styleName='control-trashButton--in-trash'
onClick={(e) => onClick(e)}
>
<i className='fa fa-trash trashButton' styleName='info-button' />
</button>
)
PermanentDeleteButton.propTypes = {
onClick: PropTypes.func.isRequired
}
export default CSSModules(PermanentDeleteButton, styles)

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

@@ -583,10 +583,6 @@ class SnippetNoteDetail extends React.Component {
const detailTopBar = <div styleName='info'>
<div styleName='info-left'>
<StarButton styleName='info-left-button'
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
<div styleName='info-left-top'>
<FolderSelect styleName='info-left-top-folderSelect'
value={this.state.note.storage + '-' + this.state.note.folder}
@@ -603,15 +599,21 @@ class SnippetNoteDetail extends React.Component {
/>
</div>
<div styleName='info-right'>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}
>
<i className='fa fa-window-maximize' styleName='fullScreen-button' />
</button>
<InfoButton
onClick={(e) => this.handleInfoButtonClick(e)}
/>
<StarButton
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}>
<i className='fa fa-window-maximize' styleName='fullScreen-button' />
</button>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
<InfoPanel
storageName={currentOption.storage.name}
folderName={currentOption.folder.name}

5
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -43,7 +43,7 @@
overflow hidden
.tabList .plusButton
navButtonColor()
navWhiteButtonColor()
width 30px
.tabView
@@ -66,8 +66,7 @@
color white
.control-fullScreenButton
float right
padding 0 0 2px 0
top 80px
topBarButtonLight()
body[data-theme="white"]

43
browser/main/Detail/StarButton.styl
View File

@@ -1,47 +1,24 @@
.root
left 7px
top 0
padding 0
color alpha($ui-favorite-star-button-color, 60%)
top 45px
topBarButtonLight()
&:hover
transition 0.15s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-favorite-star-button-color
&:active
transition 0.15s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-favorite-star-button-color
transition 0.2s
color alpha($ui-favorite-star-button-color, 0.6)
.root--active
@extend .root
transition 0.15s
color $ui-favorite-star-button-color
&:hover
transition 0.15s
color $ui-favorite-star-button-color
background-color alpha($ui-button--active-backgroundColor, 40%)
&:active
transition 0.15s
color $ui-favorite-star-button-color
background-color alpha($ui-button--active-backgroundColor, 40%)
transition 0.2s
color alpha($ui-favorite-star-button-color, 0.6)
.icon
transition transform 0.15s
body[data-theme="dark"]
.root
topBarButtonDark()
&:hover
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-favorite-star-button-color
&:active
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-favorite-star-button-color
.root--active
@extend .root
color $ui-favorite-star-button-color
&:hover
transition 0.15s
color $ui-favorite-star-button-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
transition 0.2s
color alpha($ui-favorite-star-button-color, 0.6)

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

@@ -1,9 +1,10 @@
.root
display inline-block
user-select none
height 23px
line-height 50px
height 50px
vertical-align middle
width 300px
width 100%
overflow-x scroll
white-space nowrap
@@ -12,9 +13,7 @@
.tag
display inline-block
margin 1px 3px
padding 0
height 20px
margin 0px 2px
background-color alpha($ui-tag-backgroundColor, 10%)
border-radius 3px
overflow hidden

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

@@ -1,5 +1,9 @@
.control-trashButton
float right
top 120px
topBarButtonLight()
.control-trashButton--in-trash
top 60px
topBarButtonLight()
.trashButton

10
browser/styles/index.styl
View File

@@ -180,19 +180,21 @@ modal()
border-radius $modal-border-radius
topBarButtonLight()
position absolute
width 34px
height 34px
border-radius 17px
font-size 14px
margin 15px 7px
border none
color $ui-button-color
color alpha($ui-button-color, 0.4)
fill $ui-button-color
background-color transparent
&:active
border-color $ui-button--active-backgroundColor
&:hover
background-color alpha($ui-button--hover-backgroundColor, 60%)
transform scale(1.1)
transition 0.4s
color $ui-button-color
.control-lockButton-tooltip
opacity 1
@@ -282,12 +284,10 @@ topBarButtonDark()
border-color $ui-dark-borderColor
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