renew TopBar

browser/main/TopBar/TopBar.styl

@@ -0,0 +1,108 @@
+.root
+  absolute top right
+  background-color $ui-backgroundColor
+  left $sideNav-width
+  border-bottom $ui-border
+  height 60px
+  clearfix()
+
+.left
+  float left
+  height 59px
+  line-height 60px
+
+.left-search
+  margin-top 12px
+  margin-left 25px
+  height 34px
+  width 200px
+  float left
+  border-radius 22px
+  position relative
+  background-color white
+  border $ui-border
+
+.left-search-icon
+  absolute left
+  width 36px
+  height 32px
+  padding 0
+  line-height 32px
+  color $ui-inactive-text-color
+
+.left-search-input
+  absolute top bottom right
+  height 32px
+  left 34px
+  border none
+  outline none
+  font-size 14px
+
+.left-control
+  float left
+  margin-left 15px
+
+.left-control-newPostButton
+  width 34px
+  height 34px
+  margin-top 12px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  line-height 32px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .left-control-newPostButton-tooltip
+    display block
+
+
+.left-control-newPostButton-tooltip
+  position fixed
+  background-color $ui-tooltip-backgroundColor
+  color $ui-tooltip-text-color
+  font-size 10px
+  margin-left -35px
+  margin-top 12px
+  padding 5px
+  z-index 1
+  border-radius 5px
+  display none
+  pointer-events none
+
+.right
+  float right
+  height 60px
+  clearfix()
+
+.right-helpButton
+  width 24px
+  height 24px
+  border-radius 12px
+  navButtonColor()
+  border $ui-border
+  line-height 22px
+  font-size 12px
+  padding 0
+  float left
+  margin-top 17px
+
+.right-linksButton
+  float left
+  height 44px
+  width 44px
+  border-radius 17px
+  background-color transparent
+  border none
+  margin-top 7px
+  margin-left 5px
+  margin-right 15px
+  opacity 0.8
+  &:hover, &:active
+    opacity 1
+
+.root--expanded
+  @extend .root
+  absolute top right
+  left $sideNav--folded-width

browser/main/TopBar/index.js

@@ -0,0 +1,114 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TopBar.styl'
+import activityRecord from 'browser/lib/activityRecord'
+
+const OSX = window.process.platform === 'darwin'
+
+class TopBar extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      search: ''
+    }
+  }
+
+  isInputFocused () {
+    return document.activeElement === this.refs.searchInput
+  }
+
+  escape () {
+  }
+
+  focusInput () {
+    this.searchInput.focus()
+  }
+
+  blurInput () {
+    this.searchInput.blur()
+  }
+
+  handleSearchChange (e) {
+  }
+
+  handleSearchClearButton (e) {
+    this.searchInput.value = ''
+    this.focusInput()
+  }
+
+  handleNewPostButtonClick (e) {
+    activityRecord.emit('ARTICLE_CREATE')
+  }
+
+  handleTutorialButtonClick (e) {
+  }
+
+  handleLinksButton (e) {
+
+  }
+
+  render () {
+    let { config } = this.props
+    return (
+      <div className='TopBar'
+        styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+      >
+        <div styleName='left'>
+          <div styleName='left-search'>
+            <i styleName='left-search-icon' className='fa fa-search fa-fw'/>
+            <input styleName='left-search-input'
+              ref='searchInput'
+              onFocus={(e) => this.handleSearchChange(e)}
+              onBlur={(e) => this.handleSearchChange(e)}
+              value={this.state.search}
+              onChange={(e) => this.handleSearchChange(e)}
+              placeholder='Search'
+              type='text'
+            />
+            {this.state.search > 0 &&
+              <button styleName='left-search-clearButton'
+                onClick={(e) => this.handleSearchClearButton(e)}
+              >
+                <i className='fa fa-times'/>
+              </button>
+            }
+          </div>
+
+          <div styleName='left-control'>
+            <button styleName='left-control-newPostButton'
+              onClick={(e) => this.handleNewPostButtonClick(e)}>
+              <i className='fa fa-plus'/>
+              <span styleName='left-control-newPostButton-tooltip'>
+                New Post ({OSX ? '⌘' : '^'} + n)
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div styleName='right'>
+          <button styleName='right-helpButton'
+            onClick={(e) => this.handleTutorialButtonClick(e)}
+            disabled
+          >
+            ?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
+          </button>
+          <button styleName='right-linksButton'
+            onClick={(e) => this.handleLinksButton(e)}
+          >
+            <img src='../resources/app.png' width='44' height='44'/>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+TopBar.propTypes = {
+  dispatch: PropTypes.func,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  })
+}
+
+export default CSSModules(TopBar, styles)