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

enhance style of topbar

Browse Source
This commit is contained in:
Rokt33r
2015-12-28 16:24:14 +09:00
parent e4d8438801
commit c6ac44ba14
2 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
browser/main/HomePage/ArticleTopBar.js
View File

@@ -173,7 +173,7 @@ export default class ArticleTopBar extends React.Component {
/> />
{ {
this.props.status.search != null && this.props.status.search.length > 0 this.props.status.search != null && this.props.status.search.length > 0
? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button> ? <button onClick={e => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
: null : null
} }
<div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}> <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
@@ -200,17 +200,17 @@ export default class ArticleTopBar extends React.Component {
<div className='ArticleTopBar-right'> <div className='ArticleTopBar-right'>
<button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span> <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
</button> </button>
<a ref='links' className='linksBtn' href> <a ref='links' className='ArticleTopBar-right-links-button' href>
<img src='../resources/app.png' width='44' height='44'/> <img src='../resources/app.png' width='44' height='44'/>
</a> </a>
{ {
this.state.isLinksDropdownOpen this.state.isLinksDropdownOpen
? ( ? (
<div className='links-dropdown'> <div className='ArticleTopBar-right-links-button-dropdown'>
<ExternalLink className='links-item' href='https://b00st.io'> <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://b00st.io'>
<i className='fa fa-fw fa-home'/>Boost official page <i className='fa fa-fw fa-home'/>Boost official page
</ExternalLink> </ExternalLink>
<ExternalLink className='links-item' href='https://github.com/BoostIO/boost-app-discussions/issues'> <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://github.com/BoostIO/boost-app-discussions/issues'>
<i className='fa fa-fw fa-bullhorn'/> Discuss <i className='fa fa-fw fa-bullhorn'/> Discuss
</ExternalLink> </ExternalLink>
</div> </div>

32
browser/styles/main/HomeContainer/components/ArticleTopBar.styl
View File

@@ -95,7 +95,7 @@ infoBtnActiveBgColor = #3A3A3A
line-height 33px line-height 33px
z-index 1 z-index 1
pointer-events none pointer-events none
.searchClearBtn .ArticleTopBar-left-search-clear-button
position absolute position absolute
top 6px top 6px
right 10px right 10px
@@ -112,20 +112,9 @@ infoBtnActiveBgColor = #3A3A3A
&:hover &:hover
color white color white
background-color topBarBtnBgColor background-color topBarBtnBgColor
&>.refreshBtn &:active
float left color white
width 33px background-color darken(topBarBtnBgColor, 35%)
height 33px
margin-top 13.5px
margin-left 15px
border none
color refreshBtColor
background transparent
font-size 18px
line-height 18px
transition 0.1s
&:hover
color refreshBtnActiveColor
.ArticleTopBar-left-unsaved .ArticleTopBar-left-unsaved
line-height 33px line-height 33px
float left float left
@@ -138,8 +127,15 @@ infoBtnActiveBgColor = #3A3A3A
border none border none
outline none outline none
color inactiveTextColor color inactiveTextColor
width 33px
height 33px
border-radius 16.5px
transition 0.1s
&:hover &:hover
color inherit color inherit
&:active
color inherit
background-color lighten(topBarBtnBgColor, 15%)
&.ArticleTopBar-left-unsaved-save-button &.ArticleTopBar-left-unsaved-save-button
position relative position relative
.ArticleTopBar-left-unsaved-save-button-count .ArticleTopBar-left-unsaved-save-button-count
@@ -189,7 +185,7 @@ infoBtnActiveBgColor = #3A3A3A
.tooltip .tooltip
opacity 1 opacity 1
&>.linksBtn &>.ArticleTopBar-right-links-button
display block display block
position absolute position absolute
top 8px top 8px
@@ -199,14 +195,14 @@ infoBtnActiveBgColor = #3A3A3A
opacity 1 opacity 1
.tooltip .tooltip
opacity 1 opacity 1
&>.links-dropdown &>.ArticleTopBar-right-links-button-dropdown
position fixed position fixed
z-index 50 z-index 50
right 10px right 10px
top 40px top 40px
background-color transparentify(invBackgroundColor, 80%) background-color transparentify(invBackgroundColor, 80%)
padding 5px 0 padding 5px 0
.links-item .ArticleTopBar-right-links-button-dropdown-item
padding 0 10px padding 0 10px
height 33px height 33px
width 100% width 100%