3 files changed, 82 insertions, 19 deletions
diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css
index d9f9946..486e5fa 100644
--- a/frontend/app/common/app.css
+++ b/frontend/app/common/app.css
@@ -116,6 +116,20 @@ header > div > button:hover {
   border-color: #fff;
   color: #fff;
 }
+
+header .building {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: 1rem;
+  color: #888;
+}
+header .building .loader {
+  transform: scale(0.75);
+  margin-right: 0.5rem;
+}
+
 header .vcat-btn {
   font-size: 0.875rem;
   padding-left: 0.5rem;
@@ -147,6 +161,16 @@ header a:active {
 header a.navbar-brand {
   font-size: .8rem;
 }
+header .arrow {
+  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+  margin-left: -0.5rem;
+  margin-right: 0.25rem;
+  transition: background 0.2s;
+  border-radius: 4px;
+}
+header .arrow:hover {
+  background: rgba(0,0,255,0.5);
+}
 
 header .username {
   cursor: pointer;
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index cf3e466..de1020a 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -23,21 +23,60 @@ export const LabelDescription = props => (
   </label>
 )
 
-export const NumberInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
-    <input
-      type="number"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      min={props.min}
-      max={props.max}
-      step={props.step || 1}
-    />
-  </label>
-)
+export class NumberInput extends Component {
+  constructor(props) {
+    super(props)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+  }
+  handleKeyDown(e) {
+    const { min, max, step, data, name, onChange } = this.props
+    const value = data[name]
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 38: // up
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.min(max, parseFloat(value) + ((step || 1) * 10))
+            }
+          })
+        }
+        break
+      case 40: // down
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.max(min, parseFloat(value) - ((step || 1) * 10))
+            }
+          })
+        }
+        break
+    }
+  }
+  render() {
+    const { props } = this
+    return (
+      <label className={props.error ? 'error' : 'text'}>
+        <span>{props.title}</span>
+        <input
+          type="number"
+          required={props.required}
+          onKeyDown={this.handleKeyDown}
+          onChange={props.onChange}
+          name={props.name}
+          value={props.data[props.name]}
+          min={props.min}
+          max={props.max}
+          step={props.step || 1}
+        />
+      </label>
+    )
+  }
+}
 
 export const ColorInput = props => (
   <label className={props.error ? 'error color' : 'text color'}>
@@ -71,12 +110,12 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label className="checkbox">
+  <label className={props.className ? props.className + " checkbox" : "checkbox"}>
     <input
       type="checkbox"
       name={props.name}
       value={1}
-      checked={props.checked}
+      checked={!!props.checked}
       onChange={(e) => props.onChange(props.name, e.target.checked)}
     />
     <span>{props.label}</span>
diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js
index 9d96b1e..d19ab9b 100644
--- a/frontend/app/common/slider.component.js
+++ b/frontend/app/common/slider.component.js
@@ -53,7 +53,7 @@ export default class Slider extends Component {
     }
   }
   handleKeyDown(e) {
-    console.log(e.keyCode)
+    // console.log(e.keyCode)
   }
   handleRange(e){
     let { value: new_value } = e.target
@@ -90,7 +90,7 @@ export default class Slider extends Component {
       step = 1
       value = this.props.options.indexOf(value)
     } else {
-      step = (this.props.max - this.props.min) / 100
+      step = this.props.step || (this.props.max - this.props.min) / 100
       text_value = parseFloat(value).toFixed(2)
     }
     return (