public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Change "Folders" and "Tags" strings to icons.

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-11-05 20:31:32 +09:00
parent 6bbc5a91fe
commit 2351bb78da
2 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
browser/main/SideNav/SideNav.styl
View File

@@ -26,27 +26,22 @@
.switch-buttons
background-color transparent
border 1px solid $ui-borderColor
width 110px
border 0
height 25px
margin 20px auto 0px auto
border-radius 1px
margin 20px auto 0px 8px
.non-active-button
navButtonColor()
font-weight 600
width 54px
height 23px
color $ui-inactive-text-color
font-size 16px
border 0
background-color transparent
transition 0.2s
&:hover
color alpha(#0B99F1, 60%)
.active-button
@extend .non-active-button
background-color $ui-button--active-backgroundColor
color $ui-text-color
&:hover
background-color alpha($ui-button--active-backgroundColor, 70%)
color alpha($ui-text-color, 70%)
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
color #0B99F1
.top-menu-label
margin-left 5px
@@ -118,25 +113,10 @@ body[data-theme="dark"]
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.switch-buttons
border-color $ui-dark-borderColor
.non-active-button
navDarkButtonColor()
.active-button
@extend .non-active-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
color alpha($ui-dark-text-color, 60%)
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 70%)
color alpha($ui-dark-text-color, 70%)
&:active
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
color alpha(#0B99F1, 60%)
.tag-title
p

4
browser/main/SideNav/index.js
View File

@@ -148,8 +148,8 @@ class SideNav extends React.Component {
>
<div styleName='top'>
<div styleName='switch-buttons'>
<button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
<button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
<button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-folder fa-fw' /></button>
<button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
</div>
<div>
<button styleName='top-menu'