From 508615b600bf1d0c79cf32607f226bd37d460b4c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:29:38 +0900
Subject: [PATCH] add StatusBar & Zoom UI

---
 browser/main/SideNav/SideNav.styl     |  3 +-
 browser/main/StatusBar/StatusBar.styl | 40 ++++++++++++
 browser/main/StatusBar/index.js       | 94 +++++++++++++++++++++++++++
 3 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 browser/main/StatusBar/StatusBar.styl
 create mode 100644 browser/main/StatusBar/index.js

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 72ce51c8..9209b670 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/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
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
new file mode 100644
index 00000000..203c5375
--- /dev/null
+++ b/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
+
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
new file mode 100644
index 00000000..ffd3782c
--- /dev/null
+++ b/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)