Navigation controls added and header formatted

desktop-app/app/actions/browser.js

@@ -1,7 +1,13 @@
 // @flow
 import type {Dispatch, BrowserStateType} from '../reducers/types';
 import pubsub from 'pubsub.js';
-import {SCROLL_DOWN, SCROLL_UP} from '../constants/pubsubEvents';
+import {
+  SCROLL_DOWN,
+  SCROLL_UP,
+  NAVIGATION_BACK,
+  NAVIGATION_FORWARD,
+  NAVIGATION_RELOAD,
+} from '../constants/pubsubEvents';
 
 export const NEW_ADDRESS = 'NEW_ADDRESS';
 export const NEW_ZOOM_LEVEL = 'NEW_ZOOM_LEVEL';
@@ -87,3 +93,21 @@ export function triggerScrollUp() {
     pubsub.publish(SCROLL_UP);
   };
 }
+
+export function triggerNavigationBack() {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    pubsub.publish(NAVIGATION_BACK);
+  };
+}
+
+export function triggerNavigationForward() {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    pubsub.publish(NAVIGATION_FORWARD);
+  };
+}
+
+export function triggerNavigationReload() {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    pubsub.publish(NAVIGATION_RELOAD);
+  };
+}

desktop-app/app/components/Header/index.js

@@ -7,16 +7,15 @@ import ScrollControlsContainer from '../../containers/ScrollControlsContainer';
 import ZoomContainer from '../../containers/ZoomContainer';
 
 import styles from './style.module.css';
