From 840778b64fb1014afde544f96f5a217ce63429f2 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Wed, 11 Jan 2017 14:03:48 +0100
Subject: [PATCH] Remove JS input config

---
 src/components/fields/ColorField.jsx        |  2 -
 src/components/fields/DocLabel.jsx          | 46 +++-------------
 src/components/fields/SpecField.jsx         |  2 -
 src/components/fields/ZoomSpecField.jsx     |  2 -
 src/components/inputs/ArrayInput.jsx        |  1 -
 src/components/inputs/AutocompleteInput.jsx | 31 ++++-------
 src/components/inputs/CheckboxInput.jsx     |  1 -
 src/components/inputs/FontInput.jsx         | 11 +---
 src/components/inputs/IconInput.jsx         |  2 -
 src/components/inputs/InputBlock.jsx        |  1 -
 src/components/inputs/MultiButtonInput.jsx  | 19 +------
 src/components/inputs/NumberInput.jsx       |  1 -
 src/components/inputs/SelectInput.jsx       |  1 -
 src/components/inputs/StringInput.jsx       |  1 -
 src/config/input.js                         | 51 -----------------
 src/styles/_components.scss                 | 61 +++++++++++++--------
 src/styles/_input.scss                      | 39 +++++++++++++
 src/styles/_toolbar.scss                    |  9 +++
 18 files changed, 108 insertions(+), 173 deletions(-)
 delete mode 100644 src/config/input.js

diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index a064e38..aaecb16 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -2,8 +2,6 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 
-import input from '../../config/input.js'
-
 function formatColor(color) {
   const rgb = color.rgb
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index 6f7c872..d13efb6 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -1,7 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins, fontSizes } from '../../config/scales.js'
 
 export default class DocLabel extends React.Component {
   static propTypes = {
@@ -10,45 +7,16 @@ export default class DocLabel extends React.Component {
       React.PropTypes.string
     ]).isRequired,
     doc: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object,
-    cursorTargetStyle: React.PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { showDoc: false }
   }
 
   render() {
-    return <label
-      style={{
-        ...this.props.style
-      }}
-      className="maputnik-doc-wrapper"
-    >
-      <span
-        onMouseOver={e => this.setState({showDoc: true})}
-        onMouseOut={e => this.setState({showDoc: false})}
-        className="maputnik-doc-target"
-        style={this.props.cursorTargetStyle}
-      >
-        {this.props.label}
-      </span>
-      <div style={{
-        backgroundColor: colors.gray,
-        padding: margins[1],
-        fontSize: 10,
-        position: 'absolute',
-        top: 20,
-        left: 0,
-        width: 120,
-        display: this.state.showDoc ? null : 'none',
-        zIndex: 3,
-      }}
-        className="maputnik-doc-popup"
-      >
-        {this.props.doc}
-      </div>
+    return <label className="maputnik-doc-wrapper">
+      <div className="maputnik-doc-target">
+        <span>{this.props.label}</span>
+        <div className="maputnik-doc-popup">
+          {this.props.doc}
+        </div>
+      </div >
     </label>
   }
 }
diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx
index f51d43f..813f65e 100644
--- a/src/components/fields/SpecField.jsx
+++ b/src/components/fields/SpecField.jsx
@@ -14,8 +14,6 @@ import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
-import input from '../../config/input.js'
-
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
   if(label.length > 0) {
diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index 32a329e..f1a862c 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -12,8 +12,6 @@ import DeleteIcon from 'react-icons/lib/md/delete'
 import FunctionIcon from 'react-icons/lib/md/functions'
 
 import capitalize from 'lodash.capitalize'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
 
 function isZoomField(value) {
   return typeof value === 'object' && value.stops
diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx
index c7c313b..b56588c 100644
--- a/src/components/inputs/ArrayInput.jsx
+++ b/src/components/inputs/ArrayInput.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 
diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index d269c7d..6c03a30 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -1,8 +1,7 @@
 import React from 'react'
+import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+
 
 class AutocompleteInput extends React.Component {
   static propTypes = {
@@ -17,20 +16,15 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
+
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={props.items} />
+
     return <Autocomplete
       wrapperProps={{
         className: "maputnik-autocomplete",
         style: null
       }}
-      menuStyle={{
-        border: 'none',
-        padding: '2px 0',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%',
-        background: colors.gray,
-        zIndex: 3,
-      }}
+      renderMenu={AutocompleteMenu}
       inputProps={{
         className: "maputnik-string"
       }}
@@ -42,15 +36,10 @@ class AutocompleteInput extends React.Component {
       renderItem={(item, isHighlighted) => (
         <div
           key={item[0]}
-          style={{
-            userSelect: 'none',
-            color: colors.lowgray,
-            cursor: 'default',
-            background: isHighlighted ? colors.midgray : colors.gray,
-            padding: margins[0],
-            fontSize: fontSizes[5],
-            zIndex: 3,
-          }}
+          className={classnames({
+            "maputnik-autocomplete-menu-item": true,
+            "maputnik-autocomplete-menu-item-selected": isHighlighted,
+          })}
         >
          {item[1]}
         </div>
diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx
index 037dc76..e5d661a 100644
--- a/src/components/inputs/CheckboxInput.jsx
+++ b/src/components/inputs/CheckboxInput.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class CheckboxInput extends React.Component {
   static propTypes = {
diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx
index 2f8c311..878aee7 100644
--- a/src/components/inputs/FontInput.jsx
+++ b/src/components/inputs/FontInput.jsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 //TODO: Query available font stack dynamically
 import fontStacks from '../../config/fontstacks.json'
@@ -35,17 +33,10 @@ class FontInput extends React.Component {
         value={value}
         options={this.props.fonts.map(f => [f, f])}
         onChange={this.changeFont.bind(this, i)}
-        wrapperStyle={{
-          display: 'block',
-          marginBottom: i == this.values.length - 1 ? 0 : margins[2],
-        }}
       />
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style
-    }}>
+    return <div className="maputnik-font">
       {inputs}
     </div>
   }
diff --git a/src/components/inputs/IconInput.jsx b/src/components/inputs/IconInput.jsx
index bc8fd9b..9f6bc33 100644
--- a/src/components/inputs/IconInput.jsx
+++ b/src/components/inputs/IconInput.jsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 
 class IconInput extends React.Component {
diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx
index 30663a9..b537a52 100644
--- a/src/components/inputs/InputBlock.jsx
+++ b/src/components/inputs/InputBlock.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import classnames from 'classnames'
-import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */
diff --git a/src/components/inputs/MultiButtonInput.jsx b/src/components/inputs/MultiButtonInput.jsx
index 90a59e2..20265be 100644
--- a/src/components/inputs/MultiButtonInput.jsx
+++ b/src/components/inputs/MultiButtonInput.jsx
@@ -1,16 +1,11 @@
-
 import React from 'react'
+import classnames from 'classnames'
 import Button from '../Button'
 
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-import input from '../../config/input.js'
-
 class MultiButtonInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string.isRequired,
     options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,
   }
 
@@ -25,21 +20,13 @@ class MultiButtonInput extends React.Component {
       return <Button
         key={val}
         onClick={e => this.props.onChange(val)}
-        style={{
-          marginRight: margins[0],
-          backgroundColor: val === selectedValue ? colors.midgray : colors.gray,
-        }}
+        className={classnames({"maputnik-button-selected": val === selectedValue})}
       >
         {label}
       </Button>
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style,
-    }}
-      className="maputnik-multibutton"
-    >
+    return <div className="maputnik-multibutton">
       {buttons}
     </div>
   }
diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 8393811..9ae6dd4 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class NumberInput extends React.Component {
   static propTypes = {
diff --git a/src/components/inputs/SelectInput.jsx b/src/components/inputs/SelectInput.jsx
index cf78f6d..13a8b27 100644
--- a/src/components/inputs/SelectInput.jsx
+++ b/src/components/inputs/SelectInput.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class SelectInput extends React.Component {
   static propTypes = {
diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx
index 8d6c744..f9fb56e 100644
--- a/src/components/inputs/StringInput.jsx
+++ b/src/components/inputs/StringInput.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class StringInput extends React.Component {
   static propTypes = {
diff --git a/src/config/input.js b/src/config/input.js
deleted file mode 100644
index 2ec996e..0000000
--- a/src/config/input.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const base = {
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  fontSize: fontSizes[5],
-  lineHeight: 2,
-  paddingLeft: 5,
-  paddingRight: 5,
-}
-
-const label = {
-  ...base,
-  padding: null,
-  color: colors.lowgray,
-  userSelect: 'none',
-}
-
-const property = {
-  display: 'block',
-  margin: margins[2],
-}
-
-const input = {
-  ...base,
-  border: 'none',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const checkbox = {
-  ...base,
-  border: '1px solid rgb(36, 36, 36)',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const select = {
-  ...input,
-  height: '2.15em',
-}
-
-export default {
-  base,
-  label,
-  select,
-  input,
-  property,
-  checkbox,
-}
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index bcd7e5c..ea63b95 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -1,13 +1,4 @@
-
-.maputnik-icon-text {
-  padding-left: $margin-1;
-}
-
-.maputnik-icon-action {
-  display: inline;
-  margin-left: $margin-1;
-}
-
+// MAP
 .maputnik-map {
   position: fixed !important;
   top: 40px;
@@ -17,21 +8,43 @@
   width: 75%;
 }
 
-.maputnik-doc-target {
-  cursor: help;
+// DOC LABEL
+.maputnik-doc {
+  &-target {
+    cursor: help;
+  }
+
+  &-wrapper{
+    display: inline-block;
+    box-sizing: border-box;
+    font-size: $font-size-6;
+    line-height: 2;
+    color: $color-lowgray;
+    user-select: none;
+    position: relative;
+    vertical-align: top;
+  }
+
+  &-popup {
+    display: none;
+    color: $color-lowgray;
+    background-color: $color-gray;
+    padding: $margin-2;
+    font-size: 10px;
+    position: absolute;
+    top: 20px;
+    left: 0px;
+    width: 120px;
+    z-index: 3;
+  }
 }
 
-.maputnik-doc-wrapper {
-  display: inline-block;
-  box-sizing: border-box;
-  font-size: $font-size-6;
-  line-height: 2;
-  color: $color-lowgray;
-  user-select: none;
-  position: relative;
-  vertical-align: top;
+.maputnik-doc-target:hover .maputnik-doc-popup {
+  display: block;
 }
 
+// BUTTON
+
 .maputnik-button {
   cursor: pointer;
   background-color: $color-midgray;
@@ -59,12 +72,16 @@
   background-color: transparent;
   &:hover {
     background-color: transparent;
+    label, svg {
+      cursor: pointer;
+    }
     svg {
       fill: $color-white;
     }
   }
 }
 
+// INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
 
@@ -82,7 +99,6 @@
   }
 }
 
-
 .maputnik-action-block {
   .maputnik-input-block-label {
     display: inline-block;
@@ -95,6 +111,7 @@
   }
 }
 
+// SPACE HELPER
 .maputnik-space {
 	flex-grow: 1;
 }
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index d34879a..ebe4a3d 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -52,6 +52,16 @@
   height: 24px;
 }
 
+// MULTIBUTTON
+.maputnik-multibutton {
+  @extend .maputnik-input;
+  margin-right: $margin-1;
+}
+
+.maputnik-button-selected {
+  background-color: $color-midgray;
+}
+
 // CHECKBOX
 .maputnik-checkbox {
   position: absolute;
@@ -94,5 +104,34 @@
 
 // AUTOCOMPLETE
 .maputnik-autocomplete {
+  &-menu {
+    border: none;
+    padding: 2px 0;
+    position: fixed;
+    overflow: auto;
+    max-height: 50%;
+    background: $color-gray;
+    z-index: 3,
+  }
+
+  &-menu-item {
+    user-select: none;
+    color: $color-lowgray;
+    cursor: default;
+    padding: $margin-1;
+    font-size: $font-size-6;
+    z-index: 3;
+    background: $color-gray;
+  }
+
+  &-menu-item-selected {
+    background: $color-midgray;
+  }
 }
 
+// FONT
+.maputnik-font {
+  .maputnik-autocomplete:not(:last-child) {
+    margin-bottom: $margin-3;
+  }
+}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 0e2d5c6..870699e 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -45,3 +45,12 @@
 .maputnik-toolbar-action {
   @extend .maputnik-toolbar-link;
 }
+
+.maputnik-icon-text {
+  padding-left: $margin-1;
+}
+
+.maputnik-icon-action {
+  display: inline;
+  margin-left: $margin-1;
+}