Restructure CSS more

src/components/fields/ZoomSpecField.jsx

@@ -5,6 +5,7 @@ import Button from '../Button'
 import SpecField from './SpecField'
 import NumberInput from '../inputs/NumberInput'
 import DocLabel from './DocLabel'
+import InputBlock from '../inputs/InputBlock'
 
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import DeleteIcon from 'react-icons/lib/md/delete'
@@ -85,29 +86,18 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 
   renderZoomProperty() {
-    const label = <div className="maputnik-zoom-spec-property-label">
-      <DocLabel
-        label={labelFromFieldName(this.props.fieldName)}
-        doc={this.props.fieldSpec.doc}
-      />
-    </div>
-
     const zoomFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0]
       const value = stop[1]
+      const deleteStopBtn= <DeleteStopButton onClick={this.deleteStop.bind(this, idx)} />
 
-      return <div key={zoomLevel} className="maputnik-zoom-spec-property-stop-item">
+      return <InputBlock
-        {label}
+        key={zoomLevel}
-        <Button
+        doc={this.props.fieldSpec.doc}
-          className="maputnik-delete-stop"
+        label={labelFromFieldName(this.props.fieldName)}
-          onClick={this.deleteStop.bind(this, idx)}
+        action={deleteStopBtn}
       >
-          <DocLabel
+        <div>
-            label={<DeleteIcon />}
-            doc={"Remove zoom level stop."}
-          />
-
-        </Button>
           <div className="maputnik-zoom-spec-property-stop-edit">
             <NumberInput
               value={zoomLevel}
@@ -125,6 +115,7 @@ export default class ZoomSpecProperty  extends React.Component {
             />
           </div>
         </div>
+      </InputBlock>
     })
 
     return <div className="maputnik-zoom-spec-property">
