1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

fix button style to change color when switch active/inactive

This commit is contained in:
Sosuke Suzuki
2017-09-30 17:51:41 +09:00
parent 06bd2b2b79
commit 59e5c547e9
2 changed files with 16 additions and 10 deletions

View File

@@ -13,14 +13,23 @@
height $topBar-height height $topBar-height
padding 0 15px padding 0 15px
font-size 12px font-size 12px
width 100% width 33%
text-align left text-align center
&:hover &:hover
color $ui-text-color color $ui-text-color
&:active, &:active:hover &:active, &:active:hover
color $ui-text-color color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%) background-color alpha($ui-button--active-backgroundColor, 20%)
.switch-buttons button
width 33%
.active-button
background-color #c4c4c4
.non-active-button
background-color white
.top-menu-label .top-menu-label
margin-left 5px margin-left 5px
overflow ellipsis overflow ellipsis

View File

@@ -40,13 +40,11 @@ class SideNav extends React.Component {
} }
handleSwitchFolderButtonClick (e) { handleSwitchFolderButtonClick (e) {
console.log('SwitchfolderButton Clicked')
let { router } = this.context let { router } = this.context
router.push('/home') router.push('/home')
} }
handleSwitchTagButtonClick (e) { handleSwitchTagButtonClick (e) {
console.log('SwitchTagButton clicked')
let { router } = this.context let { router } = this.context
router.push('/alltags') router.push('/alltags')
} }
@@ -138,16 +136,15 @@ class SideNav extends React.Component {
tabIndex='1' tabIndex='1'
style={style} style={style}
> >
<div styleName='SwitchModeButtons'>
<button onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
<button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
</div>
<div styleName='top'> <div styleName='top'>
<div styleName='switch-buttons'>
<button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
<button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
</div>
<button styleName='top-menu' <button styleName='top-menu'
onClick={(e) => this.handleMenuButtonClick(e)} onClick={(e) => this.handleMenuButtonClick(e)}
> >
<i className='fa fa-wrench fa-fw' /> <i className='fa fa-wrench fa-fw' />
<span styleName='top-menu-label'>Preferences</span>
</button> </button>
</div> </div>
{this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)} {this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)}