renew TopBar

browser/main/ArticleTopBar.js

@@ -1,129 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ExternalLink from 'browser/components/ExternalLink'
-import activityRecord from 'browser/lib/activityRecord'
-
-const OSX = process.platform === 'darwin'
-
-export default class ArticleTopBar extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isTooltipHidden: true,
-      isLinksDropdownOpen: false
-    }
-  }
-
-  handleTooltipRequest (e) {
-    if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
-      this.setState({isTooltipHidden: false})
-    } else {
-      this.setState({isTooltipHidden: true})
-    }
-  }
-
-  isInputFocused () {
-    return document.activeElement === ReactDOM.findDOMNode(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) {
-    let { dispatch } = this.props
-
-    // dispatch(toggleTutorial())
-  }
-
-  render () {
-    let { status } = this.props
-    return (
-      <div tabIndex='2' className='ArticleTopBar'>
-        <div className='ArticleTopBar-left'>
-          <div className='ArticleTopBar-left-search'>
-            <i className='fa fa-search fa-fw' />
-            <input
-              ref='searchInput'
-              onFocus={(e) => this.handleSearchChange(e)}
-              onBlur={(e) => this.handleSearchChange(e)}
-              value={'this.props.status.search'}
-              onChange={(e) => this.handleSearchChange(e)}
-              placeholder='Search'
-              type='text'
-            />
-            {
-              'sadf' > 0
-                ? <button onClick={(e) => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
-                : null
-            }
-            <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
-              <ul>
-                <li>- Search by tag : #{'{string}'}</li>
-                <li>- Search by folder : /{'{folder_name}'}<br/><small>exact match : //{'{folder_name}'}</small></li>
-                <li>- Only unsaved : --unsaved</li>
-              </ul>
-            </div>
-          </div>
-
-          <div className={'ArticleTopBar-left-control'}>
-            <button className='ArticleTopBar-left-control-new-post-button' onClick={(e) => this.handleNewPostButtonClick(e)}>
-              <i className='fa fa-plus'/>
-              <span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
-            </button>
-          </div>
-        </div>
-
-        <div className='ArticleTopBar-right'>
-          <button onClick={(e) => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
-          </button>
-          <a ref='links' className='ArticleTopBar-right-links-button' href>
-            <img src='../resources/app.png' width='44' height='44'/>
-          </a>
-          {
-            this.state.isLinksDropdownOpen
-              ? (
-                <div className='ArticleTopBar-right-links-button-dropdown'>
-                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://b00st.io'>
-                    <i className='fa fa-fw fa-home'/>Boost official page
-                  </ExternalLink>
-                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://github.com/BoostIO/Boostnote/issues'>
-                    <i className='fa fa-fw fa-github'/> Issues
-                  </ExternalLink>
-                </div>
-              )
-              : null
-          }
-        </div>
-      </div>
-    )
-  }
-}
-
-ArticleTopBar.propTypes = {
-  dispatch: PropTypes.func,
-  status: PropTypes.shape({
-    search: PropTypes.string
-  }),
-  folders: PropTypes.array
-}

browser/main/Main.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import SideNav from './SideNav'
-import ArticleTopBar from './ArticleTopBar'
+import TopBar from './TopBar'
 import ArticleList from './ArticleList'
 import ArticleDetail from './ArticleDetail'
 import Repository from 'browser/lib/Repository'
@@ -26,7 +26,7 @@ class Main extends React.Component {
         <SideNav
           {...this.props}
         />
-        <ArticleTopBar
+        <TopBar
           {...this.props}
         />
         <ArticleList

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)