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)

browser/styles/index.styl

@@ -1,8 +1,13 @@
-$brand-color = #2BAC8F
+$brand-color = #6AA5E9
 
 $danger-color = red
 $danger-lighten-color = #FFE5E6
 
+// Layouts
+$statusBar-height = 24px
+$sideNav-width = 200px
+$sideNav--folded-width = 44px
+
 // UI default
 $ui-text-color = #515151
 $ui-inactive-text-color = #939395
@@ -13,10 +18,11 @@ $ui-border = solid 1px $ui-borderColor
 // UI Button
 $ui-button-color = #939395
 $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
-$ui-button--active-color = #515151
-$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #6AA5E9
 
 // UI Tooltip
+$ui-tooltip-text-color = white
 $ui-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-tooltip-button-backgroundColor = #D1D1D1
 $ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)

browser/styles/main/ArticleTopBar.styl

@@ -1,224 +0,0 @@
-bgColor = #E6E6E6
-inputBgColor = white
-
-topBarBtnColor = #B3B3B3
-topBarBtnBgColor = #B3B3B3
-topBarBtnBgActiveColor = #3A3A3A
-
-infoBtnColor = bgColor
-infoBtnBgColor = #B3B3B3
-infoBtnActiveBgColor = #3A3A3A
-
-.ArticleTopBar
-  absolute top right
-  left 200px
-  height 60px
-  background-color bgColor
-  user-select none
-  &>.tutorial
-    .clickJammer
-      fixed top left bottom right
-      z-index 40
-      background transparent
-    .global
-      fixed bottom right
-      height 100px
-      z-index 35
-      font-style italic
-    .finder
-      fixed bottom right
-      height 250px
-      left 50%
-      margin-left -250px
-      z-index 35
-      font-style italic
-    .back
-      fixed top left bottom right
-      z-index 20
-      background-color transparentify(black, 80%)
-  &>.ArticleTopBar-left
-    float left
-    &>.tutorial
-      fixed top
-      left 100px
-      top 30px
-      z-index 36
-      font-style italic
-    &>.ArticleTopBar-left-search
-      position relative
-      float left
-      height 33px
-      margin-top 13.5px
-      margin-left 15px
-      width 350px
-      padding 5px 15px
-      transition 0.1s
-      font-size 16px
-      border 1px solid transparent
-      z-index 30
-      .tooltip
-        tooltip()
-        margin-left -24px
-        margin-top 35px
-        opacity 1
-        &.hide
-          opacity 0
-        ul
-          li
-            line-height 18px
-          li:last-child
-            line-height 10px
-            margin-bottom 3px
-        small
-          font-size 10px
-          position relative
-          top -2px
-          margin-left 15px
-      input
-        absolute top left
-        width 350px
-        border-radius 16.5px
-        background-color inputBgColor
-        border 1px solid transparent
-        padding-left 35px
-        outline none
-        font-size 14px
-        height 33px
-        line-height 33px
-        z-index 0
-        &:focus
-          border-color focusBorderColor
-      i.fa.fa-search
-        position absolute
-        display block
-        top 0
-        left 10px
-        line-height 33px
-        z-index 1
-        pointer-events none
-      .ArticleTopBar-left-search-clear-button
-        position absolute
-        top 6px
-        right 10px
-        width 20px
-        height 20px
-        border-radius 10px
-        border none
-        background-color transparent
-        color topBarBtnColor
-        transition 0.1s
-        line-height 20px
-        text-align center
-        padding 0
-        &:focus
-          color textColor
-        &:hover
-          color white
-          background-color topBarBtnBgColor
-        &:active
-          color white
-          background-color darken(topBarBtnBgColor, 35%)
-    .ArticleTopBar-left-control
-      line-height 33px
-      float left
-      height 33px
-      margin-top 13.5px
-      margin-left 20px
-      .tutorial
-        fixed top
-        left 200px
-        z-index 36
-        font-style italic
-      button.ArticleTopBar-left-control-new-post-button
-        position fixed
-        background bgColor
-        font-size 20px
-        border none
-        outline none
-        color inactiveTextColor
-        width 33px
-        height 33px
-        border-radius 16.5px
-        transition 0.1s
-        border 1px solid transparent
-        z-index 30
-        &:hover
-          color textColor
-        &:active
-          color textColor
-          background-color lighten(topBarBtnBgColor, 15%)
-        &:disabled
-          color inactiveTextColor
-          background transparent
-        &:focus
-          color textColor
-        .tooltip
-          tooltip()
-          margin-left -80px
-          margin-top 40px
-        &:hover
-          .tooltip
-            opacity 1
-  &>.ArticleTopBar-right
-    float right
-    &>button
-      display block
-      position absolute
-      right 74px
-      top 20px
-      width 20px
-      height 20px
-      font-size 14px
-      line-height 14px
-      background-color infoBtnBgColor
-      color bgColor
-      border-radius 11px
-      border 1px solid bgColor
-      transition 0.1s
-      &:focus
-        background-color lighten(infoBtnActiveBgColor, 15%)
-      .tooltip
-        tooltip()
-        margin-left -50px
-        margin-top 20px
-      &:hover
-        background-color infoBtnActiveBgColor
-        .tooltip
-          opacity 1
-
-    &>.ArticleTopBar-right-links-button
-      display block
-      position absolute
-      top 8px
-      right 15px
-      opacity 0.7
-      border-radius 23px
-      height 46px
-      width 46px
-      border 1px solid transparent
-      &:focus
-        border-color focusBorderColor
-      &:hover
-        opacity 1
-        .tooltip
-          opacity 1
-    &>.ArticleTopBar-right-links-button-dropdown
-      position fixed
-      z-index 50
-      right 10px
-      top 40px
-      background-color transparentify(invBackgroundColor, 80%)
-      padding 5px 0
-      .ArticleTopBar-right-links-button-dropdown-item
-        padding 0 10px
-        height 33px
-        width 100%
-        display block
-        line-height 33px
-        text-decoration none
-        color white
-        &:hover
-          background-color transparentify(lighten(invBackgroundColor, 30%), 80%)
-
-
-

browser/styles/main/index.styl

@@ -3,7 +3,6 @@
 global-reset()
 @import '../shared/*'
 @import './ArticleNavigator'
-@import './ArticleTopBar'
 @import './ArticleList'
 @import './ArticleDetail'
 @import './modal/*'