@@ -139,28 +130,18 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 
   renderProperty() {
-    return <div className="maputnik-zoom-spec-property">
+    let zoomBtn = null
-      <DocLabel
+    if(this.props.fieldSpec['zoom-function']) {
-        label={labelFromFieldName(this.props.fieldName)}
+      zoomBtn = <MakeZoomFunctionButton onClick={this.makeZoomFunction.bind(this)} />
-        doc={this.props.fieldSpec.doc}
-        style={{
-          width: this.props.fieldSpec['zoom-function'] ? '41%' : '50%',
-        }}
-      />
-      {this.props.fieldSpec['zoom-function'] &&
-      <Button
-        className="maputnik-make-zoom-function"
-        onClick={this.makeZoomFunction.bind(this)}
-      >
-        <DocLabel
-          label={<FunctionIcon />}
-          cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-        />
-      </Button>
     }
-      <SpecField {...this.props} style={{ width: '50%' } }/>
+
-    </div>
+    return <InputBlock
+      doc={this.props.fieldSpec.doc}
+      label={labelFromFieldName(this.props.fieldName)}
+      action={zoomBtn}
+    >
+      <SpecField {...this.props} />
+    </InputBlock>
   }
 
   render() {
@@ -172,6 +153,31 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 }
 
+function MakeZoomFunctionButton(props) {
+  return <Button
+    className="maputnik-make-zoom-function"
+    onClick={props.onClick}
+  >
+    <DocLabel
+      label={<FunctionIcon />}
+      cursorTargetStyle={{ cursor: 'pointer' }}
+      doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
+    />
+  </Button>
+}
+
+function DeleteStopButton(props) {
+  return <Button
+    className="maputnik-delete-stop"
+    onClick={props.onClick}
+  >
+    <DocLabel
+      label={<DeleteIcon />}
+      doc={"Remove zoom level stop."}
+    />
+  </Button>
+}
+
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
   return capitalize(label)

src/components/inputs/ArrayInput.jsx

@@ -11,7 +11,6 @@ class ArrayInput extends React.Component {
     type: React.PropTypes.string,
     length: React.PropTypes.number,
     default: React.PropTypes.array,
-    style: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -27,31 +26,23 @@ class ArrayInput extends React.Component {
   }
 
   render() {
-    const commonStyle = {
-      width: '48%',
-      marginRight: '2%',
-      marginBottom: '2%'
-    }
     const inputs = this.values.map((v, i) => {
       if(this.props.type === 'number') {
         return <NumberInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       } else {
         return <StringInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       }
     })
 
-    return <div className="maputnik-array"
+    return <div className="maputnik-array">
-      style={{display: 'inline-block', width: '50%'}}>
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -8,8 +8,6 @@ class AutocompleteInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string,
     options: React.PropTypes.array,
-    wrapperStyle: React.PropTypes.object,
-    inputStyle: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -20,7 +18,10 @@ class AutocompleteInput extends React.Component {
 
   render() {
     return <Autocomplete
-      className="maputnik-autocomplete"
+      wrapperProps={{
+        className: "maputnik-autocomplete",
+        style: null
+      }}
       menuStyle={{
         border: 'none',
         padding: '2px 0',
@@ -30,16 +31,8 @@ class AutocompleteInput extends React.Component {
         background: colors.gray,
         zIndex: 3,
       }}
-      wrapperStyle={{
-        display: 'inline-block',
-        ...this.props.wrapperStyle
-      }}
       inputProps={{
-        style: {
+        className: "maputnik-string"
-          ...input.input,
-          width: '100%',
-          ...this.props.inputStyle,
-        }
       }}
       value={this.props.value}
       items={this.props.options}

src/components/inputs/IconInput.jsx

@@ -6,7 +6,7 @@ import { margins } from '../../config/scales.js'
 
 class IconInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array.isRequired,
+    value: React.PropTypes.array,
     icons: React.PropTypes.array,
     style: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,

src/components/inputs/InputBlock.jsx

@@ -1,12 +1,17 @@
 import React from 'react'
+import classnames from 'classnames'
 import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
+    label: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]).isRequired,
     doc: React.PropTypes.string,
+    action: React.PropTypes.element,
     children: React.PropTypes.element.isRequired,
     style: React.PropTypes.object,
   }
@@ -16,36 +21,34 @@ class InputBlock extends React.Component {
     return this.props.onChange(value === "" ? null: value)
   }
 
-  renderChildren() {
-    return React.Children.map(this.props.children, child => {
-      return React.cloneElement(child, {
-        style: {
-          ...child.props.style,
-          width: '50%',
-        }
-      })
-    })
-  }
-
   render() {
     return <div style={this.props.style}
-      className="maputnik-input-block"
+      className={classnames({
+        "maputnik-input-block": true,
+        "maputnik-action-block": this.props.action
+      })}
       >
       {this.props.doc &&
+      <div className="maputnik-input-block-label">
         <DocLabel
           label={this.props.label}
           doc={this.props.doc}
-        style={{
-          width: '50%',
-        }}
         />
+      </div>
       }
       {!this.props.doc &&
       <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
       }
-      {this.renderChildren()}
+      {this.props.action &&
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      }
+      <div className="maputnik-input-block-content">
+        {this.props.children}
+      </div>
     </div>
   }
 }

src/components/inputs/NumberInput.jsx

@@ -4,7 +4,6 @@ import input from '../../config/input.js'
 class NumberInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.number,
-    style: React.PropTypes.object,
     default: React.PropTypes.number,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
@@ -69,7 +68,6 @@ class NumberInput extends React.Component {
   render() {
     return <input
       className="maputnik-number"
-      style={this.props.style}
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}

src/components/layers/LayerSourceBlock.jsx

@@ -24,7 +24,6 @@ class LayerSourceBlock extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/components/layers/LayerSourceLayerBlock.jsx

@@ -24,7 +24,6 @@ class LayerSourceLayer extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/styles/_base.scss

@@ -50,13 +50,11 @@ h4 {
   margin-bottom: $margin-3;
 }
 
-input {
-  height: 24px;
-}
 input:focus, select:focus {
   color: $color-white !important;
   outline: #8e8e8e auto 1px !important;
 }
+
 label:hover {
   color: $color-white;
 }

src/styles/_components.scss

@@ -7,6 +7,7 @@
   display: inline;
   margin-left: $margin-1;
 }
+
 .maputnik-map {
   position: fixed !important;
   top: 40px;
@@ -19,6 +20,7 @@
 .maputnik-doc-target {
   cursor: help;
 }
+
 .maputnik-doc-wrapper {
   display: inline-block;
   box-sizing: border-box;
@@ -28,8 +30,8 @@
   user-select: none;
   position: relative;
   vertical-align: top;
-  width: 50%;
 }
+
 .maputnik-button {
   cursor: pointer;
   background-color: $color-midgray;
@@ -52,16 +54,45 @@
   padding: $margin-3;
   font-size: $font-size-5;
 }
-.maputnik-input-block {
+
-  margin: $margin-3;
+.maputnik-icon-button {
+  background-color: transparent;
+  &:hover {
+    background-color: transparent;
+    svg {
+      fill: $color-white;
+    }
+  }
 }
 
-.maputnik-input-block-label {
+.maputnik-input-block {
+  margin: $margin-3;
+
+  &-label {
     display: inline-block;
-  line-height: 2;
     color: $color-lowgray;
     user-select: none;
     width: 50%;
+    vertical-align: top;
+  }
+
+  &-content {
+    display: inline-block;
+    width: 50%;
+  }
+}
+
+
+.maputnik-action-block {
+  .maputnik-input-block-label {
+    display: inline-block;
+    width: 43%;
+  }
+  .maputnik-input-block-action {
+    vertical-align: top;
+    display: inline-block;
+    width: 7%;
+  }
 }
 
 .maputnik-space {

src/styles/_filtereditor.scss

@@ -0,0 +1,89 @@
+.maputnik-filter-editor-wrapper {
+  padding: $margin-3;
+}
+
+.maputnik-filter-editor-property {
+  display: inline-block;
+  width: '22%';
+}
+
+.maputnik-filter-editor-operator {
+  display: inline-block;
+  width: 19%;
+  margin-left: 2%;
+}
+
+.maputnik-filter-editor-args {
+  display: inline-block;
+  width: 54%;
+  margin-left: 2%;
+}
+
+.maputnik-filter-editor-compound-select {
+  margin-bottom: $margin-2;
+
+  .maputnik-doc-wrapper {
+    width: 50%;
+  }
+
+  .maputnik-select {
+    display: inline-block;
+    width: 50%;
+  }
+}
+
+.maputnik-filter-editor-unsupported {
+  color: $color-midgray;
+}
+
+.maputnik-filter-editor {
+  @extend .clearfix;
+}
+
+.maputnik-add-filter {
+  display: inline-block;
+  float: right;
+  margin-top: $margin-3;
+}
+
+.maputnik-delete-filter {
+  @extend .maputnik-icon-button;
+}
+
+.maputnik-filter-editor-block-action {
+  margin-top: $margin-2;
+  margin-bottom: $margin-2;
+}
+.maputnik-filter-editor-block-action {
+  display: inline-block;
+  width: 6%;
+  margin-right: 1.5%;
+}
+
+.maputnik-filter-editor-block-content {
+  display: inline-block;
+  width: 92.5%;
+}
+
+.maputnik-filter-editor-property {
+  display: inline-block;
+  width: 25%;
+}
+
+.maputnik-filter-editor-operator {
+  display: inline-block;
+  width: 17%;
+  .maputnik-select {
+    width: 100%;
+  }
+}
+
+.maputnik-filter-editor-args {
+  display: inline-block;
+  width: 54%;
+
+  .maputnik-string, .maputnik-number {
+    width: 100%;
+  }
+}
+

src/styles/_input.scss

@@ -1,21 +1,22 @@
-.maputnik-base {
+//INPUT
-  display: inline-block;
+.maputnik-input {
+  height: 24px;
+  width: 100%;
+  display: block;
   box-sizing: border-box;
   font-size: $font-size-6;
   line-height: 2;
   padding-left: $margin-2;
   padding-right: $margin-2;
-}
-.maputnik-input {
-  @extend .maputnik-base;
   border: none;
   background-color: $color-gray;
   color: $color-lowgray;
 }
+
 .maputnik-string {
   @extend .maputnik-input;
-  width: 50%;
 }
+
 .maputnik-number {
   @extend .maputnik-input;
 }
@@ -29,28 +30,47 @@
   position: relative;
   display: inline;
 }
+
 .maputnik-color-picker-offset {
+
 }
 .maputnik-color-picker-overlay {
+
 }
 
-.maputnik-checkbox-wrapper {
+// ARRAY
-  display: inline-block;
+
-  box-sizing: border-box;
+.maputnik-array {
-  padding: 0px;
+  > * {
-  position: relative;
+    margin-bottom: $margin-3;
-  text-align: center;
+  }
-  vertical-align: middle;
-  cursor: pointer;
 }
 
+// SELECT
+.maputnik-select {
+  @extend .maputnik-input;
+  height: 24px;
+}
+
+// CHECKBOX
 .maputnik-checkbox {
   position: absolute;
   z-index: -1;
   opacity: 0;
   width: 50%;
+
+  &-wrapper {
+    @extend .maputnik-input;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    max-width: 24px;
   }
-.maputnik-checkbox-box {
+
+  &-box {
     display: inline-block;
     text-align: center;
     height: 24px;
@@ -63,73 +83,16 @@
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
   }
-.maputnik-checkbox-icon {
+
+  &-icon {
     width: 50%;
     height: 50%;
     margin-top: 1px;
     fill: $color-lowgray;
   }
-
-.maputnik-zoom-spec-property {
-  @extend .clearfix;
-  display: block;
-  margin: $margin-3;
 }
 
-.maputnik-zoom-spec-property-label {
+// AUTOCOMPLETE
-  display: inline-block;
+.maputnik-autocomplete {
-  width: 41%;
 }
 
-.maputnik-zoom-spec-property-stop-item {
-  margin-bottom: $margin-2;
-  margin-top: $margin-2;
-}
-
-.maputnik-zoom-spec-property-stop-edit {
-  display: inline-block;
-  width: 7%;
-  margin-right: 1.5%;
-  > * {
-    width: 100%;
-  }
-}
-
-.maputnik-zoom-spec-property-stop-value {
-  display: inline-block;
-  width: 41.5%;
-  > * {
-    width: 100%;
-  }
-}
-
-.maputnik-delete-stop {
-  background-color: transparent;
-  vertical-align: top;
-
-  .maputnik-doc-wrapper {
-    width: auto;
-  }
-  .maputnik-doc-target {
-    cursor: pointer;
-  }
-
-  &:hover {
-    background-color: transparent;
-    svg {
-      fill: $color-white;
-    }
-  }
-}
-
-.maputnik-add-stop {
-  display: inline-block;
-  float: right;
-  margin-right: $margin-2;
-}
-
-.maputnik-select {
-  @extend .maputnik-input;
-  height: 2.15em;
-  width: 50%;
-}

src/styles/_layer.scss

@@ -1,4 +1,3 @@
-
 // LAYER LIST
 .maputnik-layer-list-container {
   padding: 0;
@@ -69,102 +68,3 @@
     background-color: $color-gray;
   }
 }
-
-.maputnik-filter-editor-wrapper {
-  padding: $margin-3;
-}
-
-.maputnik-filter-editor-property {
-  display: inline-block;
-  width: '22%';
-}
-
-.maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 19%;
-  margin-left: 2%;
-}
-
-.maputnik-filter-editor-args {
-  display: inline-block;
-  width: 54%;
-  margin-left: 2%;
-}
-
-.maputnik-make-zoom-function {
-  background-color: transparent;
- display: inline-block;
-  padding-bottom: 0px;
-  padding-top: 0px;
-
-  &:hover {
-    background-color: transparent;
-    svg {
-      fill: $color-white;
-    }
-  }
-}
-
-.maputnik-filter-editor-compound-select {
-  margin-bottom: $margin-2;
-}
-
-.maputnik-filter-editor-unsupported {
-  color: $color-midgray;
-}
-
-.maputnik-filter-editor {
-  @extend .clearfix;
-}
-
-.maputnik-add-filter {
-  display: inline-block;
-  float: right;
-  margin-top: $margin-2;
-}
-.maputnik-delete-filter {
-  background-color: transparent;
-  &:hover {
-    background-color: transparent;
-    svg {
-      fill: $color-white;
-    }
-  }
-}
-
-.maputnik-filter-editor-block-action {
-  margin-top: $margin-2;
-  margin-bottom: $margin-2;
-}
-.maputnik-filter-editor-block-action {
-  display: inline-block;
-  width: 8%;
-  margin-right: 1.5%;
-}
-
-.maputnik-filter-editor-block-content {
-  display: inline-block;
-  width: 90.5%;
-}
-
-.maputnik-filter-editor-property {
-  display: inline-block;
-  width: 25%;
-}
-
-.maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 17%;
-  .maputnik-select {
-    width: 100%;
-  }
-}
-
-.maputnik-filter-editor-args {
-  display: inline-block;
-  width: 54%;
-
-  .maputnik-string, .maputnik-number {
-    width: 100%;
-  }
-}

src/styles/_popup.scss

@@ -1,5 +1,5 @@
 .maputnik-popup-layer {
-  @extend .maputnik-base ;
+  display: inline-block;
   color: $color-lowgray;
   user-select: none;
   padding-left: 0;

src/styles/_zoomproperty.scss

@@ -0,0 +1,64 @@
+// ZOOM FUNC
+.maputnik-make-zoom-function {
+  background-color: transparent;
+  display: inline-block;
+  padding-bottom: 0px;
+  padding-top: 0px;
+  vertical-align: middle;
+  @extend .maputnik-icon-button;
+}
+
+// ZOOM PROPERTY
+.maputnik-zoom-spec-property {
+  @extend .clearfix;
+}
+
+.maputnik-zoom-spec-property-label {
+  display: inline-block;
+  width: 41%;
+}
+
+.maputnik-zoom-spec-property-stop-item {
+  margin-bottom: $margin-2;
+  margin-top: $margin-2;
+}
+
+.maputnik-zoom-spec-property-stop-edit {
+  display: inline-block;
+  vertical-align: top;
+  width: 16%;
+  margin-right: 3%;
+  > * {
+    width: 100%;
+  }
+}
+
+.maputnik-zoom-spec-property-stop-value {
+  display: inline-block;
+  width: 81%;
+  > * {
+    width: 100%;
+  }
+}
+
+.maputnik-delete-stop {
+  @extend .maputnik-icon-button;
+  vertical-align: top;
+
+  .maputnik-doc-wrapper {
+    width: auto;
+  }
+  .maputnik-doc-target {
+    cursor: pointer;
+  }
+}
+
+.maputnik-add-stop {
+  display: inline-block;
+  float: right;
+  margin-right: $margin-3;
+}
+
+.maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
+  visibility: hidden;
+}

src/styles/index.scss

@@ -29,4 +29,6 @@ $toolbar-height: 40px;
 @import 'layout';
 @import 'layer';
 @import 'input';
+@import 'filtereditor';
+@import 'zoomproperty';
 @import 'popup';