add StatusBar & Zoom UI

Author: Rokt33r

browser/main/SideNav/SideNav.styl

@@ -1,5 +1,6 @@
 .root
-  absolute top bottom left
+  absolute top left
+  bottom 24px
   width 200px
   border-right solid 1px $nav-border-color
   background-color $nav-background-color

browser/main/StatusBar/StatusBar.styl

@@ -0,0 +1,40 @@
+.root
+  absolute bottom left right
+  height 24px
+  border-top solid 1px $nav-border-color
+  background-color $nav-background-color
+
+.zoom
+  absolute right
+  height 24px
+  width 60px
+  border-width 0 1px
+  border-style solid
+  border-color $nav-border-color
+  background-color transparent
+  color $nav-inactive-text-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $nav-hover-background
+    color $nav-inactive-text-color
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color
+
+.update
+  position absolute
+  right 60px
+  height 24px
+  border-width 0 0 0 1px
+  border-style solid
+  border-color $nav-border-color
+  background-color transparent
+  color $brand-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $nav-hover-background
+    color $brand-color
+  &:active
+    background-color $nav-active-background
+    color $brand-color
+

browser/main/StatusBar/index.js

@@ -0,0 +1,94 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StatusBar.styl'
+import ZoomManager from 'browser/main/lib/ZoomManager'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+const { remote } = electron
+const { Menu, MenuItem } = remote
+
+class StatusBar extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {updateAvailable: false}
+  }
+
+  componentDidMount () {
+    ipc.on('update-available', function (message) {
+      this.setState({updateAvailable: true})
+    }.bind(this))
+  }
+
+  updateApp () {
+    ipc.send('update-app', 'Deal with it.')
+  }
+
+  handleZoomButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: '130%',
+      click: () => this.handleZoomMenuItemClick(1.3)
+    }))
+    menu.append(new MenuItem({
+      label: '120%',
+      click: () => this.handleZoomMenuItemClick(1.2)
+    }))
+    menu.append(new MenuItem({
+      label: '110%',
+      click: () => this.handleZoomMenuItemClick(1.1)
+    }))
+    menu.append(new MenuItem({
+      label: '100%',
+      click: () => this.handleZoomMenuItemClick(1)
+    }))
+    menu.append(new MenuItem({
+      label: '90%',
+      click: () => this.handleZoomMenuItemClick(0.9)
+    }))
+    menu.append(new MenuItem({
+      label: '80%',
+      click: () => this.handleZoomMenuItemClick(0.8)
+    }))
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleZoomMenuItemClick (zoomFactor) {
+    let { dispatch } = this.props
+    ZoomManager.setZoom(zoomFactor)
+    dispatch({
+      type: 'SET_ZOOM',
+      zoom: zoomFactor
+    })
+  }
+
+  render () {
+    let { config } = this.props
+    return (
+      <div className='StatusBar'
+        styleName='root'
+      >
+        {this.state.updateAvailable
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i className='fa fa-cloud-download'/> Update is available!
+          </button>
+          : null
+        }
+        <button styleName='zoom'
+          onClick={(e) => this.handleZoomButtonClick(e)}
+        >
+          <i className='fa fa-search-plus'/>&nbsp;
+          {Math.floor(config.zoom * 100)}%
+        </button>
+      </div>
+    )
+  }
+}
+
+StatusBar.propTypes = {
+  config: PropTypes.shape({
+    zoom: PropTypes.number
+  })
+}
+
+export default CSSModules(StatusBar, styles)