public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +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 .switch-buttons
background-color transparent background-color transparent
border 1px solid $ui-borderColor border 0
width 110px
height 25px height 25px
margin 20px auto 0px auto margin 20px auto 0px 8px
border-radius 1px
.non-active-button .non-active-button
navButtonColor() color $ui-inactive-text-color
font-weight 600 font-size 16px
width 54px border 0
height 23px background-color transparent
transition 0.2s
&:hover
color alpha(#0B99F1, 60%)
.active-button .active-button
@extend .non-active-button @extend .non-active-button
background-color $ui-button--active-backgroundColor color #0B99F1
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
.top-menu-label .top-menu-label
margin-left 5px margin-left 5px
@@ -118,25 +113,10 @@ body[data-theme="dark"]
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.switch-buttons
border-color $ui-dark-borderColor
.non-active-button .non-active-button
navDarkButtonColor() color alpha($ui-dark-text-color, 60%)
.active-button
@extend .non-active-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 70%) color alpha(#0B99F1, 60%)
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
.tag-title .tag-title
p p

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

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