1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

Improve form.

This commit is contained in:
Jari Bakken 2014-10-24 13:31:42 +02:00 committed by Ivar Conradi Østhus
parent 1770de0614
commit 835a85db56
2 changed files with 27 additions and 28 deletions

View File

@ -1,3 +1,7 @@
.new-feature-form { .new-feature-form {
padding: 20px; padding: 20px 0;
}
body {
font-family: HelveticaNeueLight, HelveticaNeue-Light, 'Helvetica Neue Light', HelveticaNeue, 'Helvetica Neue', Arial, Helvetica, sans-serif;
} }

View File

@ -23,46 +23,42 @@ var Menu = React.createClass({
var UnsavedFeature = React.createClass({ var UnsavedFeature = React.createClass({
render: function() { render: function() {
return ( return (
<div className="bg-info new-feature-form"> <div className="bg-info new-feature-form row">
<form className="form-inline" role="form" ref="form"> <form className="form-inline" role="form" ref="form">
<div className="form-group"> <div className="checkbox col-md-1 text-right">
<label className="sr-only" htmlFor="name">Name</label> <input ref="enabled" type="checkbox" defaultValue={this.props.feature.enabled} />
</div>
<div className="form-group col-md-4">
<input <input
type="text" type="text"
className="form-control input-large" className="form-control"
id="name" id="name"
ref="name" ref="name"
defaultValue={this.props.feature.name} defaultValue={this.props.feature.name}
placeholder="Enter name" /> placeholder="Enter name" />
</div>
<div className="form-group">
<div className="input-group">
<input className="form-control" <input className="form-control"
type="text" type="text"
ref="description" ref="description"
placeholder="Enter description" /> placeholder="Enter description" />
</div> </div>
</div>
<div className="form-group"> <div className="form-group col-md-1 col-md-offset-5">
<label className="sr-only" htmlFor="strategy">Strategy</label> <select id="strategy"
<select id="strategy" ref="strategy" ref="strategy"
className="input-large" defaultValue={this.props.feature.strategy}> className=""
defaultValue={this.props.feature.strategy}>
<option value="default">default</option> <option value="default">default</option>
</select> </select>
</div> </div>
<div className="checkbox"> <div className="form-group col-md-1">
<label> <button type="submit" className="btn btn-primary btn-xs" onClick={this.saveFeature}>
Enabled
<input ref="enabled" type="checkbox" defaultValue={this.props.feature.enabled} />
</label>
</div>
<button type="submit" className="btn btn-primary pull-right" onClick={this.saveFeature}>
Save Save
</button> </button>
</div>
</form> </form>
</div> </div>
); );
@ -92,17 +88,16 @@ var SavedFeature = React.createClass({
render: function() { render: function() {
return ( return (
<div className='row'> <div className='row'>
<div className='col-xs-1 col-sm-1 col-md-1 col-lg-1'> <div className='col-md-1 text-right'>
<input <input
type='checkbox' type='checkbox'
className='pull-right'
checked={this.props.feature.enabled} checked={this.props.feature.enabled}
onChange={this.onChange} /> onChange={this.onChange} />
</div> </div>
<div <div
className='col-xs-4 col-sm-4 col-md-4 col-lg-4' className='col-md-4'
title='{this.props.feature.description}'>{this.props.feature.name}</div> title='{this.props.feature.description}'>{this.props.feature.name}</div>
<div className='pull-right col-xs-2 col-sm-2 col-md-2 col-lg-2'> <div className='col-md-2 col-md-offset-5'>
{this.props.feature.strategy} {this.props.feature.strategy}
</div> </div>
</div> </div>
@ -134,13 +129,13 @@ var FeatureList = React.createClass({
}.bind(this)); }.bind(this));
return ( return (
<div className="container-fluid"> <div className="container">
<div className='panel panel-primary'> <div className='panel panel-primary'>
<div className='panel-heading'> <div className='panel-heading'>
<h3 className='panel-title'>Features</h3> <h3 className='panel-title'>Features</h3>
<div className='text-right'> <div className='text-right'>
<button type="button" <button type="button"
className="btn btn-success btn-sm" className="btn btn-default btn-sm"
onClick={this.props.onNewFeature}> onClick={this.props.onNewFeature}>
<span className="glyphicon glyphicon-plus"></span> New <span className="glyphicon glyphicon-plus"></span> New
</button> </button>