1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00

admin - convert feature list into table

This commit is contained in:
Gard Rimestad 2014-11-13 10:46:45 +01:00
parent 3768e544b0
commit 8b03422d5c
2 changed files with 38 additions and 17 deletions

View File

@ -22,36 +22,41 @@ var Feature = React.createClass({
}, },
render: function() { render: function() {
return (<div className='line mal'> return this.state.editMode ? this.renderEditMode() : this.renderViewMode();
{this.state.editMode ? this.renderEditMode() : this.renderViewMode()}
</div>);
}, },
renderEditMode: function() { renderEditMode: function() {
return (<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />); return (
<tr>
<td colSpan="4">
<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />
</td>
</tr>
);
}, },
renderViewMode: function() { renderViewMode: function() {
var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough'; var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough';
return ( return (
<div> <tr>
<div className={'unit r-size1of5 ' + strikeThrough}> <td className={strikeThrough}>
{this.props.feature.name} {this.props.feature.name}
</div> </td>
<div className='unit r-size2of5 opaque smalltext truncate'> <td className='opaque smalltext truncate'>
{this.props.feature.description || '\u00a0'} {this.props.feature.description || '\u00a0'}
</div> </td>
<div className='unit r-size1of5'> <td>
{this.props.feature.strategy} {this.props.feature.strategy}
</div> </td>
<div className='unit r-size1of5'> <td>
<input type='button' value='Edit' onClick={this.toggleEditMode}/> <input type='button' value='Edit' onClick={this.toggleEditMode}/>
</div> </td>
</div> </tr>
); );
} }
}); });

View File

@ -12,7 +12,23 @@ var FeatureList = React.createClass({
); );
}.bind(this)); }.bind(this));
return <div>{featureNodes}</div>; return (
<div className='r-margin'>
<table className='outerborder'>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Strategy</th>
<th></th>
</tr>
</thead>
<tbody>
{featureNodes}
</tbody>
</table>
</div>
);
} }
}); });