+import NavigationControlsContainer from '../../containers/NavigationControlsContainer';
 
 const Header = function() {
   return (
     <div className={styles.header}>
-      <Grid
-        container
-        direction="row"
-        justify="space-evenly"
-        alignItems="center"
-      >
+      <Grid container direction="row" justify="flex-start" alignItems="center">
+        <Grid item>
+          <NavigationControlsContainer />
+        </Grid>
         <Grid item>
           <AddressBar />
         </Grid>

desktop-app/app/components/NavigationControls/index.js

@@ -0,0 +1,42 @@
+// @flow
+import React, {Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import ArrowLeftIcon from '../icons/ArrowLeft';
+import ArrowRightIcon from '../icons/ArrowRight';
+import ReloadIcon from '../icons/Reload';
+
+import styles from './styles.module.css';
+import {iconsColor} from '../../constants/colors';
+
+class NavigationControls extends Component {
+  render() {
+    const iconProps = {
+      color: iconsColor,
+      height: 25,
+      width: 25,
+    };
+    return (
+      <div className={styles.navigationControls}>
+        <Grid container spacing={1} alignItems="center">
+          <Grid item className={styles.icons}>
+            <div onClick={this.props.triggerNavigationBack}>
+              <ArrowLeftIcon {...iconProps} />
+            </div>
+          </Grid>
+          <Grid item className={styles.icons}>
+            <div onClick={this.props.triggerNavigationForward}>
+              <ArrowRightIcon {...iconProps} />
+            </div>
+          </Grid>
+          <Grid item className={styles.icons}>
+            <div onClick={this.props.triggerNavigationReload}>
+              <ReloadIcon {...iconProps} height={15} width={15} />
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default NavigationControls;

desktop-app/app/components/NavigationControls/index.test.js

@@ -0,0 +1,32 @@
+// @flow
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {expect, assert} from 'chai';
+import sinon from 'sinon';
+
+import BrowserZoom from './';
+import Slider from '@material-ui/core/Slider';
+
+describe('<BrowserZoom />', () => {
+  it('Renders label and the slider component ', () => {
+    const wrapper = shallow(<BrowserZoom />);
+    expect(wrapper.find(Slider)).to.have.lengthOf(1);
+  });
+
+  it('Calls the callback on slider change', () => {
+    const onChange = sinon.spy();
+    const wrapper = mount(<BrowserZoom onChange={onChange} />);
+    wrapper.find('.MuiSlider-thumb').simulate('mousedown');
+    wrapper.find('.MuiSlider-thumb').simulate('mouseup');
+    expect(onChange).to.have.property('callCount', 1);
+  });
+
+  /*it('Calls the callback with a number value', () => {
+    const onChange = sinon.spy();
+    const wrapper = mount(<BrowserZoom onChange={onChange} />);
+    wrapper.find('.MuiSlider-thumb').simulate('mousedown');
+    wrapper.find('.MuiSlider-thumb').simulate('mouseup');
+    console.log('spy.args', onChange.args);
+    assert(onChange.calledWith(100));
+  });*/
+});

desktop-app/app/components/NavigationControls/styles.module.css

@@ -0,0 +1,7 @@
+.navigationControls {
+  padding: 0 20px;
+}
+
+.icons {
+  cursor: pointer;
+}

desktop-app/app/components/ScrollControls/styles.module.css

@@ -1,5 +1,5 @@
 .scrollControls {
-  width: 150px;
+  padding: 0 20px;
 }
 
 .icons {

desktop-app/app/components/WebView/index.js

@@ -7,7 +7,13 @@ import cx from 'classnames';
 import {iconsColor} from '../../constants/colors';
 
 import styles from './style.module.css';
-import {SCROLL_DOWN, SCROLL_UP} from '../../constants/pubsubEvents';
+import {
+  SCROLL_DOWN,
+  SCROLL_UP,
+  NAVIGATION_BACK,
+  NAVIGATION_FORWARD,
+  NAVIGATION_RELOAD,
+} from '../../constants/pubsubEvents';
 
 const MESSAGE_TYPES = {
   scroll: 'scroll',
@@ -29,6 +35,9 @@ class WebView extends Component {
     pubsub.subscribe('click', this.processClickEvent);
     pubsub.subscribe(SCROLL_DOWN, this.processScrollDownEvent);
     pubsub.subscribe(SCROLL_UP, this.processScrollUpEvent);
+    pubsub.subscribe(NAVIGATION_BACK, this.processNavigationBackEvent);
+    pubsub.subscribe(NAVIGATION_FORWARD, this.processNavigationForwardEvent);
+    pubsub.subscribe(NAVIGATION_RELOAD, this.processNavigationReloadEvent);
 
     this.webviewRef.current.addEventListener('dom-ready', () => {
       this.initEventTriggers(this.webviewRef.current);
@@ -40,6 +49,18 @@ class WebView extends Component {
     });
   }
 
+  processNavigationBackEvent = () => {
+    this.webviewRef.current.goBack();
+  };
+
+  processNavigationForwardEvent = () => {
+    this.webviewRef.current.goForward();
+  };
+
+  processNavigationReloadEvent = () => {
+    this.webviewRef.current.reload();
+  };
+
   processScrollEvent = message => {
     if (message.sourceDeviceId === this.props.device.id) {
       return;

desktop-app/app/components/icons/ArrowLeft.js

@@ -0,0 +1,16 @@
+import React, {Fragment} from 'react';
+
+export default ({width, height, color}) => (
+  <Fragment>
+    <svg
+      height={height}
+      width={width}
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 1"
+      viewBox="0 0 24 24"
+    >
+      <path d="M17,11H9.41l3.3-3.29a1,1,0,1,0-1.42-1.42l-5,5a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l5,5a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.41,13H17a1,1,0,0,0,0-2Z" />
+    </svg>
+  </Fragment>
+);

desktop-app/app/components/icons/ArrowRight.js

@@ -0,0 +1,16 @@
+import React, {Fragment} from 'react';
+
+export default ({width, height, color}) => (
+  <Fragment>
+    <svg
+      height={height}
+      width={width}
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 1"
+      viewBox="0 0 24 24"
+    >
+      <path d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z" />
+    </svg>
+  </Fragment>
+);

desktop-app/app/components/icons/Cross.js

@@ -0,0 +1,15 @@
+import React, {Fragment} from 'react';
+
+export default ({width, height, color}) => (
+  <Fragment>
+    <svg
+      height={height}
+      width={width}
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z" />
+    </svg>
+  </Fragment>
+);

desktop-app/app/components/icons/Reload.js

@@ -0,0 +1,15 @@
+import React, {Fragment} from 'react';
+
+export default ({width, height, color}) => (
+  <Fragment>
+    <svg
+      height={height}
+      width={width}
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <path d="M21,11a1,1,0,0,0-1,1,8.05,8.05,0,1,1-2.22-5.5h-2.4a1,1,0,0,0,0,2h4.53a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4.77A10,10,0,1,0,22,12,1,1,0,0,0,21,11Z" />
+    </svg>
+  </Fragment>
+);

desktop-app/app/constants/pubsubEvents.js

@@ -1,2 +1,5 @@
 export const SCROLL_DOWN = 'SCROLL_DOWN';
 export const SCROLL_UP = 'SCROLL_UP';
+export const NAVIGATION_BACK = 'NAVIGATION_BACK';
+export const NAVIGATION_FORWARD = 'NAVIGATION_FORWARD';
+export const NAVIGATION_RELOAD = 'NAVIGATION_RELOAD';

desktop-app/app/containers/NavigationControlsContainer/index.js

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import * as BrowserActions from '../../actions/browser';
+import NavigationControls from '../../components/NavigationControls';
+
+function mapStateToProps(state) {
+  return {
+    browser: state.browser,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(BrowserActions, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NavigationControls);

desktop-app/resources/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17,11H9.41l3.3-3.29a1,1,0,1,0-1.42-1.42l-5,5a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l5,5a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.41,13H17a1,1,0,0,0,0-2Z"/></svg>

desktop-app/resources/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z"/></svg>

desktop-app/resources/camera-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,10.5a1,1,0,0,0-1,1v7a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1v-8a1,1,0,0,1,1-1H6a1,1,0,0,0,1-.68l.54-1.64a1,1,0,0,1,.95-.68H14a1,1,0,0,0,0-2H8.44A3,3,0,0,0,5.6,6.55l-.32,1H4a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3v-7A1,1,0,0,0,20,10.5Zm-9-1a4,4,0,1,0,4,4A4,4,0,0,0,11,9.5Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11,15.5Zm11-11H21v-1a1,1,0,0,0-2,0v1H18a1,1,0,0,0,0,2h1v1a1,1,0,0,0,2,0v-1h1a1,1,0,0,0,0-2Z"/></svg>

desktop-app/resources/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg>

desktop-app/resources/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,11a1,1,0,0,0-1,1,8.05,8.05,0,1,1-2.22-5.5h-2.4a1,1,0,0,0,0,2h4.53a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4.77A10,10,0,1,0,22,12,1,1,0,0,0,21,11Z"/></svg>