Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

56 Clean up input form for feature toggles

Browse Source
This commit is contained in:
ivaosthu 2014-11-29 11:43:41 +01:00 committed by Ivar Conradi Østhus
parent 63b3c56cc5
commit bc4b80c661
4 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/js/components/feature/Feature.jsx
View File

@ -68,9 +68,19 @@ var Feature = React.createClass({
{this.props.feature.strategy} {this.props.feature.strategy}
</td> </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> </td>
</tr> </tr>
{this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()} {this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}

87
public/js/components/feature/FeatureForm.jsx
View File

@ -1,4 +1,5 @@
var React = require('react'); var React = require('react');
var TextInput = require('../form/TextInput');
var strategyStore = require('../../stores/StrategyStore'); var strategyStore = require('../../stores/StrategyStore');
var FeatureForm = React.createClass({ var FeatureForm = React.createClass({
@ -22,51 +23,59 @@ var FeatureForm = React.createClass({
enabled: false enabled: false
}; };
var title = this.props.feature ? "Edit '" + this.props.feature.name + "'" : "Create new toggle";
return ( 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 id="name"
type="text" name="name"
className="mbs" label="Name"
id="name" value={feature.name}
ref="name" disabled={feature.name.length}
disabled={feature.name.length} ref="name"
defaultValue={feature.name} placeholder="Toggle name" />
placeholder="Enter name" />
<input className="" <TextInput
type="text" id="description"
ref="description" name="description"
defaultValue={feature.description} label="Description"
placeholder="Enter description" /> value={feature.description}
</div> ref="description"
placeholder="Enter description" />
<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()}
{this.renderStrategyOptions()} </select>
</select> </div>
</div> </div>
<div className="unit r-size1of6 rightify"> <div className="formelement">
<button className="primary mrs" onClick={this.saveFeature}> <div className="input">
Save <ul className="inputs-list">
</button> <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}> <div className="actions">
Cancel <button className="primary mrs" onClick={this.saveFeature}>Save</button>
</button> <button className="" onClick={this.cancelFeature}>Cancel</button>
</div> </div>
</form>
</div> </div>
</form>
); );
}, },
@ -86,8 +95,8 @@ var FeatureForm = React.createClass({
e.preventDefault(); e.preventDefault();
var feature = { 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, strategy: this.refs.strategy.getDOMNode().value,
enabled: this.refs.enabled.getDOMNode().checked enabled: this.refs.enabled.getDOMNode().checked
}; };

1
public/js/components/form/TextInput.jsx
View File

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

2
public/js/components/strategy/StrategyForm.jsx
View File

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