From bc4b80c661a37e90c37eb406a229f7684dc193ad Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Sat, 29 Nov 2014 11:43:41 +0100
Subject: [PATCH] 56 Clean up input form for feature toggles

---
 public/js/components/feature/Feature.jsx      | 16 +++-
 public/js/components/feature/FeatureForm.jsx  | 87 ++++++++++---------
 public/js/components/form/TextInput.jsx       |  1 +
 .../js/components/strategy/StrategyForm.jsx   |  2 +-
 4 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/public/js/components/feature/Feature.jsx b/public/js/components/feature/Feature.jsx
index 939b2885b2..580d6351d8 100644
--- a/public/js/components/feature/Feature.jsx
+++ b/public/js/components/feature/Feature.jsx
@@ -68,9 +68,19 @@ var Feature = React.createClass({
                         {this.props.feature.strategy}
                     </td>
 
-                    <td>
-                        <input className="mrs mbs" type='button' value='Edit' onClick={this.toggleEditMode}/>
-                        <input type='button' value='History' onClick={this.toggleHistory} />
+                    <td width="100">
+                        <div className="line">
+                            <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()}
diff --git a/public/js/components/feature/FeatureForm.jsx b/public/js/components/feature/FeatureForm.jsx
index 243a49a62e..472d5831a5 100644
--- a/public/js/components/feature/FeatureForm.jsx
+++ b/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="line mal ptl pbl">
+            <div className="bg-lilac-xlt r-pam">
+                <form ref="form" className="r-size1of2">
 
-              <div className="unit prl r-size1of6">
-                <input ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
-              </div>
+                    <fieldset>
+                        <legend>{title}</legend>
 
-              <div className="unit r-size2of5">
-                <input
-                   type="text"
-                   className="mbs"
-                   id="name"
-                   ref="name"
-                   disabled={feature.name.length}
-                   defaultValue={feature.name}
-                   placeholder="Enter name" />
+                        <TextInput
+                            id="name"
+                            name="name"
+                            label="Name"
+                            value={feature.name}
+                            disabled={feature.name.length}
+                            ref="name"
+                            placeholder="Toggle name" />
 
-                <input className=""
-                   type="text"
-                   ref="description"
-                   defaultValue={feature.description}
-                   placeholder="Enter description" />
-              </div>
+                        <TextInput
+                            id="description"
+                            name="description"
+                            label="Description"
+                            value={feature.description}
+                            ref="description"
+                            placeholder="Enter description" />
 
-              <div className="unit r-size2of6 plm">
-                <select id="strategy"
-                        ref="strategy"
-                        className=""
-                        defaultValue={feature.strategy}>
-                  {this.renderStrategyOptions()}
-                </select>
-              </div>
+                        <div className="formelement">
+                            <label htmlFor="strategy">Strategy</label>
+                            <div class="input select">
+                                <select id="strategy" ref="strategy" defaultValue={feature.strategy}>
+                                    {this.renderStrategyOptions()}
+                                </select>
+                            </div>
+                        </div>
 
-              <div className="unit r-size1of6 rightify">
-                <button className="primary mrs" onClick={this.saveFeature}>
-                    Save
-                </button>
+                        <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>
 
-                <button className="" onClick={this.cancelFeature}>
-                  Cancel
-                </button>
-              </div>
+                    <div className="actions">
+                        <button className="primary mrs" onClick={this.saveFeature}>Save</button>
+                        <button className="" onClick={this.cancelFeature}>Cancel</button>
+                    </div>
+                </form>
             </div>
-          </form>
         );
     },
 
@@ -86,8 +95,8 @@ var FeatureForm = React.createClass({
         e.preventDefault();
 
         var feature = {
-            name: this.refs.name.getDOMNode().value,
-            description: this.refs.description.getDOMNode().value,
+            name: this.refs.name.getValue(),
+            description: this.refs.description.getValue(),
             strategy: this.refs.strategy.getDOMNode().value,
             enabled: this.refs.enabled.getDOMNode().checked
         };
diff --git a/public/js/components/form/TextInput.jsx b/public/js/components/form/TextInput.jsx
index 49af299b30..687774510f 100644
--- a/public/js/components/form/TextInput.jsx
+++ b/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>
diff --git a/public/js/components/strategy/StrategyForm.jsx b/public/js/components/strategy/StrategyForm.jsx
index 55380f59fa..dd65827c04 100644
--- a/public/js/components/strategy/StrategyForm.jsx
+++ b/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>