Skip to content

Commit be20c2c

Browse files
Rokt33rRokt33r
committed
renew TopBar
1 parent c59638a commit be20c2c

7 files changed

Lines changed: 233 additions & 359 deletions

File tree

‎browser/main/ArticleTopBar.js‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

‎browser/main/Main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { PropTypes } from 'react'
22
import { connect } from 'react-redux'
33
import SideNav from './SideNav'
4-
import ArticleTopBar from './ArticleTopBar'
4+
import TopBar from './TopBar'
55
import ArticleList from './ArticleList'
66
import ArticleDetail from './ArticleDetail'
77
import Repository from 'browser/lib/Repository'
@@ -26,7 +26,7 @@ class Main extends React.Component {
2626
<SideNav
2727
{...this.props}
2828
/>
29-
<ArticleTopBar
29+
<TopBar
3030
{...this.props}
3131
/>
3232
<ArticleList

‎browser/main/TopBar/TopBar.styl‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.root
2+
absolute top right
3+
background-color $ui-backgroundColor
4+
left $sideNav-width
5+
border-bottom $ui-border
6+
height 60px
7+
clearfix()
8+
9+
.left
10+
float left
11+
height 59px
12+
line-height 60px
13+
14+
.left-search
15+
margin-top 12px
16+
margin-left 25px
17+
height 34px
18+
width 200px
19+
float left
20+
border-radius 22px
21+
position relative
22+
background-color white
23+
border $ui-border
24+
25+
.left-search-icon
26+
absolute left
27+
width 36px
28+
height 32px
29+
padding 0
30+
line-height 32px
31+
color $ui-inactive-text-color
32+
33+
.left-search-input
34+
absolute top bottom right
35+
height 32px
36+
left 34px
37+
border none
38+
outline none
39+
font-size 14px
40+
41+
.left-control
42+
float left
43+
margin-left 15px
44+
45+
.left-control-newPostButton
46+
width 34px
47+
height 34px
48+
margin-top 12px
49+
border-radius 17px
50+
navButtonColor()
51+
border $ui-border
52+
font-size 14px
53+
line-height 32px
54+
padding 0
55+
&:active
56+
border-color $ui-button--active-backgroundColor
57+
&:hover .left-control-newPostButton-tooltip
58+
display block
59+
60+
61+
.left-control-newPostButton-tooltip
62+
position fixed
63+
background-color $ui-tooltip-backgroundColor
64+
color $ui-tooltip-text-color
65+
font-size 10px
66+
margin-left -35px
67+
margin-top 12px
68+
padding 5px
69+
z-index 1
70+
border-radius 5px
71+
display none
72+
pointer-events none
73+
74+
.right
75+
float right
76+
height 60px
77+
clearfix()
78+
79+
.right-helpButton
80+
width 24px
81+
height 24px
82+
border-radius 12px
83+
navButtonColor()
84+
border $ui-border
85+
line-height 22px
86+
font-size 12px
87+
padding 0
88+
float left
89+
margin-top 17px
90+
91+
.right-linksButton
92+
float left
93+
height 44px
94+
width 44px
95+
border-radius 17px
96+
background-color transparent
97+
border none
98+
margin-top 7px
99+
margin-left 5px
100+
margin-right 15px
101+
opacity 0.8
102+
&:hover, &:active
103+
opacity 1
104+
105+
.root--expanded
106+
@extend .root
107+
absolute top right
108+
left $sideNav--folded-width

‎browser/main/TopBar/index.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React, { PropTypes } from 'react'
2+
import CSSModules from 'browser/lib/CSSModules'
3+
import styles from './TopBar.styl'
4+
import activityRecord from 'browser/lib/activityRecord'
5+
6+
const OSX = window.process.platform === 'darwin'
7+
8+
class TopBar extends React.Component {
9+
constructor (props) {
10+
super(props)
11+
12+
this.state = {
13+
search: ''
14+
}
15+
}
16+
17+
isInputFocused () {
18+
return document.activeElement === this.refs.searchInput
19+
}
20+
21+
escape () {
22+
}
23+
24+
focusInput () {
25+
this.searchInput.focus()
26+
}
27+
28+
blurInput () {
29+
this.searchInput.blur()
30+
}
31+
32+
handleSearchChange (e) {
33+
}
34+
35+
handleSearchClearButton (e) {
36+
this.searchInput.value = ''
37+
this.focusInput()
38+
}
39+
40+
handleNewPostButtonClick (e) {
41+
activityRecord.emit('ARTICLE_CREATE')
42+
}
43+
44+
handleTutorialButtonClick (e) {
45+
}
46+
47+
handleLinksButton (e) {
48+
49+
}
50+
51+
render () {
52+
let { config } = this.props
53+
return (
54+
<div className='TopBar'
55+
styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
56+
>
57+
<div styleName='left'>
58+
<div styleName='left-search'>
59+
<i styleName='left-search-icon' className='fa fa-search fa-fw'/>
60+
<input styleName='left-search-input'
61+
ref='searchInput'
62+
onFocus={(e) => this.handleSearchChange(e)}
63+
onBlur={(e) => this.handleSearchChange(e)}
64+
value={this.state.search}
65+
onChange={(e) => this.handleSearchChange(e)}
66+
placeholder='Search'
67+
type='text'
68+
/>
69+
{this.state.search > 0 &&
70+
<button styleName='left-search-clearButton'
71+
onClick={(e) => this.handleSearchClearButton(e)}
72+
>
73+
<i className='fa fa-times'/>
74+
</button>
75+
}
76+
</div>
77+
78+
<div styleName='left-control'>
79+
<button styleName='left-control-newPostButton'
80+
onClick={(e) => this.handleNewPostButtonClick(e)}>
81+
<i className='fa fa-plus'/>
82+
<span styleName='left-control-newPostButton-tooltip'>
83+
New Post ({OSX ? '⌘' : '^'} + n)
84+
</span>
85+
</button>
86+
</div>
87+
</div>
88+
89+
<div styleName='right'>
90+
<button styleName='right-helpButton'
91+
onClick={(e) => this.handleTutorialButtonClick(e)}
92+
disabled
93+
>
94+
?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
95+
</button>
96+
<button styleName='right-linksButton'
97+
onClick={(e) => this.handleLinksButton(e)}
98+
>
99+
<img src='../resources/app.png' width='44' height='44'/>
100+
</button>
101+
</div>
102+
</div>
103+
)
104+
}
105+
}
106+
107+
TopBar.propTypes = {
108+
dispatch: PropTypes.func,
109+
config: PropTypes.shape({
110+
isSideNavFolded: PropTypes.bool
111+
})
112+
}
113+
114+
export default CSSModules(TopBar, styles)

0 commit comments

Comments
 (0)