1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-15 18:56:22 +00:00

design update 2

This commit is contained in:
Yutaka Ishii
2017-11-18 13:46:46 +09:00
parent 3c70b2e5a0
commit b6efbcedef
61 changed files with 741 additions and 90 deletions

View File

@@ -8,7 +8,7 @@ const InfoButton = ({
<button styleName='control-infoButton'
onClick={onClick}
>
<i className='fa fa-info-circle infoButton' styleName='info-button' />
<img styleName='iconInfo' src='../resources/icon/icon-info.svg'/>
</button>
)

View File

@@ -14,7 +14,7 @@
.infoButton
padding 0px
margin 15px 0
margin 45px 0
body[data-theme="dark"]
.control-infoButton

View File

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

View File

@@ -232,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
}
getToggleLockButton () {
return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
}
handleDeleteKeyDown (e) {
@@ -332,23 +332,25 @@ class MarkdownNoteDetail extends React.Component {
/>
{(() => {
const faClassName = `fa ${this.getToggleLockButton()}`
const imgSrc = `${this.getToggleLockButton()}`
const lockButtonComponent =
<button styleName='control-lockButton'
onFocus={(e) => this.handleFocus(e)}
onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
>
<i className={faClassName} styleName='lock-button' />
<img styleName='iconInfo' src={imgSrc}/>
</button>
return (
this.state.isLockButtonShown ? lockButtonComponent : ''
)
})()}
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}
>
<i className='fa fa-window-maximize' styleName='fullScreen-button' />
<img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
</button>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

View File

@@ -12,6 +12,7 @@
.control-lockButton
top 160px
margin-bottom 10px
topBarButtonLight()
.trashed-infopanel
@@ -28,7 +29,6 @@
right $note-detail-right-margin
top $info-height + $info-margin-under-border
bottom $statusBar-height
.body-noteEditor
absolute top bottom left right

View File

@@ -52,7 +52,7 @@ $info-margin-under-border = 15px
.info-right
position absolute
right -20px
top 0
top 10px
background $ui-noteDetail-backgroundColor
bottom 1px
padding-left 30px

View File

@@ -610,7 +610,7 @@ class SnippetNoteDetail extends React.Component {
<button styleName='control-fullScreenButton'
onMouseDown={(e) => this.handleFullScreenButton(e)}>
<i className='fa fa-window-maximize' styleName='fullScreen-button' />
<img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
</button>
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

View File

@@ -67,6 +67,7 @@
.control-fullScreenButton
top 80px
margin-bottom 10px
topBarButtonLight()
body[data-theme="white"]

View File

@@ -47,10 +47,10 @@ class StarButton extends React.Component {
onMouseLeave={(e) => this.handleMouseLeave(e)}
onClick={this.props.onClick}
>
<i styleName='icon'
className={this.state.isActive || this.props.isActive
? 'fa fa-star'
: 'fa fa-star-o'
<img styleName='icon'
src={this.state.isActive || this.props.isActive
? '../resources/icon/icon-starred.svg'
: '../resources/icon/icon-star.svg'
}
/>
</button>

View File

@@ -8,7 +8,7 @@ const TrashButton = ({
<button styleName='control-trashButton'
onClick={(e) => onClick(e)}
>
<i className='fa fa-trash trashButton' styleName='info-button' />
<img styleName='iconInfo' src='../resources/icon/icon-trash.svg'/>
</button>
)

View File

@@ -1,5 +1,6 @@
.control-trashButton
top 120px
margin-bottom 10px
topBarButtonLight()
.control-trashButton--in-trash
@@ -8,7 +9,6 @@
.trashButton
padding 0px
margin 15px 0
body[data-theme="dark"]
.control-trashButton