Label no longer part of field itself

src/fields/boolean.jsx

@@ -11,9 +11,7 @@ class BooleanField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
+    return <input
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
       type="checkbox"
       style={{
         ...inputStyle.checkbox,
@@ -24,7 +22,6 @@ class BooleanField extends React.Component {
       checked={this.props.value}
     >
     </input>
-    </div>
   }
 }
 

src/fields/color.jsx

@@ -33,7 +33,8 @@ class ColorField extends React.Component {
   render() {
     const picker = <div style={{
         position: 'absolute',
-        left: 287
+        left: 163,
+        top: 0,
       }}>
       <ChromePicker
         color={this.props.value ? Color(this.props.value).object() : null}
@@ -51,9 +52,12 @@ class ColorField extends React.Component {
         }} />
     </div>
 
-    return <div style={{...inputStyle.property, position: 'relative'}}>
+    return <div style={{
+      ...inputStyle.property,
+      position: 'relative',
+      display: 'inline',
+    }}>
       {this.state.pickerOpened && picker}
-      <label style={inputStyle.label}>{this.props.name}</label>
       <input
         onClick={this.togglePicker.bind(this)}
         style={{

src/fields/enum.jsx

@@ -20,9 +20,7 @@ class EnumField extends React.Component {
       return <option key={val} value={val}>{val}</option>
     })
 
-    return <div style={inputStyle.property}>
+    return <select
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <select
       style={{
         ...inputStyle.select,
         ...this.props.style
@@ -32,7 +30,6 @@ class EnumField extends React.Component {
     >
       {options}
     </select>
-    </div>
   }
 }
 

src/fields/number.jsx

@@ -25,9 +25,7 @@ class NumberField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
+    return <input
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
       style={{
         ...inputStyle.input,
         ...this.props.style
@@ -38,7 +36,6 @@ class NumberField extends React.Component {
       value={this.props.value}
       onChange={this.onChange.bind(this)}
     />
-    </div>
   }
 }
 

src/fields/spec.jsx

@@ -36,24 +36,29 @@ class ZoomSpecField extends React.Component {
   }
 
   render() {
+    const label = <label style={inputStyle.label}>
+      {labelFromFieldName(this.props.fieldName)}
+    </label>
+
     if(isZoomField(this.props.value)) {
       const zoomFields = this.props.value.get('stops').map(stop => {
         const zoomLevel = stop.get(0)
         const value = stop.get(1)
 
-        return <div key={zoomLevel}>
+        return <div style={inputStyle.property} key={zoomLevel}>
-          <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
+          {label}
           <SpecField {...this.props}
             value={value}
             style={{
-              width: '20%'
+              width: '33%'
             }}
           />
 
           <input
             style={{
               ...inputStyle.input,
-              width: '10%'
+              width: '10%',
+              marginLeft: theme.scale[0],
             }}
             type="number"
             value={zoomLevel}
@@ -71,7 +76,10 @@ class ZoomSpecField extends React.Component {
         {zoomFields}
       </div>
     } else {
-      return <SpecField {...this.props} />
+      return <div style={inputStyle.property}>
+        {label}
+        <SpecField {...this.props} />
+      </div>
     }
   }
 }
@@ -104,13 +112,12 @@ class SpecField extends React.Component {
   }
 
   render() {
-    const label = labelFromFieldName(this.props.fieldName)
     switch(this.props.fieldSpec.type) {
       case 'number': return (
         <NumberField
           onChange={this.onValueChanged.bind(this, this.props.fieldName)}
           value={this.props.value}
-          name={label}
+          name={this.props.fieldName}
           default={this.props.fieldSpec.default}
           min={this.props.fieldSpec.min}
           max={this.props.fieldSpec.max}
@@ -123,7 +130,7 @@ class SpecField extends React.Component {
         <EnumField
           onChange={this.onValueChanged.bind(this, this.props.fieldName)}
           value={this.props.value}
-          name={label}
+          name={this.props.fieldName}
           allowedValues={Object.keys(this.props.fieldSpec.values)}
           doc={this.props.fieldSpec.doc}
           style={this.props.style}
@@ -133,7 +140,7 @@ class SpecField extends React.Component {
         <StringField
           onChange={this.onValueChanged.bind(this, this.props.fieldName)}
           value={this.props.value}
-          name={label}
+          name={this.props.fieldName}
           doc={this.props.fieldSpec.doc}
           style={this.props.style}
         />
@@ -142,7 +149,7 @@ class SpecField extends React.Component {
         <ColorField
           onChange={this.onValueChanged.bind(this, this.props.fieldName)}
           value={this.props.value}
-          name={label}
+          name={this.props.fieldName}
           doc={this.props.fieldSpec.doc}
           style={this.props.style}
         />
@@ -151,7 +158,7 @@ class SpecField extends React.Component {
         <BooleanField
           onChange={this.onValueChanged.bind(this, this.props.fieldName)}
           value={this.props.value}
-          name={label}
+          name={this.props.fieldName}
           doc={this.props.fieldSpec.doc}
           style={this.props.style}
         />

src/fields/string.jsx

@@ -18,9 +18,7 @@ class StringField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
+    return <input
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
       style={{
         ...inputStyle.input,
         ...this.props.style
@@ -30,7 +28,6 @@ class StringField extends React.Component {
       value={this.props.value ? this.props.value : ""}
       onChange={this.onChange.bind(this)}
     />
-    </div>
   }
 }