Move Arp buttons to top

Author: looshi2

css/fader.scss

@@ -1,3 +1,5 @@
+$blue: #0047B4;
+
 .fader {
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
   width: 180px; /* Specific width is required for Firefox. */
@@ -30,7 +32,7 @@
   width: 16px;
   border-radius: 16px;
   cursor: pointer;
-  background: #fff;
+  background: $blue;
   margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
   /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
 }

css/index.scss

@@ -36,6 +36,7 @@ h2 {
   background-color: $blue;
   padding: 24px 36px;
   color: white;
+  font-size: 24px;
 }
 
 .scroll-container {
@@ -50,12 +51,12 @@ h2 {
 }
 
 header {
-  height: 48px;
-  width: 996px;
-  background-color: $blue;
-  color: white;
+  width: 960px;
+  background-color: white;
+  color: $blue;
   margin: 0 auto;
   padding: 4px 12px;
+
   h1 {
     display: inline-block;
     margin: 0;
@@ -71,13 +72,13 @@ header {
       cursor: pointer;
     }
   }
-  .horizontal-slider {
-    display: inline-block;
-    margin: -14px 0 0 58px;
-    vertical-align: middle;
-    .slider-label {
-      width: 53px;
-    }
+
+  .header-controls {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 24px 0 0 0;
+    align-items: center;
   }
 }
 
@@ -331,15 +332,15 @@ h1 {
 }
 
 /* Arpeggiator Buttons */
+.arp-switch-label {
+  margin-bottom: 12px;
+  text-align: center;
+  display:block;
+}
+
 .arpeggiator-switch {
-  width: 34px;
-  display: inline-block;
-  margin-left: 32px;
+  display: flex;
   vertical-align: bottom;
-  .arp-switch-label {
-    padding-bottom: 28px;
-    text-align: center;
-  }
   .toggle-button:first-child{
     margin-bottom: 12px;
   }

css/react-select-overrides.scss

@@ -10,18 +10,18 @@ $blue: #0047B4;
   display: inline-block;
   width: 200px;
   float: right;
-  border: 3px solid white;
+  border: 3px solid $blue;
   margin-top: 2px;
   margin-left: 12px;
 
 }
 .Select.preset-list,
 .Select.midi-input-list {
   .Select-value-label {
-    color: #fff;
+    color: $blue;
   }
   .Select-arrow {
-    border-color: #fff transparent transparent;
+    border-color: $blue transparent transparent;
   }
 }
 .Select-placeholder {

src/App.js

@@ -16,6 +16,7 @@ import {connect} from 'react-redux'
 
 import Synth from './audio/Synth.js'
 import HorizontalSlider from './views/Components/HorizontalSlider.js'
+import ArpeggiatorSwitch from './views/Effects/ArpeggiatorSwitch'
 import Keyboard from './views/Keyboard/Keyboard.js'
 import EventEmitter from 'event-emitter'
 
@@ -53,6 +54,10 @@ class App extends React.Component {
     let action = Actions.masterGainChanged(e.target.value)
     this.props.dispatch(action)
   }
+  onArpTempoChange (event) {
+    let action = Actions.arpTempoChanged(Number(event.target.value))
+    this.props.dispatch(action)
+  }
 
   render () {
     // Shows a message if no audio support in the browser.
@@ -75,6 +80,11 @@ class App extends React.Component {
             <div>
               <h1>Wavetable</h1>
               <a onClick={this.onOpenAboutModal.bind(this)}>About</a>
+
+              <MidiInput eventEmitter={eventEmitter} />
+              <Presets presetId={this.props.Master.presetId} />
+            </div>
+            <div className="header-controls">
               <HorizontalSlider
                 id='master'
                 name='master gain'
@@ -84,11 +94,19 @@ class App extends React.Component {
                 step={1}
                 onChange={this.onMasterGainChanged.bind(this)}
                 value={this.props.Master.volume} />
-              <MidiInput eventEmitter={eventEmitter} />
-              <Presets presetId={this.props.Master.presetId} />
+              <ArpeggiatorSwitch
+                arpIsOn={this.props.Effects.arpIsOn} />
+              <HorizontalSlider
+                name='arpTempo'
+                label='arp tempo'
+                min={10}
+                max={160}
+                step={1}
+                onChange={this.onArpTempoChange.bind(this)}
+                value={this.props.Effects.arpTempo} />
             </div>
-
           </header>
+
           <div className='scroll-contents'>
             {
               this.props.Oscillators.map((oscillator) => {

src/views/Effects/ArpeggiatorSwitch.js

@@ -29,10 +29,12 @@ class ArpeggiatorSwitch extends React.Component {
   render () {
     let selected = this.props.arpIsOn
     return (
-      <div onClick={this.onArpValueChanged.bind(this)} className='arpeggiator-switch'>
-        <div data-name={'on'} className={this.buttonClassName(true, selected)}>ON</div>
-        <div data-name={'off'} className={this.buttonClassName(false, selected)}>OFF</div>
-        <div className='arp-switch-label'>arp</div>
+      <div>
+        <div className='arp-switch-label'>arpeggiator</div>
+          <div onClick={this.onArpValueChanged.bind(this)} className='arpeggiator-switch'>
+            <div data-name={'on'} className={this.buttonClassName(true, selected)}>ON</div>
+            <div data-name={'off'} className={this.buttonClassName(false, selected)}>OFF</div>
+        </div>
       </div>
     )
   }

src/views/Effects/EffectsView.js

@@ -6,7 +6,9 @@ import React from 'react'
 import {connect} from 'react-redux'
 import VerticalSlider from '../Components/VerticalSlider.js'
 import Actions from '../../data/Actions.js'
-import ArpeggiatorSwitch from './ArpeggiatorSwitch'
+
+
+
 
 class EffectsView extends React.Component {
 
@@ -23,11 +25,6 @@ class EffectsView extends React.Component {
     this.props.dispatch(action)
   }
 
-  onArpTempoChange (event) {
-    let action = Actions.arpTempoChanged(Number(event.target.value))
-    this.props.dispatch(action)
-  }
-
   render () {
     return (
       <div className='module'>
@@ -61,17 +58,7 @@ class EffectsView extends React.Component {
               step={1}
               onChange={this.onGlideChange.bind(this)}
               value={this.props.glide} />
-            <ArpeggiatorSwitch
-              arpIsOn={this.props.arpIsOn} />
-            <VerticalSlider
-              className='short'
-              name='arpTempo'
-              label='arp tempo'
-              min={10}
-              max={160}
-              step={1}
-              onChange={this.onArpTempoChange.bind(this)}
-              value={this.props.arpTempo} />
+
           </div>
         </div>
       </div>

src/views/Presets/Presets.js

@@ -29,7 +29,6 @@ class Presets extends React.Component {
   }
 
   render () {
-    console.log("options --->", this.props.presetId, this.state.options);
     return (
       <div className='preset-list-container'>
         <Select

webpack.config.babel.js

@@ -9,7 +9,8 @@ module.exports = function () {
     output: {
       path: resolve('dist'),
       filename: 'bundle.js',
-      publicPath: '/dist/'
+      // change this to './dist/' for production build, '/dist/' for local host.
+      publicPath: './dist/'
     },
 
     // 'eval' Eval will display the babel transpiled code.