56 Clean up input form for feature toggles

public/js/components/feature/Feature.jsx

@@ -68,9 +68,19 @@ var Feature = React.createClass({
                         {this.props.feature.strategy}
                     </td>
 
-                    <td>
+                    <td width="100">
-                        <input className="mrs mbs" type='button' value='Edit' onClick={this.toggleEditMode}/>
+                        <div className="line">
-                        <input type='button' value='History' onClick={this.toggleHistory} />
+                            <div className="unit size1of2">
+                                <button className="mrs mbs" type='button' title='Edit' onClick={this.toggleEditMode}>
+                                    <span className="icon-redigere" />
+                                </button>
+                            </div>
+                            <div className="unit size1of2">
+                                <button type='button' title='History' onClick={this.toggleHistory}>
+                                    <span className="icon-visning_liste" />
+                                </button>
+                            </div>
+                        </div>
                     </td>
                 </tr>
                 {this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}

public/js/components/feature/FeatureForm.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var TextInput      = require('../form/TextInput');
 var strategyStore = require('../../stores/StrategyStore');
 
 var FeatureForm = React.createClass({
@@ -22,51 +23,59 @@ var FeatureForm = React.createClass({
           enabled: false
         };
 
+        var title = this.props.feature ? "Edit '" + this.props.feature.name + "'" : "Create new toggle";
+
         return (
-          <form ref="form" className="bg-blue-xlt">
+            <div className="bg-lilac-xlt r-pam">
-            <div className="line mal ptl pbl">
+                <form ref="form" className="r-size1of2">
 
-              <div className="unit prl r-size1of6">
+                    <fieldset>
-                <input ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
+                        <legend>{title}</legend>
-              </div>
 
-              <div className="unit r-size2of5">
+                        <TextInput
-                <input
-                   type="text"
-                   className="mbs"
                             id="name"
-                   ref="name"
+                            name="name"
+                            label="Name"
+                            value={feature.name}
                             disabled={feature.name.length}
-                   defaultValue={feature.name}
+                            ref="name"
-                   placeholder="Enter name" />
+                            placeholder="Toggle name" />
 
-                <input className=""
+                        <TextInput
-                   type="text"
+                            id="description"
+                            name="description"
+                            label="Description"
+                            value={feature.description}
                             ref="description"
-                   defaultValue={feature.description}
                             placeholder="Enter description" />
-              </div>
 
-              <div className="unit r-size2of6 plm">
+                        <div className="formelement">
-                <select id="strategy"
+                            <label htmlFor="strategy">Strategy</label>
-                        ref="strategy"
+                            <div class="input select">
-                        className=""
+                                <select id="strategy" ref="strategy" defaultValue={feature.strategy}>
-                        defaultValue={feature.strategy}>
                                     {this.renderStrategyOptions()}
                                 </select>
                             </div>
-
-              <div className="unit r-size1of6 rightify">
-                <button className="primary mrs" onClick={this.saveFeature}>
-                    Save
-                </button>
-
-                <button className="" onClick={this.cancelFeature}>
-                  Cancel
-                </button>
                         </div>
+
+                        <div className="formelement">
+                            <div className="input">
+                                <ul className="inputs-list">
+                                    <li>
+                                        <input id="active" ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
+                                        <label htmlFor="active">Active</label>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </fieldset>
+
+                    <div className="actions">
+                        <button className="primary mrs" onClick={this.saveFeature}>Save</button>
+                        <button className="" onClick={this.cancelFeature}>Cancel</button>
                     </div>
                 </form>
+            </div>
         );
     },
 
@@ -86,8 +95,8 @@ var FeatureForm = React.createClass({
         e.preventDefault();
 
         var feature = {
-            name: this.refs.name.getDOMNode().value,
+            name: this.refs.name.getValue(),
-            description: this.refs.description.getDOMNode().value,
+            description: this.refs.description.getValue(),
             strategy: this.refs.strategy.getDOMNode().value,
             enabled: this.refs.enabled.getDOMNode().checked
         };

public/js/components/form/TextInput.jsx

@@ -35,6 +35,7 @@ var TextInput = React.createClass({
                         name={this.props.name}
                         defaultValue={this.props.value}
                         placeholder={this.props.placeholder}
+                        disabled={this.props.disabled}
                         ref="input" />
                 </div>
             </div>

public/js/components/strategy/StrategyForm.jsx

@@ -58,7 +58,7 @@ var StrategyForm = React.createClass({
 
     render: function() {
         return (
-            <div className="line pam bg-blue-xlt">
+            <div className="line r-pam bg-lilac-xlt">
                 <div className="unit r-size1of2">
                     <form onSubmit={this.onSubmit}>
                         <fieldset>