Label no longer part of field itself

src/fields/boolean.jsx

@@ -11,20 +11,17 @@ class BooleanField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
-        type="checkbox"
-        style={{
-          ...inputStyle.checkbox,
-          ...this.props.style
-        }}
-        value={this.props.value}
-        onChange={e => {this.props.onChange(!this.props.value)}}
-        checked={this.props.value}
-      >
-      </input>
-    </div>
+    return <input
+      type="checkbox"
+      style={{
+        ...inputStyle.checkbox,
+        ...this.props.style
+      }}
+      value={this.props.value}
+      onChange={e => {this.props.onChange(!this.props.value)}}
+      checked={this.props.value}
+    >
+    </input>
   }
 }
 

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,19 +20,16 @@ class EnumField extends React.Component {
       return <option key={val} value={val}>{val}</option>
     })
 
-    return <div style={inputStyle.property}>
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <select
-        style={{
-          ...inputStyle.select,
-          ...this.props.style
-        }}
-        value={this.props.value}
-        onChange={this.onChange.bind(this)}
-      >
-        {options}
-      </select>
-    </div>
+    return <select
+      style={{
+        ...inputStyle.select,
+        ...this.props.style
+      }}
+      value={this.props.value}
+      onChange={this.onChange.bind(this)}
+    >
+      {options}
+    </select>
   }
 }
 

src/fields/number.jsx

@@ -25,20 +25,17 @@ class NumberField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
-        style={{
-          ...inputStyle.input,
-          ...this.props.style
-        }}
-        type="number"
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value}
-        onChange={this.onChange.bind(this)}
-      />
-    </div>
+    return <input
+      style={{
+        ...inputStyle.input,
+        ...this.props.style
+      }}
+      type="number"
+      name={this.props.name}
+      placeholder={this.props.default}
+      value={this.props.value}
+      onChange={this.onChange.bind(this)}
+    />
   }
 }
 

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}>
-          <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
+        return <div style={inputStyle.property} key={zoomLevel}>
+          {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,19 +18,16 @@ class StringField extends React.Component {
   }
 
   render() {
-    return <div style={inputStyle.property}>
-      <label style={inputStyle.label}>{this.props.name}</label>
-      <input
-        style={{
-          ...inputStyle.input,
-          ...this.props.style
-        }}
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value ? this.props.value : ""}
-        onChange={this.onChange.bind(this)}
-      />
-    </div>
+    return <input
+      style={{
+        ...inputStyle.input,
+        ...this.props.style
+      }}
+      name={this.props.name}
+      placeholder={this.props.default}
+      value={this.props.value ? this.props.value : ""}
+      onChange={this.onChange.bind(this)}
+    />
   }
 }