move statusbar

browser/main/StatusBar/StatusBar.styl

@@ -2,30 +2,31 @@
   absolute bottom left right
   height $statusBar-height - 1
   background-color $ui-backgroundColor
+  border-top $ui-border
+  display flex
 
-.pathname
-  absolute left
+.blank
+  flex 1
+
+.help
+  navButtonColor()
   height 24px
-  overflow ellipsis
-  right 185px
-  line-height 24px
-  font-size 12px
-  padding 0 15px
-  color $ui-inactive-text-color
+  width 24px
+  border-width 0 0 0 1px
+  border-style solid
+  border-color $ui-borderColor
+  &:active .update-icon
+    color white
 
 .zoom
   navButtonColor()
-  absolute right
   height 24px
-  width 60px
   border-width 0 1px
   border-style solid
   border-color $ui-borderColor
 
 .update
   navButtonColor()
-  position absolute
-  right 60px
   height 24px
   border-width 0 0 0 1px
   border-style solid
@@ -40,12 +41,14 @@ body[data-theme="dark"]
   .root
     background-color $ui-dark-backgroundColor
 
-  .pathname
-    color $ui-dark-inactive-text-color
-
   .zoom
     border-color $ui-dark-borderColor
 
+  .help
+    navButtonColor()
+    border-color $ui-dark-borderColor
+    border-left 1px solid $ui-dark-borderColor
+
   .update
     navDarkButtonColor()
     border-color $ui-dark-borderColor

browser/main/StatusBar/index.js

@@ -4,50 +4,12 @@ import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
 
 const electron = require('electron')
-const ipc = electron.ipcRenderer
-const { remote } = electron
+const { remote, ipcRenderer } = electron
 const { Menu, MenuItem, dialog } = remote
 
 const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
 
-function notify (...args) {
-  return new window.Notification(...args)
-}
-
 class StatusBar extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      updateReady: false
-    }
-    this.updateReadyHandler = (message) => {
-      this.setState({
-        updateReady: true
-      }, () => {
-        notify('Update ready!', {
-          body: 'New Boostnote is ready to be installed.'
-        })
-        this.updateApp()
-      })
-    }
-    this.updateFoundHandler = (message) => {
-      notify('Update found!', {
-        body: 'Preparing to update...'
-      })
-    }
-  }
-
-  componentDidMount () {
-    ipc.on('update-ready', this.updateReadyHandler)
-    ipc.on('update-found', this.updateFoundHandler)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('update-ready', this.updateReadyHandler)
-    ipc.removeListener('update-found', this.updateFoundHandler)
-  }
-
   updateApp () {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
@@ -57,7 +19,7 @@ class StatusBar extends React.Component {
     })
 
     if (index === 0) {
-      ipc.send('update-app-confirm')
+      ipcRenderer.send('update-app-confirm')
     }
   }
 
@@ -84,23 +46,26 @@ class StatusBar extends React.Component {
   }
 
   render () {
-    let { config, location } = this.props
+    let { config, status } = this.context
 
     return (
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='pathname'>{location.pathname + location.search}</div>
-        {this.state.updateReady
+        <div styleName='blank' />
+        {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download'/> Ready to Update!
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
           </button>
           : null
         }
+        <button styleName='help'>
+          <i className='fa fa-info-circle' />
+        </button>
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
-          <i className='fa fa-search-plus'/>&nbsp;
+          <i className='fa fa-search-plus' />&nbsp;
           {Math.floor(config.zoom * 100)}%
         </button>
       </div>
@@ -108,6 +73,13 @@ class StatusBar extends React.Component {
   }
 }
 
+StatusBar.contextTypes = {
+  status: PropTypes.shape({
+    updateReady: PropTypes.bool.isRequired
+  }).isRequired,
+  config: PropTypes.shape({}).isRequired
+}
+
 StatusBar.propTypes = {
   config: PropTypes.shape({
     zoom: PropTypes.number