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:
@@ -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
|
||||||
|
|||||||
@@ -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)}
|
||||||
|
|||||||
Reference in New Issue
Block a user