Toggle slider monitor

src/app/components/ButtonBar.js

@@ -5,14 +5,17 @@ import Button from './Button';
 import DispatcherButton from './buttons/DispatcherButton';
 import ImportButton from './buttons/ImportButton';
 import ExportButton from './buttons/ExportButton';
+import SliderButton from './buttons/SliderButton';
 import styles from '../styles';
 import Settings from './Settings';
 
 export default class ButtonBar extends Component {
   static propTypes = {
     openModal: PropTypes.func.isRequired,
     toggleDispatcher: PropTypes.func.isRequired,
+    toggleSlider: PropTypes.func.isRequired,
     dispatcherIsOpen: PropTypes.bool,
+    sliderIsOpen: PropTypes.bool,
     closeModal: PropTypes.func.isRequired,
     saveSettings: PropTypes.func.isRequired,
     importState: PropTypes.func.isRequired,
@@ -26,7 +29,8 @@ export default class ButtonBar extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen;
+    return nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen
+      || nextProps.sliderIsOpen !== this.props.sliderIsOpen;
   }
 
   openHelp() {
@@ -49,6 +53,7 @@ export default class ButtonBar extends Component {
         <DispatcherButton
           dispatcherIsOpen={this.props.dispatcherIsOpen} onClick={this.props.toggleDispatcher}
         />
+        <SliderButton isOpen={this.props.sliderIsOpen} onClick={this.props.toggleSlider} />
         <ImportButton importState={this.props.importState} />
         <ExportButton exportState={this.props.exportState} />
         <Button Icon={SettingsIcon} onClick={this.openSettings}>Settings</Button>

src/app/components/buttons/SliderButton.js

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react';
+import TimerIcon from 'react-icons/lib/md/timer';
+import TimerOffIcon from 'react-icons/lib/md/timer-off';
+import Button from '../Button';
+
+export default class DispatcherButton extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.isOpen !== this.props.isOpen;
+  }
+
+  render() {
+    return (
+      <Button
+        Icon={this.props.isOpen ? TimerOffIcon : TimerIcon}
+        onClick={this.props.onClick}
+      >Slider</Button>
+    );
+  }
+}

src/app/index.js

@@ -31,6 +31,7 @@ export default class App extends Component {
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
     this.toggleDispatcher = this.toggleDispatcher.bind(this);
+    this.toggleSlider = this.toggleSlider.bind(this);
     this.saveSettings = this.saveSettings.bind(this);
   }
 
@@ -39,6 +40,7 @@ export default class App extends Component {
       monitor: getSelectMonitor() || this.props.selectMonitor || 'default',
       modalIsOpen: false,
       dispatcherIsOpen: false,
+      sliderIsOpen: true,
       instances: {},
       instance: 'auto',
       shouldSync: false
@@ -100,6 +102,10 @@ export default class App extends Component {
     this.setState({ dispatcherIsOpen: !this.state.dispatcherIsOpen });
   }
 
+  toggleSlider() {
+    this.setState({ sliderIsOpen: !this.state.sliderIsOpen });
+  }
+
   openModal(content) {
     this.modalContent = content;
     this.setState({ modal: this.modal, modalIsOpen: true });
@@ -124,9 +130,9 @@ export default class App extends Component {
           />
         </div>
         <DevTools monitor={monitor} store={this.store} key={`${monitor}-${key}`} />
-        <div style={styles.sliderMonitor}>
+        {this.state.sliderIsOpen && <div style={styles.sliderMonitor}>
           <DevTools monitor="SliderMonitor" store={this.store} key={`Slider-${key}`} />
-        </div>
+        </div>}
         {this.state.dispatcherIsOpen &&
           <DevTools monitor="DispatchMonitor"
             store={this.store} dispatchFn={this.store.dispatch}
@@ -138,6 +144,8 @@ export default class App extends Component {
             openModal={this.openModal} closeModal={this.closeModal}
             toggleDispatcher={this.toggleDispatcher}
             dispatcherIsOpen={this.state.dispatcherIsOpen}
+            toggleSlider={this.toggleSlider}
+            sliderIsOpen={this.state.sliderIsOpen}
             saveSettings={this.saveSettings}
             importState={importState} exportState={exportState}
             socketOptions={this.socketOptions}

src/app/styles.js

@@ -17,7 +17,8 @@ const styles = {
   },
   sliderMonitor: {
     minWidth: '300px',
-    zIndex: '0'
+    zIndex: '0',
+    borderTop: '1px solid #4F5A65'
   },
   buttonBar: {
     padding: '5px',