1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-27 00:22:45 +00:00

Fix switch button layout

This commit is contained in:
Kazu Yokomizo
2017-12-20 18:50:53 +09:00
parent b4b6d3d07c
commit 7ccc5eb9b8
5 changed files with 75 additions and 5 deletions

View File

@@ -357,10 +357,10 @@ class MarkdownNoteDetail extends React.Component {
<div styleName='mode-tab'>
<div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
<img styleName='item-star' src='../resources/icon/icon-mode-split-on.svg' />
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
</div>
<div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
<img styleName='item-star' src='../resources/icon/icon-mode-markdown-off.svg' />
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
</div>
</div>

View File

@@ -39,7 +39,7 @@
display flex
align-items center
div
width 100px
width 40px
height 100%
background-color #f9f9f9
display flex
@@ -73,7 +73,27 @@ body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
.mode-tab
border 1px solid #444444
div
background-color $ui-dark-noteDetail-backgroundColor
&:first-child
border-right 1px solid #444444
.active
background-color #3A404C
box-shadow 2px 0px 7px #444444
body[data-theme="solarized-dark"]
.root
border-left 1px solid $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
.mode-tab
border 1px solid #586E75
div
background-color $ui-solarized-dark-noteDetail-backgroundColor
&:first-child
border-right 1px solid #586E75
.active
background-color #002B36
box-shadow 2px 0px 7px #222222